/* ============================================================
   Toko Token AI — tokotokenai.com
   Design system: the approved homepage (Homepage Builder/DESIGN.md).
   Fonts are self-hosted (SIL OFL 1.1, see /assets/fonts/OFL-*.txt).
   ============================================================ */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter-latin-wght-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url(fonts/jetbrains-mono-latin-wght-normal.woff2) format('woff2')}
:root{
  --bg:#FFFFFF;
  --bg-alt:#F8FAFC;
  --line:#E5E7EB;
  --line-2:#D1D5DB;
  --ink:#0F172A;
  --mut:#64748B;
  --faint:#94A3B8;
  --blue:#2563EB;
  --blue-2:#3B82F6;
  --blue-l:#60A5FA;
  --blue-d:#1D4ED8;
  --blue-x:#EFF6FF;
  --blue-xx:#DBEAFE;
  --aqua-fog:rgb(8 145 178 / .11);
  --amber-fog:rgb(245 158 11 / .08);
  --coral-fog:rgb(2 132 199 / .08);
  /* expanded accent families — cool, blue-adjacent rotation only
     (--teal now = cyan, --coral now = navy, --violet now = deep indigo;
      warm colours survive solely as status semantics: amber = warning, rose = error) */
  --teal:#0891B2;--teal-l:#22D3EE;--teal-x:#ECFEFF;--teal-xx:#CFFAFE;
  --amber:#D97706;--amber-l:#FBBF24;--amber-x:#FFFBEB;--amber-xx:#FEF3C7;
  --coral:#1E3A8A;--coral-l:#2E4FA3;--coral-x:#EFF6FF;--coral-xx:#DBEAFE;
  --rose:#E11D48;--rose-l:#FB7185;--rose-x:#FFF1F2;--rose-xx:#FFE4E6;
  --violet:#4338CA;--violet-l:#6366F1;--violet-x:#EEF2FF;--violet-xx:#E0E7FF;
  --sky:#0284C7;--sky-l:#38BDF8;--sky-x:#F0F9FF;--sky-xx:#E0F2FE;
  --indigo:#4F46E5;--indigo-l:#818CF8;--indigo-x:#EEF2FF;--indigo-xx:#E0E7FF;
  /* liquid glass material — pale blue drifting into white (Kyo, 2026-08-16).
     Outer shells get backdrop blur; inner panels use rgba tints only (no nested blur). */
  --glass:rgb(239 246 255 / .58);
  --glass-hi:rgb(244 250 255 / .72);
  --glass-strong:rgb(239 246 255 / .8);
  --glass-brd:rgb(191 219 254 / .55);
  --glass-sh:0 8px 24px rgb(30 58 138 / .08),inset 0 1px 0 rgb(255 255 255 / .72),inset 0 -1px 0 rgb(30 58 138 / .05);
  --blur:blur(16px) saturate(1.5);
  --rad-xs:4px;
  --rad-s:8px;
  --rad-m:12px;
  --rad-l:16px;
  --rad-pill:999px;
  --fs-2xs:10px;
  --fs-xs:11px;
  --fs-sm:12px;
  --fs-md:13px;
  --fs-base:14px;
  --fs-lg:15px;
  --fs-xl:16px;
  --fs-2xl:18px;
  --fs-3xl:22px;
  --fs-4xl:28px;
  --fs-5xl:36px;
  --fs-h1-md:40px;
  --fs-6xl:56px;
  --lh-tight:1.15;
  --lh-snug:1.35;
  --lh-body:1.55;
  --lh-loose:1.6;
  --track-label:.1em;
  --sec-y:96px;
  --sec-y-sm:64px;
  --stack:48px;
  --sh-card:0 1px 2px rgb(15 23 42 / 5%),0 8px 20px rgb(15 23 42 / 4%);
  --sh-panel:0 8px 28px rgb(15 23 42 / 8%);
  --sh-nav:0 8px 24px rgb(15 23 42 / 8%);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  position:relative;
  font-family:var(--font);
  color:var(--ink);
  background-color:var(--bg-alt);
  background-image:
    radial-gradient(980px 640px at 0% 2%, rgb(14 165 233 / .14), transparent 68%),
    radial-gradient(900px 620px at 100% 14%, var(--amber-fog), transparent 68%),
    radial-gradient(980px 700px at 6% 54%, var(--aqua-fog), transparent 70%),
    radial-gradient(900px 620px at 94% 44%, rgb(67 56 202 / .06), transparent 68%),
    radial-gradient(920px 680px at 100% 78%, var(--coral-fog), transparent 69%);
  background-size:auto,auto,auto,auto,auto; /* dot grid moved to .fog-drift (living-page pass, 2026-08-16) */
  background-position:0 0,100% 0,0 0,100% 0,0 0;
  background-attachment:scroll;
  line-height:var(--lh-loose);
  font-size:var(--fs-xl);
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:400;
  opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}
/* ambient fog drift — the sanctioned static fogs, set in slow motion.
   Fixed, oversized (inset -90px) so translate+scale never exposes an edge;
   sits above the canvas background, below all content (sections stay transparent-backed).
   Carries the relocated dot grid with an imperceptible background-position nudge. */
.fog-drift{
  position:fixed;inset:-90px;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle,rgb(37 99 235 / .065) 1px,transparent 1.2px);
  background-size:24px 24px;
  animation:fogDotDrift 90s linear infinite;
}
.fog-drift::before,.fog-drift::after{content:"";position:absolute;inset:0}
.fog-drift::before{
  background:radial-gradient(720px 520px at 28% 30%, rgb(14 165 233 / .10), transparent 70%);
  animation:fogDriftA 34s ease-in-out infinite alternate;
}
.fog-drift::after{
  background:radial-gradient(680px 500px at 72% 68%, rgb(67 56 202 / .05), transparent 70%);
  animation:fogDriftB 40s ease-in-out infinite alternate;
}
@keyframes fogDriftA{from{transform:translate(0,0) scale(1)}to{transform:translate(56px,-34px) scale(1.08)}}
@keyframes fogDriftB{from{transform:translate(0,0) scale(1.08)}to{transform:translate(-64px,30px) scale(1)}}
@keyframes fogDotDrift{to{background-position:24px 24px}}
/* Wave 2 · pause ambient motion while the tab is hidden (body.tab-hidden via JS) */
body.tab-hidden .fog-drift,
body.tab-hidden .fog-drift::before,
body.tab-hidden .fog-drift::after{animation-play-state:paused}
img,svg{display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
code{font-family:var(--mono);font-size:.9em}
.mono{font-family:var(--mono)}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
section{scroll-margin-top:96px}

/* focus */
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:var(--rad-xs)}
.skip{
  position:fixed;top:-60px;left:16px;z-index:300;background:var(--ink);color:#fff;
  padding:10px 18px;border-radius:var(--rad-s);font-size:var(--fs-base);font-weight:600;transition:top .2s;
}
.skip:focus{top:16px}

/* ============ buttons ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:var(--fs-lg);font-weight:600;border-radius:var(--rad-s);
  padding:12px 24px;border:1px solid transparent;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
}
.btn svg{width:16px;height:16px;flex:none}
.btn-p{
  background:linear-gradient(135deg,var(--blue) 0%,var(--blue-2) 100%);
  color:#fff;box-shadow:0 4px 14px rgb(37 99 235 / .25);
}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgb(37 99 235 / .3)}
.btn-g{
  background:var(--bg);color:var(--ink);border-color:var(--line);
  box-shadow:var(--sh-card);
}
.btn-g:hover{transform:translateY(-2px);border-color:var(--blue-l);box-shadow:var(--sh-panel)}
.btn-s{padding:8px 16px;font-size:var(--fs-base);border-radius:var(--rad-s)}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:hover{transform:none}}
/* Wave 3 · magnetic micro-pull — primary actions only, fine pointers only.
   One var-driven transform owns the property (JS sets --mx/--my on pointermove);
   the legacy −2px lift is folded into the calc, so no second transform owner. */
@media (hover:hover) and (pointer:fine){
  .btn-p:hover{transform:translate(var(--mx,0px),calc(var(--my,0px) - 2px))}
  .nav-cta:hover{transform:translate(var(--mx,0px),var(--my,0px))}
}

/* ============ liquid glass navbar ============ */
.nav{
  position:fixed;top:16px;left:50%;transform:translateX(-50%);
  width:min(1160px,calc(100% - 32px));z-index:200;
  display:flex;align-items:center;gap:8px;
  background:var(--glass-strong);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-brd);border-radius:var(--rad-pill);
  box-shadow:var(--glass-sh);
  padding:5px 5px 5px 16px;
  min-height:56px;
}
.nav-brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:var(--fs-base);letter-spacing:.02em;color:var(--ink);white-space:nowrap;flex:none;transition:opacity .15s ease}
.nav-brand:hover{opacity:.75}
.nav-brand svg{width:22px;height:22px;flex:none}
.nav-end{display:flex;align-items:center;gap:4px;margin-left:auto;height:46px}
.nav-doc,.nav-links a{display:inline-flex;align-items:center;height:46px;font-size:var(--fs-base);font-weight:500;color:var(--mut);padding:0 12px;white-space:nowrap;border-radius:var(--rad-pill)}
.nav-doc:hover,.nav-links a:hover{color:var(--blue)}
/* in-page section links: centred between brand and nav-end; active link gets a 2px marker (state only, no travel) */
.nav-links{display:flex;align-items:center;justify-content:center;gap:2px;flex:1 1 auto;height:46px}
.nav-links a{position:relative}
.nav-links a.is-on{color:var(--ink)}
.nav-links a.is-on::after{content:"";position:absolute;left:12px;right:12px;bottom:8px;height:2px;background:var(--blue);border-radius:2px}
.nav-cta{
  display:inline-flex;align-items:center;justify-content:center;
  height:46px;padding:0 18px;border:0;border-radius:var(--rad-pill);
  background:var(--blue);color:#fff;font-size:var(--fs-base);font-weight:600;
  white-space:nowrap;flex:none;box-shadow:none;
  transition:background .15s ease;
}
.nav-cta:hover{background:var(--blue-d);transform:none;box-shadow:none}
.nav-toggle{
  display:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);
  background:rgba(255,255,255,.9);align-items:center;justify-content:center;color:var(--ink);flex:none;
  transition:border-color .15s ease;
}
.nav-toggle:hover{border-color:var(--blue-l)}
.nav-toggle svg{width:20px;height:20px}
.nav-toggle .x{display:none}
.nav-toggle.open .b{display:none}
.nav-toggle.open .x{display:block}
.nav-sheet{
  display:none;position:fixed;top:74px;left:50%;transform:translateX(-50%);
  width:min(440px,calc(100% - 32px));background:var(--glass-strong);border:1px solid var(--glass-brd);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border-radius:var(--rad-l);box-shadow:var(--glass-sh);padding:10px;z-index:199;flex-direction:column;gap:2px;
}
.nav-sheet.open{display:flex}
.nav-sheet a{padding:12px 14px;border-radius:var(--rad-s);font-size:var(--fs-lg);font-weight:500;color:var(--ink)}
.nav-sheet a:hover{background:var(--blue-x);color:var(--blue)}
.nav-sheet .btn{justify-content:center;margin-top:6px}
@media (max-width:1024px){
  .nav-links{display:none}
}
@media (max-width:640px){
  .nav-doc{display:none}
  .nav-toggle{display:inline-flex}
}

/* ============ round model selector (hero top) ============ */
.msel{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:26px}
.msel-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.msel-btn{
  width:46px;height:46px;border-radius:50%;border:1px solid var(--glass-brd);background:var(--glass-hi);
  display:flex;align-items:center;justify-content:center;color:var(--ink);
  box-shadow:var(--sh-card);transition:border-color .18s,color .18s,box-shadow .18s,transform .18s;
  position:relative;
}
.msel-btn svg{width:22px;height:22px;overflow:visible}
.msel-btn:hover{border-color:var(--blue-l);transform:translateY(-2px)}
.msel-btn[aria-pressed="true"]{
  border-color:var(--blue);
  box-shadow:0 0 0 4px var(--blue-x),var(--sh-card);
}
.msel-out{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:var(--fs-md);color:var(--ink);
  background:var(--glass-hi);border:1px solid var(--glass-brd);border-radius:var(--rad-pill);
  padding:7px 16px;box-shadow:var(--sh-card);
}
.msel-out .lbl{color:var(--mut);font-size:var(--fs-xs);letter-spacing:var(--track-label);text-transform:uppercase;font-weight:700}
.msel-out b{font-weight:700;color:var(--blue)}
.msel-out .disc{
  font-weight:700;color:var(--blue);background:var(--blue-x);
  border-radius:var(--rad-s);padding:2px 8px;font-size:var(--fs-xs);
}
.msel-out .disc.flat{color:var(--mut);background:var(--bg-alt)}
@media (prefers-reduced-motion:reduce){.msel-btn{transition:none}.msel-btn:hover{transform:none}}
@media (max-width:640px){.msel-btn{width:40px;height:40px}.msel-btn svg{width:19px;height:19px}}

/* ============ hero ============ */
.hero{
  position:relative;overflow:hidden;
  background:transparent;
  padding:132px 0 56px;
}
.hero::before{
  content:"";position:absolute;inset:-12% -8% -18%;
  background:
    radial-gradient(760px 460px at 88% 4%, rgb(37 99 235 / .22), transparent 64%),
    radial-gradient(520px 380px at 10% 82%, rgb(14 165 233 / .13), transparent 68%),
    radial-gradient(560px 400px at 80% 78%, rgb(34 211 238 / .12), transparent 70%),
    radial-gradient(500px 380px at 16% 10%, rgb(67 56 202 / .09), transparent 70%),
    radial-gradient(420px 320px at 52% 52%, rgb(245 158 11 / .08), transparent 72%);
  pointer-events:none;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgb(37 99 235 / .04) 1px,transparent 1px),
    linear-gradient(90deg,rgb(37 99 235 / .04) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(900px 560px at 70% 0%,#000 0%,transparent 75%);
  -webkit-mask-image:radial-gradient(900px 560px at 70% 0%,#000 0%,transparent 75%);
  pointer-events:none;
}
.hero-mark{
  position:absolute;right:-4%;top:6%;width:min(380px,38vw);height:auto;
  color:var(--blue);opacity:.1;pointer-events:none;z-index:0;
}
.hero .wrap{position:relative;z-index:1}
.dot{width:8px;height:8px;border-radius:50%;background:var(--blue);flex:none}
.hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--stack);align-items:center}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgb(219 234 254 / .5);color:var(--blue);border:1px solid var(--glass-brd);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  font-size:var(--fs-md);font-weight:600;padding:7px 14px;border-radius:var(--rad-pill);margin-bottom:22px;
}
.hero-badge svg{width:14px;height:14px;flex:none}
.hero h1{
  font-size:var(--fs-6xl);line-height:var(--lh-tight);letter-spacing:-.03em;font-weight:800;color:var(--ink);
  margin-bottom:20px;text-wrap:balance;
}
.hero-sub{font-size:var(--fs-2xl);line-height:var(--lh-loose);color:var(--mut);max-width:520px;margin-bottom:26px}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.hero-note{font-size:var(--fs-md);color:var(--mut);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hero-note svg{width:13px;height:13px;color:var(--blue)}

/* hero dashboard mockup */
.mock{
  background:linear-gradient(180deg,rgb(255 255 255 / .42),rgb(255 255 255 / 0) 34%),var(--glass);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-brd);border-radius:var(--rad-l);
  box-shadow:var(--glass-sh);overflow:hidden;position:relative;
}
.mock-bar{
  display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--glass-brd);background:rgb(239 246 255 / .5);
}
.mock-bar .dots{display:flex;gap:5px}
.mock-bar .dots i{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.mock-bar .dots i:nth-child(2){background:var(--blue-l)}
.mock-bar .dots i:nth-child(3){background:var(--blue)}
.mock-bar .fname{margin-left:8px;font-family:var(--mono);font-size:var(--fs-sm);color:var(--mut)}
.flag{
  margin-left:auto;font-family:var(--mono);font-size:var(--fs-2xs);color:var(--mut);
  background:var(--bg);border:1px solid var(--line);padding:3px 8px;border-radius:var(--rad-s);
}
.mock-body{display:grid;grid-template-columns:44px minmax(0,1fr);min-height:380px}
.mock-side{border-right:1px solid var(--glass-brd);background:rgb(239 246 255 / .5);display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:16px}
.mock-side svg{width:17px;height:17px;color:var(--mut)}
.mock-side svg.act{color:var(--blue)}
.mock-main{padding:16px}
.mock-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}
.mock-kpi{
  border:1px solid var(--glass-brd);border-radius:var(--rad-m);padding:10px 12px;background:rgb(255 255 255 / .62);
}
.mock-kpi span{display:block;font-size:var(--fs-xs);color:var(--mut);margin-bottom:3px}
.mock-kpi b{font-family:var(--mono);font-size:var(--fs-lg);font-weight:700;color:var(--ink);letter-spacing:-.01em}
.mock-kpi b.up{color:var(--blue)}
.mock-chart{border:1px solid var(--glass-brd);border-radius:var(--rad-m);padding:12px;background:rgb(255 255 255 / .62);margin-bottom:14px}
.mock-chart .grid path{stroke:var(--line)}
.mock-chart .grid .base{stroke:var(--line-2)}
.mock-chart .ch{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.mock-chart .ch b{font-size:var(--fs-sm);color:var(--ink)}
.mock-chart .ch span{font-family:var(--mono);font-size:var(--fs-2xs);color:var(--mut)}
.mock-chart svg{width:100%;height:auto;aspect-ratio:480/152;display:block}
.mock-chart .ax{font-family:var(--mono);font-size:8px;fill:var(--faint);pointer-events:none}
.mock-chart .ax-y{text-anchor:end}
.mock-chart .ax-x{text-anchor:middle}
@media (max-width:640px){.mock-chart .ax-x:not(.keep){display:none}}
.hc-claude{fill:#93C5FD}
.hc-gpt{fill:#3B82F6}
.hc-gemini{fill:#818CF8}
.hc-kimi{fill:#38BDF8}
.hc-pale{fill:#BFDBFE}
.hc-col{transform-box:fill-box;transform-origin:center bottom}
/* the columns grow whenever the dashboard scene becomes active, not once on load */
.hs-s.is-on .hc-col{animation:hcBarIn .7s cubic-bezier(.2,.7,.2,1) var(--d,0s) both}
@keyframes hcBarIn{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.ch-hi{fill:rgb(37 99 235 / .1);stroke:var(--blue-l);stroke-width:.75;opacity:0;pointer-events:none}
.mock-models{border:1px solid var(--glass-brd);border-radius:var(--rad-m);padding:12px;background:rgb(255 255 255 / .62)}
.mock-models .mh{display:flex;justify-content:space-between;margin-bottom:8px}
.mock-models .mh b{font-size:var(--fs-sm);color:var(--ink)}
.mock-models .mh span{font-family:var(--mono);font-size:var(--fs-2xs);color:var(--mut)}
.mm-row{display:grid;grid-template-columns:16px minmax(0,1fr) minmax(0,2fr) 56px;gap:10px;align-items:center;padding:5px 0}
.mm-row svg{width:14px;height:14px;color:var(--ink);overflow:visible}
.mm-row b{font-family:var(--mono);font-size:var(--fs-xs);font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm-row .tr{height:6px;border-radius:var(--rad-xs);background:var(--bg-alt);overflow:hidden}
.mm-row .tr i{display:block;height:100%;border-radius:var(--rad-xs);background:var(--blue)}
.mm-row .tr i.l{background:var(--blue-l)}
.mm-row:nth-child(3) .tr i{background:var(--teal)}
.mm-row:nth-child(4) .tr i{background:var(--violet)}
.mm-row:nth-child(5) .tr i{background:var(--sky)}
.mm-row:nth-child(3) .tr i.l{background:var(--teal-l)}
.mm-row:nth-child(4) .tr i.l{background:var(--violet-l)}
.mm-row:nth-child(5) .tr i.l{background:var(--sky-l)}
.mm-row span{font-family:var(--mono);font-size:var(--fs-2xs);color:var(--mut);text-align:right}

/* ---- hero headline: the last word flips through the four value props --------
   (Kyo-approved motion, 2026-08-23). .hw-fb is the real, crawlable, screen-reader
   word AND the width reservation — it is the longest of the four, so nothing ever
   reflows. The rotator on top is aria-hidden. No JS / reduced motion: .hw-fb only. */
.hw{position:relative;display:inline-block;vertical-align:baseline}
.hw-rot{display:none;position:absolute;inset:0}
.hero.hw-live .hw-fb{opacity:0}
.hero.hw-live .hw-rot{display:block}
.hw-w{
  position:absolute;left:0;top:0;white-space:nowrap;
  opacity:0;transform:translateY(.42em);
  transition:opacity .38s ease,transform .46s cubic-bezier(.2,.7,.2,1);
}
.hw-w.is-on{opacity:1;transform:none}
.hw-w.is-out{opacity:0;transform:translateY(-.42em)}

/* ---- hero panel: four scenes on one stage ----------------------------------
   The dashboard scene (.hs-size) stays in flow and sets the panel height; the
   other three are absolutely stacked on it, so the hero height never moves. */
/* the stage clips every scene, and repeats .mock's bottom corners (16px minus the
   1px border) so a scaling / blurred scene can never square off the panel corner */
.hs{position:relative;overflow:hidden;border-radius:0 0 15px 15px}
.hs-s{
  position:absolute;inset:0;opacity:0;visibility:hidden;
  transform:scale(1.03);filter:blur(4px);
  transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1),
             filter .5s ease,visibility 0s linear .5s;
}
.hs-s.hs-size{position:relative;inset:auto}
.hs-s.is-out{transform:scale(.97);filter:blur(4px)}
.hs-s.is-on{
  opacity:1;visibility:visible;transform:none;filter:blur(0);
  transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1),
             filter .5s ease,visibility 0s;
}
.hs-scene{display:flex;flex-direction:column;justify-content:center;padding:16px}
.hs-scene>svg{width:100%;height:auto;display:block}
.hs-cap{
  margin-top:12px;text-align:center;font-family:var(--mono);
  font-size:var(--fs-2xs);color:var(--mut);letter-spacing:.02em;
}
.hs-s.is-on .hs-cap{animation:hsCapIn .5s cubic-bezier(.2,.7,.2,1) .32s both}
@keyframes hsCapIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
/* toast language shared by scenes 2 · 3 · 4 — a real product notification, glass,
   springs in on its beat and stays put (base style IS the payoff frame) */
.hs-toast{
  position:absolute;z-index:4;display:inline-flex;align-items:center;gap:7px;
  padding:7px 11px;border-radius:var(--rad-m);
  background:rgb(255 255 255 / .92);border:1px solid var(--glass-brd);
  box-shadow:var(--sh-panel);font-size:var(--fs-xs);color:var(--ink);
  max-width:calc(100% - 32px);
}
.hs-toast::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue);flex:none}
.hs-toast.ok::before{background:var(--teal)}
.hs-toast.bad{border-color:var(--rose-xx);background:var(--rose-x);color:var(--rose)}
.hs-toast.bad::before{background:var(--rose)}
.hs-toast b{font-family:var(--mono);font-size:var(--fs-2xs);font-weight:700}
@keyframes hsToastIn{from{opacity:0;transform:translateY(-10px) scale(.94)}to{opacity:1;transform:none}}
@keyframes hsToastUp{from{opacity:0;transform:translateY(12px) scale(.94)}to{opacity:1;transform:none}}
/* 2.5D tilt — .mockw is the only free transform layer (.plx-a owns parallax,
   .float-a owns the idle float, .mock owns its entrance) */
.mockw{transform:perspective(1200px) rotateX(var(--mtx,0deg)) rotateY(var(--mty,0deg));transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.mockw.is-tilting{transition:transform .12s linear}
.hs-nav{display:none;align-items:center;justify-content:center;margin-top:12px}
.mockw.is-live .hs-nav{display:flex}
.hs-dots{display:flex;align-items:center;gap:2px}
.hs-dot{
  appearance:none;border:0;background:transparent;cursor:pointer;padding:0;
  width:22px;height:24px;display:inline-flex;align-items:center;justify-content:center;
}
.hs-dot::before{
  content:"";width:7px;height:7px;border-radius:var(--rad-pill);
  background:var(--line-2);transition:background .2s ease,width .25s ease;
}
.hs-dot:hover::before{background:var(--faint)}
.hs-dot.is-on::before{background:var(--blue);width:18px}
.hs-live{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
/* ============ scene 1 · GATEWAY — the "all LLMs" promise ============
   Calm composition, no wires and no orbit: a request card top-left, the glass
   endpoint hub inside its breathing halo, and a static 3×2 grid of provider
   chips. Traffic is read from glowing capsule packets that cross the empty
   space on an invisible straight path and land with a ring pulse.
   Timeline: 0–1.2s card, hub and chips pop in · 0.45–2.2s the request types
   itself · 2.8s its packet reaches the hub and the hub rings once · from 1.3s
   provider packets stream · 3.5s payoff: the chosen chip swells with a ring and
   the 200 OK toast pops under the card. Base styles are the payoff frame, so a
   paused / reduced-motion scene reads as the finished moment.
   Geometry: the hub centre sits at 50% − 87px and the chip grid starts 120px to
   its right, so the whole 326px composition stays centred and never leaves the
   stage at any panel width. The stage itself is capped at 432px and centred:
   every anchor inside is a fixed offset or a % of THIS box, so the composition
   must not stretch with the (much taller) dashboard scene that owns the height. */
.g1{position:relative;flex:0 1 432px;min-height:0;overflow:hidden}
.g1-blob{position:absolute;border-radius:50%;filter:blur(28px);opacity:.25;pointer-events:none}
.g1-blob.a{width:240px;height:190px;left:-40px;top:-30px;background:radial-gradient(circle,rgb(37 99 235 / .9),transparent 70%);animation:g1BlobA 17s ease-in-out infinite alternate}
.g1-blob.b{width:260px;height:210px;right:-50px;bottom:-40px;background:radial-gradient(circle,rgb(34 211 238 / .85),transparent 70%);animation:g1BlobB 21s ease-in-out infinite alternate}
@keyframes g1BlobA{from{transform:translate(0,0) scale(1)}to{transform:translate(46px,30px) scale(1.16)}}
@keyframes g1BlobB{from{transform:translate(0,0) scale(1.12)}to{transform:translate(-42px,-26px) scale(1)}}
/* shared stroke draw — also drives .t3-link, .t3-sp and .k4-shd */
@keyframes g1Draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
/* hub card */
.g1-hub{
  position:absolute;left:50%;top:56%;margin-left:-87px;transform:translate(-50%,-50%);
  width:152px;padding:11px 12px 10px;border-radius:var(--rad-m);text-align:center;z-index:3;
  background:linear-gradient(180deg,rgb(255 255 255 / .94),rgb(239 246 255 / .82));
  border:1px solid var(--glass-brd);box-shadow:var(--glass-sh),0 14px 34px rgb(30 58 138 / .18);
}
.hs-s.is-on .g1-hub{animation:g1HubIn .65s cubic-bezier(.2,.9,.3,1) .12s both}
@keyframes g1HubIn{from{opacity:0;transform:translate(-50%,-50%) scale(.84)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.g1-halo{
  position:absolute;left:50%;top:56%;width:200px;height:200px;margin:-100px 0 0 -187px;
  border-radius:50%;background:radial-gradient(circle closest-side,rgb(37 99 235 / .3),transparent 74%);
  filter:blur(8px);pointer-events:none;z-index:0;animation:g1Halo 3.8s ease-in-out infinite;
}
@keyframes g1Halo{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.1);opacity:1}}
/* one-shot brighter ring when the request packet reaches the hub */
.g1-hr{
  position:absolute;left:50%;top:56%;width:160px;height:160px;margin:-80px 0 0 -167px;
  border-radius:50%;border:2px solid var(--blue);opacity:0;pointer-events:none;z-index:1;
}
.hs-s.is-on .g1-hr{animation:g1HubRing .95s cubic-bezier(0,0,.2,1) 2.8s both}
@keyframes g1HubRing{0%{opacity:0;transform:scale(.6)}26%{opacity:.5}100%{opacity:0;transform:scale(1.2)}}
.g1-mark{display:block;width:26px;height:26px;margin:0 auto 7px;color:var(--blue)}
.g1-hub b{display:block;font-family:var(--mono);font-size:9px;font-weight:600;line-height:1.35;color:var(--blue-d);overflow-wrap:anywhere}
/* provider chips: a static 3×2 grid — staggered pop-in, then a slow desynced float */
.g1-grid{
  position:absolute;left:50%;top:56%;margin-left:33px;transform:translateY(-50%);
  display:grid;grid-template-columns:repeat(3,34px);gap:14px;z-index:2;
}
.g1-chip{position:relative;width:34px;height:34px}
.g1-cin{position:relative;display:block;width:100%;height:100%}
.hs-s.is-on .g1-cin{animation:g1Float var(--ff,11s) ease-in-out var(--fo,0s) infinite}
@keyframes g1Float{0%,100%{transform:translateY(-2px)}50%{transform:translateY(2px)}}
.g1-cp{
  display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  border-radius:11px;background:linear-gradient(180deg,#fff,rgb(248 250 252 / .92));
  border:1px solid var(--line);box-shadow:0 6px 16px rgb(15 23 42 / .1),0 1px 2px rgb(15 23 42 / .07);
  color:var(--ink);
}
.g1-cp svg{width:18px;height:18px;display:block}
.g1-ringp{position:absolute;inset:-4px;border-radius:14px;border:2px solid var(--blue);opacity:0;pointer-events:none}
.hs-s.is-on .g1-cp{animation:g1ChipIn .52s cubic-bezier(.2,1.3,.4,1) var(--hd,0s) both}
@keyframes g1ChipIn{from{opacity:0;transform:scale(.8);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
.hs-s.is-on .g1-chip.is-pick .g1-cp{animation:g1ChipIn .52s cubic-bezier(.2,1.3,.4,1) var(--hd,0s) both,g1Pick 1.3s cubic-bezier(.2,.7,.2,1) 3.5s both}
.hs-s.is-on .g1-chip.is-pick .g1-ringp{animation:g1Ring 1.1s cubic-bezier(0,0,.2,1) 3.55s both}
@keyframes g1Pick{0%{transform:scale(1)}22%{transform:scale(1.34)}48%,100%{transform:scale(1.1)}}
@keyframes g1Ring{0%{opacity:.9;transform:scale(.82)}70%,100%{opacity:0;transform:scale(1.9)}}
/* selector tie-in: one-shot flash on the picked provider chip */
.hs-s.is-on .g1-chip.is-hit .g1-cp{animation:g1Pick 1.1s cubic-bezier(.2,.7,.2,1)}
.hs-s.is-on .g1-chip.is-hit .g1-ringp{animation:g1Ring 1s cubic-bezier(0,0,.2,1)}
/* packets: glowing capsules on an invisible straight path, hub edge → chip edge.
   --fx / --fy is the hub-edge offset of that grid column / row. */
.g1-chip:nth-child(3n+1){--fx:-44px}
.g1-chip:nth-child(3n+2){--fx:-92px}
.g1-chip:nth-child(3n+3){--fx:-140px}
.g1-chip:nth-child(-n+3){--fy:24px}
.g1-chip:nth-child(n+4){--fy:-24px}
.g1-pk{
  position:absolute;left:50%;top:50%;width:14px;height:6px;margin:-3px 0 0 -24px;
  border-radius:var(--rad-pill);background:var(--pc,#2563EB);
  box-shadow:0 0 10px 2px var(--pc,#2563EB);opacity:0;pointer-events:none;
}
.hs-s.is-on .g1-pk{animation:g1Fly 2.2s cubic-bezier(.4,0,.35,1) var(--pd,1.3s) infinite}
@keyframes g1Fly{
  0%{opacity:0;transform:translate(var(--fx,-44px),var(--fy,24px)) scale(.55)}
  12%{opacity:1;transform:translate(var(--fx,-44px),var(--fy,24px)) scale(1)}
  50%{opacity:1;transform:translate(0,0) scale(1)}
  58%,100%{opacity:0;transform:translate(0,0) scale(.8)}
}
/* the ring a packet leaves on the chip it reaches */
.g1-land{position:absolute;inset:-4px;border-radius:14px;border:2px solid var(--pc,#2563EB);opacity:0;pointer-events:none}
.hs-s.is-on .g1-land{animation:g1Land 2.2s ease-out var(--pd,1.3s) infinite}
@keyframes g1Land{0%,48%{opacity:0;transform:scale(.7)}56%{opacity:.75;transform:scale(1.04)}80%,100%{opacity:0;transform:scale(1.6)}}
/* the request card packet: card → hub, animating left/top so it lands on the hub
   at every panel width */
.g1-pk0{
  position:absolute;left:calc(50% - 94px);top:calc(56% - 41px);width:14px;height:6px;
  border-radius:var(--rad-pill);background:var(--blue);box-shadow:0 0 10px 2px rgb(37 99 235 / .75);
  opacity:0;pointer-events:none;z-index:2;
}
.hs-s.is-on .g1-pk0{animation:g1Send .7s cubic-bezier(.4,0,.3,1) 2.25s both}
@keyframes g1Send{
  0%{opacity:0;left:calc(50% - 100px);top:74px;transform:scale(.6)}
  18%{opacity:1;transform:scale(1)}
  80%{opacity:1;left:calc(50% - 94px);top:calc(56% - 41px);transform:scale(1)}
  100%{opacity:0;left:calc(50% - 94px);top:calc(56% - 41px);transform:scale(.8)}
}
/* request card + typed body */
.g1-req{
  position:absolute;left:calc(50% - 163px);top:10px;width:216px;z-index:3;
  border-radius:var(--rad-m);padding:9px 11px 10px;
  background:rgb(255 255 255 / .92);border:1px solid var(--glass-brd);box-shadow:var(--sh-panel);
}
.hs-s.is-on .g1-req{animation:g1ReqIn .6s cubic-bezier(.2,.7,.2,1) .08s both}
@keyframes g1ReqIn{from{opacity:0;transform:translate(-24px,10px) scale(.95);filter:blur(5px)}to{opacity:1;transform:none;filter:blur(0)}}
.g1-rh{display:flex;align-items:center;gap:5px;margin-bottom:7px}
.g1-rh i{width:6px;height:6px;border-radius:50%;background:var(--line-2);flex:none}
.g1-rh i:nth-child(2){background:var(--blue-l)}
.g1-rh i:nth-child(3){background:var(--blue)}
.g1-rh span{margin-left:4px;font-family:var(--mono);font-size:var(--fs-2xs);color:var(--faint)}
.g1-code{font-family:var(--mono);font-size:10px;line-height:1.75;color:var(--ink);white-space:nowrap}
.g1-code em{font-style:normal;font-weight:700;color:var(--blue-d)}
.g1-code s{text-decoration:none;color:var(--teal)}
.g1-code .cur{width:5px;height:10px;margin-left:3px;vertical-align:-1px}
.g1-tw{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom}
.g1-t1 .g1-tw{width:25ch}
.g1-t2 .g1-tw{width:24ch}
.hs-s.is-on .g1-t1 .g1-tw{animation:g1Type1 .85s steps(25,end) .45s both}
.hs-s.is-on .g1-t2 .g1-tw{animation:g1Type2 .8s steps(24,end) 1.4s both}
@keyframes g1Type1{from{width:0}to{width:25ch}}
@keyframes g1Type2{from{width:0}to{width:24ch}}
.hs-s.is-on .g1-code .cur{animation:g1CurIn .01s linear 2.15s both,blink 1.1s step-end 2.15s infinite}
@keyframes g1CurIn{from{opacity:0}to{opacity:1}}
.g1-toast{left:calc(50% - 163px);top:92px}
.hs-s.is-on .g1-toast{animation:hsToastUp .5s cubic-bezier(.2,1.5,.4,1) 3.55s both}

/* ============ scene 3 · TIM & KEY — glass cards, not boxes ============
   0–1.5s org card drops, saldo counts up, ring sweeps, departments fly up from
   below with blur · middle: keys type themselves, connectors flow · 3.2s payoff:
   the ghost "Tambah tim" tile pulses and the single-invoice badge slides in. */
.t3{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center}
.t3-org{
  position:relative;z-index:2;display:flex;align-items:center;gap:12px;
  border-radius:var(--rad-m);padding:10px 14px;
  background:rgb(255 255 255 / .9);border:1px solid var(--glass-brd);box-shadow:var(--sh-card);
}
.hs-s.is-on .t3-org{animation:t3Drop .55s cubic-bezier(.2,.7,.2,1) .05s both}
@keyframes t3Drop{from{opacity:0;transform:translateY(-16px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes t3Up{from{opacity:0;transform:translateY(24px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
.t3-ring{width:38px;height:38px;flex:none}
.t3-ring .bgc{fill:none;stroke:var(--blue-xx);stroke-width:4}
.t3-ring .fgc{fill:none;stroke:var(--blue);stroke-width:4;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:31;transform:rotate(-90deg);transform-origin:center}
.hs-s.is-on .t3-ring .fgc{animation:t3Ring 1.1s cubic-bezier(.2,.7,.2,1) .3s both}
@keyframes t3Ring{from{stroke-dashoffset:100}to{stroke-dashoffset:31}}
.t3-ol{flex:1;min-width:0}
.t3-ol span{display:block;font-size:var(--fs-xs);color:var(--mut);margin-bottom:1px}
.t3-ol b{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.t3-tag{
  flex:none;font-family:var(--mono);font-size:var(--fs-2xs);font-weight:700;
  color:var(--blue);background:var(--blue-x);border:1px solid var(--blue-xx);
  border-radius:var(--rad-pill);padding:3px 9px;
}
.t3-link{display:block;width:100%;height:34px;overflow:hidden;flex:none}
.t3-link path{fill:none;stroke-width:1.2;vector-effect:non-scaling-stroke}
.t3-link .l{stroke:var(--line-2);stroke-dasharray:100;stroke-dashoffset:0}
.t3-link .f{stroke:var(--blue);stroke-dasharray:3 9;opacity:.5}
.hs-s.is-on .t3-link .l{animation:g1Draw .5s ease .3s both}
.hs-s.is-on .t3-link .f{animation:flowDash 1.5s linear .85s infinite}
.t3-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 56px;gap:10px;z-index:2}
.t3-d{
  border-radius:var(--rad-m);padding:9px 10px;overflow:hidden;
  background:rgb(255 255 255 / .88);border:1px solid var(--glass-brd);box-shadow:var(--sh-card);
}
.hs-s.is-on .t3-d{animation:t3Up .55s cubic-bezier(.2,.7,.2,1) var(--hd,0s) both}
.t3-dh{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:7px}
.t3-dh b{font-size:var(--fs-xs);font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t3-av{display:flex;flex:none}
.t3-av i{
  width:17px;height:17px;border-radius:50%;margin-left:-5px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:7px;font-weight:700;font-style:normal;
  color:#fff;background:var(--blue);box-shadow:0 0 0 1.5px var(--bg);
}
.t3-av i:first-child{margin-left:0;background:var(--indigo)}
.t3-av i:nth-child(3){background:var(--teal)}
.t3-key{
  font-family:var(--mono);font-size:9px;font-weight:600;color:var(--blue-d);
  background:var(--blue-x);border:1px solid var(--blue-xx);border-radius:var(--rad-s);
  padding:3px 6px;margin-bottom:7px;overflow:hidden;white-space:nowrap;
}
.t3-key span{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;width:14ch}
.hs-s.is-on .t3-key span{animation:t3Type .55s steps(14,end) var(--hd,0s) both}
@keyframes t3Type{from{width:0}to{width:14ch}}
/* the group pill can never shrink (mono + nowrap), so let the sparkline drop to a
   second line instead of pushing itself out through the card's right edge */
.t3-f{display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap;row-gap:5px}
.t3-p{
  font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:.04em;white-space:nowrap;
  color:var(--indigo);background:var(--indigo-x);border:1px solid var(--indigo-xx);
  border-radius:var(--rad-pill);padding:2px 7px;
}
.t3-sp{width:48px;height:16px;flex:none;overflow:hidden;margin-left:auto}
.t3-sp polyline{fill:none;stroke:var(--blue-l);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:0}
.hs-s.is-on .t3-sp polyline{animation:g1Draw .7s ease var(--hd,0s) both}
.t3-add{
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;
  border-radius:var(--rad-m);border:1px dashed var(--line-2);background:rgb(255 255 255 / .55);
  color:var(--faint);font-size:15px;font-weight:600;line-height:1;
}
.t3-add u{text-decoration:none;font-size:7px;font-weight:600}
.hs-s.is-on .t3-add{animation:t3Up .55s cubic-bezier(.2,.7,.2,1) .74s both,t3Pulse 1.1s ease-out 3.2s 1}
@keyframes t3Pulse{0%{box-shadow:0 0 0 0 rgb(37 99 235 / .32);border-color:var(--blue);color:var(--blue)}100%{box-shadow:0 0 0 13px rgb(37 99 235 / 0);border-color:var(--line-2);color:var(--faint)}}
.t3-bill{position:relative;align-self:center;margin-top:12px}
.hs-s.is-on .t3-bill{animation:hsToastUp .5s cubic-bezier(.2,1.5,.4,1) 3.35s both}

/* ============ scene 4 · KONTROL — the usage control moment ============
   0–1.5s shield draws, rows fly up, bars fill with a shimmer · middle: counters
   tick, the group switch flips, the daily limit highlights · 2.5s payoff: row 3
   hits the wall — shake, STOP stamp, struck-through counter, refusal toast. */
.k4{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center}
.k4-hd{display:flex;align-items:center;gap:8px;margin-bottom:11px}
.k4-shd{width:22px;height:22px;flex:none;color:var(--teal)}
.k4-shd path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:0}
.hs-s.is-on .k4-shd path{animation:g1Draw .75s ease .1s both}
.hs-s.is-on .k4-shd path.ck{animation:g1Draw .4s ease .7s both}
.k4-hd b{font-size:var(--fs-sm);color:var(--ink)}
.k4-hd em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:var(--fs-2xs);color:var(--mut)}
.k4-row{
  display:grid;grid-template-columns:22px minmax(0,84px) minmax(0,1fr) 48px 58px;
  gap:8px;align-items:center;padding:7px 9px;margin-bottom:8px;
  border-radius:var(--rad-s);background:rgb(255 255 255 / .84);
  border:1px solid var(--glass-brd);box-shadow:0 1px 2px rgb(15 23 42 / .04);
}
.hs-s.is-on .k4-row{animation:t3Up .5s cubic-bezier(.2,.7,.2,1) var(--hd,0s) both}
.k4-av{
  width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:8px;font-weight:700;color:#fff;background:var(--blue);
}
.k4-row.d2 .k4-av{background:var(--indigo)}
.k4-row.dead .k4-av{background:var(--rose)}
.k4-key{font-family:var(--mono);font-size:var(--fs-2xs);font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k4-bar{position:relative;height:8px;border-radius:var(--rad-xs);background:var(--bg-alt);border:1px solid var(--glass-brd);overflow:hidden}
.k4-fi{display:block;height:100%;border-radius:var(--rad-xs);transform-origin:left;transform:scaleX(var(--kw,1));background:linear-gradient(90deg,var(--blue-l),var(--blue))}
.hs-s.is-on .k4-fi{animation:k4Fill 2.3s cubic-bezier(.3,.7,.4,1) var(--hd,.2s) both}
@keyframes k4Fill{from{transform:scaleX(.1)}to{transform:scaleX(var(--kw,1))}}
.k4-shim{position:absolute;inset:0;transform:translateX(-110%);background:linear-gradient(90deg,transparent,rgb(255 255 255 / .62),transparent)}
.hs-s.is-on .k4-shim{animation:k4Shim 2.1s ease-in-out 1s infinite}
@keyframes k4Shim{0%{transform:translateX(-110%)}55%,100%{transform:translateX(110%)}}
.k4-row.dead .k4-fi{background-image:linear-gradient(90deg,var(--rose-l),var(--rose))}
/* the bar only turns danger at the moment it hits the wall, then the row shakes */
.hs-s.is-on .k4-row.dead .k4-fi{animation:k4Fill 2.3s cubic-bezier(.3,.7,.4,1) var(--hd,.2s) both,k4Red .45s ease 2.42s both}
@keyframes k4Red{from{background-image:linear-gradient(90deg,var(--blue-l),var(--blue))}to{background-image:linear-gradient(90deg,var(--rose-l),var(--rose))}}
.hs-s.is-on .k4-row.dead .k4-bar{animation:k4Shake .36s ease-in-out 2.5s 1}
@keyframes k4Shake{0%,100%{transform:translateX(0)}20%{transform:translateX(2px)}45%{transform:translateX(-2px)}72%{transform:translateX(1.5px)}}
.k4-n{
  position:relative;display:block;min-height:1.2em;text-align:right;
  font-family:var(--mono);font-size:var(--fs-2xs);color:var(--mut);font-variant-numeric:tabular-nums;
}
.k4-n i{position:absolute;right:0;top:0;font-style:normal;opacity:0}
.k4-n i:first-child{opacity:1}
.hs-s.is-on .k4-n:not(.dead) i{animation:k4Tick 2.4s steps(1,end) infinite}
.hs-s.is-on .k4-n:not(.dead) i:nth-child(2){animation-delay:-1.6s}
.hs-s.is-on .k4-n:not(.dead) i:nth-child(3){animation-delay:-.8s}
@keyframes k4Tick{0%,32%{opacity:1}34%,100%{opacity:0}}
.k4-n.dead{color:var(--rose)}
.k4-n.dead::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:currentColor;transform:scaleX(1);transform-origin:left}
.hs-s.is-on .k4-n.dead::after{animation:k4Strike .28s ease-out 2.56s both}
@keyframes k4Strike{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.k4-st{
  font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  text-align:center;padding:3px 0;border-radius:var(--rad-pill);
  color:var(--teal);background:var(--teal-x);border:1px solid var(--teal-xx);
}
.k4-st.stop{color:#fff;background:var(--rose);border-color:var(--rose)}
.hs-s.is-on .k4-st.stop{animation:k4Stamp .44s cubic-bezier(.2,1.6,.4,1) 2.5s both}
/* 1.3 is the largest stamp that still lands inside the row's 9px right padding */
@keyframes k4Stamp{0%{opacity:0;transform:scale(1.3) rotate(-7deg)}62%{opacity:1;transform:scale(.94) rotate(2deg)}100%{opacity:1;transform:none}}
.k4-toast{right:14px;top:12px}
.hs-s.is-on .k4-toast{animation:hsToastIn .5s cubic-bezier(.2,1.5,.4,1) 2.72s both}
.k4-ctl{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:9px;padding-top:11px;border-top:1px solid var(--glass-brd)}
.hs-s.is-on .k4-ctl{animation:t3Up .5s cubic-bezier(.2,.7,.2,1) .58s both}
.k4-sw{display:flex;align-items:center;gap:8px;font-size:var(--fs-xs);color:var(--mut)}
.k4-track{position:relative;width:40px;height:20px;border-radius:var(--rad-pill);background:var(--blue-xx);border:1px solid var(--blue-l);flex:none}
.k4-knob{position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:var(--blue);box-shadow:0 1px 3px rgb(15 23 42 / .3);transform:translateX(20px)}
.hs-s.is-on .k4-knob{animation:k4Knob .5s cubic-bezier(.2,1.4,.4,1) 1.7s both}
@keyframes k4Knob{from{transform:translateX(0)}to{transform:translateX(20px)}}
.k4-lb{position:relative;display:inline-block;min-width:60px;height:1.5em}
.k4-lb i{position:absolute;left:0;top:0;font-style:normal;font-family:var(--mono);font-size:var(--fs-2xs);font-weight:700;color:var(--blue-d);opacity:1}
.k4-lb i:first-child{opacity:0}
.hs-s.is-on .k4-lb i:first-child{animation:k4Out .4s ease 1.7s both}
.hs-s.is-on .k4-lb i:last-child{animation:k4In .4s ease 1.82s both}
@keyframes k4Out{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-7px)}}
@keyframes k4In{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.k4-lim{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-xs);color:var(--mut)}
.k4-inp{
  font-family:var(--mono);font-size:var(--fs-2xs);font-weight:600;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:var(--rad-s);padding:3px 8px;
}
.hs-s.is-on .k4-inp{animation:k4Focus 1.2s ease-out 2.05s both}
@keyframes k4Focus{0%{box-shadow:0 0 0 0 rgb(37 99 235 / .35);border-color:var(--blue)}70%,100%{box-shadow:0 0 0 8px rgb(37 99 235 / 0);border-color:var(--line)}}

/* scene 2 · dashboard extras — the sweep and the "key created" toast */
.ch-sweep{fill:var(--blue);opacity:0;pointer-events:none}
.hs-s.is-on .ch-sweep{animation:chSweep 1.5s cubic-bezier(.4,0,.2,1) 1.15s both}
@keyframes chSweep{0%{transform:translateX(0);opacity:0}14%,86%{opacity:.13}100%{transform:translateX(398px);opacity:0}}
.k2-toast{right:14px;top:12px}
.hs-s.is-on .k2-toast{animation:hsToastIn .5s cubic-bezier(.2,1.5,.4,1) 3s both}

@media (max-width:640px){
  .hs{min-height:352px}
  .hs-scene{padding:12px}
  .g1-hub{margin-left:-71px;width:132px;padding:9px 10px 8px}
  .g1-mark{width:22px;height:22px;margin-bottom:5px}
  .g1-halo{width:148px;height:148px;margin:-74px 0 0 -145px}
  .g1-hr{width:130px;height:130px;margin:-65px 0 0 -136px}
  .g1-grid{margin-left:29px;grid-template-columns:repeat(3,28px);gap:12px}
  .g1-chip{width:28px;height:28px}
  .g1-cp{border-radius:9px}
  .g1-cp svg{width:15px;height:15px}
  .g1-ringp,.g1-land{border-radius:12px}
  .g1-chip:nth-child(3n+1){--fx:-34px}
  .g1-chip:nth-child(3n+2){--fx:-74px}
  .g1-chip:nth-child(3n+3){--fx:-114px}
  .g1-chip:nth-child(-n+3){--fy:20px}
  .g1-chip:nth-child(n+4){--fy:-20px}
  .g1-pk{margin-left:-21px}
  .g1-pk0{left:calc(50% - 78px);top:calc(56% - 36px)}
  @keyframes g1Send{
    0%{opacity:0;left:calc(50% - 80px);top:66px;transform:scale(.6)}
    18%{opacity:1;transform:scale(1)}
    80%{opacity:1;left:calc(50% - 78px);top:calc(56% - 36px);transform:scale(1)}
    100%{opacity:0;left:calc(50% - 78px);top:calc(56% - 36px);transform:scale(.8)}
  }
  .g1-req{left:calc(50% - 137px);top:8px;width:196px}
  .g1-toast{left:calc(50% - 137px);top:84px}
  .t3-row{grid-template-columns:repeat(3,minmax(0,1fr)) 42px;gap:7px}
  .t3-d{padding:7px 8px}
  .t3-sp{display:none}
  .k4-row{grid-template-columns:20px minmax(0,58px) minmax(0,1fr) 40px 48px;gap:5px;padding:6px 7px}
  .k4-av{width:20px;height:20px}
  .k4-ctl{gap:10px}
}

/* fact strip */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--glass-brd);border-radius:var(--rad-l);
  background:linear-gradient(180deg,rgb(255 255 255 / .42),rgb(255 255 255 / 0) 34%),var(--glass);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:var(--glass-sh);margin-top:var(--stack);overflow:hidden;
}
.fact{padding:20px 24px;border-left:1px solid var(--line)}
.fact:first-child{border-left:0}
.fact b{display:block;font-size:var(--fs-xl);font-weight:700;color:var(--ink);letter-spacing:-.01em}
.fact span{display:block;font-size:var(--fs-md);color:var(--mut);margin-top:2px}
/* count-up spans must never disturb their host's typography (the .fact span rule
   above would otherwise make "143" a small muted block — Kyo bug report 2026-08-16) */
span[data-count]{display:inline;font:inherit;color:inherit;letter-spacing:inherit;margin:0}
@media (max-width:960px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}.fact:nth-child(3){border-left:0;border-top:1px solid var(--line)}.fact:nth-child(4){border-top:1px solid var(--line)}}

/* provider rail — static strip */
.rail{
  background:linear-gradient(90deg,
    rgb(219 234 254 / .72) 0%,
    rgb(207 250 254 / .55) 34%,
    rgb(224 231 255 / .60) 68%,
    rgb(224 242 254 / .55) 100%);
  border-top:1px solid var(--blue-xx);border-bottom:1px solid var(--blue-xx);padding:24px 0;margin-top:0;
}
.rail-label{text-align:center;font-family:var(--mono);font-size:var(--fs-sm);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--mut);margin-bottom:14px}
.rail-vp{max-width:1160px;margin:0 auto;padding:0 24px}
.rail-tr{display:flex;flex-wrap:wrap;justify-content:center;row-gap:4px}
.rl{
  display:flex;align-items:center;gap:8px;white-space:nowrap;
  font-size:var(--fs-base);font-weight:600;color:var(--mut);padding:6px 20px;transition:color .15s;
}
.rl svg{width:16px;height:16px;color:var(--ink);overflow:visible;flex:none}
.rl:hover{color:var(--ink)}

/* ============ sections ============ */
.sec{
  padding:var(--sec-y) 0;position:relative;
  --acc:var(--blue);--acc-l:var(--blue-l);--acc-x:var(--blue-x);--acc-xx:var(--blue-xx);
}
.sec-soft{
  background:
    radial-gradient(760px 420px at 8% 0%, rgb(14 165 233 / .08), transparent 62%),
    radial-gradient(640px 380px at 96% 100%, rgb(245 158 11 / .08), transparent 66%);
}
/* per-section colour identities — each band gets its own accent + ambient fogs */
#masalah{
  --acc:var(--sky);--acc-l:var(--sky-l);--acc-x:var(--sky-x);--acc-xx:var(--sky-xx);
  background:
    radial-gradient(780px 440px at 4% 0%, rgb(2 132 199 / .09), transparent 62%),
    radial-gradient(660px 400px at 98% 96%, rgb(71 85 105 / .07), transparent 66%),
    linear-gradient(180deg, rgb(240 249 255 / .6), transparent 26%);
}
#solusi{
  --acc:var(--teal);--acc-l:var(--teal-l);--acc-x:var(--teal-x);--acc-xx:var(--teal-xx);
  background:
    radial-gradient(820px 460px at 96% 2%, rgb(8 145 178 / .10), transparent 64%),
    radial-gradient(680px 420px at 2% 92%, rgb(67 56 202 / .08), transparent 66%);
}
#integrasi{
  --acc:var(--sky);--acc-l:var(--sky-l);--acc-x:var(--sky-x);--acc-xx:var(--sky-xx);
  background:
    radial-gradient(800px 440px at 0% 6%, rgb(2 132 199 / .09), transparent 62%),
    radial-gradient(640px 400px at 100% 90%, rgb(37 99 235 / .08), transparent 66%);
}
#hemat{
  --acc:var(--indigo);--acc-l:var(--indigo-l);--acc-x:var(--indigo-x);--acc-xx:var(--indigo-xx);
  background:
    radial-gradient(820px 460px at 0% 0%, rgb(79 70 229 / .09), transparent 62%),
    radial-gradient(680px 420px at 98% 94%, rgb(2 132 199 / .08), transparent 66%),
    linear-gradient(180deg, rgb(238 242 255 / .6), transparent 24%);
}
#kontrol{
  --acc:var(--indigo);--acc-l:var(--indigo-l);--acc-x:var(--indigo-x);--acc-xx:var(--indigo-xx);
  background:
    radial-gradient(820px 480px at 96% 4%, rgb(79 70 229 / .09), transparent 64%),
    radial-gradient(640px 400px at 0% 96%, rgb(2 132 199 / .07), transparent 66%);
}
#katalog{
  --acc:var(--violet);--acc-l:var(--violet-l);--acc-x:var(--violet-x);--acc-xx:var(--violet-xx);
  background:
    radial-gradient(760px 440px at 8% 0%, rgb(67 56 202 / .08), transparent 62%),
    radial-gradient(680px 420px at 96% 30%, rgb(8 145 178 / .08), transparent 64%),
    radial-gradient(640px 400px at 40% 100%, rgb(245 158 11 / .05), transparent 66%);
}
#keamanan{
  --acc:var(--teal);--acc-l:var(--teal-l);--acc-x:var(--teal-x);--acc-xx:var(--teal-xx);
  background:
    radial-gradient(800px 460px at 4% 0%, rgb(8 145 178 / .09), transparent 62%),
    radial-gradient(660px 420px at 98% 96%, rgb(100 116 139 / .08), transparent 66%),
    linear-gradient(180deg, rgb(236 254 255 / .55), transparent 26%);
}
.sec-head{max-width:720px;margin:0 auto var(--stack);text-align:center}
.sec-head.left{max-width:none;margin-left:0;text-align:left}
.eyebrow{
  font-family:var(--mono);font-size:var(--fs-sm);font-weight:700;letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--acc);margin-bottom:14px;
}
h2.h2{
  font-size:var(--fs-5xl);line-height:var(--lh-tight);letter-spacing:-.02em;font-weight:800;color:var(--ink);
  margin-bottom:16px;text-wrap:balance;
}
.lead{font-size:var(--fs-xl);line-height:var(--lh-loose);color:var(--mut)}
.lead b{color:var(--ink)}
.tlink{
  display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-lg);font-weight:600;color:var(--acc);
  transition:gap .15s;
}
.tlink:hover{gap:10px}
.tlink svg{width:15px;height:15px}

/* ============ masalah ============ */
.probs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.prob{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--rad-l);
  padding:24px;box-shadow:var(--sh-card);display:flex;flex-direction:column;
}
.probs .prob:nth-child(1){--pc:var(--sky)}
.probs .prob:nth-child(2){--pc:var(--violet)}
.probs .prob:nth-child(3){--pc:var(--coral)}
.probs .prob:nth-child(4){--pc:var(--blue)}
.prob-art{height:76px;margin-bottom:18px}
.prob-art svg{width:100%;height:100%}
.prob h3{font-size:var(--fs-xl);font-weight:700;color:var(--ink);margin-bottom:8px}
.prob p{font-size:var(--fs-base);color:var(--mut);line-height:var(--lh-body);margin-bottom:16px;flex:1}
.cost{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--pc,var(--blue));
}
.cost::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pc,var(--blue));flex:none}

/* ---- spotlight carousel (Kyo-approved exception, 2026-08-23) ----------------
   All four cards stay in the grid on desktop; one is spotlit at a time and only
   that card runs its illustration loop. The lift uses the `translate` property,
   never `transform`, so it cannot fight the .rv / .rv-kids reveal. Dim + border
   only land once the deck is revealed (.in), so the cascade-in still reads. */
.probs.is-live .prob{
  transition:opacity .55s ease,transform .55s ease,translate .4s cubic-bezier(.2,.7,.2,1),
             border-color .3s ease,box-shadow .4s ease;
}
.probs.is-live.in .prob{opacity:.72}
.probs.is-live.in .prob.is-active{
  opacity:1;translate:0 -4px;border-color:var(--sky-l);
  box-shadow:var(--sh-panel),0 0 0 1px rgb(2 132 199 / .16);
}
/* controls — same pill language as .rt-tabs; only shown once JS arms the deck */
.prob-ctl{display:none;align-items:center;justify-content:center;gap:8px;margin-top:18px}
.probs.is-live+.prob-ctl{display:flex}
.prob-arw{
  appearance:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;padding:0;border-radius:var(--rad-pill);
  border:1px solid var(--line);background:var(--bg);color:var(--mut);
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.prob-arw:hover{background:var(--bg-alt);color:var(--ink);border-color:var(--line-2)}
.prob-arw svg{width:14px;height:14px;display:block}
.prob-dots{display:flex;align-items:center;gap:2px}
.prob-dot{
  appearance:none;border:0;background:transparent;cursor:pointer;padding:0;
  width:22px;height:26px;display:inline-flex;align-items:center;justify-content:center;
}
.prob-dot::before{
  content:"";width:7px;height:7px;border-radius:var(--rad-pill);
  background:var(--line-2);transition:background .2s ease,width .25s ease;
}
.prob-dot:hover::before{background:var(--faint)}
.prob-dot.is-on::before{background:var(--sky);width:18px}
.prob-live{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
@media (max-width:960px){.probs{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* ≤900px the deck becomes a one-card scroll-snap slider; JS follows the swipe */
@media (max-width:900px){
  .probs{
    position:relative;display:flex;gap:12px;padding:4px 2px 10px;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;scroll-padding-left:2px;
    scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;
  }
  .probs::-webkit-scrollbar{display:none}
  .probs::after{content:"";flex:0 0 13%}
  .probs>.prob{flex:0 0 85%;scroll-snap-align:start}
  .prob-ctl{margin-top:14px}
}
/* four problems converge into one gateway — wires draw in on reveal, node lands
   last, then a slow dash keeps flowing toward the gateway */
.prob-funnel{margin-top:20px;display:flex;flex-direction:column;align-items:center;pointer-events:none}
.prob-funnel svg{display:block;width:100%;height:120px}
.prob-funnel path{fill:none;stroke:var(--sky);stroke-width:1.6;opacity:.55}
.prob-funnel .fn-stem{display:none;width:1px;height:24px;background:var(--sky);opacity:.55}
.prob-funnel .fn-w{stroke-dashoffset:0}
.js .prob-funnel:not(.in) .fn-w{stroke-dashoffset:1}
.prob-funnel.in .fn-w{animation:fnDraw .9s ease both}
@keyframes fnDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.prob-funnel.in .fn-w:nth-child(2){animation-delay:.12s}
.prob-funnel.in .fn-w:nth-child(3){animation-delay:.24s}
.prob-funnel.in .fn-w:nth-child(4){animation-delay:.36s}
/* flow overlay: dash cycle .035+.11 = .145 on a pathLength=1 wire, −.29 (2 cycles)
   per loop = seamless; dashoffset falls, so the dashes run card → gateway */
.prob-funnel .fn-flow{
  stroke-width:2.2;stroke-linecap:round;
  stroke-dasharray:.035 .11;stroke-dashoffset:0;opacity:0;
  transition:opacity .35s ease,stroke-width .35s ease;
}
.prob-funnel.in .fn-flow{opacity:.45;animation:fnFlow 2.6s linear .95s infinite}
.prob-funnel.in .fn-flow.is-hot{opacity:1;stroke-width:2.8}
@keyframes fnFlow{to{stroke-dashoffset:-.29}}
.prob-gw{
  max-width:100%;text-align:center;border:1px solid var(--blue);background:var(--blue-x);
  border-radius:var(--rad-pill);padding:8px 14px;
  transition:opacity .4s ease,transform .4s ease;
}
.js .prob-funnel:not(.in) .prob-gw{opacity:0;transform:translateY(6px)}
.prob-funnel.in .prob-gw{opacity:1;transform:none;transition-delay:.7s}
.prob-gw.hit{animation:hubRipple .6s ease-out} /* one-shot, reused from the routing hub */
.prob-gw b{display:block;font-size:13px;font-weight:600;color:var(--blue-d)}
.prob-gw span{display:block;font-family:var(--mono);font-size:11px;color:var(--blue);overflow-wrap:anywhere}
@media (max-width:960px){.prob-funnel svg{display:none}.prob-funnel .fn-stem{display:block}}

/* ---- masalah illustrations — 3.6s-ish loops, one card at a time -------------
   Every 0% frame IS the resting artwork, so a paused card looks exactly like the
   static drawing it always was. Transforms pivot on the element's own box. */
.prob-art .anim{transform-box:fill-box;transform-origin:center}
/* 1 · key tersebar — grey keys drift, the blue key drops onto the dashed line */
.pa-k1{animation:paKeyA 3.8s ease-in-out infinite}
.pa-k2{animation:paKeyB 4.4s ease-in-out infinite}
.pa-k3{animation:paKeyC 4.1s ease-in-out infinite}
.pa-kd{animation:paDrop 3.6s cubic-bezier(.3,.7,.3,1) infinite}
.pa-kline{animation:paMarch 2.2s linear infinite}
@keyframes paKeyA{0%,100%{transform:none}34%{transform:translate(1.6px,-2px) rotate(6deg)}68%{transform:translate(-1px,1.4px) rotate(-4deg)}}
@keyframes paKeyB{0%,100%{transform:none}30%{transform:translate(-1.8px,1.6px) rotate(-7deg)}64%{transform:translate(1.2px,-1.2px) rotate(4deg)}}
@keyframes paKeyC{0%,100%{transform:none}42%{transform:translate(1.4px,2px) rotate(5deg)}74%{transform:translate(-1.6px,-1px) rotate(-5deg)}}
@keyframes paDrop{
  0%,14%{transform:translate(0,0) rotate(0);opacity:1}
  28%,46%{transform:translate(-2px,-22px) rotate(-20deg);opacity:0}
  60%{transform:translate(-1px,-8px) rotate(-8deg);opacity:1}
  78%{transform:translate(0,2px) rotate(3deg);opacity:1}
  90%,100%{transform:translate(0,0) rotate(0);opacity:1}
}
@keyframes paMarch{to{stroke-dashoffset:-18}}
/* 2 · satu kartu per vendor — the stack shuffles, the multiplier ticks 10→11→12 */
.pa-c1{animation:paStackB 3.6s ease-in-out infinite}
.pa-c2{animation:paStackM 3.6s ease-in-out infinite}
.pa-c3{animation:paStackF 3.6s ease-in-out infinite}
@keyframes paStackF{
  0%,10%{transform:translate(0,0) rotate(0) scale(1);opacity:1}
  34%{transform:translate(8px,-5px) rotate(6deg) scale(1);opacity:.85}
  46%{transform:translate(13px,-8px) rotate(8deg) scale(1);opacity:0}
  50%{transform:translate(-20px,-16px) rotate(-4deg) scale(.9);opacity:0}
  72%{transform:translate(-7px,-6px) rotate(-1deg) scale(.97);opacity:1}
  90%,100%{transform:translate(0,0) rotate(0) scale(1);opacity:1}
}
@keyframes paStackB{0%,10%{transform:none}46%,62%{transform:translate(6px,5px)}90%,100%{transform:none}}
@keyframes paStackM{0%,10%{transform:none}46%,62%{transform:translate(5px,4px)}90%,100%{transform:none}}
.pa-tk-b,.pa-tk-c{opacity:0} /* resting frame shows ×12 only */
.pa-tk-a{animation:paTick 3.6s linear infinite}
.pa-tk-b{animation:paTick 3.6s linear -2.4s infinite}
.pa-tk-c{animation:paTick 3.6s linear -1.2s infinite}
@keyframes paTick{0%,32%{opacity:1}34%,100%{opacity:0}}
/* 3 · biaya tanpa pemilik — invoice lines redraw one by one, then the ? bobs in */
.pa-iv1,.pa-iv2,.pa-iv3,.pa-iv4,.pa-rise{stroke-dasharray:100} /* pathLength=100 */
.pa-iv1{animation:paIv1 3.6s ease-in-out infinite}
.pa-iv2{animation:paIv2 3.6s ease-in-out infinite}
.pa-iv3{animation:paIv3 3.6s ease-in-out infinite}
.pa-iv4{animation:paIv4 3.6s ease-in-out infinite}
.pa-ivq{animation:paIvQ 3.6s ease-in-out infinite}
@keyframes paIv1{0%,8%{stroke-dashoffset:0}16%,24%{stroke-dashoffset:100}36%,100%{stroke-dashoffset:0}}
@keyframes paIv2{0%,8%{stroke-dashoffset:0}16%,32%{stroke-dashoffset:100}44%,100%{stroke-dashoffset:0}}
@keyframes paIv3{0%,8%{stroke-dashoffset:0}16%,40%{stroke-dashoffset:100}52%,100%{stroke-dashoffset:0}}
@keyframes paIv4{0%,8%{stroke-dashoffset:0}16%,48%{stroke-dashoffset:100}60%,100%{stroke-dashoffset:0}}
@keyframes paIvQ{
  0%,6%{opacity:1;transform:translate(0,0) scale(1)}
  14%,58%{opacity:0;transform:translate(0,0) scale(.3)}
  70%{opacity:1;transform:translate(0,0) scale(1.14)}
  80%{opacity:1;transform:translate(0,0) scale(.97)}
  88%{opacity:1;transform:translate(0,-2px) scale(1)}
  100%{opacity:1;transform:translate(0,0) scale(1)}
}
/* 4 · tidak ada tombol stop — the cost line keeps redrawing, the hand sweeps 360° */
.pa-rise{animation:paRise 3.6s ease-in-out infinite}
.pa-rfill{animation:paRiseFill 3.6s ease-in-out infinite}
.pa-rdot{animation:paRiseDot 3.6s ease-in-out infinite}
.pa-hand{animation:paHand 3.6s linear infinite} /* fill-box centre = clock centre 30,24 */
@keyframes paRise{0%,10%{stroke-dashoffset:0}20%{stroke-dashoffset:100}76%,100%{stroke-dashoffset:0}}
@keyframes paRiseFill{0%,10%{opacity:.08}20%,30%{opacity:0}76%,100%{opacity:.08}}
@keyframes paRiseDot{
  0%,10%{opacity:1;transform:scale(1)}
  18%,62%{opacity:0;transform:scale(.3)}
  78%{opacity:1;transform:scale(1.2)} /* r5 → r6 keeps the dot flush with y=0 */
  88%,100%{opacity:1;transform:scale(1)}
}
@keyframes paHand{from{transform:rotate(0)}to{transform:rotate(360deg)}}
/* the gate: every loop idles on its 0% frame until its card is spotlit */
.prob-art .anim{animation-play-state:paused}
.probs.is-live .prob.is-active .prob-art .anim{animation-play-state:running}

@media (prefers-reduced-motion:reduce){
  .prob-funnel path{stroke-dashoffset:0}
  .prob-funnel.in .fn-w{animation:none}
  .prob-funnel .fn-flow,.prob-funnel.in .fn-flow{animation:none;opacity:0;transition:none}
  .prob-gw,.prob-funnel.in .prob-gw{opacity:1;transform:none;transition:none;transition-delay:0s}
  .prob-gw.hit{animation:none}
  .probs.is-live .prob{transition:none}
  .probs.is-live.in .prob.is-active{translate:none;box-shadow:var(--sh-panel)}
  .prob-art .anim{animation:none!important}
  .prob-dot::before{transition:none}
}

/* ============ solusi / zework ============ */
.conv{max-width:980px;margin:0 auto var(--stack)}
.conv svg{width:100%;height:auto}
.zw{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:var(--stack);align-items:start}
.zw-intro{position:sticky;top:110px}
.zw-intro .logo{
  display:flex;align-items:center;margin-bottom:16px;
}
.zw-intro .logo svg{display:block}
.zw-intro h3{font-size:var(--fs-4xl);line-height:var(--lh-snug);letter-spacing:-.02em;font-weight:800;color:var(--ink);margin-bottom:12px}
.zw-intro p{font-size:var(--fs-lg);color:var(--mut);line-height:var(--lh-loose);margin-bottom:24px}
.zw-vp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.zw-vp div{
  border:1px solid var(--line);border-radius:var(--rad-m);padding:12px 14px;background:var(--bg-alt);
  display:flex;align-items:center;gap:10px;font-size:var(--fs-md);font-weight:600;color:var(--ink);
}
.zw-vp svg{width:15px;height:15px;color:var(--acc);flex:none}
.zw-stack .zw-card.open{border-color:var(--acc-xx)}
.zw-stack{display:flex;flex-direction:column;gap:16px}
.zw-card{
  background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--rad-l);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:var(--glass-sh);overflow:hidden;
}
.zw-card.live{border-color:var(--blue-xx);background:rgb(219 234 254 / .42)}
.zw-hd{display:flex;align-items:center;gap:14px;padding:18px 22px}
.zw-n{
  width:38px;height:38px;border-radius:var(--rad-s);background:var(--ink);color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:var(--fs-md);font-weight:700;
}
.zw-card.live .zw-n{background:var(--blue)}
.zw-t b{display:block;font-size:var(--fs-xl);font-weight:700;color:var(--ink);line-height:var(--lh-snug)}
.zw-t span{display:block;font-size:var(--fs-md);color:var(--mut);margin-top:2px}
.zw-tags{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.zw-pill{
  font-family:var(--mono);font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--track-label);text-transform:uppercase;
  padding:4px 10px;border-radius:var(--rad-s);
}
.zw-pill.tok{background:var(--blue);color:#fff}
.zw-pill.cat{background:var(--bg-alt);color:var(--mut);border:1px solid var(--line)}
.zw-st{
  font-family:var(--mono);font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--track-label);text-transform:uppercase;
  padding:4px 10px;border-radius:var(--rad-s);color:var(--mut);background:var(--bg-alt);border:1px solid var(--line);
}
.zw-st.on{color:var(--blue);background:var(--bg);border-color:var(--blue-xx)}
.zw-st .dot{display:inline-block;width:6px;height:6px;margin-right:5px;vertical-align:1px}
.zw-body{padding:0 22px 22px;border-top:1px solid var(--line)}
.zw-chips{display:flex;flex-wrap:wrap;gap:8px;padding:16px 0 4px}
.zw-chip{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-md);font-weight:600;color:var(--ink);background:rgb(255 255 255 / .6);
  border:1px solid var(--glass-brd);border-radius:var(--rad-s);padding:5px 11px;
}
.zw-chip svg{width:15px;height:15px;overflow:visible;color:var(--ink);flex:none}
.zw-chip.hl{color:var(--blue);background:var(--blue-x);border-color:var(--blue-xx)}
.zw-card.live .zw-chip{background:rgb(255 255 255 / .68)}
.zw-bul{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 20px;padding:14px 0 4px}
.zw-bul.tri{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}
.zw-bul li{
  position:relative;padding-left:20px;font-size:var(--fs-base);color:var(--mut);line-height:var(--lh-body);
}
.zw-bul li::before{
  content:"";position:absolute;left:2px;top:8px;width:8px;height:8px;border-radius:var(--rad-xs);
  background:var(--acc-x);border:1.5px solid var(--acc);
}
.zw-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;padding:16px 0 4px}
.zw-mini{border:1px solid var(--glass-brd);border-radius:var(--rad-m);padding:16px;background:rgb(255 255 255 / .6)}
.zw-card.live .zw-mini{background:rgb(255 255 255 / .68)}
.zw-mini b{display:flex;align-items:center;gap:8px;font-size:var(--fs-base);font-weight:700;color:var(--ink);margin-bottom:10px}
.zw-mini b svg{width:14px;height:14px;color:var(--blue)}
.zw-mini ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.zw-mini li{font-size:var(--fs-md);color:var(--mut);padding-left:16px;position:relative}
.zw-mini li::before{content:"";position:absolute;left:2px;top:8px;width:5px;height:5px;border-radius:50%;background:var(--blue-l)}
.zw-foot{
  margin-top:22px;font-size:var(--fs-lg);color:var(--mut);text-align:center;
  border-top:1px solid var(--line);padding-top:22px;
}
.zw-foot b{color:var(--ink)}
@media (max-width:960px){.zw{grid-template-columns:minmax(0,1fr)}.zw-intro{position:static}.zw-split{grid-template-columns:minmax(0,1fr)}.zw-bul.tri{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.zw-bul{grid-template-columns:minmax(0,1fr)}.zw-hd{flex-wrap:wrap}.zw-tags{width:100%;justify-content:flex-start;margin-left:0}}

/* ============ solusi / routing ============ */
 .rt{margin:0 0 var(--stack);
  border:1px solid var(--glass-brd);border-radius:var(--rad-l);
  background-color:var(--glass);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  background-image:
    radial-gradient(circle,rgb(148 163 184 / .35) 1px,transparent 1.2px),
    linear-gradient(118deg, rgb(59 130 246 / .06) 0%, rgb(255 255 255 / 0) 42%, rgb(79 70 229 / .06) 100%);
  background-size:18px 18px,auto;
  box-shadow:var(--glass-sh);overflow:hidden;position:relative;
}
.rt::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(420px 220px at 8% 0%, rgb(8 145 178 / .09), transparent 66%),
    radial-gradient(460px 240px at 96% 100%, rgb(67 56 202 / .08), transparent 66%);
}
.rt-bar{
  display:flex;align-items:center;justify-content:space-between;gap:14px 24px;
  padding:14px 18px 0;flex-wrap:wrap;
}
.rt-tabs{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.rt-tabs button{
  appearance:none;border:0;background:transparent;cursor:pointer;
  font-family:var(--font);font-size:var(--fs-md);font-weight:600;color:var(--mut);
  padding:7px 12px;border-radius:var(--rad-pill);
  transition:background .15s ease,color .15s ease;
}
.rt-tabs button:hover:not([aria-selected="true"]){background:var(--bg-alt);color:var(--ink)}
.rt-tabs button[aria-selected="true"]{background:var(--ink);color:#fff}
.rt-copy{margin:0;font-size:var(--fs-base);line-height:var(--lh-body);color:var(--mut);max-width:40ch;text-align:right}
.rt-stage{position:relative;aspect-ratio:1000/440}
.rt-wires{position:absolute;inset:0;width:100%;height:100%}
.rt-app{
  position:absolute;left:5%;top:50%;transform:translateY(-50%);
  width:22%;min-width:188px;max-width:230px;
  background:var(--glass-hi);border:1px solid var(--glass-brd);border-radius:var(--rad-m);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:var(--glass-sh);overflow:hidden;
}
.rt-app-hd{
  display:flex;align-items:center;gap:6px;
  padding:10px 12px;border-bottom:1px solid var(--glass-brd);background:rgb(239 246 255 / .5);
}
.rt-app-hd i{width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.rt-app-hd i:nth-child(2){background:var(--blue-l)}
.rt-app-hd i:nth-child(3){background:var(--blue)}
.rt-app-body{position:relative;padding:18px 16px 14px;min-height:124px}
.rt-app-mark{
  position:absolute;inset:16px 12px 40px;
  display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-5xl);font-weight:800;letter-spacing:-.04em;
  color:rgb(15 23 42 / .06);pointer-events:none;
}
.rt-skel{height:8px;border-radius:var(--rad-xs);background:var(--line);margin-bottom:10px}
.rt-skel.w2{width:74%}
.rt-skel.w3{width:100%;height:28px;background:var(--bg-alt);border:1px solid var(--line)}
.rt-app-code{margin-top:6px;font-family:var(--mono);font-size:var(--fs-xs);color:var(--mut);overflow-wrap:anywhere}
/* blinking block cursor for terminal-style lines (styled element, not a glyph) */
.cur{
  display:inline-block;width:7px;height:14px;margin-left:6px;border-radius:1px;
  background:currentColor;vertical-align:-2px;
  animation:blink 1.1s step-end infinite;
}
.rt-app-code .cur{height:10px}
@keyframes blink{50%{opacity:0}}
.rt-hub{
  position:absolute;left:46%;top:50%;transform:translate(-50%,-50%);
  z-index:2;text-align:center;
}
.rt-pill{
  display:inline-block;background:var(--ink);color:#fff;
  font-size:var(--fs-md);font-weight:600;letter-spacing:-.01em;
  padding:8px 14px;border-radius:var(--rad-pill);white-space:nowrap;
}
.rt-card{
  position:absolute;right:4.5%;width:min(310px,33%);
  display:flex;align-items:center;gap:12px;
  background:var(--glass-hi);border:1px solid var(--glass-brd);border-radius:var(--rad-m);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  padding:12px 14px;box-shadow:var(--glass-sh);
}
.rt-card-down{top:13%;opacity:.78}
.rt-card-ok{bottom:13%}
.rt-ico{
  flex:none;width:32px;height:32px;border-radius:var(--rad-s);
  background:var(--bg-alt);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ink);
}
.rt-ico svg{width:16px;height:16px;overflow:visible}
.rt-meta{min-width:0}
.rt-card b{display:block;font-family:var(--mono);font-size:var(--fs-md);font-weight:700;letter-spacing:-.02em;line-height:var(--lh-snug);overflow-wrap:anywhere}
.rt-card em{display:block;font-style:normal;font-size:var(--fs-sm);color:var(--mut);margin-top:2px}
.rt-badge{
  margin-left:auto;flex:none;
  font-family:var(--mono);font-size:var(--fs-xs);font-weight:600;color:var(--mut);
  border:1px solid var(--line);background:var(--bg-alt);
  padding:3px 8px;border-radius:var(--rad-pill);
}
.rt-lab{
  position:absolute;z-index:2;left:60.3%;top:31.1%;
  transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none;
  font-family:var(--mono);font-size:var(--fs-xs);font-weight:600;
  padding:3px 8px;border-radius:var(--rad-pill);
  background:var(--glass-hi);border:1px solid var(--glass-brd);color:var(--mut);
}
.rt-lab-fb{top:68.9%;color:var(--amber);border-color:var(--amber-xx);background:var(--amber-x)}
.rt-join{display:none}
.rt-meter{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  border-top:1px solid var(--glass-brd);padding:12px 18px;background:rgb(244 250 255 / .6);
  font-family:var(--mono);font-size:var(--fs-sm);color:var(--mut);
}
.rt-meter span{display:inline-flex;align-items:center}
.rt-meter span + span::before{
  content:"";width:3px;height:3px;border-radius:50%;
  background:currentColor;opacity:.4;margin:0 10px;
}
.rt-meter b{font-weight:600;color:var(--ink)}
.rt-meter .ok{color:var(--blue);font-weight:700}
.rt-meter .bad{color:var(--rose);font-weight:700}

/* failover sandbox */
.rt-copy{margin-left:auto}
.rt-pwr{
  margin-left:auto;flex:none;width:30px;height:30px;border-radius:var(--rad-s);
  border:1px solid var(--line);background:#fff;color:var(--mut);
  display:flex;align-items:center;justify-content:center;
  transition:color .15s,background .15s,border-color .15s;
}
.rt-pwr svg{width:14px;height:14px}
.rt-pwr:hover{border-color:var(--line-2)}
.rt-pwr[aria-pressed="true"]{color:var(--teal);background:var(--teal-x);border-color:var(--teal-xx)}
.rt-pwr[aria-pressed="false"]{color:var(--rose);background:var(--rose-x);border-color:var(--rose-xx)}
.rt-card .rt-badge{margin-left:0}
.rt-badge.bad{color:var(--rose);background:var(--rose-x);border-color:var(--rose-xx)}
.rt-card.off{opacity:.62}
.rt-card.off .rt-ico{background:var(--rose-x);border-color:var(--rose-xx);color:var(--rose)}
.rt-card.off b{color:var(--mut)}
#routeCanvas[data-pri="on"] #rtFail{
  stroke:url(#rtPriGrad);stroke-dasharray:none;stroke-width:2.2;
  filter:drop-shadow(0 2px 4px rgb(2 132 199 / .22));
}
#routeCanvas[data-alt="off"] #rtOk{stroke:#F59E0B;stroke-dasharray:5 5;filter:none}
#routeCanvas[data-pri="off"] .rt-lab-pri,
#routeCanvas[data-alt="off"] .rt-lab-fb{color:var(--mut);border-color:var(--line);background:var(--bg-alt)}
#routeCanvas[data-mode="price"][data-alt="on"] #rtOk{stroke-width:3.1}
#routeCanvas[data-mode="price"][data-pri="on"] #rtFail{stroke-width:1.7}
#routeCanvas[data-mode="ttft"][data-alt="on"] #rtOk{stroke-width:2.6}
#routeCanvas[data-mode="price"] .rt-pwr,
#routeCanvas[data-mode="ttft"] .rt-pwr{display:none}
#routeCanvas[data-mode="avail"][data-pri="on"][data-alt="on"] #rtFail{stroke-width:3}
#routeCanvas[data-mode="avail"][data-pri="on"][data-alt="on"] #rtOk{stroke-width:1.8}
/* directional dash-flow on the selected route (data-sel set by applyState).
   Paths run gateway(x=50)→card(x≈70.6): dashoffset decreasing = flow forward.
   Dash cycle 3+9=12, offset −12 per loop = seamless. */
#rtFlowPri,#rtFlowAlt{
  fill:none;stroke:#2563EB;stroke-width:2;stroke-linecap:round;
  stroke-dasharray:3 9;opacity:0;pointer-events:none;
}
#routeCanvas[data-sel="pri"] #rtFlowPri{opacity:.5;animation:flowDash .9s linear infinite}
#routeCanvas[data-sel="alt"] #rtFlowAlt{opacity:.5;animation:flowDash .9s linear infinite}
@keyframes flowDash{to{stroke-dashoffset:-12}}
/* one-shot draw-on for the three wires (--len set inline by JS at reveal;
   JS removes .drawn on animationend so wires return to their solid/dashed styles) */
#routeCanvas.drawn #rtIn,
#routeCanvas.drawn #rtFail,
#routeCanvas.drawn #rtOk{
  stroke-dasharray:var(--len,none);
  stroke-dashoffset:var(--len,0);
  animation:wireDraw 1.1s cubic-bezier(.2,.7,.2,1) forwards;
}
#routeCanvas.drawn #rtFail{animation-delay:.15s}
#routeCanvas.drawn #rtOk{animation-delay:.3s}
@keyframes wireDraw{to{stroke-dashoffset:0}}
.rt-pill.pulse{animation:hubPulse 1.3s ease-in-out infinite}
@keyframes hubPulse{0%,100%{box-shadow:0 0 0 0 rgb(225 29 72 / 0)}50%{box-shadow:0 0 0 9px rgb(225 29 72 / .16)}}
/* Wave 2 · one-shot arrival / gate-impact feedback (.hit added by the packet
   engine, removed on animationend — feedback, never a resting glow) */
@keyframes hubRipple{0%{box-shadow:0 0 0 0 rgb(37 99 235 / .35)}100%{box-shadow:0 0 0 13px rgb(37 99 235 / 0)}}
.rt-pill.hit{animation:hubRipple .6s ease-out}
.rt-pill.pulse.hit{animation:hubPulse 1.3s ease-in-out infinite,hubRipple .6s ease-out}
@keyframes gateHit{0%{stroke-width:3;opacity:1}45%{stroke-width:4.5;opacity:.4}100%{stroke-width:3;opacity:1}}
#rtGatePri.hit,#rtGateAlt.hit{animation:gateHit .45s ease-out}
/* Wave 2 · layered depth on the sandbox stage — cards closest to the viewer cast
   the deepest shadow; composed from the --glass-sh token + the ink shadow family */
.rt-app{box-shadow:var(--glass-sh),0 12px 26px rgb(15 23 42 / .07)}
.rt-pill{box-shadow:0 10px 24px rgb(15 23 42 / .16)}
.rt-card{box-shadow:var(--glass-sh),0 18px 40px rgb(15 23 42 / .10)}
@media (max-width:800px){
  .rt-bar{padding:14px 16px 0}
  .rt-copy{text-align:left;max-width:none}
  .rt-stage{
    aspect-ratio:auto;display:flex;flex-direction:column;align-items:center;
    gap:14px;padding:22px 16px 8px;
  }
  .rt-wires,.rt-lab{display:none}
  .rt-app,.rt-hub,.rt-card{position:static;transform:none;width:100%;max-width:320px;opacity:1}
  .rt-app{max-width:280px}
  .rt-join{display:block;width:2px;height:22px;background:var(--line);border-radius:var(--rad-xs)}
  .rt-join.ok{background:var(--blue)}
  .rt-meter{justify-content:flex-start;padding:12px 76px 16px 16px}
}

/* ============ integrasi ============ */
.igrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-bottom:var(--stack)}
.code-card,.term-card{
  background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--rad-l);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:var(--glass-sh);overflow:hidden;
}
.cc-hd{
  display:flex;align-items:center;gap:8px;padding:11px 16px;border-bottom:1px solid var(--glass-brd);
  background:rgb(239 246 255 / .5);font-family:var(--mono);font-size:var(--fs-sm);color:var(--mut);
}
.cc-hd .dots{display:flex;gap:5px;margin-right:6px}
.cc-hd .dots i{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.cc-hd .dots i:nth-child(2){background:var(--blue-l)}
.cc-hd .dots i:nth-child(3){background:var(--blue)}
.cc-body{padding:16px;display:flex;flex-direction:column;gap:6px}
.code-l{
  display:flex;gap:10px;align-items:baseline;font-family:var(--mono);font-size:var(--fs-md);line-height:var(--lh-loose);
  padding:6px 10px;border-radius:var(--rad-s);color:var(--ink);
}
.code-l .sig{flex:none;width:14px;font-weight:700}
.code-l.del{background:var(--bg-alt);color:var(--mut)}
.code-l.del .sig{color:var(--mut)}
.code-l.add{background:var(--blue-x);color:var(--blue)}
.code-l.add .sig{color:var(--blue)}
.code-note{margin-top:14px;font-size:var(--fs-base);color:var(--mut)}
.term-row{
  display:flex;align-items:center;gap:12px;padding:10px 16px;border-top:1px solid var(--line);
}
.term-row:first-of-type{border-top:0}
.term-os{
  display:block;font-family:var(--mono);font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--mut);padding:12px 16px 0;
}
.term-c{font-family:var(--mono);font-size:var(--fs-md);color:var(--ink);flex:1;white-space:nowrap;overflow-x:auto;scrollbar-width:none}
.term-c::-webkit-scrollbar{display:none}
.term-c b{color:var(--blue);font-weight:700}
.cpy{
  flex:none;font-family:var(--mono);font-size:var(--fs-xs);font-weight:600;color:var(--blue);
  background:var(--blue-x);border:1px solid var(--blue-xx);border-radius:var(--rad-s);padding:5px 10px;
  transition:background .15s,color .15s;
}
.cpy:hover{background:var(--blue);color:#fff}
.cpy.ok{background:var(--blue);color:#fff}
.cpy.copied{animation:copiedFlash .9s ease} /* color/box-shadow pulse only — no size change */
@keyframes copiedFlash{0%{box-shadow:0 0 0 0 rgb(37 99 235 / .35)}100%{box-shadow:0 0 0 8px rgb(37 99 235 / 0)}}
.dlp{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px;align-items:center;
  margin-bottom:var(--stack);padding:28px;
  background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--rad-l);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--glass-sh);
}
.dlp-main{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.dlp-brand{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dlp-brand b{font-size:var(--fs-xl);font-weight:700;color:var(--ink)}
.dlp-brand .dl-ic{width:40px;height:40px}
.dlp-os{font-family:var(--mono);font-size:var(--fs-sm);color:var(--mut)}
.dl-beta{
  font-family:var(--mono);font-size:var(--fs-2xs);font-weight:700;letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--blue);background:var(--blue-x);border:1px solid var(--blue-xx);
  border-radius:var(--rad-pill);padding:2px 8px;
}
.dlp h3{font-size:var(--fs-4xl);font-weight:700;line-height:1.2;color:var(--ink);text-wrap:balance}
.dlp .lead{max-width:48ch}
.dlp-cta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px}
.dlp-cmp{min-width:0;display:flex;flex-direction:column;gap:10px}
.dlp-row{padding:14px 16px;border-radius:var(--rad-m);border:1px solid var(--line);background:var(--bg-alt)}
.dlp-row.is-new{background:var(--blue-x);border-color:var(--blue-xx)}
.dlp-lb{
  display:block;margin-bottom:4px;font-family:var(--mono);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--mut);
}
.dlp-row.is-new .dlp-lb{color:var(--blue)}
.dlp-row p{font-size:var(--fs-base);line-height:var(--lh-body);color:var(--mut)}
.dlp-row.is-new p{color:var(--ink)}
@media (max-width:900px){.dlp{grid-template-columns:minmax(0,1fr);gap:24px;padding:22px}.dlp h3{font-size:var(--fs-3xl)}}
@media (max-width:640px){.dlp-cta .btn{width:100%}}
.dl-ic{
  flex:none;width:44px;height:44px;border-radius:var(--rad-m);background:var(--bg-alt);border:1px solid var(--line);color:var(--blue);
  display:flex;align-items:center;justify-content:center;
}
.dl-ic svg{width:20px;height:20px}
.dl-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dl-txt b{font-size:var(--fs-lg);font-weight:700;color:var(--ink)}
.dl-txt span{font-size:var(--fs-base);color:var(--mut)}
.tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tool{
  min-width:0;
  background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--rad-m);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  padding:22px;box-shadow:var(--glass-sh);display:flex;flex-direction:column;gap:10px;
}
.tool .ic{
  width:44px;height:44px;border-radius:var(--rad-m);background:var(--bg-alt);border:1px solid var(--line);color:var(--ink);
  display:flex;align-items:center;justify-content:center;margin-bottom:2px;
}
.tool .ic svg{width:22px;height:22px;overflow:visible}
.tool>b{font-size:var(--fs-lg);font-weight:700;color:var(--ink)}
.tool ol{min-width:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.tool li{font-size:var(--fs-md);color:var(--mut);line-height:var(--lh-body);display:flex;gap:9px;align-items:flex-start;min-width:0}
.tool li::before{
  content:"";flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;background:var(--blue-x);
  color:var(--blue);font-family:var(--mono);font-size:var(--fs-2xs);font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.tool li:nth-child(1)::before{content:"1"}
.tool li:nth-child(2)::before{content:"2"}
.tool li:nth-child(3)::before{content:"3"}
.tool li>span{min-width:0;flex:1}
.tool li code{font-size:var(--fs-sm);color:var(--blue);white-space:nowrap}
.tool .warn{
  font-size:var(--fs-sm);color:var(--mut);
}
.tool-ft{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.tool a{
  display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-base);font-weight:600;color:var(--blue);
  transition:gap .15s;
}
.tool a:hover{gap:9px}
.tool a svg{width:13px;height:13px}
@media (max-width:960px){.igrid{grid-template-columns:minmax(0,1fr)}.tools{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.tools{grid-template-columns:minmax(0,1fr)}}

/* ============ hemat ============ */
.hgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.chart-card{
  background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--rad-l);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:var(--glass-sh);padding:24px;
}
.chart-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.chart-h b{font-size:var(--fs-lg);font-weight:700;color:var(--ink)}
.chart-h .r{font-family:var(--mono);font-size:var(--fs-xs);color:var(--mut)}
.gbar{display:grid;grid-template-columns:150px minmax(0,1fr) 84px;gap:14px;align-items:center;padding:9px 0}
.gbar-k b{display:block;font-size:var(--fs-base);font-weight:700;color:var(--ink)}
.gbar-k span{font-family:var(--mono);font-size:var(--fs-xs);color:var(--mut)}
.gbar-tr{height:10px;border-radius:var(--rad-xs);background:var(--bg-alt);border:1px solid var(--line);overflow:hidden}
.gbar-tr.none{background:repeating-linear-gradient(135deg,var(--bg-alt) 0 6px,transparent 6px 12px);border-style:dashed;border-color:var(--line-2)}
.gbar-fi{height:100%;border-radius:var(--rad-xs);background:linear-gradient(90deg,var(--gc,var(--blue)),var(--gc-l,var(--blue-l)));transform-origin:left;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.gbar-fi.z{background:transparent}
.gbar-v{
  font-family:var(--mono);font-size:var(--fs-sm);font-weight:700;color:var(--gc,var(--blue));text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;
  display:flex;flex-direction:column;align-items:flex-end;gap:1px;line-height:1.25;
}
.gbar-sav{font-family:var(--mono);font-size:var(--fs-2xs);font-weight:600;color:var(--mut);white-space:nowrap}
/* price-group hue map: Value=teal · Standard=blue · Enterprise=violet · ChinaLLM=coral · Creator=amber */
.chart-card .gbar-k b::before{content:"";display:inline-block;width:8px;height:8px;border-radius:3px;background:var(--gc,var(--blue));margin-right:7px;vertical-align:1px}
.chart-card .gbar:nth-child(2){--gc:var(--teal);--gc-l:var(--teal-l)}
.chart-card .gbar:nth-child(3){--gc:var(--blue);--gc-l:var(--blue-l)}
.chart-card .gbar:nth-child(4){--gc:var(--violet);--gc-l:var(--violet-l)}
.chart-card .gbar:nth-child(5){--gc:var(--coral);--gc-l:var(--coral-l)}
.chart-card .gbar:nth-child(6){--gc:var(--mut);--gc-l:var(--line-2)}
.gbar-v.flat{color:var(--mut);font-weight:600}
/* ledger: tagihan lama vs satu tagihan gateway */
.ledger{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin-top:18px}
.ledger>*{min-width:0}
.lg{background:var(--bg);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.lg.one{border-color:var(--blue)}
.lg-ar{font-family:var(--mono);font-size:var(--fs-lg);color:var(--faint);text-align:center;line-height:1}
.lg-r{display:flex;justify-content:space-between;gap:10px;padding:6px 12px;border-top:1px solid var(--bg-alt)}
.lg-r:first-child{border-top:0}
.lg-r>:first-child{font-size:var(--fs-xs);color:var(--mut);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-r>:last-child{font-family:var(--mono);font-size:var(--fs-sm);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.lg-r b{color:var(--ink);font-weight:700}
.lg-r .lg-save{color:var(--teal);font-weight:700}
.lg-h{background:var(--bg-alt)}
.lg-h>*{font-family:var(--font);font-weight:600;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--mut)}
.lg-cap{font-size:var(--fs-xs);color:var(--mut);margin-top:8px}
@media (max-width:640px){.ledger{grid-template-columns:minmax(0,1fr)}.lg-ar{transform:rotate(90deg)}}
.ex-row{padding:10px 0}
.ex-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
.ex-top span{font-size:var(--fs-md);color:var(--mut)}
.ex-top b{font-family:var(--mono);font-size:var(--fs-md);font-weight:700;color:var(--blue);font-variant-numeric:tabular-nums}
.ex-top b.flat{color:var(--mut);font-weight:600}
.ex-tr{display:flex;gap:2px;height:26px}
.ex-legend{display:flex;gap:14px;margin:2px 0 4px}
.ex-legend span{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--mut)}
.ex-legend i{width:14px;height:6px;border-radius:var(--rad-xs);display:inline-block}
.ex-tr i{height:100%;border-radius:var(--rad-xs);background:var(--line)}
.ex-tr i.gw{background:linear-gradient(180deg,var(--teal-l),var(--teal))}
.ex-foot{font-size:var(--fs-md);color:var(--mut);margin:14px 0 8px}

@media (max-width:960px){.hgrid{grid-template-columns:1fr}}
@media (max-width:640px){.gbar{grid-template-columns:96px minmax(0,1fr);gap:10px}.gbar-v{grid-column:2;text-align:left;padding-top:2px;align-items:flex-start}}

/* ============ kontrol ============ */
.console{
  background:linear-gradient(180deg,rgb(255 255 255 / .42),rgb(255 255 255 / 0) 30%),var(--glass);
  border:1px solid var(--glass-brd);border-radius:var(--rad-l);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:var(--glass-sh);overflow:hidden;max-width:960px;margin:0 auto;
}
.console .cc-hd{background:rgb(239 246 255 / .5)}
.c-body{padding:24px}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:20px}
.kpi{
  border:1px solid var(--glass-brd);border-radius:var(--rad-m);padding:14px 16px;background:rgb(239 246 255 / .5);
}
.kpi span{display:block;font-size:var(--fs-sm);color:var(--mut);margin-bottom:4px}
.kpi b{font-family:var(--mono);font-size:var(--fs-2xl);font-weight:700;color:var(--ink);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.gauges{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:20px}
.gauge{
  border:1px solid var(--glass-brd);border-radius:var(--rad-m);padding:16px 12px;text-align:center;background:rgb(255 255 255 / .6);
}
.gauge svg{width:82px;height:82px;margin:0 auto 10px}
.gauge .gp{font-family:var(--mono);font-size:var(--fs-md);font-weight:700;fill:var(--ink)}
.gauge .ring-bg{stroke:var(--bg-alt);stroke-width:9}
.gauge .ring-fg{stroke:var(--gc,var(--blue));stroke-width:9;stroke-linecap:round;transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .8s ease;filter:drop-shadow(0 1px 3px rgb(15 23 42 / .10))}
.gauges .gauge:nth-child(1){--gc:var(--blue)}
.gauges .gauge:nth-child(2){--gc:var(--teal)}
.gauges .gauge:nth-child(3){--gc:var(--indigo)}
.gauges .gauge:nth-child(4){--gc:var(--amber)}
.gauge .ring-fg.warn{stroke:var(--amber)}
.gauge>b{display:block;font-family:var(--mono);font-size:var(--fs-xs);font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px}
.gauge>span{font-family:var(--mono);font-size:var(--fs-xs);color:var(--mut);font-variant-numeric:tabular-nums}
.qd-acts{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.qd-hint{font-size:var(--fs-md);color:var(--mut);flex:1;min-width:220px}
.qd-log{
  border:1px solid var(--glass-brd);border-radius:var(--rad-m);background:rgb(239 246 255 / .5);
  padding:6px 0;margin-bottom:20px;overflow:hidden;
}
.lr{
  display:grid;grid-template-columns:70px 1fr 176px;gap:12px;align-items:center;
  padding:8px 16px;font-family:var(--mono);font-size:var(--fs-sm);
}
.lr .t{color:var(--mut)}
.lr .m{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lr .s{
  justify-self:end;font-size:var(--fs-xs);font-weight:700;padding:3px 9px;border-radius:var(--rad-s);white-space:nowrap;
  color:var(--blue);background:var(--blue-x);border:1px solid var(--blue-xx);
}
.lr .s.err{color:#fff;background:var(--rose);border-color:var(--rose)}
.emp{border:1px solid var(--glass-brd);border-radius:var(--rad-m);overflow:hidden;background:rgb(255 255 255 / .6)}
.emp-h{
  display:grid;grid-template-columns:2fr 1.6fr .8fr 1fr 1fr;gap:12px;padding:10px 16px;
  background:rgb(239 246 255 / .5);border-bottom:1px solid var(--glass-brd);
  font-family:var(--mono);font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--mut);
}
.emp-r{
  display:grid;grid-template-columns:2fr 1.6fr .8fr 1fr 1fr;gap:12px;align-items:center;
  padding:10px 16px;border-top:1px solid var(--line);
}
.emp-r:first-of-type{border-top:0}
.who{display:flex;align-items:center;gap:10px;min-width:0}
.av{
  width:30px;height:30px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--gc,var(--blue)),var(--gc-d,var(--blue-d)));
  color:#fff;font-family:var(--mono);font-size:var(--fs-xs);font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.emp .emp-r:nth-child(2){--gc:var(--blue);--gc-d:#1E40AF}
.emp .emp-r:nth-child(3){--gc:var(--teal);--gc-d:#155E75}
.emp .emp-r:nth-child(4){--gc:var(--indigo);--gc-d:#3730A3}
.emp .emp-r:nth-child(5){--gc:var(--coral);--gc-d:#172554}
.who b{display:block;font-size:var(--fs-md);font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who span{display:block;font-family:var(--mono);font-size:var(--fs-2xs);color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* .av is itself a span inside .who — restore its centering, size, and white on gradient */
.who .av{display:flex;align-items:center;justify-content:center;text-align:center;line-height:1;color:#fff;font-size:var(--fs-xs);overflow:visible;text-overflow:clip}
.mdl{display:flex;align-items:center;gap:7px;min-width:0}
.mdl svg{width:16px;height:16px;color:var(--ink);flex:none;overflow:visible}
.mdl b{font-family:var(--mono);font-size:var(--fs-sm);font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.num{font-family:var(--mono);font-size:var(--fs-md);color:var(--ink);font-variant-numeric:tabular-nums}
.sm{font-size:var(--fs-sm);color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tag{
  display:inline-block;font-family:var(--mono);font-size:var(--fs-xs);font-weight:700;
  padding:3px 9px;border-radius:var(--rad-s);color:var(--blue);background:var(--blue-x);border:1px solid var(--blue-xx);
  white-space:nowrap;
}
.tag.off{color:var(--rose);background:var(--rose-x);border-color:var(--rose-xx)}
.emp-r>div:last-child{display:flex;align-items:center;gap:8px}
.ksw{
  position:relative;flex:none;width:34px;height:20px;padding:0;border:0;border-radius:999px;
  background:var(--blue);cursor:pointer;transition:background .2s ease;
}
.ksw::after{
  content:"";position:absolute;top:2px;left:16px;width:16px;height:16px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgb(15 23 42 / .25);transition:left .2s ease;
}
.ksw[aria-checked="false"]{background:var(--line-2)}
.ksw[aria-checked="false"]::after{left:2px}
.ksw:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.gauge.off .ring-fg{stroke:var(--line-2)}
.gauge.off b{color:var(--mut)}
@media (prefers-reduced-motion:reduce){.ksw,.ksw::after{transition:none}}
@media (max-width:960px){.gauges{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .kpis{grid-template-columns:1fr}
  .emp-h{display:none}
  .emp-r{grid-template-columns:1fr;gap:6px;padding:12px 16px}
  .lr{grid-template-columns:64px 1fr;grid-template-areas:"t m" "t s";gap:2px 12px}
  .lr .t{grid-area:t}
  .lr .m{grid-area:m}
  .lr .s{grid-area:s;justify-self:start;margin-top:4px}
}

/* ============ katalog ============ */
.mods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.mod{
  background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--rad-l);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  padding:22px;box-shadow:var(--glass-sh);display:flex;flex-direction:column;
}
.mods .mod:nth-child(1){--mc:var(--teal)}
.mods .mod:nth-child(2){--mc:var(--blue)}
.mods .mod:nth-child(3){--mc:var(--violet)}
.mods .mod:nth-child(4){--mc:var(--coral)}
.mod-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.mod-top b{font-size:var(--fs-lg);font-weight:700;color:var(--ink)}
.mod-ring{position:relative;width:96px;height:96px;margin:0 auto 14px}
.mod-ring svg{width:96px;height:96px}
.mod-ring .bgc{fill:none;stroke:var(--bg-alt);stroke-width:9}
.mod-ring .fgc{fill:none;stroke:var(--mc,var(--blue));stroke-width:9;stroke-linecap:round;transform:rotate(-90deg);transform-origin:center;filter:drop-shadow(0 1px 3px rgb(15 23 42 / .10))}
.mod-ring .lbl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.mod-ring .lbl b{font-family:var(--mono);font-size:var(--fs-3xl);font-weight:700;color:var(--ink)}
.mod>p{font-size:var(--fs-base);color:var(--mut);line-height:var(--lh-body);text-align:center}
.mod-total{
  margin-top:20px;display:flex;align-items:center;gap:20px;justify-content:center;flex-wrap:wrap;
  background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--rad-m);padding:20px 24px;
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--glass-sh);
}
.mod-total .tot{font-family:var(--mono);font-size:var(--fs-5xl);font-weight:700;color:var(--blue);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mod-total .det b{display:block;font-size:var(--fs-lg);color:var(--ink)}
.mod-total .det span{font-family:var(--mono);font-size:var(--fs-md);color:var(--mut)}
/* one bar for one endpoint — the ::before fill scales in with the .rv → .in reveal */
.ep-bar{margin-top:22px;min-width:0}
.ep-url{font-family:var(--mono);font-size:var(--fs-md);color:var(--mut);margin-bottom:10px;overflow-wrap:anywhere}
.ep-seg{display:flex;gap:2px;height:36px;margin-bottom:20px;min-width:0}
.ep-seg>span{position:relative;flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center}
.ep-seg>span:first-child::before{border-radius:9px 0 0 9px}
.ep-seg>span:last-child::before{border-radius:0 9px 9px 0}
.ep-seg>span::before{content:"";position:absolute;inset:0;background:var(--epc);transform-origin:left;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.js .ep-bar:not(.in) .ep-seg>span::before{transform:scaleX(0)}
.ep-seg>span::after{content:attr(data-n);position:absolute;top:100%;left:0;padding-top:5px;font-family:var(--mono);font-size:11px;color:var(--mut)}
.ep-seg i{position:relative;font-style:normal;font-size:12px;font-weight:600;color:#fff}
.ep-bar.in .ep-seg>span::before{transform:none}
.ep-bar.in .ep-seg>span:nth-child(2)::before{transition-delay:.06s}
.ep-bar.in .ep-seg>span:nth-child(3)::before{transition-delay:.12s}
.ep-bar.in .ep-seg>span:nth-child(4)::before{transition-delay:.18s}
.ep-s1{--epc:var(--blue)}.ep-s2{--epc:var(--indigo)}.ep-s3{--epc:var(--faint)}.ep-s4{--epc:var(--teal)}
.ep-leg{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font-size:var(--fs-md);color:var(--mut)}
.ep-leg>span{display:inline-flex;align-items:center;gap:6px}
.ep-leg>span::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--epc);flex:none}
.ep-leg b{margin-left:auto;font-family:var(--mono);font-weight:700;color:var(--ink)}
@media (max-width:640px){.ep-s3 i,.ep-s4 i{display:none}}
@media (prefers-reduced-motion:reduce){.ep-seg>span::before{transform:none;transition:none}}
@media (max-width:960px){.mods{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.mods{grid-template-columns:minmax(0,1fr)}}

/* ============ keamanan ============ */
.secu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.secu .sc:nth-child(5){grid-column:span 2}
.sc{
  background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--rad-m);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  padding:24px;box-shadow:var(--glass-sh);display:flex;flex-direction:column;gap:10px;
}
.sc.main{background:rgb(204 250 254 / .42);border-color:var(--teal-xx);grid-column:1 / -1;flex-direction:row;align-items:center;gap:22px}
.sc.main .sc-tx{flex:1;display:flex;flex-direction:column;gap:10px}
.sc.main .sc-tx b{font-size:var(--fs-2xl)}
.sc .ic{
  width:40px;height:40px;flex:none;color:var(--acc);
  display:flex;align-items:center;justify-content:center;
}
.sc.main .ic svg{width:26px;height:26px}
.sc-chip.on{color:var(--teal);background:var(--teal-x);border-color:var(--teal-xx)}
.sc .ic svg{width:19px;height:19px}
.sc b{font-size:var(--fs-lg);font-weight:700;color:var(--ink);line-height:var(--lh-snug)}
.sc p{font-size:var(--fs-base);color:var(--mut);line-height:var(--lh-body);flex:1}
.sc-chips{display:flex;flex-wrap:wrap;gap:6px}
.sc-chip{
  font-family:var(--mono);font-size:var(--fs-xs);font-weight:600;color:var(--mut);
  background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--rad-s);padding:3px 8px;
}
.sc.main .sc-chip{background:#fff}
@media (max-width:960px){.secu{grid-template-columns:repeat(2,minmax(0,1fr))}.secu .sc:nth-child(4),.secu .sc:nth-child(5){grid-column:auto}.sc.main{flex-direction:column;align-items:flex-start;gap:12px}}
@media (max-width:640px){.secu{grid-template-columns:minmax(0,1fr)}}
/* pass-through diagram inside .sc.main — static, no motion */
.pt{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin-top:2px}
.pt-box{min-width:0;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.pt-lb{display:block;font-size:var(--fs-2xs);font-weight:600;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--faint)}
.pt-p,.pt-m{font-family:var(--mono);font-size:var(--fs-sm);line-height:var(--lh-snug);min-width:0;overflow-wrap:anywhere}
.pt-p{color:var(--ink);margin-top:5px}
.pt-m{color:var(--teal);margin-top:3px}
.pt-gw{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}
.pt-node{
  width:48px;height:48px;border-radius:var(--rad-pill);border:1.5px solid var(--blue);
  background:var(--blue-x);color:var(--blue);font-family:var(--mono);font-weight:700;font-size:var(--fs-sm);
  display:flex;align-items:center;justify-content:center;
}
.pt-gw em{font-style:normal;font-size:var(--fs-2xs);color:var(--mut)}
.pt-log{
  grid-column:1 / -1;min-width:0;border:1px dashed var(--line-2);border-radius:10px;padding:10px 12px;
  font-family:var(--mono);font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--mut);overflow-wrap:anywhere;
}
.pt-gone{text-decoration:line-through;color:var(--faint)}
.pt-keep{color:var(--ink)}
@media (max-width:640px){.pt{grid-template-columns:minmax(0,1fr)}}


/* ============ footer ============ */
.foot{background:var(--bg-alt);border-top:1px solid var(--line);padding:64px 0 32px}
.foot-g{display:grid;grid-template-columns:1.6fr minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:40px;margin-bottom:48px}
.foot-brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:var(--fs-lg);color:var(--ink);margin-bottom:12px}
.foot-brand svg{width:22px;height:22px}
.foot p{font-size:var(--fs-base);color:var(--mut);line-height:var(--lh-loose)}
.foot h3{font-family:var(--mono);font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink);margin-bottom:14px}
.foot a{display:block;font-size:var(--fs-base);color:var(--mut);margin-bottom:10px;transition:color .15s}
.foot a:hover{color:var(--blue)}
.foot-bot{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:24px;
  font-size:var(--fs-md);color:var(--mut);
}
.foot-bot .mono{font-size:var(--fs-sm)}
@media (max-width:960px){.foot-g{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:640px){.foot-g{grid-template-columns:1fr}}

/* ============ floating widgets ============ */
.fabs{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:10px;z-index:180}
.fab{
  width:52px;height:52px;border-radius:50%;border:none;box-shadow:var(--sh-panel);
  display:flex;align-items:center;justify-content:center;transition:transform .18s;
}
.fab:hover{transform:translateY(-2px)}
.fab-cs{background:linear-gradient(135deg,var(--blue),var(--blue-2));color:#fff}
.fab-cs svg{width:24px;height:24px}
.fab-cs .x{display:none}
.fab-cs.open .chat{display:none}
.fab-cs.open .x{display:block}
.cs-panel{
  position:fixed;right:20px;bottom:82px;width:min(360px,calc(100vw - 40px));z-index:179;
  background:var(--glass-strong);border:1px solid var(--glass-brd);border-radius:var(--rad-l);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--glass-sh);
  overflow:hidden;display:none;flex-direction:column;
}
.cs-panel.open{display:flex}
.cs-hd{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--glass-brd);background:rgb(239 246 255 / .5)}
.cs-hd .cs-av{
  width:36px;height:36px;border-radius:50%;background:var(--blue);color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;
}
.cs-hd .cs-av svg{width:18px;height:18px}
.cs-hd b{display:block;font-size:var(--fs-base);color:var(--ink)}
.cs-hd span{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--mut)}
.cs-hd span i{width:6px;height:6px;border-radius:50%;background:var(--blue)}
.cs-switch{
  margin-left:auto;border:0;background:transparent;cursor:pointer;
  font-size:var(--fs-sm);font-weight:600;color:var(--blue);
  padding:4px 8px;border-radius:var(--rad-s);
  transition:background .15s ease;
}
.cs-switch:hover{background:var(--blue-x)}
.cs-close{width:30px;height:30px;border-radius:var(--rad-s);border:1px solid var(--line);background:#fff;color:var(--mut);display:flex;align-items:center;justify-content:center;transition:border-color .15s ease,color .15s ease}
.cs-close:hover{border-color:var(--blue-l);color:var(--ink)}
.cs-close svg{width:14px;height:14px}
.cs-body{padding:14px 16px;display:flex;flex-direction:column;gap:8px;max-height:320px;overflow-y:auto}
.cs-topics{display:flex;flex-wrap:wrap;gap:7px}
.cs-topic{
  font-size:var(--fs-sm);font-weight:600;color:var(--blue);background:var(--blue-x);
  border:1px solid var(--blue-xx);border-radius:var(--rad-pill);padding:5px 12px;
  transition:background .15s,color .15s;
}
.cs-topic:hover{background:var(--blue);color:#fff}
.cs-msg{
  font-size:var(--fs-md);line-height:var(--lh-body);color:var(--ink);background:var(--bg-alt);
  border:1px solid var(--line);border-radius:var(--rad-m) var(--rad-m) var(--rad-m) var(--rad-xs);padding:10px 13px;
  animation:csIn .32s ease both; /* message entrance: opacity+translateY only */
}
@keyframes csIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cs-typing{display:flex;align-items:center;gap:4px;padding:12px 13px}
.cs-typing i{width:6px;height:6px;border-radius:50%;background:var(--mut);animation:csDot 1.1s ease-in-out infinite}
.cs-typing i:nth-child(2){animation-delay:.15s}
.cs-typing i:nth-child(3){animation-delay:.3s}
@keyframes csDot{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.cs-msg .q{display:block;font-weight:600;color:var(--blue);margin-bottom:4px;font-size:var(--fs-md)}
.cs-msg.me{
  align-self:flex-end;background:var(--blue-x);border-color:var(--blue-xx);
  border-radius:var(--rad-m) var(--rad-m) var(--rad-xs) var(--rad-m);color:var(--blue);
}
.cs-msg .cs-topic{margin-top:10px;display:inline-flex}
.cs-ft{padding:12px 16px;border-top:1px solid var(--glass-brd);background:rgb(239 246 255 / .5)}
.cs-form{display:flex;gap:8px}
.cs-form textarea{
  flex:1;resize:none;border:1px solid var(--line);border-radius:var(--rad-s);padding:9px 12px;
  font-family:var(--font);font-size:16px;color:var(--ink);background:#fff;min-height:44px;
}
.cs-form textarea:focus{outline:2px solid var(--blue);outline-offset:1px}
.cs-send{
  width:44px;height:44px;border-radius:var(--rad-s);border:none;background:var(--blue);color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;transition:background .15s ease;
}
.cs-send:hover{background:var(--blue-d)}
.cs-send svg{width:16px;height:16px}
.cs-hint{font-size:var(--fs-xs);color:var(--mut);margin-top:8px}

/* ============ SVG reliability + purposeful motion ============ */
.nav-brand svg,.foot-brand svg{color:var(--blue)}
svg use{pointer-events:none}
@keyframes heroCopyIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes heroPanelIn{from{opacity:0;transform:translate3d(28px,12px,0) scale(.985)}to{opacity:1;transform:none}}
@keyframes heroFactsIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes barGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero .mock{animation:heroPanelIn .82s cubic-bezier(.2,.7,.2,1) .22s both}
.hero .facts{animation:heroFactsIn .65s cubic-bezier(.2,.7,.2,1) .58s both}
.mock-models .tr i{transform-origin:left}
.hs-s.is-on .mock-models .tr i{animation:barGrow .9s cubic-bezier(.2,.7,.2,1) .35s both}

/* hero idle float — applied to inner wrappers (.float-a/.float-b) so it never
   fights the entrance keyframes that own transform on .mock/.facts themselves */
@keyframes floatA{from{transform:translateY(0)}to{transform:translateY(-8px)}}
@keyframes floatB{from{transform:translateY(-6px)}to{transform:translateY(6px)}}
.float-a{animation:floatA 9s ease-in-out infinite alternate}
.float-b{animation:floatB 12.5s ease-in-out infinite alternate}

/* Wave 2 · hero scroll parallax — one more wrapper layer (.plx-a/.plx-b) owns the
   scroll transform; .float-a/.float-b keep the idle float, .mock/.facts keep their
   entrance keyframes. --hp (0–1) is set on <header class="hero"> by JS,
   desktop ≥801px and non-reduced only; the media guard below is the CSS fallback. */
.plx-a{transform:translateY(calc(var(--hp,0) * -52px));opacity:calc(1 - var(--hp,0) * .08)}
.plx-b{transform:translateY(calc(var(--hp,0) * -22px))}
.hero::before{transform:translateY(calc(var(--hp,0) * 40px))}
@media (max-width:800px){.plx-a,.plx-b{transform:none}.plx-a{opacity:1}}

/* Wave 2 · topology backdrop behind the hero mockup (decorative data: faint
   provider dots wired to a hub; own element owns its slow drift transform) */
.float-a{position:relative}
.topo{
  position:absolute;left:-36px;top:-30px;width:calc(100% + 72px);height:calc(100% + 60px);
  opacity:.32;pointer-events:none;overflow:visible;
  animation:topoDrift 26s ease-in-out infinite alternate;
}
@keyframes topoDrift{from{transform:translate(-7px,5px)}to{transform:translate(7px,-5px)}}
.topo .tl{fill:none;stroke:#3B82F6;stroke-width:1;stroke-linecap:round;stroke-dasharray:3 9;opacity:.5;animation:flowDash 2s linear infinite}
.topo .nd{fill:#2563EB;fill-opacity:.55}
.topo .nd.hub{fill:#1D4ED8;fill-opacity:.65}
.topo .pn{fill:none;stroke:#22D3EE;stroke-width:1;transform-box:fill-box;transform-origin:center;animation:topoPing 2.8s cubic-bezier(0,0,.2,1) infinite}
.topo .pn.d2{animation-delay:1.4s}
/* living console — request journey: a dot rides a random link into the hub and the
   chart endpoint answers with one blip (arrival = the event; no idle pulse). */
.topo .tj{fill:#2563EB;stroke:#fff;stroke-width:.5;opacity:.95}
.ch-blip{fill:#22D3EE;pointer-events:none;transform-box:fill-box;transform-origin:center}
.ch-blip.blip{animation:chartBlip .55s ease-out}
@keyframes chartBlip{0%{opacity:.85;transform:scale(.6)}55%{opacity:.35;transform:scale(1.9)}100%{opacity:0;transform:scale(2.3)}}
.ch-scan{stroke:var(--blue);stroke-width:1;vector-effect:non-scaling-stroke;opacity:0}
.ch-cur{fill:var(--blue);stroke:#fff;stroke-width:1.4;opacity:0}
/* model-row replay: glass pointer-response (tint only) + the usage bar re-grows —
   data emphasis on request, no resting state */
@media (hover:hover){
  .mm-row{border-radius:var(--rad-xs);transition:background .15s ease}
  .mm-row:hover{background:rgb(219 234 254 / .32)}
  .hs-s.is-on .mm-row:hover .tr i{animation:barGrow .8s cubic-bezier(.2,.7,.2,1) 0s both}
}
@keyframes topoPing{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(2.8);opacity:0}}

@keyframes railMove{to{transform:translateX(-50%)}}
.rail-vp{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.rail-set{display:flex;flex:none}
.rail-vp:hover .rail-tr,.rail-vp:focus-within .rail-tr{animation-play-state:paused}
.rl svg{width:18px;height:18px}

/* Packets live in a preserveAspectRatio=none 100×100 viewBox on a 1000/440
   stage. Circles stretch into wide pills; a user-unit white stroke then reads
   as a second transparent disc with the fill offset beside it. Ellipses get
   inverse rx/ry (rtSizePackets) so they stay circular; stroke is non-scaling. */
.packet{fill:var(--blue-l);stroke:#fff;stroke-width:1.25}
.packet.core{fill:var(--blue)}
.packet.out{fill:var(--teal)}
.packet.fail{fill:var(--amber)}

.zw-hd{width:100%;border:0;background:transparent;text-align:left;font:inherit;color:inherit;cursor:pointer;position:relative;padding-right:54px}
.zw-hd:hover{background:var(--bg-alt)}
.zw-card.live .zw-hd:hover{background:rgb(255 255 255 / .55)}
.zw-chev{position:absolute;right:20px;top:50%;width:22px;height:22px;border:1px solid var(--line);border-radius:var(--rad-s);background:#fff;transform:translateY(-50%);transition:transform .28s ease,border-color .2s ease}
.zw-chev::before,.zw-chev::after{content:"";position:absolute;left:6px;top:10px;width:8px;height:1.5px;background:var(--blue);border-radius:var(--rad-xs)}
.zw-chev::after{transform:rotate(90deg)}
.zw-card.open .zw-chev{transform:translateY(-50%) rotate(45deg);border-color:var(--blue-xx)}
.zw-wrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows .38s cubic-bezier(.2,.7,.2,1)}
.js .zw-card:not(.open) .zw-wrap{grid-template-rows:0fr}
.zw-wrap>.zw-body{overflow:hidden;padding-top:0;padding-bottom:0;border-top-color:transparent;transition:padding .38s cubic-bezier(.2,.7,.2,1),border-color .2s ease}
.zw-card.open .zw-wrap{grid-template-rows:1fr}
.zw-card.open .zw-wrap>.zw-body{padding-top:0;padding-bottom:22px;border-top-color:var(--line)}
.zw-card.open{box-shadow:var(--sh-panel)}

.gauge .ring-fg,.mod-ring .fgc{transition:stroke-dashoffset 1.15s cubic-bezier(.2,.7,.2,1)}
.prob.in .prob-art svg{animation:heroFactsIn .62s cubic-bezier(.2,.7,.2,1) both}
/* Wave 2 · katalog donuts — gentle idle breathe on the ring wrapper (uniform scale
   only, labels stay upright; the arcs themselves already stroke-draw on reveal via
   the shared ring observer + the transition above) */
/* Wave 2 · keamanan icons stroke-draw on reveal (72-unit dash covers the longest
   path in the set — the padlock outline measures ~64; per-card stagger via --id) */
@keyframes iconDraw{to{stroke-dashoffset:0}}
.secu.in .sc .ic svg path,
.secu.in .sc .ic svg rect,
.secu.in .sc .ic svg circle{
  stroke-dasharray:72 999;stroke-dashoffset:72;
  animation:iconDraw .8s ease-out forwards;animation-delay:var(--id,0s);
}
.secu .sc:nth-child(2){--id:.08s}
.secu .sc:nth-child(3){--id:.16s}
.secu .sc:nth-child(4){--id:.24s}
.secu .sc:nth-child(5){--id:.32s}

@media (max-width:640px){
  .zw-hd{padding-right:48px}.zw-chev{right:14px}
}
/* Wave 3 · click-point ripple — one-shot feedback at the press point, no resting state.
   Hosts get position/overflow so the ripple is anchored and clipped to the control. */
.btn,.nav-cta,.msel-btn,.rt-tabs button,.rt-pwr,.cpy,.cs-topic,.cs-send,.cs-switch,.zw-hd,.fab,.prob-arw{position:relative;overflow:hidden}
.rp{
  position:absolute;border-radius:50%;background:currentColor;opacity:.14;
  transform:translate(-50%,-50%) scale(0);pointer-events:none;
  animation:rippleOut .5s ease-out forwards;
}
@keyframes rippleOut{to{transform:translate(-50%,-50%) scale(1);opacity:0}}

@media (prefers-reduced-motion:reduce){
  .hero-in>div:first-child,.hero .mock,.hero .facts,.hc-col,.mock-models .tr i,.prob.in .prob-art svg{animation:none!important;opacity:1;transform:none}
  .rail-vp{overflow:hidden;mask-image:none;-webkit-mask-image:none}
  .rail-tr{width:auto;flex-wrap:wrap;justify-content:center}
  .rail-set:nth-child(2){display:none}
  .svg-motion{display:none}
  .zw-wrap,.zw-wrap>.zw-body,.zw-chev{transition:none}
  .rt-pill,.rt-pill.pulse{animation:none}
  .rt-pwr{transition:none}
  .btn-p:hover,.btn-g:hover,.fab:hover{transform:none}
  .gauge .ring-fg,.mod-ring .fgc{transition:none}
  /* living-page pass (2026-08-16): collapse every added animation */
  .fog-drift,.fog-drift::before,.fog-drift::after{animation:none}
  .float-a,.float-b{animation:none}
  .cur{display:none}
  #rtFlowPri,#rtFlowAlt{opacity:0!important;animation:none!important}
  .cs-msg{animation:none}
  .cs-typing i{animation:none}
  .cpy.copied{animation:none}
  /* Wave 2 pass (2026-08-16): collapse every added animation */
  .plx-a,.plx-b,.hero::before{transform:none}
  .plx-a{opacity:1}
  .topo,.topo .tl{animation:none}
  .topo .pn{display:none}
  .topo .tj{display:none}
  .ch-blip{animation:none;opacity:0!important}
  .rt-pill.hit,#rtGatePri.hit,#rtGateAlt.hit{animation:none}
  #routeCanvas.drawn #rtIn,#routeCanvas.drawn #rtFail,#routeCanvas.drawn #rtOk{animation:none;stroke-dasharray:none;stroke-dashoffset:0}
  .rp{display:none}
  .secu.in .sc .ic svg path,
  .secu.in .sc .ic svg rect,
  .secu.in .sc .ic svg circle{animation:none;stroke-dasharray:none;stroke-dashoffset:0}
  /* hero pass (2026-08-23): headline stays "platform.", the stage still switches
     on the dots but never slides, tilts, cycles, or plays a scene timeline.
     Every scene element's base style IS its payoff frame, so killing every
     animation inside .hs leaves each scene on its finished beat. */
  .hw-rot{display:none!important}
  .hero.hw-live .hw-fb{opacity:1}
  .hs-s,.hs-s.is-on,.hs-s.is-out{transition:none;transform:none;filter:none}
  .mockw{transform:none!important;transition:none}
  .hs *,.hs-s *,.hs-s.is-on *{animation:none!important}
  .g1-pk,.g1-pk0{display:none}
  .hs-dot::before{transition:none}
}

/* liquid glass — pointer response: material brightens, no motion */
.prob:hover,.mod:hover,.tool:hover,.sc:hover,.chart-card:hover,.zw-card:hover,.zw-card.live:hover{background-color:rgb(244 250 255 / .74)}
.sc.main:hover{background-color:rgb(209 250 253 / .58)}

/* reduced transparency: solid pale-blue fallback, no blur */
@media (prefers-reduced-transparency:reduce){
  :root{--glass:#EFF6FF;--glass-hi:#F4FAFF;--glass-strong:#EFF6FF;--glass-brd:#BFDBFE;--blur:none}
}

/* ============ reveal ============ */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
/* staggered grid cascades: .rv-kids on a grid container reveals children in .07s steps */
.js .rv-kids>*{opacity:0;transform:translateY(18px);transition:opacity .65s cubic-bezier(.2,.7,.2,1),transform .65s cubic-bezier(.2,.7,.2,1)}
.js .rv-kids.in>*{opacity:1;transform:none}
.rv-kids.in>*:nth-child(2){transition-delay:.07s}
.rv-kids.in>*:nth-child(3){transition-delay:.14s}
.rv-kids.in>*:nth-child(4){transition-delay:.21s}
.rv-kids.in>*:nth-child(5){transition-delay:.28s}
.rv-kids.in>*:nth-child(6){transition-delay:.35s}
.rv-kids.in>*:nth-child(7){transition-delay:.42s}
.rv-kids.in>*:nth-child(8){transition-delay:.49s}
@media (prefers-reduced-motion:reduce){
  .rv,.js .rv{opacity:1;transform:none;transition:none}
  .rv-kids>*,.js .rv-kids>*{opacity:1;transform:none;transition:none}
  .rv-kids.in>*{transition-delay:0s}
  .gbar-fi{transition:none}
}

/* ============ responsive base ============ */
@media (max-width:960px){
  .hero-in{grid-template-columns:1fr;gap:40px}
  .hero{padding:120px 0 40px}
  .hero h1{font-size:var(--fs-h1-md)}
}
@media (max-width:640px){
  section{scroll-margin-top:112px}
  .sec{padding:var(--sec-y-sm) 0}
  .wrap{padding:0 16px}
  .hero{padding:104px 0 32px}
  .hero h1{font-size:var(--fs-5xl)}
  .hero-sub{font-size:var(--fs-xl)}
  .mock-body{min-height:0}
  .mock-kpis{grid-template-columns:1fr}
  h2.h2{font-size:var(--fs-4xl)}
}

/* ==========================================================================
   tokotokenai.com additions
   Motion rules: transform + opacity only (filter sparingly), every loop pauses
   off-screen (.is-off) and in a hidden tab (body.tab-hidden), and
   prefers-reduced-motion leaves every element on its final frame.
   ========================================================================== */

/* ---- no-JS: content stays visible, controls that need JS stay hidden ---- */
html:not(.js) .needs-js,
html:not(.js) .fabs,
html:not(.js) .nav-toggle,
html:not(.js) .zw-chev{display:none!important}
html:not(.js) .zw-wrap>.zw-body{padding-bottom:22px;border-top-color:var(--line)}

/* ---- brand ---- */
.nav-brand svg,.foot-brand svg{width:27px;height:22px}
.g1-mark{width:30px}
.hero-mark{opacity:.08}

/* ---- sticky header: compacts and firms up once the page scrolls ---- */
.nav{transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,background-color .35s ease,border-color .35s ease}
.nav.is-scrolled{
  transform:translateX(-50%) translateY(-6px);
  background:rgb(246 250 255 / .9);border-color:rgb(147 197 253 / .55);
  box-shadow:0 16px 36px rgb(30 58 138 / .13),inset 0 1px 0 rgb(255 255 255 / .85),inset 0 -1px 0 rgb(30 58 138 / .06);
}
.nav-sheet{transition:top .4s cubic-bezier(.2,.7,.2,1)}
.nav.is-scrolled+.nav-sheet{top:68px}
.nav-lang{
  display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:34px;padding:0 10px;margin:0 4px;
  border-radius:var(--rad-pill);border:1px solid var(--glass-brd);background:rgb(255 255 255 / .6);
  font-family:var(--mono);font-size:var(--fs-sm);font-weight:700;letter-spacing:.06em;color:var(--mut);
  transition:color .15s ease,border-color .15s ease,background-color .15s ease;
}
.nav-lang:hover{color:var(--blue);border-color:var(--blue-l);background:#fff}
@media (max-width:640px){.nav-end .nav-lang{display:none}}
@media (max-width:400px){
  .nav{padding-left:12px}
  .nav-brand{font-size:var(--fs-md);gap:7px}
  .nav-brand svg{width:24px;height:20px}
  .nav-cta{padding:0 14px;font-size:var(--fs-md)}
}

/* ---- hero aurora: soft blue light that drifts behind the copy ---- */
.aurora{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.aurora i{
  position:absolute;border-radius:50%;opacity:.9;will-change:transform;
  animation:auroraA 24s ease-in-out infinite alternate;
}
.aurora i:nth-child(1){width:62vw;height:46vw;max-width:900px;max-height:660px;right:-14vw;top:-22vw;
  background:radial-gradient(closest-side,rgb(37 99 235 / .26),rgb(37 99 235 / .08) 55%,transparent)}
.aurora i:nth-child(2){width:52vw;height:40vw;max-width:760px;max-height:580px;left:-16vw;top:18%;
  background:radial-gradient(closest-side,rgb(34 211 238 / .22),rgb(34 211 238 / .06) 55%,transparent);
  animation-name:auroraB;animation-duration:29s}
.aurora i:nth-child(3){width:44vw;height:30vw;max-width:640px;max-height:440px;left:32%;bottom:-12vw;
  background:radial-gradient(closest-side,rgb(56 189 248 / .2),rgb(79 70 229 / .05) 60%,transparent);
  animation-name:auroraC;animation-duration:33s}
.aurora::before{
  /* light beams fanning down from a pivot above the hero; the pivot itself is masked out */
  content:"";position:absolute;left:58%;top:calc(-75vmax - 160px);width:150vmax;height:150vmax;margin-left:-75vmax;
  background:conic-gradient(from 0deg,transparent 0 12%,rgb(56 189 248 / .12) 18%,transparent 26% 46%,
    rgb(37 99 235 / .10) 54%,transparent 62% 80%,rgb(34 211 238 / .10) 87%,transparent 94%);
  -webkit-mask-image:radial-gradient(closest-side,transparent 12%,#000 34%,#000 52%,transparent 74%);
  mask-image:radial-gradient(closest-side,transparent 12%,#000 34%,#000 52%,transparent 74%);
  animation:auroraSpin 90s linear infinite;
}
@keyframes auroraA{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-6vw,4vw,0) scale(1.12)}100%{transform:translate3d(3vw,7vw,0) scale(.94)}}
@keyframes auroraB{0%{transform:translate3d(0,0,0) scale(1.05)}50%{transform:translate3d(7vw,-3vw,0) scale(.92)}100%{transform:translate3d(2vw,5vw,0) scale(1.14)}}
@keyframes auroraC{0%{transform:translate3d(0,0,0) scale(.95)}50%{transform:translate3d(-5vw,-4vw,0) scale(1.1)}100%{transform:translate3d(6vw,-1vw,0) scale(1)}}
@keyframes auroraSpin{to{transform:rotate(1turn)}}
body.tab-hidden .aurora i,body.tab-hidden .aurora::before{animation-play-state:paused}

/* ---- hero entrance: the headline rises word by word, the rest follows ---- */
.hero .hl{display:inline-block;animation:hlIn .95s cubic-bezier(.2,.75,.2,1) calc(.14s + var(--i,0) * .075s) both}
@keyframes hlIn{from{opacity:0;transform:translateY(.5em) rotate(1.5deg)}to{opacity:1;transform:none}}
.hero-badge,.hero-sub,.msel,.hero-btns,.hero-note{animation:heroUp .85s cubic-bezier(.2,.7,.2,1) both}
.hero-badge{animation-delay:.04s}
.hero-sub{animation-delay:.58s}
.msel{animation-delay:.68s}
.hero-btns{animation-delay:.78s}
.hero-note{animation-delay:.88s}
@keyframes heroUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* a single light sweep across the badge once the copy has landed */
.hero-badge{position:relative;overflow:hidden}
.hero-badge::after{
  content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-120%);
  background:linear-gradient(100deg,transparent 30%,rgb(255 255 255 / .75) 50%,transparent 70%);
  animation:badgeSweep 1.4s cubic-bezier(.4,0,.2,1) 1.25s 1 both;
}
@keyframes badgeSweep{to{transform:translateX(120%)}}

/* ---- provider rail: two marquees, providers one way, model names the other ---- */
.rail-set{flex-wrap:wrap;justify-content:center}
.js .rail-tr.is-dup{flex-wrap:nowrap;justify-content:flex-start;width:max-content;animation:railMove 60s linear infinite}
.js .rail-tr.is-dup .rail-set{flex-wrap:nowrap;flex:none}
.js .rail-rev.is-dup{animation-direction:reverse;animation-duration:74s}
.rail-models{margin-top:12px}
.rm{
  display:inline-flex;align-items:center;white-space:nowrap;margin:3px 6px;padding:5px 13px;
  font-family:var(--mono);font-size:var(--fs-sm);font-weight:500;color:var(--mut);
  background:rgb(255 255 255 / .55);border:1px solid var(--glass-brd);border-radius:var(--rad-pill);
}
.rm::before{content:"";width:6px;height:6px;margin-right:8px;border-radius:50%;background:var(--blue-l);flex:none}

/* ---- Zework mark (vector redraw; the remote logo image is not allowed by the CSP) ---- */
.zw-logo{display:inline-flex;align-items:center;gap:10px}
.zw-logo .zw-ic{width:32px;height:32px;flex:none}
.zw-logo b{font-size:24px;font-weight:700;letter-spacing:-.02em;color:#1A1A1A;line-height:1}
.zw-eyebrow{margin-bottom:10px}

/* ---- Nultron card ---- */
.dl-pre{
  display:inline-block;margin-left:2px;padding:1px 7px;border-radius:var(--rad-pill);
  font-size:var(--fs-2xs);font-weight:700;letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--amber);background:var(--amber-x);border:1px solid var(--amber-xx);vertical-align:1px;
}
.dlp-note{font-size:var(--fs-sm);color:var(--mut)}
.code-note-pad{padding:0 16px 16px}
.code-note-pad2{padding:12px 16px 16px}
.ex-lead{margin:0 0 8px}
.ex-legend .lg-off{background:var(--line)}
.ex-legend .lg-gw{background:var(--blue)}

/* ---- live request: a typed curl call and a streamed reply ---- */
.stream{
  position:relative;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  margin:0 0 var(--stack);
  background:linear-gradient(180deg,rgb(255 255 255 / .42),rgb(255 255 255 / 0) 34%),var(--glass);
  border:1px solid var(--glass-brd);border-radius:var(--rad-l);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--glass-sh);overflow:hidden;
}
.stream .cc-hd .flag{margin-left:auto}
.stream-req{min-width:0;border-right:1px solid var(--glass-brd)}
.stream-code{
  margin:0;padding:18px 20px 20px;font-family:var(--mono);font-size:var(--fs-md);line-height:1.8;color:var(--ink);
  white-space:pre;overflow-x:auto;tab-size:2;scrollbar-width:thin;
}
.stream-code code{font-size:inherit}
.stream-code .k{color:var(--blue);font-weight:700}
.stream-code .u{color:var(--blue-d)}
.stream-code .f{color:var(--mut);font-weight:600}
.stream-code .s{color:var(--teal)}
.stream-code .p{color:var(--indigo)}
.stream-code .cur,.stream-txt .cur{height:1.05em;width:7px;margin-left:2px;vertical-align:-.15em;color:var(--blue)}
.stream-res{min-width:0;display:flex;flex-direction:column;background:rgb(255 255 255 / .28)}
.stream-st{
  margin-left:auto;font-family:var(--mono);font-size:var(--fs-xs);font-weight:700;padding:2px 9px;border-radius:var(--rad-pill);
  color:var(--teal);background:var(--teal-x);border:1px solid var(--teal-xx);
  transition:opacity .25s ease,transform .35s cubic-bezier(.2,1.5,.4,1);
}
.stream-st.is-wait{opacity:.35;transform:scale(.86)}
.stream-body{flex:1;display:flex;flex-direction:column;gap:12px;padding:16px 18px 18px}
.stream-meta{display:flex;flex-wrap:wrap;gap:6px}
.stream-meta span{
  font-family:var(--mono);font-size:var(--fs-xs);color:var(--mut);background:var(--bg-alt);
  border:1px solid var(--line);border-radius:var(--rad-s);padding:2px 8px;
}
.stream-msg{
  position:relative;border:1px solid var(--blue-xx);border-radius:var(--rad-m);
  background:linear-gradient(180deg,#fff,rgb(239 246 255 / .7));padding:12px 14px 14px;min-height:7.6em;
}
.stream-role{
  display:inline-block;margin-bottom:6px;font-family:var(--mono);font-size:var(--fs-2xs);font-weight:700;
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--blue);
}
.stream-txt{font-size:var(--fs-base);line-height:var(--lh-body);color:var(--ink)}
.stream-txt .tk{display:inline;animation:tkIn .32s ease-out both}
@keyframes tkIn{from{opacity:0}to{opacity:1}}
.stream-chunk{
  font-family:var(--mono);font-size:var(--fs-xs);color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border-left:2px solid var(--teal-l);padding:2px 0 2px 10px;
}
.stream-chunk.is-live{color:var(--teal)}
.stream-replay{
  align-self:flex-start;margin-top:auto;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px;
  font-size:var(--fs-base);font-weight:600;color:var(--blue);background:var(--bg);border:1px solid var(--line);
  border-radius:var(--rad-pill);box-shadow:var(--sh-card);transition:border-color .15s ease,color .15s ease;
}
.stream-replay:hover{border-color:var(--blue-l);color:var(--blue-d)}
.stream-replay svg{width:15px;height:15px}
.stream-replay[disabled]{opacity:.5;cursor:default}
@media (max-width:900px){
  .stream{grid-template-columns:minmax(0,1fr)}
  .stream-req{border-right:0;border-bottom:1px solid var(--glass-brd)}
}
@media (max-width:640px){.stream-code{font-size:var(--fs-sm);padding:14px 14px 16px}}

/* ---- cards: a pointer-following light on the surface and the border, plus a small tilt ---- */
.fx{position:relative}
.fx.is-hot{
  background-image:radial-gradient(460px circle at var(--gx,50%) var(--gy,50%),rgb(59 130 246 / .11),transparent 46%);
}
.fx::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;
  background:radial-gradient(240px circle at var(--gx,50%) var(--gy,50%),rgb(37 99 235 / .7),rgb(34 211 238 / .25) 40%,transparent 66%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  opacity:0;transition:opacity .35s ease;
}
.fx.is-hot::before{opacity:1}
.tools,.mods,.secu,.probs,.zw-stack{perspective:1200px}

/* ---- loops idle while their section is off-screen ---- */
.is-off,.is-off::before,.is-off::after,.is-off *,.is-off *::before,.is-off *::after{animation-play-state:paused!important}

/* ---- footer ---- */
.foot-co{margin:-6px 0 10px;font-size:var(--fs-sm)}
.foot-lang{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:var(--fs-base)}
.foot .foot-lang a{display:inline-flex;align-items:center;min-height:44px;margin:0}
.foot .foot-lang a[aria-current="page"]{color:var(--ink);font-weight:600}
.foot a{min-height:24px}

/* ---- help widget: FAQ only, contact goes to dpscloud.co.id ---- */
.cs-switch{display:inline-flex;align-items:center;min-height:32px;text-decoration:none}
.cs-msg .cs-link{display:inline-flex;align-items:center;margin-top:10px;font-weight:600;color:var(--blue);text-decoration:underline;text-underline-offset:3px}

/* ---- 404 ---- */
.nf{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:48px 16px}
.nf-card{
  position:relative;z-index:1;width:min(560px,100%);text-align:center;padding:40px 28px 34px;
  background:linear-gradient(180deg,rgb(255 255 255 / .5),rgb(255 255 255 / 0) 34%),var(--glass);
  border:1px solid var(--glass-brd);border-radius:var(--rad-l);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--glass-sh),var(--sh-panel);
  animation:heroUp .8s cubic-bezier(.2,.7,.2,1) both;
}
.nf-mark{width:64px;height:54px;margin:0 auto 18px}
.nf-code{font-family:var(--mono);font-size:var(--fs-sm);font-weight:700;letter-spacing:var(--track-label);color:var(--blue);margin-bottom:10px}
.nf h1{font-size:var(--fs-4xl);line-height:var(--lh-tight);letter-spacing:-.02em;font-weight:800;margin-bottom:8px}
.nf p{color:var(--mut);margin-bottom:6px}
.nf p[lang="en"]{font-size:var(--fs-base)}
.nf-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.nf-btns .btn{min-height:44px}

/* ---- reduced motion: final frames, no loops ---- */
@media (prefers-reduced-motion:reduce){
  .aurora i,.aurora::before,.hero .hl,.hero-badge,.hero-badge::after,.hero-sub,.msel,.hero-btns,.hero-note,.nf-card{animation:none!important}
  .hero-badge::after{display:none}
  .nav,.nav-sheet{transition:none}
  .nav.is-scrolled{transform:translateX(-50%)}
  .js .rail-tr.is-dup{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .js .rail-tr.is-dup .rail-set{flex-wrap:wrap}
  .js .rail-tr.is-dup .rail-set+.rail-set{display:none}
  .stream-txt .tk{animation:none}
  .stream .cur{display:none}
  .stream-st{transition:none}
  .fx::before{transition:none}
}

/* ---- review fixes ---- */
.nav-sheet .btn-p,.nav-sheet .btn-p:hover{color:#fff;background:linear-gradient(135deg,var(--blue) 0%,var(--blue-2) 100%)}
.mock-bar .fname{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock-bar .flag,.cc-hd .flag{flex:none;white-space:nowrap}
.cc-hd .flag{margin-left:auto}
.term-c{white-space:normal;overflow-wrap:anywhere;overflow:visible;line-height:1.6}
@media (min-width:961px){.secu .sc:nth-child(5){grid-column:1 / -1}}

/* ---- tap targets: 44px minimum ---- */
.skip{display:inline-flex;align-items:center;min-height:44px}
.nav-brand{min-height:44px}
.ksw,.ksw[aria-checked="false"]{width:44px;height:44px;margin:-12px -5px;background:transparent}
.ksw::before{content:"";position:absolute;left:5px;top:12px;width:34px;height:20px;border-radius:999px;background:var(--blue);transition:background .2s ease}
.ksw[aria-checked="false"]::before{background:var(--line-2)}
.ksw::after{top:14px;left:21px}
.ksw[aria-checked="false"]::after{left:7px}
.ksw:focus-visible{outline-offset:-4px}
@media (max-width:900px),(pointer:coarse){
  .msel-btn{width:44px;height:44px}
  .msel-row{gap:8px}
  .hs-dot,.prob-dot{width:44px;height:44px}
  .hs-dots,.prob-dots{gap:0}
  .prob-arw{width:44px;height:44px}
  .rt-tabs button{min-height:44px;padding:0 14px}
  .rt-pwr{width:44px;height:44px}
  .cpy{min-height:44px;padding:0 14px}
  .tool a{min-height:44px}
  .qd-acts .btn{min-height:44px}
  .foot a{display:flex;align-items:center;min-height:44px;margin-bottom:0}
  .cs-topic{min-height:44px}
  .cs-close{width:44px;height:44px}
  .cs-switch{min-height:44px}
}
@media (prefers-reduced-motion:reduce){.ksw::before{transition:none}}
.term-c .nw{white-space:nowrap}
/* the single-column hero must not grow to its widest child (the mock title bar) */
@media (max-width:960px){.hero-in{grid-template-columns:minmax(0,1fr)}}
.mock-bar .flag{flex:none}
@media (max-width:400px){.mock-bar .flag{padding:3px 6px;letter-spacing:-.02em}}

/* ---- AA text contrast: the accent cyan/sky/amber/rose and the faint grey stay for fills, icons
   and dots; text set in them uses the -700 shade of the same family (>= 4.5:1 on white/tints) ---- */
:root{--teal-t:#0E7490;--sky-t:#0369A1;--amber-t:#B45309;--rose-t:#BE123C}
#masalah,#integrasi{--acc-t:var(--sky-t)}
#solusi,#keamanan{--acc-t:var(--teal-t)}
.eyebrow,.tlink{color:var(--acc-t,var(--acc))}
.probs .prob:nth-child(1){--pc-t:var(--sky-t)}
.cost{color:var(--pc-t,var(--pc,var(--blue)))}
.chart-card .gbar:nth-child(2) .gbar-v{color:var(--teal-t)}
.g1-code s,.k4-st,.lg-r .lg-save,.sc-chip.on,.pt-m,.stream-code .s,.stream-chunk.is-live,.stream-st{color:var(--teal-t)}
.hs-toast.bad,.k4-n.dead,.rt-meter .bad,.rt-badge.bad,.tag.off{color:var(--rose-t)}
.rt-lab-fb,.dl-pre{color:var(--amber-t)}
.g1-rh span,.pt-lb,.pt-gone{color:var(--mut)}
/* mute grey: #64748B measured 3.5-4.5:1 on the tinted glass and hero fogs; one step darker in
   the same slate family keeps the hierarchy and clears 4.5:1 there (6.4:1 on white) */
:root{--mut:#4F5E73;--teal-t:#155E75}
/* white text on the primary gradient: start at the hover blue so the light end stays >= 4.5:1 */
.btn-p{background:linear-gradient(135deg,var(--blue-d) 0%,var(--blue) 100%)}
.nav-sheet .btn-p,.nav-sheet .btn-p:hover{background:linear-gradient(135deg,var(--blue-d) 0%,var(--blue) 100%)}
/* blue text sitting on blue tints */
.hero-badge,.zw-chip.hl,.tool a,.tool li code,.msel-out b{color:var(--blue-d)}
/* katalog endpoint bar: label fills dark enough for white text */
.ep-s3{--epc:#64748B}
.ep-s4{--epc:var(--teal-t)}
/* avatar initials on the cyan row */
.emp .emp-r:nth-child(3){--gc:var(--teal-t);--gc-d:#164E63}