html{font-size:16px}
@media (min-width:1600px){html{font-size:min(calc(100vw / 96),32px)}}
:root{
  --ink:#172B4D; --ink-2:#334155; --steel:#5B6B82; --mute:#94A3B8; --line:#DCE5F0; --line-2:#E8EEF5;
  --paper:#FFFFFF; --bg:#F7FAFC; --soft:#F2F6FB; --sky:#EAF1F8; --navy:#172B4D;
  --blue:#1D4ED8; --blue-h:#1E40AF; --blue-soft:#EFF6FF; --blue-line:#C9DAF8;
  --amber:#F5B518; --amber-d:#9A6B00; --amber-soft:#FFF7DB;
  --ok:#1F9D55; --ok-ink:#166534; --ok-soft:#ECFDF3; --red:#D92D20; --red-soft:#FEF3F2;
  --F:#7A5CD6; --VI:#E8A600; --AG:#2F6FE0; --TR:#0F9E8E; --RB:#E5533D; --SP:#64748B;
  --display:"Sora",system-ui,sans-serif; --body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:0.875rem; --shadow:0 0.0625rem 0.125rem rgba(23,43,77,.04),0 0.375rem 1.25rem rgba(23,43,77,.05);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--body);font-size:1rem;line-height:1.6;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:0.1875rem solid rgba(29,78,216,.45);outline-offset:0.125rem}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.2;margin:0;letter-spacing:-.015em;color:var(--ink)}
h1 em,h2 em,h3 em{font-style:normal;color:var(--blue)}
p{margin:0}
.num{font-variant-numeric:tabular-nums}
[hidden]{display:none !important}
.ico-i{width:1.125rem;height:1.125rem;flex:none}

/* ---------- buttons, chips ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;cursor:pointer;padding:0.6875rem 1.125rem;border-radius:0.625rem;border:0.0938rem solid var(--blue);background:var(--blue);color:#fff;font-weight:700;font-size:0.9375rem;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s,box-shadow .15s}
.btn:hover{background:var(--blue-h);border-color:var(--blue-h);text-decoration:none}
.btn svg{width:1.0625rem;height:1.0625rem}
.btn.primary{box-shadow:0 0.1875rem 0.5rem rgba(29,78,216,.16)}
.btn.ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--soft);border-color:#C3D0E0}
.btn.yellow{background:var(--amber);border-color:#E4A60C;color:var(--ink)}
.btn.yellow:hover{background:#F7C238}
.btn.soft{background:var(--blue-soft);border-color:var(--blue-soft);color:var(--blue)}
.btn.soft:hover{background:#E0ECFF}
.btn.sm{padding:0.4375rem 0.75rem;font-size:0.875rem;border-radius:0.5625rem}
.btn.white{background:#fff;border-color:#fff;color:var(--ink)}
.btn.white:hover{background:#F2F6FB;border-color:#F2F6FB}
.btn.navy{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.navy:hover{background:#0F1F3A;border-color:#0F1F3A}
.btn.wa{background:#1FA855;border-color:#1FA855;color:#fff}
.btn.wa:hover{background:#178A45;border-color:#178A45}
.btn svg[viewBox="0 0 24 24"]{flex:none}
.btn[disabled]{opacity:.45;cursor:default}
.chip{display:inline-flex;align-items:center;gap:0.375rem;font-size:0.7812rem;font-weight:600;padding:0.125rem 0.5625rem;border-radius:62.4375rem;background:var(--soft);color:var(--steel);border:0.0625rem solid var(--line-2);white-space:nowrap;line-height:1.6}
.chip.code{font-family:var(--body);font-weight:800;font-size:0.7812rem;letter-spacing:.02em;border-radius:0.4375rem;background:var(--navy);color:#fff;border-color:var(--navy)}
.chip.perdana{background:var(--amber-soft);color:#7A5300;border-color:#F6DE97}
.chip.katalog{background:var(--blue-soft);color:var(--blue);border-color:var(--blue-line)}
.chip.pemasok{background:#E6F6F3;color:#0B6B60;border-color:#B8E4DC}
.chip.lock{background:#F1F4F8;color:var(--steel)}
.chip.done{background:var(--ok-soft);color:var(--ok-ink);border-color:#BBE5CB}
.chip.soon{background:#F4F1FC;color:#55419D;border-color:#DFD7F5}
.chip.open{background:var(--blue-soft);color:var(--blue);border-color:var(--blue-line)}
.dot{width:0.5rem;height:0.5rem;border-radius:50%;display:inline-block;background:currentColor}
.lang{display:inline-flex;border-radius:0.625rem;padding:0.1875rem;gap:0.125rem;background:#fff;border:0.0625rem solid var(--line)}
.lang button{all:unset;cursor:pointer;padding:0.3125rem 0.6875rem;border-radius:0.4375rem;font-weight:600;font-size:0.8438rem;color:var(--steel)}
.lang button[aria-pressed="true"]{background:var(--navy);color:#fff}
.lang button:focus-visible{outline:0.125rem solid var(--blue)}

/* ---------- brand ---------- */
.brand{display:flex;gap:0.6875rem;align-items:center;cursor:pointer;text-decoration:none;color:inherit}
.brand:hover{text-decoration:none}
.brand b{display:block;font-family:var(--display);font-size:0.9062rem;font-weight:800;color:var(--ink);line-height:1.15;letter-spacing:.05em;text-transform:uppercase}
.brand small{display:block;font-size:0.75rem;color:var(--steel);letter-spacing:.02em}

/* ---------- guest top nav ---------- */
.gnav{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:1.375rem;padding:0.75rem 2rem;background:var(--amber);color:var(--ink);box-shadow:0 0.1875rem 1.125rem rgba(23,43,77,.08);border-bottom:0.0625rem solid #E0A30E;--bm-bg:#172B4D;--bm-fg:#F5B518}
.gnav .brand small{color:rgba(23,43,77,.78)}
.gnav nav{display:flex;gap:0.25rem;margin-left:0.75rem}
.gnav nav button{all:unset;cursor:pointer;padding:0.5rem 0.8125rem;border-radius:0.5625rem;font-weight:600;color:var(--ink)}
.gnav nav button:hover{background:rgba(255,255,255,.45)}
.gnav .btn{background:var(--navy);border-color:var(--navy);color:#fff}
.gnav .btn:hover{background:#0F1F3A;border-color:#0F1F3A}
.gnav .btn.white{background:#fff;border-color:#fff;color:var(--ink)}
.gnav .btn.white:hover{background:#FFF7DB}
.gnav nav{align-items:center}
.gnav nav button{white-space:nowrap}
.dd{position:relative}
.ddb{display:inline-flex !important;align-items:center;gap:0.3125rem}
.ddb svg{width:1rem;height:1rem;transition:transform .2s}
.ddb[aria-expanded="true"] svg{transform:rotate(180deg)}
.ddb[aria-expanded="true"]{background:rgba(255,255,255,.45)}
.ddp{position:fixed;z-index:40;background:#fff;border:0.0625rem solid var(--line);border-radius:1rem;box-shadow:0 1.25rem 2.75rem rgba(23,43,77,.18);padding:0.5rem;display:flex;flex-direction:column;gap:0.125rem}
.ddp[hidden]{display:none}
.ddi{all:unset;cursor:pointer;box-sizing:border-box;display:grid;grid-template-columns:2.375rem minmax(0,1fr) auto;gap:0.75rem;align-items:center;padding:0.625rem;border-radius:0.6875rem}
.ddi:hover,.ddi:focus-visible{background:var(--soft)}
.ddi .di{width:2.375rem;height:2.375rem;border-radius:0.625rem;display:grid;place-items:center;background:color-mix(in srgb,var(--rc) 14%,#fff);color:var(--rc)}
.ddi .di svg{width:1.25rem;height:1.25rem}
.ddi b{display:block;font-size:0.9062rem;color:var(--ink)}
.ddi small{display:block;font-size:0.7812rem;color:var(--steel);line-height:1.35}
.ddi em{font-style:normal;font-size:0.75rem;font-weight:700;color:var(--steel);white-space:nowrap}
.ddall{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:0.5rem;margin-top:0.25rem;padding:0.6875rem 0.75rem;border-top:0.0625rem solid var(--line-2);font-weight:700;font-size:0.875rem;color:var(--blue)}
.ddall svg{width:1rem;height:1rem}
.ddall:hover{background:var(--blue-soft);border-radius:0.625rem}
.waf{position:fixed;right:1.25rem;bottom:1.25rem;z-index:30;display:flex;align-items:center;gap:0.5625rem;padding:0.75rem 1.125rem;border-radius:62.4375rem;background:#1FA855;color:#fff;font-weight:700;font-size:0.9062rem;box-shadow:0 0.625rem 1.625rem rgba(23,43,77,.25);text-decoration:none}
.waf:hover{background:#178A45;text-decoration:none}
.waf[hidden]{display:none}
#program,#simulasi,#cara,#platform{scroll-margin-top:5.25rem}
.gnav .lang,.topbar .lang{border-color:#E0A30E}
.gnav nav button[aria-current="page"]{background:var(--navy);color:#fff}
.gnav nav button:focus-visible{outline:0.125rem solid var(--blue)}
.gnav .sp{flex:1}

/* ---------- app shell ---------- */
.shell{display:grid;grid-template-columns:16.25rem minmax(0,1fr);min-height:100vh;background:linear-gradient(90deg,#fff 16.1875rem,var(--line) 16.1875rem,var(--line) 16.25rem,transparent 16.25rem)}
body.guest .shell{background:none}
body.guest .shell{grid-template-columns:minmax(0,1fr)}
body.guest .side{display:none}
body:not(.guest) .gnav{display:none}
.side{position:sticky;top:0;height:100vh;overflow:auto;background:#fff;border-right:0.0625rem solid var(--line);color:var(--ink);padding:1.25rem 0.875rem;display:flex;flex-direction:column;gap:1.375rem}
.side .brand{padding:0 0.375rem}
.side .brand b{font-size:0.7812rem}
.snav{display:flex;flex-direction:column;gap:0.1875rem}
.snav .grp{font-size:0.7188rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);padding:0.625rem 0.75rem 0.25rem}
.snav button{all:unset;cursor:pointer;display:flex;align-items:center;gap:0.75rem;padding:0.5625rem 0.75rem;border-radius:0.625rem;font-weight:600;font-size:0.9375rem;color:var(--ink-2)}
.snav button:hover{background:var(--soft);color:var(--ink)}
.snav button:focus-visible{outline:0.1875rem solid rgba(29,78,216,.4);outline-offset:-0.1875rem}
.snav button[aria-current="page"]{background:var(--navy);color:#fff}
.snav svg{width:1.125rem;height:1.125rem;flex:none}
.side-foot{margin-top:auto;border:0.0625rem solid var(--line);background:var(--soft);border-radius:0.75rem;padding:0.75rem;font-size:0.8125rem;color:var(--steel)}
.side-foot b{display:block;color:var(--ink);font-size:0.875rem;font-weight:700}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:1rem;padding:0.75rem 1.875rem;background:var(--amber);border-bottom:0.0625rem solid #E0A30E;color:var(--ink)}
.topbar .crumbs,.topbar .crumbs button,.topbar .demo,.topbar .who small{color:rgba(23,43,77,.78)}
.topbar .crumbs .sep{color:rgba(23,43,77,.45)}
.topbar .crumbs button:hover{color:var(--ink)}
.topbar .switch input{background:rgba(255,255,255,.65)}
.topbar .switch input:checked{background:var(--navy)}
.topbar .ava{background:#fff;color:var(--ink);border-color:#E0A30E}
.topbar .btn.ghost{border-color:#E0A30E}
body.guest .topbar{display:none}
.crumbs{flex:1;min-width:0;display:flex;gap:0.375rem;align-items:center;font-size:0.875rem;color:var(--steel);white-space:nowrap;overflow:hidden}
.crumbs button{all:unset;cursor:pointer;color:var(--steel)}
.crumbs button:hover{color:var(--blue)}
.crumbs button:focus-visible{outline:0.125rem solid var(--blue)}
.crumbs .cur{color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis}
.crumbs .sep{color:var(--mute)}
.who{display:flex;align-items:center;gap:0.625rem}
.ava{width:2.125rem;height:2.125rem;border-radius:50%;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);font-weight:700;font-size:0.8125rem;flex:none;border:0.0625rem solid var(--blue-line)}
.who b{display:block;font-size:0.875rem;line-height:1.2}
.who small{display:block;font-size:0.75rem;color:var(--steel)}
.demo{display:flex;align-items:center;gap:0.5rem;font-size:0.8125rem;color:var(--steel)}
.switch{position:relative;width:2.375rem;height:1.375rem;flex:none}
.switch input{appearance:none;margin:0;width:2.375rem;height:1.375rem;border-radius:0.6875rem;background:#CBD5E1;cursor:pointer;transition:background .2s}
.switch input:checked{background:var(--blue)}
.switch input::after{content:"";position:absolute;top:0.1875rem;left:0.1875rem;width:1rem;height:1rem;border-radius:50%;background:#fff;transition:left .2s}
.switch input:checked::after{left:1.1875rem}
.page{padding:1.875rem 1.875rem 4rem;max-width:82.5rem;width:100%;margin:0 auto}
.page.full{max-width:none;padding:0 !important}
.view-enter{animation:enter .3s ease-out}
@keyframes enter{from{opacity:0;transform:translateY(0.375rem)}to{opacity:1;transform:none}}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1.375rem}
.head h1{font-size:2rem}
.head p{color:var(--steel);max-width:68ch;margin-top:0.375rem}
.card{background:var(--paper);border:0.0625rem solid var(--line);border-radius:var(--r);box-shadow:0 0.0625rem 0.125rem rgba(23,43,77,.03)}
.pad{padding:1.25rem}
.muted{color:var(--steel)}
.small{font-size:0.875rem}
.eyebrow{display:inline-flex;align-items:center;gap:0.5rem;font-size:0.7812rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--blue)}
.eyebrow .dot{color:var(--ok)}

/* ---------- landing ---------- */
.hero{background:linear-gradient(180deg,#fff 0%,#F5F8FC 100%);position:relative;overflow:hidden;border-bottom:0.0625rem solid var(--line-2)}
.hero-in{position:relative;max-width:82.5rem;margin:0 auto;padding:3.75rem 2rem 4rem;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:3.25rem;align-items:center}
.hero h1{font-size:3.125rem;font-weight:700;line-height:1.12;max-width:15ch;margin-top:0.875rem}
.hero .lead{font-size:1.1562rem;color:var(--ink-2);max-width:48ch;margin-top:1.125rem}
.hero .ctas{display:flex;gap:0.625rem;margin-top:1.75rem;flex-wrap:wrap}
.hero .partner{display:flex;align-items:center;gap:0.75rem;margin-top:2.125rem;font-size:0.875rem;color:var(--steel);flex-wrap:wrap}
.hero .partner b{color:var(--ink);font-family:var(--display);font-size:0.9062rem;font-weight:700}
.hero .partner .x{color:var(--mute)}
.hero .partner .akti{border:0.0938rem solid var(--ink);border-radius:0.375rem;padding:0 0.5rem;font-family:var(--display);font-weight:700;color:var(--ink);letter-spacing:.06em;font-size:0.8438rem}
.herosim{position:relative;border-radius:1.25rem;overflow:hidden;aspect-ratio:3/2;background:linear-gradient(180deg,#F6F9FD 0%,#E4EDF7 100%);border:0.0625rem solid var(--line);box-shadow:0 1.5rem 3rem rgba(23,43,77,.10)}
.herosim .line3d{position:absolute;left:50%;top:40%;width:128%;transform:translate(-50%,-50%);display:block}
.herosim .amr{position:absolute;right:3%;bottom:6%;width:34%;display:block;filter:drop-shadow(0 0.625rem 0.875rem rgba(23,43,77,.18))}
.herosim .tag{position:absolute;z-index:2;left:1rem;top:1rem;display:inline-flex;align-items:center;gap:0.4375rem;background:#fff;border:0.0625rem solid var(--line);border-radius:62.4375rem;padding:0.25rem 0.6875rem;font-size:0.7812rem;font-weight:700;color:var(--ink)}
.herosim .tag .dot{color:var(--ok);animation:blink 1.6s steps(1) infinite}
.herosim .float{all:unset;box-sizing:border-box;cursor:pointer;position:absolute;left:1rem;bottom:1rem;display:flex;gap:0.625rem;align-items:center;background:rgba(255,255,255,.95);backdrop-filter:blur(0.375rem);border:0.0625rem solid var(--line);border-radius:0.75rem;padding:0.625rem 0.875rem 0.625rem 0.625rem;box-shadow:var(--shadow);max-width:calc(100% - 2rem)}
.herosim .float canvas{width:6rem;height:3.375rem;border-radius:0.5rem;flex:none;display:block}
.herosim .float:hover{border-color:#B9C8DD}
.herosim .float:focus-visible{outline:0.1875rem solid rgba(29,78,216,.45)}
.herosim .float b{display:block;font-size:0.875rem;line-height:1.3}
.herosim .float span span{display:block;font-size:0.7812rem;color:var(--steel)}
.console{background:#fff;border:0.0625rem solid var(--line);border-radius:1.125rem;padding:1rem;box-shadow:var(--shadow)}
.console-top{display:flex;justify-content:space-between;align-items:center;gap:0.75rem;padding:0.125rem 0.25rem 0.875rem;font-size:0.8125rem;color:var(--steel);flex-wrap:wrap}
.console-top .live{display:flex;gap:0.5rem;align-items:center;color:var(--ink);font-weight:700;font-size:0.9062rem}
.console-top .live .dot{color:var(--ok);animation:blink 1.6s steps(1) infinite}
@keyframes blink{50%{opacity:.3}}
.monitors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0.75rem}
.mon{display:flex;flex-direction:column;border-radius:0.75rem;overflow:hidden;border:0.0625rem solid var(--line);background:#fff;text-decoration:none;color:inherit;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.mon:hover{border-color:#B9C8DD;box-shadow:var(--shadow);text-decoration:none}
.mon .scr{position:relative;aspect-ratio:16/9;background:var(--sky)}
.mon canvas{position:absolute;inset:0;width:100%;height:100%}
.mon .lbl{display:flex;flex-direction:column;gap:0.0625rem;padding:0.625rem 0.75rem 0.75rem;font-size:0.8125rem;color:var(--steel);border-top:0.0625rem solid var(--line-2)}
.mon .lbl b{color:var(--ink);font-size:0.875rem;line-height:1.35;font-weight:700}
.mon .lbl i{width:0.5rem;height:0.5rem;border-radius:50%;display:inline-block;margin-right:0.375rem}
.hero3-in{max-width:85rem;margin:0 auto;padding:2.75rem 2rem 3.25rem;display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr);gap:2.5rem;align-items:center}
.hero3 h1{font-size:2.5rem;line-height:1.15;margin-top:0.75rem}
.hero3 .lead{font-size:1.0625rem;margin-top:0.875rem}
.facts{list-style:none;margin:1.25rem 0 0;padding:0;display:flex;flex-direction:column;gap:0.625rem}
.facts li{display:flex;gap:0.75rem;align-items:center}
.facts .fi{width:2.375rem;height:2.375rem;border-radius:0.625rem;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;flex:none}
.facts .fi svg{width:1.1875rem;height:1.1875rem}
.facts b{display:block;font-size:0.9375rem}
.facts small{display:block;font-size:0.8125rem;color:var(--steel)}
.hero3 .ctas{margin-top:1.375rem}
.hero3 .partner{margin-top:1.125rem}
.hplant{border:0.0625rem solid var(--line);border-radius:1.25rem;overflow:hidden;background:#E9EFF6;box-shadow:0 1.5rem 3.125rem rgba(23,43,77,.10)}
#plantHero{display:block;width:100%;aspect-ratio:2/1}
.hcap{display:flex;align-items:center;gap:0.625rem;padding:0.625rem 0.875rem;background:#fff;border-top:0.0625rem solid var(--line-2);font-size:0.8438rem;color:var(--steel);min-height:2.75rem}
.hcap svg{width:0.9375rem;height:0.9375rem}
.hcap b{color:var(--ink)}
.hcap .cdot{width:0.625rem;height:0.625rem;border-radius:50%;flex:none}
.rcard.calm .rhead{display:flex;align-items:center;gap:0.875rem;padding:1.125rem 1.375rem 0}
.rcard.calm .ri{width:2.875rem;height:2.875rem;border-radius:0.75rem;display:grid;place-items:center;background:color-mix(in srgb,var(--rc) 14%,#fff);color:var(--rc);flex:none}
.rcard.calm .ri svg{width:1.5rem;height:1.5rem}
.rcard.calm .rhead h3{font-size:1.25rem}
.rcard.calm .rhead small{font-size:0.8125rem;color:var(--steel);font-weight:600}
.rcard.calm .body{padding-top:0.75rem}
.step.calm .sh2{display:flex;justify-content:space-between;align-items:center;padding:1.125rem 1.125rem 0}
.step.calm .si2{width:2.875rem;height:2.875rem;border-radius:0.75rem;display:grid;place-items:center;background:var(--navy);color:#fff}
.step.calm:nth-child(2) .si2{background:var(--amber);color:var(--ink)}
.step.calm:nth-child(3) .si2{background:#2B4A78}
.step.calm:nth-child(4) .si2{background:var(--ok)}
.step.calm .si2 svg{width:1.375rem;height:1.375rem}
.step.calm .n2{font-family:var(--display);font-weight:800;font-size:1.375rem;color:#D3DCE8}
.pscroll{position:relative}
.pplay{all:unset;cursor:pointer;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:0.625rem;padding:0.875rem 1.375rem;border-radius:62.4375rem;background:var(--navy);color:#fff;font-weight:800;font-size:0.9375rem;box-shadow:0 0.875rem 1.875rem rgba(23,43,77,.3)}
.pplay svg{width:1rem;height:1rem}
.pplay:hover{background:#0F1F3A}
.pplay:focus-visible{outline:0.1875rem solid rgba(29,78,216,.45)}
.pplay.on{top:auto;left:auto;right:0.875rem;bottom:0.875rem;transform:none;padding:0.5625rem 0.875rem;font-size:0.8438rem;background:rgba(23,43,77,.85)}
#pabrik{scroll-margin-top:5.25rem}
.hero2-in{max-width:82.5rem;margin:0 auto;padding:2.75rem 2rem 3.25rem}
.h2top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:2.5rem;align-items:end;margin-bottom:1.625rem}
.hero2 h1{font-size:2.875rem;max-width:17ch}
.hero2 .lead{margin-top:0;font-size:1.0938rem}
.hero2 .ctas{margin-top:1.125rem}
.hero2 .partner{margin-top:1.125rem}
.plantwrap{border:0.0625rem solid var(--line);border-radius:1.375rem;overflow:hidden;background:#E9EFF6;box-shadow:0 1.5rem 3.125rem rgba(23,43,77,.12)}
.ptop{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;flex-wrap:wrap;padding:0.75rem 1rem;background:#fff;border-bottom:0.0625rem solid var(--line-2)}
.ptag{display:inline-flex;align-items:center;gap:0.5rem;font-weight:800;font-size:0.875rem}
.ptag .dot{color:var(--ok);animation:blink 1.6s steps(1) infinite}
.pfil{display:flex;gap:0.25rem;flex-wrap:wrap}
.pfil button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:0.4375rem;padding:0.375rem 0.6875rem;border-radius:0.5625rem;font-weight:600;font-size:0.8438rem;color:var(--ink-2);border:0.0625rem solid var(--line)}
.pfil button i{width:0.5625rem;height:0.5625rem;border-radius:50%}
.pfil button svg{width:0.75rem;height:0.75rem}
.pfil button:hover{background:var(--soft)}
.pfil button[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.pfil button:focus-visible{outline:0.1875rem solid rgba(29,78,216,.4)}
.pscroll{overflow-x:auto;overscroll-behavior-x:contain}
#plantCv{display:block;width:100%;aspect-ratio:2/1;min-width:45rem}
.pcap{display:flex;align-items:center;gap:0.875rem;padding:0.75rem 1rem;background:#fff;border-top:0.0625rem solid var(--line-2);min-height:4rem}
.pcap .cdot{width:0.75rem;height:0.75rem;border-radius:50%;flex:none}
.pcap .ctx{flex:1;min-width:0;display:flex;flex-direction:column}
.pcap .ctx b{font-size:0.9688rem}
.pcap .ctx span{font-size:0.8438rem;color:var(--steel);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cprog{display:flex;gap:0.1875rem;flex:none}
.cprog i{width:0.375rem;height:0.375rem;border-radius:50%;background:#DCE5F0}
.cprog i.on{width:1rem;border-radius:0.1875rem}
.stats{background:#fff;border-bottom:0.0625rem solid var(--line-2)}
.stats-in{max-width:82.5rem;margin:0 auto;padding:1.375rem 2rem;display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
.stat b{display:block;font-family:var(--display);font-size:2.125rem;font-weight:700;line-height:1.1;color:var(--ink)}
.stat span{font-size:0.875rem;color:var(--steel)}
.sect{max-width:82.5rem;margin:0 auto;padding:4.25rem 2rem 0.5rem}
.sect > h2{font-size:2.125rem;max-width:24ch}
.sect > p.sub{color:var(--steel);max-width:70ch;margin-top:0.625rem;font-size:1.0625rem}
.zone{background:#fff;border-top:0.0625rem solid var(--line-2);border-bottom:0.0625rem solid var(--line-2);margin-top:4.25rem;padding-bottom:4.25rem}
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:1.75rem}
.step{display:flex;flex-direction:column;overflow:hidden}
.step .ph{position:relative;aspect-ratio:3/2;background:var(--sky)}
.step .ph canvas{position:absolute;inset:0;width:100%;height:100%}
.step .ph img.iso{position:absolute;left:50%;top:52%;width:150%;transform:translate(-50%,-50%)}
.step .ph{overflow:hidden}
.step .ph .n{position:absolute;left:0.75rem;top:0.75rem;background:#fff;border-radius:0.5rem;padding:0.125rem 0.5625rem;font-weight:800;font-size:0.8125rem;color:var(--ink);box-shadow:0 0.0625rem 0.1875rem rgba(23,43,77,.12)}
.step .bd{padding:1rem 1.125rem 1.125rem;display:flex;flex-direction:column;gap:0.375rem;flex:1}
.step h3{font-size:1.25rem}
.step p{font-size:0.9062rem;color:var(--steel)}
.step .gate{margin-top:auto;padding-top:0.75rem;border-top:0.0625rem solid var(--line-2);display:flex;gap:0.5rem;align-items:flex-start;font-size:0.8438rem;color:var(--ink-2)}
.step .gate b{color:var(--blue);font-weight:700}
.step .gate svg{width:0.9375rem;height:0.9375rem;flex:none;margin-top:0.1875rem;color:var(--blue)}
.rgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.125rem;margin-top:1.75rem}
.rcard{display:flex;flex-direction:column;overflow:hidden}
.rcard .viz{position:relative;background:var(--sky);aspect-ratio:16/6.4;border-bottom:0.0625rem solid var(--line-2)}
.rcard .viz img,.rcard .viz canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rcard .viz img.fit{object-fit:contain;padding:0.75rem;background:linear-gradient(180deg,#F6F9FD,#E4EDF7)}
.rcard .body{padding:1.25rem 1.375rem;display:flex;flex-direction:column;gap:0.5rem}
.rcard h3{font-size:1.3125rem;display:flex;align-items:center;gap:0.625rem}
.rcard h3 i{width:0.625rem;height:0.625rem;border-radius:50%;background:var(--rc);display:inline-block;flex:none}
.rcard ul{margin:0.375rem 0 0;padding:0;list-style:none;font-size:0.9062rem;display:flex;flex-direction:column;gap:0.25rem}
.rcard li{display:flex;gap:0.5rem}
.rcard li .c{font-weight:700;color:var(--steel);width:3.125rem;flex:none;font-size:0.8125rem;padding-top:0.0625rem;white-space:nowrap}
.lines{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:1.75rem}
.line{overflow:hidden;display:flex;flex-direction:column}
.line .ph{position:relative;background:linear-gradient(180deg,#F4F8FC,#E6EEF7);aspect-ratio:16/8.6;overflow:hidden}
.line .ph img{position:absolute;left:50%;top:50%;width:122%;transform:translate(-50%,-50%)}
.line .ph .n{position:absolute;left:0.75rem;top:0.75rem;background:#fff;border-radius:0.5rem;padding:0.125rem 0.5625rem;font-weight:800;font-size:0.8125rem;box-shadow:0 0.0625rem 0.1875rem rgba(23,43,77,.12)}
.line .bd{padding:1rem 1.125rem 1.125rem;display:flex;flex-direction:column;gap:0.5rem;flex:1}
.line h3{font-size:1.1875rem}
.line p{font-size:0.9062rem;color:var(--steel)}
.line .cls{margin-top:auto;padding-top:0.75rem;border-top:0.0625rem solid var(--line-2);display:flex;flex-direction:column;gap:0.25rem}
.line .cls a{display:flex;justify-content:space-between;gap:0.625rem;font-weight:600;font-size:0.875rem}
.line .cls a span{color:var(--steel);font-weight:700;font-size:0.7812rem;flex:none;padding-top:0.0625rem}
.platform{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:2.25rem;align-items:center;margin-top:1.75rem}
.dev{position:relative;aspect-ratio:720/440;background-size:100% 100%;background-repeat:no-repeat}
.dev .scr{position:absolute;overflow:hidden;background:#fff;container-type:inline-size;border-radius:0.125rem}
.dev .scr.m{left:8.19%;top:11.59%;width:58.61%;height:53.41%}
.dev .scr.l{left:53.06%;top:50.91%;width:37.64%;height:34.77%}
.mini{position:absolute;inset:0;display:grid;grid-template-columns:17cqw minmax(0,1fr);font-family:var(--body);color:var(--ink)}
.mini .sb{background:#F5F8FC;border-right:0.0625rem solid var(--line);padding:3cqw 2cqw;display:flex;flex-direction:column;gap:1.4cqw}
.mini .sb .lg{width:4.6cqw;height:4.6cqw;border-radius:1cqw;background:var(--amber);margin-bottom:1.5cqw}
.mini .sb span{font-size:1.9cqw;padding:1cqw 1.4cqw;border-radius:1cqw;color:var(--steel);font-weight:600}
.mini .sb span.on{background:var(--navy);color:#fff}
.mini .mn{padding:3cqw 3.2cqw;display:flex;flex-direction:column;gap:2cqw;min-width:0}
.mini h4{font-size:3cqw;font-family:var(--display)}
.mini .sub{font-size:1.8cqw;color:var(--steel);margin-top:-1.4cqw}
.mini .ct{background:var(--blue-soft);border:0.0625rem solid var(--blue-line);border-radius:1.4cqw;padding:2cqw 2.4cqw;display:flex;justify-content:space-between;align-items:center;gap:2cqw}
.mini .ct b{display:block;font-size:2.1cqw;line-height:1.3}
.mini .ct small{display:block;font-size:1.6cqw;color:var(--steel)}
.mini .ct i{font-style:normal;background:var(--blue);color:#fff;font-size:1.6cqw;font-weight:700;padding:1cqw 1.8cqw;border-radius:1cqw;white-space:nowrap}
.mini .tl{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6cqw}
.mini .tl div{border:0.0625rem solid var(--line);border-radius:1.4cqw;padding:1.6cqw 2cqw}
.mini .tl b{display:block;font-family:var(--display);font-size:3.2cqw;line-height:1.15}
.mini .tl span{font-size:1.5cqw;color:var(--steel)}
.mini .bar{height:1cqw;border-radius:1cqw;background:var(--line-2);overflow:hidden}
.mini .bar i{display:block;height:100%;background:var(--blue);border-radius:1cqw}
.mini2{position:absolute;inset:0;padding:3.4cqw 4cqw;display:flex;flex-direction:column;gap:2.4cqw;font-family:var(--body)}
.mini2 .rw{display:flex;gap:1.6cqw;align-items:center}
.mini2 .rw em{font-style:normal;background:var(--navy);color:#fff;font-weight:800;font-size:2.2cqw;padding:.4cqw 1.4cqw;border-radius:1cqw}
.mini2 .rw span{font-size:2.2cqw;color:var(--steel)}
.mini2 h4{font-family:var(--display);font-size:3.6cqw;line-height:1.25}
.mini2 .vid{position:relative;flex:1;border-radius:1.6cqw;overflow:hidden;background:var(--sky);border:0.0625rem solid var(--line)}
.mini2 .vid canvas{position:absolute;inset:0;width:100%;height:100%}
.roles4{display:flex;flex-direction:column;gap:0.625rem}
.rolecard{all:unset;cursor:pointer;box-sizing:border-box;display:grid;grid-template-columns:2.875rem minmax(0,1fr) auto;gap:1rem;align-items:center;padding:1rem 1.125rem;border:0.0625rem solid var(--line);border-radius:1.125rem;background:#fff;transition:border-color .15s,box-shadow .15s}
.rolecard:hover{border-color:#B9C8DD;box-shadow:var(--shadow)}
.rolecard:focus-visible{outline:0.1875rem solid rgba(29,78,216,.4)}
.rolecard .ri{width:2.875rem;height:2.875rem;border-radius:0.875rem;display:grid;place-items:center;background:#fff;border:0.0625rem solid var(--line);box-shadow:0 0.375rem 0.875rem -0.5rem rgba(23,43,77,.3);color:var(--navy)}
.rolecard:hover .ri{background:var(--navy);color:#F5B518;border-color:var(--navy)}
.rolecard .go{transition:transform .15s}
.rolecard:hover .go{transform:translate(0.125rem,-0.125rem)}
.rolecard .ri svg{width:1.375rem;height:1.375rem}
.rolecard b{display:block;font-size:1rem;color:var(--ink);font-weight:700}
.rolecard span{font-size:0.875rem;color:var(--steel)}
.rolecard .go{color:var(--blue);width:1.25rem;height:1.25rem}
.ai-strip{margin-top:1.75rem;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:1.75rem;align-items:center;background:var(--blue-soft);border:0.0625rem solid var(--blue-line);border-radius:1.25rem;padding:2rem}
.ai-strip h3{font-size:1.625rem}
.ai-strip p{color:var(--ink-2);margin-top:0.625rem}
.six{display:grid;grid-template-columns:repeat(3,1fr);gap:0.625rem}
.six div{background:#fff;border:0.0625rem solid var(--blue-line);border-radius:0.75rem;padding:0.75rem 0.875rem}
.six b{display:block;font-family:var(--display);font-size:1.25rem;color:var(--blue)}
.six span{font-size:0.875rem;color:var(--ink)}
.foot{margin-top:4.25rem;background:#fff;border-top:0.0625rem solid var(--line);color:var(--steel);font-size:0.875rem}
.foot-in{max-width:82.5rem;margin:0 auto;padding:1.875rem 2rem 1.125rem;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:1.5rem}

.prog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.125rem;margin-top:1.75rem}
.pcard{padding:1.625rem;display:flex;flex-direction:column;gap:0.625rem;align-items:flex-start}
.pcard.co{background:linear-gradient(160deg,#FFFFFF 0%,#FFF7DB 100%);border-color:#F6DE97}
.pcard.st{background:linear-gradient(160deg,#FFFFFF 0%,#EFF6FF 100%);border-color:var(--blue-line)}
.pcard .pi{width:2.875rem;height:2.875rem;border-radius:0.75rem;display:grid;place-items:center;background:var(--navy);color:#fff}
.pcard.co .pi{background:var(--amber);color:var(--ink)}
.pcard .pi svg{width:1.5rem;height:1.5rem}
.pcard h3{font-size:1.375rem;margin-top:0.25rem}
.pcard .lead2{color:var(--ink-2)}
.pcard ul{list-style:none;margin:0.25rem 0 0.5rem;padding:0;display:flex;flex-direction:column;gap:0.4375rem;font-size:0.9375rem}
.pcard li{display:flex;gap:0.5625rem;align-items:flex-start}
.pcard li svg{width:1.0625rem;height:1.0625rem;flex:none;margin-top:0.1875rem;color:var(--ok)}
.pcard .btn{margin-top:auto}
.ctab{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem;align-items:center;background:var(--navy);border-radius:1.375rem;padding:2.125rem 2.25rem;color:#fff}
.ctab h2{color:#fff;font-size:1.75rem}
.ctab h2 em{color:var(--amber)}
.ctab p{color:#C3D2EA;margin-top:0.5rem;max-width:56ch}
.ctab .ctas{display:flex;gap:0.625rem;flex-wrap:wrap}
.foot-in .fb p{margin-top:0.625rem}
.foot-in .fl{display:flex;flex-direction:column;gap:0.375rem}
.foot-in .fl b{color:var(--ink);font-size:0.875rem}
.foot-in .fl a{color:var(--steel)}
.foot-in .fl a:hover{color:var(--blue)}
.foot-note{max-width:82.5rem;margin:0 auto;padding:0 2rem 1.625rem;font-size:0.8125rem;color:var(--mute)}
.ucl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0.75rem;margin-bottom:1rem}
.ucline{all:unset;cursor:pointer;box-sizing:border-box;background:#fff;border:0.0625rem solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s,box-shadow .15s}
.ucline .ph{position:relative;display:block;aspect-ratio:16/6.5;background:linear-gradient(180deg,#F4F8FC,#E6EEF7);overflow:hidden}
.ucline .ph img{position:absolute;left:50%;top:50%;width:118%;transform:translate(-50%,-50%)}
.ucline b{padding:0.625rem 0.875rem;font-size:0.9062rem}
.ucline:hover{border-color:#B9C8DD}
.ucline[aria-pressed="true"]{border-color:var(--navy);box-shadow:0 0 0 0.125rem var(--navy)}
.ucline:focus-visible{outline:0.1875rem solid rgba(29,78,216,.4)}
.ccard.uc .ul{font-size:0.7188rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--red)}
.ccard.uc .ul.s{color:var(--ok);margin-top:0.25rem}
.ccard.uc h3{font-size:1.0625rem;line-height:1.35}
.ccard.uc .fam{white-space:nowrap}
.ccard.uc .lns{font-size:0.7812rem;color:var(--steel);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ccard.uc .meta .go{margin-left:auto;color:var(--blue);display:flex}
.ccard.uc .meta .go svg{width:1.125rem;height:1.125rem}

/* ---------- login ---------- */
.login-wrap{display:grid;grid-template-columns:minmax(0,1fr) 27.5rem;gap:2rem;align-items:start}
.roles{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem}
.role{all:unset;cursor:pointer;box-sizing:border-box;border:0.0938rem solid var(--line);border-radius:0.75rem;padding:0.75rem;background:#fff;display:flex;flex-direction:column;gap:0.125rem}
.role b{font-weight:700}
.role span{font-size:0.8125rem;color:var(--steel);line-height:1.4}
.role[aria-checked="true"]{border-color:#E0A30E;box-shadow:0 0 0 0.1875rem rgba(245,181,24,.28);background:var(--amber)}
.role[aria-checked="true"] span{color:rgba(23,43,77,.82)}
.role:focus-visible{outline:0.1875rem solid rgba(29,78,216,.4)}
.field label{display:block;font-size:0.875rem;font-weight:600;margin-bottom:0.3125rem}
.field input{width:100%;padding:0.6875rem 0.75rem;border-radius:0.625rem;border:0.0938rem solid var(--line);background:#fff}
.field input:focus{outline:none;border-color:var(--blue)}

/* ---------- catalog ---------- */
.toolbar{display:flex;gap:0.625rem;align-items:center;flex-wrap:wrap;margin-bottom:1.375rem}
.tabs{display:inline-flex;gap:0.25rem;padding:0.25rem;background:var(--paper);border:0.0625rem solid var(--line);border-radius:0.75rem;flex-wrap:wrap}
.tabs button{all:unset;cursor:pointer;padding:0.4375rem 0.8125rem;border-radius:0.5625rem;font-weight:600;font-size:0.9062rem;color:var(--steel);display:flex;align-items:center;gap:0.4375rem}
.tabs button:hover{background:var(--soft)}
.tabs button i{width:0.5625rem;height:0.5625rem;border-radius:50%;display:inline-block}
.tabs button[aria-selected="true"]{background:var(--navy);color:#fff}
.tabs button:focus-visible{outline:0.1875rem solid rgba(29,78,216,.4)}
.search{flex:1;min-width:13.75rem;position:relative}
.search input{width:100%;padding:0.625rem 0.75rem 0.625rem 2.375rem;border-radius:0.75rem;border:0.0938rem solid var(--line);background:#fff}
.search input:focus{outline:none;border-color:var(--blue)}
.search svg{position:absolute;left:0.75rem;top:50%;transform:translateY(-50%);width:1.0625rem;height:1.0625rem;color:var(--mute)}
.rsec{margin-bottom:2.5rem}
.rsec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1rem;padding-bottom:0.75rem;border-bottom:0.0625rem solid var(--line)}
.rsec-h h2{font-size:1.5rem;display:flex;align-items:center;gap:0.625rem}
.rsec-h h2 i{width:0.6875rem;height:0.6875rem;border-radius:50%;background:var(--rc);display:inline-block}
.rsec-h p{color:var(--steel);font-size:0.9375rem;max-width:60ch}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(18.125rem,1fr));gap:1rem}
.ccard{all:unset;cursor:pointer;box-sizing:border-box;display:flex;flex-direction:column;background:var(--paper);border:0.0625rem solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .2s, box-shadow .2s, border-color .2s}
.ccard:hover{transform:translateY(-0.125rem);box-shadow:0 0.75rem 1.75rem rgba(23,43,77,.08);border-color:#C3D0E0}
.ccard:focus-visible{outline:0.1875rem solid rgba(29,78,216,.4);outline-offset:0.125rem}
.ccard .viz{position:relative;aspect-ratio:16/8.5;background:var(--sky);border-bottom:0.0625rem solid var(--line-2)}
.ccard .viz canvas{position:absolute;inset:0;width:100%;height:100%}
.ccard .viz .chip.code{position:absolute;left:0.625rem;top:0.625rem;background:#fff;color:var(--ink);border-color:#fff;box-shadow:0 0.0625rem 0.1875rem rgba(23,43,77,.14)}
.ccard .st{display:flex;gap:0.375rem;flex-wrap:wrap}
.ccard .body{padding:1rem 1.125rem 1rem;display:flex;flex-direction:column;gap:0.4375rem;flex:1}
.ccard h3{font-size:1.125rem;display:flex;justify-content:space-between;gap:0.625rem;align-items:flex-start}
.ccard h3 svg{width:1.25rem;height:1.25rem;flex:none;color:var(--blue);margin-top:0.125rem}
.ccard p{font-size:0.9062rem;color:var(--steel)}
.ccard .meta{margin-top:auto;padding-top:0.75rem;display:flex;gap:0.75rem;font-size:0.8125rem;color:var(--steel);border-top:0.0625rem solid var(--line-2);align-items:center}
.ccard .meta b{color:var(--ink);font-weight:700}
.ccard .fam{display:inline-flex;align-items:center;gap:0.375rem;font-size:0.7812rem;font-weight:600;color:var(--steel)}
.ccard .fam i{width:0.5rem;height:0.5rem;border-radius:50%;background:var(--rc)}
.lock-ico{width:0.875rem;height:0.875rem;vertical-align:-0.125rem}
.results{display:flex;flex-direction:column;gap:0.375rem}
.res{all:unset;cursor:pointer;box-sizing:border-box;display:grid;grid-template-columns:6.875rem minmax(0,1fr) auto;gap:0.75rem;align-items:center;padding:0.625rem 0.875rem;background:#fff;border:0.0625rem solid var(--line);border-radius:0.75rem}
.res:hover{border-color:var(--blue)}
.res:focus-visible{outline:0.1875rem solid rgba(29,78,216,.4)}
.res .k{font-weight:700;color:var(--steel);font-size:0.875rem}
.res small{display:block;color:var(--steel);font-size:0.8125rem}

/* ---------- class page ---------- */
.chero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:0;background:#fff;border:0.0625rem solid var(--line);border-radius:1.25rem;overflow:hidden;margin-bottom:1.375rem;box-shadow:0 0.0625rem 0.125rem rgba(23,43,77,.03)}
.chero .txt{padding:1.75rem 1.875rem;display:flex;flex-direction:column;gap:0.75rem;background:#2B4A78;color:#fff}
.chero .txt h1{color:#fff}
.chero .txt .chip:not(.perdana):not(.katalog):not(.pemasok):not(.code){background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);color:#fff}
.chero .txt .chip.code{background:#fff;color:var(--ink);border-color:#fff}
.chero .txt .chip.katalog,.chero .txt .chip.pemasok{background:rgba(255,255,255,.92)}
.chero .txt .small.muted{color:#C3D2EA !important}
.chero .txt .small.muted b{color:#fff !important}
.chero h1{font-size:2.125rem}
.chero .row{display:flex;gap:0.5rem;flex-wrap:wrap;align-items:center}
.chero p.lead{color:rgba(255,255,255,.86);font-size:1.0312rem}
.chero .viz{position:relative;min-height:17.5rem;background:var(--sky);border-left:0.0625rem solid var(--line-2)}
.chero .viz canvas{position:absolute;inset:0;width:100%;height:100%}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(7.375rem,1fr));gap:0.5rem;margin-top:0.375rem}
.kv div{background:rgba(255,255,255,.08);border:0.0625rem solid rgba(255,255,255,.16);border-radius:0.75rem;padding:0.625rem 0.75rem}
.kv b{display:block;font-family:var(--display);font-size:1.375rem;font-weight:700;line-height:1.15;color:#fff}
.kv span{font-size:0.7812rem;color:#C3D2EA}
.prereq{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;padding:0.875rem 1rem;margin-bottom:1.375rem;font-size:0.9062rem}
.prereq .lbl{font-weight:700;margin-right:0.25rem}
.prereq button.pill{all:unset;cursor:pointer;padding:0.25rem 0.6875rem;border-radius:62.4375rem;border:0.0625rem solid var(--line);background:var(--soft);font-weight:600;font-size:0.8438rem}
.prereq button.pill:hover{border-color:var(--blue)}
.prereq .arrow{color:var(--mute)}
.prereq .pill.ok{background:var(--ok-soft);border-color:#BBE5CB;color:var(--ok-ink)}
.prereq .here{font-weight:700;padding:0.25rem 0.6875rem;border-radius:62.4375rem;background:var(--navy);color:#fff;font-size:0.8438rem}
.stages{display:grid;grid-template-columns:repeat(3,1fr);gap:0.75rem;margin-bottom:1.5rem}
.stg{padding:1rem 1.125rem;border-radius:var(--r);background:var(--paper);border:0.0625rem solid var(--line);position:relative}
.stg .top{display:flex;justify-content:space-between;align-items:center;gap:0.5rem}
.stg h3{font-size:1.25rem}
.stg p{font-size:0.875rem;color:var(--steel);margin-top:0.25rem}
.stg .gate{margin-top:0.625rem;font-size:0.8438rem;color:var(--ink-2);display:flex;gap:0.4375rem;align-items:flex-start}
.stg .gate svg{color:var(--blue)}
.stg.locked{background:var(--soft)}
.stg.locked .gate svg{color:var(--steel)}
.stg.cur{border-color:var(--blue);box-shadow:0 0 0 0.1875rem rgba(29,78,216,.12)}
.stg .prog{height:0.375rem;border-radius:0.1875rem;background:var(--line-2);margin-top:0.75rem;overflow:hidden}
.stg .prog span{display:block;height:100%;background:var(--blue);border-radius:0.1875rem}
.modgrp h2{font-size:1.375rem;margin:1.75rem 0 0.75rem;display:flex;align-items:center;gap:0.625rem}
.acc{border:0.0625rem solid var(--line);border-radius:var(--r);background:var(--paper);margin-bottom:0.625rem;overflow:hidden}
.acc > button{all:unset;cursor:pointer;box-sizing:border-box;width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:0.875rem;align-items:center;padding:0.875rem 1.125rem}
.acc > button:hover{background:var(--soft)}
.acc > button:focus-visible{outline:0.1875rem solid rgba(29,78,216,.4);outline-offset:-0.1875rem}
.acc h3{font-size:1.0625rem}
.acc .sub{font-size:0.8438rem;color:var(--steel)}
.acc .chev{transition:transform .25s;width:1.125rem;height:1.125rem;color:var(--steel)}
.acc[open-state="1"] .chev{transform:rotate(180deg)}
.acc .inner{display:none;padding:0 1.125rem 1rem}
.acc[open-state="1"] .inner{display:block}
.acc .desc{font-size:0.9375rem;color:var(--ink-2);padding:0.75rem 0.875rem;background:var(--soft);border-radius:0.625rem;margin-bottom:0.75rem}
.acc .facts{display:flex;gap:1.125rem;flex-wrap:wrap;font-size:0.8438rem;color:var(--steel);margin-bottom:0.625rem}
.acc .facts b{color:var(--ink);font-weight:600}
.lrow{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:6.875rem minmax(0,1fr) auto auto;gap:0.75rem;align-items:center;padding:0.625rem 0.75rem;border-top:0.0625rem solid var(--line-2);font-size:0.9062rem}
button.lrow{cursor:pointer}
button.lrow:hover{background:var(--blue-soft)}
button.lrow:focus-visible{outline:0.1875rem solid rgba(29,78,216,.4);outline-offset:-0.1875rem}
.lrow .k{font-weight:700;font-size:0.8438rem;color:var(--steel)}
.lrow .m{font-size:0.8125rem;color:var(--steel);white-space:nowrap}
.lrow.dim{color:var(--steel)}
.tick{width:1.25rem;height:1.25rem;border-radius:0.3125rem;border:0.125rem solid var(--line);display:inline-grid;place-items:center;flex:none}
.tick.on{background:var(--ok);border-color:var(--ok)}
.note-box{display:flex;gap:0.625rem;padding:0.75rem 0.875rem;border-radius:0.75rem;background:var(--amber-soft);border:0.0625rem solid #F6DE97;color:#6B4A00;font-size:0.9062rem;margin-bottom:1.125rem}
.note-box.info{background:var(--blue-soft);border-color:var(--blue-line);color:var(--ink);align-items:center}

.amrunit{display:grid;grid-template-columns:16.25rem minmax(0,1fr);gap:1.375rem;align-items:center;padding:0.875rem 1.375rem 0.875rem 0.875rem;margin-bottom:1.375rem}
.amrunit img{width:100%;border-radius:0.75rem;background:linear-gradient(180deg,#F6F9FD,#E4EDF7);padding:0.625rem;display:block}
.amrunit h3{font-size:1.25rem;margin:0.25rem 0 0.375rem}
.amrunit .btn{margin-top:0.75rem}
.amrx{padding:1.5rem;margin:0.375rem 0 1.5rem;scroll-margin-top:5.25rem}
.amrx h2{font-size:1.5rem;margin:0.25rem 0 0.375rem}
.amrx-h p{max-width:72ch}
.amrx-b{display:grid;grid-template-columns:13.75rem minmax(0,1fr);gap:1.375rem;margin-top:1.125rem;align-items:start}
.layers{margin:0;background:linear-gradient(180deg,#F6F9FD,#E4EDF7);border:0.0625rem solid var(--line-2);border-radius:0.875rem;padding:0.75rem;text-align:center}
.layers img{width:100%;display:block}
.layers figcaption{font-size:0.7812rem;color:var(--steel);margin-top:0.375rem;font-weight:600}
.pkt{display:flex;flex-wrap:wrap;gap:0.375rem;margin-bottom:0.875rem}
.pkt button{all:unset;cursor:pointer;display:inline-flex;gap:0.4375rem;align-items:center;padding:0.375rem 0.6875rem;border-radius:0.5625rem;border:0.0625rem solid var(--line);background:#fff;font-size:0.8438rem;font-weight:600;color:var(--ink-2)}
.pkt button b{font-size:0.75rem;color:var(--mute)}
.pkt button:hover{border-color:var(--blue)}
.pkt button:focus-visible{outline:0.1875rem solid rgba(29,78,216,.4)}
.pkt button[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.pkt button[aria-selected="true"] b{color:#AFC3E3}
.pkv{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:1.125rem;align-items:center}
.pkimg{background:linear-gradient(180deg,#F6F9FD,#E4EDF7);border:0.0625rem solid var(--line-2);border-radius:0.875rem;padding:0.5rem}
.pkimg img{width:100%;display:block}
.pkl h3{font-size:1.125rem;display:flex;gap:0.5rem;align-items:center;flex-wrap:wrap;margin-bottom:0.5rem}
.pkl ul{margin:0;padding-left:1.125rem;font-size:0.9062rem;color:var(--ink-2)}
.pkl li{margin:0.1875rem 0}
.cgrid.one{grid-template-columns:minmax(0,1fr)}
.ccard.wide{flex-direction:row}
.ccard.wide .viz{width:40%;flex:none;aspect-ratio:auto;min-height:13.125rem;border-bottom:0;border-right:0.0625rem solid var(--line-2)}
.ccard.wide .body{padding:1.375rem 1.5rem}
.ccard.wide h3{font-size:1.3125rem;justify-content:flex-start;gap:0.75rem}

/* ---------- module list v2 ---------- */
.stagelist{display:flex;flex-direction:column;gap:1.625rem;margin-top:0.5rem}
.stage{position:relative}
.stagelist .stage:not(:last-child)::after{content:"";position:absolute;left:1.6875rem;top:3.75rem;bottom:-1.625rem;width:0.125rem;background:repeating-linear-gradient(180deg,var(--line) 0 0.375rem,transparent 0.375rem 0.6875rem)}
.sband{display:grid;grid-template-columns:3.5rem minmax(0,1fr) auto auto;gap:0.875rem;align-items:center;margin-bottom:0.875rem}
.si{width:3.5rem;height:3.5rem;border-radius:1rem;display:grid;place-items:center;background:var(--navy);color:#fff;position:relative;z-index:1}
.si svg{width:1.625rem;height:1.625rem}
.stage[data-st="Praktik"] .si{background:var(--amber);color:var(--ink)}
.stage[data-st="PoC"] .si{background:#2B4A78}
.stage.locked .si{background:#CBD5E1;color:#fff}
.stage.cur .si{box-shadow:0 0 0 0.25rem rgba(29,78,216,.2)}
.stx h2{font-size:1.5rem}
.stx p{color:var(--steel);font-size:0.9062rem;margin-top:0.125rem}
.sgate{display:flex;gap:0.5rem;align-items:flex-start;max-width:21.25rem;font-size:0.8438rem;color:var(--ink-2);background:#fff;border:0.0625rem solid var(--line);border-radius:0.625rem;padding:0.5rem 0.6875rem}
.sgate svg{width:0.9375rem;height:0.9375rem;flex:none;margin-top:0.125rem;color:var(--blue)}
.stage.locked .sgate svg{color:var(--steel)}
.sst{display:flex;align-items:center;gap:0.5rem;justify-content:flex-end}
.sst small{font-size:0.7812rem;color:var(--steel);font-weight:600}
.sprog{display:block;width:5.625rem;height:0.4375rem;border-radius:0.25rem;background:var(--line-2);overflow:hidden}
.sprog i{display:block;height:100%;background:var(--blue);border-radius:0.25rem}
.sbody{margin-left:4.375rem;display:flex;flex-direction:column;gap:0.625rem}
.mcard{background:#fff;border:0.0625rem solid var(--line);border-radius:var(--r);overflow:hidden}
.mh{all:unset;cursor:pointer;box-sizing:border-box;width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;gap:0.875rem;align-items:center;padding:0.875rem 1.125rem}
.mh:hover{background:var(--soft)}
.mh:focus-visible{outline:0.1875rem solid rgba(29,78,216,.4);outline-offset:-0.1875rem}
.mt b{display:block;font-family:var(--display);font-size:1.0625rem;line-height:1.3}
.ms{display:block;font-size:0.8125rem;color:var(--steel);margin-top:0.125rem}
.kinds{display:flex;gap:0.25rem}
.kinds i{width:1.5rem;height:1.5rem;border-radius:0.4375rem;display:grid;place-items:center}
.kinds svg{width:0.8125rem;height:0.8125rem}
.mp{display:inline-block;width:3.5rem;height:0.375rem;border-radius:0.1875rem;background:var(--line-2);overflow:hidden;vertical-align:middle}
.mp i{display:block;height:100%;background:var(--ok)}
.mpw{display:flex;align-items:center;white-space:nowrap}
.mpt{font-size:0.75rem;color:var(--steel);font-weight:700;margin-left:0.375rem}
.mh .chev{width:1.125rem;height:1.125rem;color:var(--steel);transition:transform .25s}
.mcard[open-state="1"] .chev{transform:rotate(180deg)}
.mb{display:none;padding:0 1.125rem 1rem}
.mcard[open-state="1"] .mb{display:block}
.mdesc{font-size:0.9062rem;color:var(--ink-2);margin:0.125rem 0 0.625rem}
.mdesc span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mdesc.full span{display:inline;-webkit-line-clamp:unset}
.more{all:unset;cursor:pointer;color:var(--blue);font-weight:600;font-size:0.8438rem}
.more:hover{text-decoration:underline}
.lrs{display:flex;flex-direction:column;border:0.0625rem solid var(--line-2);border-radius:0.75rem;overflow:hidden}
.lr{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:2.125rem 1.625rem minmax(0,1fr) 1.875rem;gap:0.75rem;align-items:center;padding:0.625rem 0.75rem;border-top:0.0625rem solid var(--line-2);background:#fff}
.lr:first-child{border-top:0}
button.lr{cursor:pointer}
button.lr:hover{background:var(--blue-soft)}
button.lr:focus-visible{outline:0.1875rem solid rgba(29,78,216,.4);outline-offset:-0.1875rem}
.lt{width:2.125rem;height:2.125rem;border-radius:0.5625rem;display:grid;place-items:center}
.lt svg{width:1.0625rem;height:1.0625rem}
.ln{font-family:var(--display);font-weight:700;font-size:0.8125rem;color:var(--mute)}
.lx b{display:block;font-weight:600;font-size:0.9375rem;line-height:1.35;color:var(--ink)}
.lx small{display:block;font-size:0.7812rem;color:var(--steel);margin-top:0.0625rem}
.lr.dim .lx b{color:var(--ink-2)}
.ls{width:1.875rem;height:1.875rem;border-radius:50%;display:grid;place-items:center}
.ls svg{width:0.9375rem;height:0.9375rem}
.ls.open{background:var(--blue);color:#fff}
.ls.done{background:var(--ok);color:#fff}
.ls.lock{background:var(--soft);color:var(--mute)}
.ls.soon{background:#F4F1FC;color:#7C6AC0}
.lrs.compact .lr{grid-template-columns:1.75rem minmax(0,1fr) 1.625rem;padding:0.5rem 0.625rem;gap:0.625rem}
.lrs.compact .ln{display:none}
.lrs.compact .lt{width:1.75rem;height:1.75rem;border-radius:0.5rem}
.lrs.compact .lt svg{width:0.875rem;height:0.875rem}
.lrs.compact .lx b{font-size:0.875rem}
.lrs.compact .ls{width:1.625rem;height:1.625rem}
.lrs.compact .ls svg{width:0.8125rem;height:0.8125rem}
.days{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.75rem}
.day{padding:1rem;display:flex;flex-direction:column;gap:0.375rem}
.dh{display:flex;align-items:center;justify-content:space-between;gap:0.5rem}
.dn{display:inline-block;background:var(--amber);color:var(--ink);font-weight:800;font-size:0.7812rem;letter-spacing:.06em;text-transform:uppercase;border-radius:0.5rem;padding:0.1875rem 0.625rem}
.day h3{font-size:1.125rem;margin-top:0.25rem}
.day .mdesc{margin:0.25rem 0 0.5rem}
.pill2{display:flex;gap:0.4375rem;align-items:flex-start;margin-top:0.625rem;font-size:0.8125rem;color:var(--ink-2);background:var(--soft);border-radius:0.5625rem;padding:0.5rem 0.625rem}
.pill2 svg{width:0.9375rem;height:0.9375rem;flex:none;margin-top:0.125rem;color:var(--ok)}
.weeks{display:flex;flex-direction:column;gap:0.625rem}
.wbar{display:flex;gap:0.25rem;border-radius:0.75rem;overflow:hidden}
.wbar span{display:flex;align-items:center;padding:0.5625rem 0.875rem;background:#2B4A78;color:#fff;font-size:0.8125rem;min-width:0}
.wbar span:nth-child(2){background:#1F3A63}
.wbar span:nth-child(3){background:var(--navy)}
.wbar b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wcols{display:grid;gap:0.75rem}
.wk{padding:1rem;display:flex;flex-direction:column;gap:0.375rem}
.wk h3{font-size:1.0625rem}
.wg{display:flex;flex-direction:column;gap:0.3125rem;margin-top:0.625rem;padding:0.625rem 0.75rem;border-radius:0.625rem;background:var(--blue-soft);font-size:0.8125rem;color:var(--ink-2)}
.wg b{font-size:0.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.wg span{display:flex;gap:0.4375rem;align-items:flex-start}
.wg svg{width:0.875rem;height:0.875rem;flex:none;margin-top:0.125rem;color:var(--blue)}

/* ---------- lesson page ---------- */
.lhead{background:var(--paper);border:0.0625rem solid var(--line);border-radius:1.125rem;overflow:hidden;margin-bottom:1.125rem}
.lhead .band{height:0.25rem;background:var(--rc)}
.lhead .in{padding:1.375rem 1.625rem;display:flex;flex-direction:column;gap:0.625rem;background:#2B4A78;color:#fff}
.lhead .in h1{color:#fff}
.lhead .in .chip:not(.done):not(.code){background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);color:#fff}
.lhead .in .chip.code{background:#fff;color:var(--ink);border-color:#fff}
.lhead .in .intro,.lhead .in .intro p,.lhead .in .intro strong{color:rgba(255,255,255,.88)}
.lhead h1{font-size:1.875rem}
.lhead .row{display:flex;gap:0.5rem;flex-wrap:wrap;align-items:center}
.lhead .intro{font-size:1.0312rem;max-width:80ch}
.lmeta{display:grid;grid-template-columns:repeat(auto-fit,minmax(10.625rem,1fr));gap:0.0625rem;background:var(--line-2);border-top:0.0625rem solid var(--line-2)}
.lmeta div{background:var(--soft);padding:0.625rem 1rem}
.lmeta span{display:block;font-size:0.7812rem;color:var(--steel)}
.lmeta b{font-weight:600;font-size:0.9062rem}
.lgrid{display:grid;grid-template-columns:minmax(0,1fr) 18.75rem;gap:1.25rem;align-items:start}
.lside{position:sticky;top:4.75rem;display:flex;flex-direction:column;gap:0.875rem}
.toc a{display:flex;gap:0.625rem;align-items:center;padding:0.4375rem 0.625rem;border-radius:0.5625rem;text-decoration:none;font-size:0.9062rem;color:var(--ink)}
.toc a:hover{background:var(--soft);text-decoration:none}
.toc a .ico{width:1.625rem;height:1.625rem;border-radius:0.4375rem;display:grid;place-items:center;background:var(--soft);flex:none}
.toc a .ico svg{width:0.9375rem;height:0.9375rem}
.toc a .min{margin-left:auto;font-size:0.7812rem;color:var(--steel)}
.toc a.instr{color:#55419D}
.sec{background:var(--paper);border:0.0625rem solid var(--line);border-radius:var(--r);margin-bottom:1rem;scroll-margin-top:5.25rem}
.sec > .sh{display:flex;align-items:center;gap:0.75rem;padding:0.875rem 1.25rem;border-bottom:0.0625rem solid var(--line-2)}
.sec > .sh .ico{width:2.125rem;height:2.125rem;border-radius:0.5625rem;display:grid;place-items:center;flex:none}
.sec > .sh .ico svg{width:1.125rem;height:1.125rem}
.sec > .sh h2{font-size:1.1875rem}
.sec > .sh .tag{margin-left:auto}
.sec > .sb{padding:1rem 1.375rem 1.25rem}
.sec.instr{border-style:dashed;border-color:#C9BDEB;background:#FCFBFF}
.prose{font-size:0.9688rem;color:var(--ink-2)}
.prose p{margin:0 0 0.625rem}
.prose p:last-child{margin-bottom:0}
.prose ul,.prose ol{margin:0.25rem 0 0.75rem;padding-left:1.375rem}
.prose li{margin:0.1875rem 0}
.prose strong{font-weight:700;color:var(--ink)}
.prose h4{font-size:1rem;margin:0.875rem 0 0.375rem}
.prose table{width:100%;border-collapse:collapse;margin:0.5rem 0 0.875rem;font-size:0.875rem;display:block;overflow-x:auto}
.prose thead th{background:var(--soft);color:var(--ink);text-align:left;font-weight:700;padding:0.5rem 0.625rem;white-space:nowrap;border-bottom:0.0625rem solid var(--line)}
.prose td{padding:0.5rem 0.625rem;border-bottom:0.0625rem solid var(--line-2);vertical-align:top}
.prose pre{background:var(--navy);color:#E6EDF7;border-radius:0.625rem;padding:0.875rem 1rem;overflow:auto;font-size:0.8438rem;line-height:1.55;margin:0.5rem 0 0.875rem;white-space:pre-wrap}
.prose code{font-family:ui-monospace,Consolas,"DejaVu Sans Mono",monospace;font-size:.92em}
.prose blockquote{margin:0.5rem 0;padding:0.5rem 0.875rem;border-left:0.25rem solid var(--blue);background:var(--blue-soft);border-radius:0 0.5rem 0.5rem 0}
.video-ph{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:center;padding:1rem;border-radius:0.75rem;background:var(--soft);border:0.0625rem solid var(--line);margin-bottom:0.875rem}
.video-ph .pl{width:3.25rem;height:3.25rem;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center}
.video-ph b{display:block;font-size:1rem}
.video-ph span{font-size:0.875rem;color:var(--steel)}
.vframe{width:100%;border:0;border-radius:0.75rem;display:block;min-height:38.75rem;background:var(--bg)}
details.script{margin-top:0.375rem}
details.script summary{cursor:pointer;font-weight:600;font-size:0.9062rem;color:var(--blue)}
.quiz{display:flex;flex-direction:column;gap:0.75rem}
.q{border:0.0625rem solid var(--line);border-radius:0.75rem;padding:0.875rem}
.q .qh{display:flex;gap:0.625rem;align-items:baseline;margin-bottom:0.5rem}
.q .qh .k{font-weight:700;font-size:0.8125rem;color:var(--steel);flex:none}
.q .qh p{font-weight:600;color:var(--ink)}
.q .opts{display:flex;flex-direction:column;gap:0.375rem}
.q .opt{all:unset;cursor:pointer;box-sizing:border-box;display:flex;gap:0.625rem;padding:0.5625rem 0.75rem;border:0.0938rem solid var(--line);border-radius:0.625rem;font-size:0.9375rem;background:#fff}
.q .opt:hover{border-color:var(--blue)}
.q .opt:focus-visible{outline:0.1875rem solid rgba(29,78,216,.4)}
.q .opt b{width:1rem;flex:none}
.q .opt.right{border-color:var(--ok);background:var(--ok-soft)}
.q .opt.wrong{border-color:var(--red);background:var(--red-soft)}
.q .opt[disabled]{cursor:default}
.q .fb{margin-top:0.5rem;font-size:0.9062rem;padding:0.5rem 0.6875rem;border-radius:0.5rem}
.q .fb.ok{background:var(--ok-soft);color:var(--ok-ink)}
.q .fb.no{background:var(--red-soft);color:#912018}
.qscore{display:flex;justify-content:space-between;align-items:center;padding:0.625rem 0.875rem;border-radius:0.625rem;background:var(--soft);font-size:0.9062rem}
.chk{display:flex;flex-direction:column;gap:0.375rem;margin:0.5rem 0 0.75rem}
.chk label{display:flex;gap:0.625rem;align-items:flex-start;padding:0.5625rem 0.75rem;border:0.0625rem solid var(--line);border-radius:0.625rem;font-size:0.9375rem;cursor:pointer;background:#fff}
.chk label.must{border-left:0.25rem solid var(--amber)}
.chk input{width:1.125rem;height:1.125rem;accent-color:var(--blue);margin-top:0.125rem;flex:none}
.chk .bar{height:0.5rem;border-radius:0.25rem;background:var(--line-2);overflow:hidden;margin-top:0.25rem}
.chk .bar span{display:block;height:100%;background:var(--blue);transition:width .3s}
.spec{display:flex;flex-direction:column;gap:0.625rem}
.spec .u{border:0.0625rem solid var(--line);border-radius:0.75rem;padding:0.625rem 0.75rem}
.spec .u label{display:flex;gap:0.5rem;align-items:center;font-weight:600;font-size:0.9062rem;margin-bottom:0.375rem}
.spec .u label i{font-style:normal;width:1.375rem;height:1.375rem;border-radius:0.4375rem;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;font-weight:800;font-size:0.8125rem}
.spec textarea{width:100%;min-height:3.625rem;resize:vertical;border:0.0938rem solid var(--line);border-radius:0.625rem;padding:0.5rem 0.625rem;font-size:0.9062rem;background:#fff}
.spec textarea:focus{outline:none;border-color:var(--blue)}
.spec .warn{font-size:0.8125rem;color:#912018;margin-top:0.25rem}
.spec .okk{font-size:0.8125rem;color:var(--ok-ink);margin-top:0.25rem}
.side-card{padding:1rem}
.side-card h3{font-size:1rem;margin-bottom:0.625rem}
.lnav{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;margin-top:0.5rem}
.lnav button{all:unset;cursor:pointer;box-sizing:border-box;padding:0.75rem 0.875rem;border:0.0625rem solid var(--line);border-radius:0.75rem;background:#fff;font-size:0.9062rem}
.lnav button:hover{border-color:var(--blue)}
.lnav button:focus-visible{outline:0.1875rem solid rgba(29,78,216,.4)}
.lnav button small{display:block;color:var(--steel);font-size:0.7812rem}
.lnav button.nx{text-align:right}

/* ---------- path ---------- */
.path{display:flex;flex-direction:column;gap:0;position:relative}
.pn{display:grid;grid-template-columns:3.375rem minmax(0,1fr);gap:1rem;position:relative}
.pn .rail{display:flex;flex-direction:column;align-items:center}
.pn .node{width:2.75rem;height:2.75rem;border-radius:0.75rem;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:0.9375rem;border:0.125rem solid var(--line);background:#fff;color:var(--steel);z-index:1}
.pn .seg{flex:1;width:0.1875rem;background:var(--line);min-height:1.375rem;margin:0.1875rem 0;border-radius:0.125rem}
.pn.done .node{background:var(--ok);border-color:var(--ok);color:#fff}
.pn.done .seg{background:var(--ok)}
.pn.cur .node{background:var(--blue);border-color:var(--blue);color:#fff;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(29,78,216,.35)}50%{box-shadow:0 0 0 0.5625rem rgba(29,78,216,0)}}
.pn.gate .node{border-style:dashed;background:var(--soft)}
.pn.gate.done .node{background:var(--ok-soft);border-color:var(--ok);color:var(--ok-ink)}
.pn:last-child .seg{display:none}
.pn .pb{padding:0.375rem 0 1.5rem}
.pn .pb h3{font-size:1.125rem;display:flex;gap:0.625rem;align-items:center;flex-wrap:wrap}
.pn .pb p{font-size:0.9062rem;color:var(--steel);margin-top:0.125rem}
.pn .pb .items{display:flex;gap:0.375rem;flex-wrap:wrap;margin-top:0.5rem}
.pn .pb .items button{all:unset;cursor:pointer;font-size:0.8125rem;font-weight:600;padding:0.1875rem 0.5625rem;border-radius:0.4375rem;border:0.0625rem solid var(--line);background:#fff}
.pn .pb .items button.d{background:var(--ok-soft);border-color:#BBE5CB;color:var(--ok-ink)}
.pn .pb .items button:hover{border-color:var(--blue)}
.pgrid{display:grid;grid-template-columns:minmax(0,1fr) 20rem;gap:1.25rem;align-items:start}
.level{display:flex;flex-direction:column-reverse;gap:0.375rem}
.lv{display:flex;gap:0.625rem;align-items:center;padding:0.5625rem 0.6875rem;border:0.0625rem solid var(--line);border-radius:0.625rem;font-size:0.875rem;background:#fff}
.lv .b{width:1.875rem;height:1.875rem;border-radius:0.5rem;display:grid;place-items:center;font-family:var(--display);font-weight:700;background:var(--soft);color:var(--steel);flex:none}
.lv.got .b{background:var(--ok);color:#fff}
.lv.now{border:0.125rem solid var(--blue)}
.lv small{display:block;color:var(--steel);font-size:0.7812rem}

/* ---------- dashboards ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(10.625rem,1fr));gap:0.75rem;margin-bottom:1.25rem}
.tile{padding:1rem 1.125rem}
.tile b{display:block;font-family:var(--display);font-size:1.875rem;font-weight:700;line-height:1.15}
.tile span{font-size:0.875rem;color:var(--steel)}
.dgrid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:1.125rem;align-items:start}
.dgrid h2{font-size:1.25rem}
table.t{width:100%;border-collapse:collapse;font-size:0.9062rem}
.card.pad:has(> table.t){overflow-x:auto}
table.t th{text-align:left;font-weight:600;color:var(--steel);font-size:0.8125rem;padding:0.5rem 0.625rem;border-bottom:0.0625rem solid var(--line)}
table.t td{padding:0.625rem 0.625rem;border-bottom:0.0625rem solid var(--line-2);vertical-align:middle}
.stack{display:flex;height:0.625rem;border-radius:0.3125rem;overflow:hidden;background:var(--line-2);min-width:7.5rem}
.stack span{display:block;height:100%}
.legend{display:flex;gap:0.875rem;flex-wrap:wrap;font-size:0.8125rem;color:var(--steel)}
.legend i{display:inline-block;width:0.625rem;height:0.625rem;border-radius:50%;margin-right:0.375rem;vertical-align:-0.0625rem}
.pager{display:flex;justify-content:space-between;align-items:center;margin-top:0.75rem;font-size:0.875rem;color:var(--steel)}
.cont{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:center;padding:1.25rem 1.5rem;background:var(--blue-soft);border:0.0625rem solid var(--blue-line);border-radius:1.125rem;margin-bottom:1.125rem}
.cont h2{font-size:1.375rem;margin-top:0.375rem}
.cont p{color:var(--steel);font-size:0.9375rem;margin-top:0.125rem}
.sched{display:flex;flex-direction:column;gap:0.5rem}
.sched div{display:grid;grid-template-columns:3.5rem minmax(0,1fr);gap:0.75rem;align-items:center;padding:0.625rem 0.75rem;border:0.0625rem solid var(--line);border-radius:0.75rem;background:#fff;font-size:0.9062rem}
.sched .d{text-align:center;font-family:var(--display);font-size:1.25rem;font-weight:700;line-height:1.1;color:var(--blue)}
.sched .d small{display:block;font-family:var(--body);font-size:0.75rem;font-weight:600;color:var(--steel)}
.sched em{display:block;font-style:normal;font-size:0.8125rem;color:var(--steel)}
.lamp{display:inline-flex;align-items:center;gap:0.4375rem;font-weight:600;font-size:0.8438rem}
.lamp i{width:0.5625rem;height:0.5625rem;border-radius:50%}
.lamp.g i{background:var(--ok)} .lamp.a i{background:var(--amber)} .lamp.r i{background:var(--red)}

@media (max-width:1280px){
  .gnav{flex-wrap:wrap;row-gap:0.375rem}
  .gnav nav{order:3;margin-left:0;width:100%;overflow-x:auto}
}
@media (max-width:1180px){
  .hero3-in{grid-template-columns:minmax(0,1fr);gap:1.5rem}
  .h2top{grid-template-columns:minmax(0,1fr);gap:1rem}
  .cprog{display:none}
  .prog,.ctab{grid-template-columns:minmax(0,1fr)}
  .ucl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-in{grid-template-columns:minmax(0,1fr);padding:2.75rem 1.5rem 3.25rem}
  .hero h1{font-size:2.625rem}
  .lgrid,.pgrid,.dgrid,.login-wrap,.platform{grid-template-columns:minmax(0,1fr)}
  .lside{position:static}
  .chero{grid-template-columns:minmax(0,1fr)}
  .chero .viz{border-left:0;border-top:0.0625rem solid var(--line-2)}
  .rgrid{grid-template-columns:minmax(0,1fr)}
  .ai-strip{grid-template-columns:minmax(0,1fr)}
  .flow,.lines{grid-template-columns:repeat(2,minmax(0,1fr))}
  .monitors{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr);background:none}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;padding:0.75rem 1rem;gap:0.625rem;border-right:0;border-bottom:0.0625rem solid var(--line)}
  .snav{flex-direction:row;flex-wrap:wrap}
  .snav .grp,.side-foot{display:none}
  .topbar{position:static;padding:0.625rem 1rem;flex-wrap:wrap}
  .page{padding:1.25rem 1rem 3rem}
  .gnav{padding:0.625rem 1rem;gap:0.625rem;flex-wrap:wrap}
  .foot-in{grid-template-columns:minmax(0,1fr)}
  .foot-note{padding:0 1rem 1.375rem}
  .waf span{display:none}
  .waf{padding:0.875rem;right:0.875rem;bottom:0.875rem}
  .ctab{padding:1.5rem}
  .stats-in{grid-template-columns:repeat(2,1fr);padding:1.125rem 1rem}
  .sect{padding:3rem 1rem 0.25rem}
  .zone{padding-bottom:3rem;margin-top:3rem}
  .sect > h2{font-size:1.75rem}
  .stages{grid-template-columns:minmax(0,1fr)}
  .sband{grid-template-columns:3rem minmax(0,1fr)}
  .si{width:3rem;height:3rem;border-radius:0.875rem}
  .sgate,.sst{grid-column:1/-1;max-width:none;justify-content:flex-start}
  .sbody{margin-left:0}
  .stagelist .stage::after{display:none}
  .days,.wcols{grid-template-columns:minmax(0,1fr) !important}
  .wbar{display:none}
  .mh{grid-template-columns:auto minmax(0,1fr) auto}
  .mh .kinds,.mh .mpw{display:none}
  .lr{grid-template-columns:1.875rem minmax(0,1fr) 1.75rem}
  .lr .ln{display:none}
  .amrunit,.amrx-b,.pkv{grid-template-columns:minmax(0,1fr)}
  .layers{max-width:15rem}
  .ccard.wide{flex-direction:column}
  .ccard.wide .viz{width:auto;aspect-ratio:16/8.5;min-height:0;border-right:0;border-bottom:0.0625rem solid var(--line-2)}
  .rcard .viz{aspect-ratio:16/8}
  .six{grid-template-columns:repeat(2,1fr)}
  .head h1{font-size:1.625rem}
  .chero h1{font-size:1.75rem}
  .lhead h1{font-size:1.5rem}
  .lrow{grid-template-columns:minmax(0,1fr) auto}
  .lrow .k,.lrow .m{display:none}
  .res{grid-template-columns:minmax(0,1fr) auto}
  .res .k{display:none}
  .demo span.t{display:none}
}
@media (max-width:560px){
  .hero2-in{padding:1.75rem 1rem 2.25rem}
  .hero3-in{padding:1.75rem 1rem 2.25rem}
  .hero3 h1{font-size:1.875rem}
  .pfil{flex-wrap:nowrap;overflow-x:auto;width:100%;padding-bottom:0.125rem}
  .pfil button{flex:none}
  .hero2 h1{font-size:2rem}
  .pcap{flex-wrap:wrap}
  .pcap .ctx span{white-space:normal}
  .gnav{position:relative}
  .hero h1{font-size:2.0625rem}
  .flow,.lines,.monitors{grid-template-columns:minmax(0,1fr)}
  .roles{grid-template-columns:minmax(0,1fr)}
  .lnav{grid-template-columns:minmax(0,1fr)}
  .who div{display:none}
  .ai-strip{padding:1.375rem}
  .herosim .float canvas{display:none}
  .herosim .amr{display:none}
  .herosim .line3d{top:44%}
}

/* ================= premium landing ================= */
.hero3{background:#fff;position:relative;isolation:isolate}
.hero3::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(23,43,77,.11) 0.0625rem,transparent 0.075rem);background-size:1.375rem 1.375rem;-webkit-mask-image:radial-gradient(ellipse 70% 80% at 60% 40%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 70% 80% at 60% 40%,#000 30%,transparent 80%)}
.hero3::after{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(37.5rem 23.75rem at 8% 0%,rgba(245,181,24,.14),transparent 70%),radial-gradient(47.5rem 30rem at 92% 30%,rgba(29,78,216,.10),transparent 70%),linear-gradient(180deg,#fff,#F7FAFD)}
.hplant{box-shadow:0 0.0625rem 0 rgba(255,255,255,.8) inset,0 1.875rem 3.75rem -1.25rem rgba(23,43,77,.25),0 0.75rem 1.5rem -0.75rem rgba(23,43,77,.12)}
.stats{background:linear-gradient(180deg,#F7FAFD,#fff);border-bottom:0}
.stats::after{content:"";display:block;height:0.0625rem;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.band{position:relative;isolation:isolate}
.band > .sect{padding-bottom:4.5rem}
.band + .band::before,.band + .sect::before{content:"";position:absolute;left:0;right:0;top:0;height:0.0625rem;background:linear-gradient(90deg,transparent,var(--line) 20%,var(--line) 80%,transparent)}
.ey{display:inline-flex;align-items:center;gap:0.625rem;font-size:0.7812rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);margin-bottom:0.75rem}
.ey::before{content:"";width:1.375rem;height:0.1875rem;border-radius:0.125rem;background:var(--amber)}
.ey-d{color:#AFC3E3}
.sect > h2{font-size:2.375rem;letter-spacing:-.02em}
/* program */
.b-prog{background:#fff}
.prog2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.375rem;margin-top:2.125rem}
.pc2{position:relative;border-radius:1.5rem;padding:1.875rem;background:#fff;border:0.0625rem solid var(--line);display:flex;flex-direction:column;gap:0.625rem;align-items:flex-start;box-shadow:0 0.0625rem 0.125rem rgba(23,43,77,.04);transition:transform .25s,box-shadow .25s;overflow:hidden}
.pc2::before{content:"";position:absolute;inset:-40% -20% auto auto;width:22.5rem;height:22.5rem;border-radius:50%;filter:blur(0.625rem);z-index:0;opacity:.9}
.pc2.co::before{background:radial-gradient(circle,rgba(245,181,24,.22),transparent 65%)}
.pc2.st::before{background:radial-gradient(circle,rgba(29,78,216,.14),transparent 65%)}
.pc2 > *{position:relative;z-index:1}
.pc2:hover{transform:translateY(-0.1875rem);box-shadow:0 1.5rem 3rem -1.5rem rgba(23,43,77,.28)}
.pc2-top{display:flex;justify-content:space-between;align-items:flex-start;width:100%;margin-bottom:0.375rem}
.pi2{width:3.25rem;height:3.25rem;border-radius:1rem;display:grid;place-items:center;background:#fff;border:0.0625rem solid var(--line);box-shadow:0 0.375rem 1rem -0.5rem rgba(23,43,77,.3);color:var(--ink)}
.pc2.co .pi2{color:#B07D00}
.pc2.st .pi2{color:var(--blue)}
.pi2 svg{width:1.5rem;height:1.5rem}
.pc2 .big{text-align:right}
.pc2 .big b{display:block;font-family:var(--display);font-size:2.875rem;line-height:1;letter-spacing:-.03em}
.pc2.co .big b{color:#E0A30E}
.pc2.st .big b{color:var(--blue)}
.pc2 .big span{font-size:0.7812rem;color:var(--steel);font-weight:600}
.pc2 h3{font-size:1.5rem}
.pc2 .lead2{color:var(--steel);font-size:0.9688rem}
.pc2 ul{list-style:none;margin:0.5rem 0 0.875rem;padding:0;display:flex;flex-direction:column;gap:0;width:100%}
.pc2 li{display:flex;gap:0.75rem;align-items:flex-start;padding:0.6875rem 0;border-top:0.0625rem solid var(--line-2);font-size:0.9375rem;color:var(--steel)}
.pc2 li:first-child{border-top:0}
.pc2 li b{color:var(--ink);font-weight:700}
.pc2 .ck{width:1.375rem;height:1.375rem;border-radius:50%;display:grid;place-items:center;background:var(--ok-soft);color:var(--ok);flex:none}
.pc2 .ck svg{width:0.8125rem;height:0.8125rem}
.pc2 .btn{margin-top:auto}
/* areas */
.b-fam{background:#F5F8FC}
.b-fam::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.6;background-image:linear-gradient(rgba(23,43,77,.05) 0.0625rem,transparent 0.0625rem),linear-gradient(90deg,rgba(23,43,77,.05) 0.0625rem,transparent 0.0625rem);background-size:3.5rem 3.5rem;-webkit-mask-image:linear-gradient(90deg,transparent 30%,#000);mask-image:linear-gradient(90deg,transparent 30%,#000)}
.fam2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;margin-top:2.125rem}
.fc2{position:relative;background:#fff;border:0.0625rem solid var(--line);border-radius:1.375rem;padding:1.625rem 1.625rem 1.125rem;display:flex;flex-direction:column;overflow:hidden;transition:box-shadow .25s,transform .25s}
.fc2::before{content:"";position:absolute;left:0;right:0;top:0;height:0.1875rem;background:linear-gradient(90deg,var(--rc),color-mix(in srgb,var(--rc) 20%,transparent))}
.fc2:hover{box-shadow:0 1.5rem 3rem -1.625rem rgba(23,43,77,.3);transform:translateY(-0.125rem)}
.fnum{position:absolute;right:1.375rem;top:0.875rem;font-family:var(--display);font-weight:800;font-size:3.375rem;line-height:1;color:color-mix(in srgb,var(--rc) 12%,#fff);letter-spacing:-.04em}
.fh{display:flex;align-items:center;gap:0.875rem;position:relative}
.ri2{width:3rem;height:3rem;border-radius:0.875rem;display:grid;place-items:center;background:color-mix(in srgb,var(--rc) 12%,#fff);color:var(--rc);border:0.0625rem solid color-mix(in srgb,var(--rc) 22%,#fff)}
.ri2 svg{width:1.4375rem;height:1.4375rem}
.fh h3{font-size:1.375rem}
.fh small{font-size:0.8125rem;color:var(--steel);font-weight:600}
.fdesc{font-size:0.9062rem;color:var(--steel);margin:0.875rem 0 0.75rem;max-width:56ch}
.flist{display:flex;flex-direction:column;border-top:0.0625rem solid var(--line-2)}
.flist a{display:grid;grid-template-columns:3.875rem minmax(0,1fr) 1.125rem;gap:0.625rem;align-items:center;padding:0.625rem 0.375rem;border-bottom:0.0625rem solid var(--line-2);color:var(--ink);font-size:0.9375rem;font-weight:500;text-decoration:none;border-radius:0.5rem;transition:background .15s,padding .15s}
.flist a code{font-family:var(--body);font-size:0.75rem;font-weight:800;color:var(--steel);background:var(--soft);border:0.0625rem solid var(--line-2);border-radius:0.375rem;padding:0.125rem 0.375rem;text-align:center}
.flist a svg{width:1rem;height:1rem;color:var(--rc);opacity:0;transform:translateX(-0.375rem);transition:opacity .15s,transform .15s}
.flist a:hover{background:color-mix(in srgb,var(--rc) 7%,#fff);padding-left:0.625rem;text-decoration:none}
.flist a:hover svg{opacity:1;transform:none}
.fmore{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:0.375rem;margin-top:0.875rem;font-weight:700;font-size:0.875rem;color:var(--rc)}
.fmore svg{width:0.9375rem;height:0.9375rem;transition:transform .15s}
.fmore:hover svg{transform:translateX(0.1875rem)}
.fbtns{margin-top:1.375rem;display:flex;gap:0.625rem;flex-wrap:wrap}
/* learning flow */
.b-how{background:#fff}
.tl2{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.375rem;margin-top:2.5rem;position:relative}
.tl2::before{content:"";position:absolute;left:1.75rem;right:1.75rem;top:1.6875rem;height:0.125rem;background:linear-gradient(90deg,var(--navy),#2B4A78 33%,var(--amber) 66%,var(--ok))}
.tl2-dot{position:relative;display:flex;align-items:center;gap:0.75rem;margin-bottom:1.125rem}
.tl2-dot span{width:3.5rem;height:3.5rem;border-radius:50%;display:grid;place-items:center;background:#fff;border:0.125rem solid var(--navy);color:var(--navy);box-shadow:0 0 0 0.375rem #fff}
.tl2-i:nth-child(2) .tl2-dot span{border-color:#2B4A78;color:#2B4A78}
.tl2-i:nth-child(3) .tl2-dot span{border-color:#E0A30E;color:#B07D00}
.tl2-i:nth-child(4) .tl2-dot span{border-color:var(--ok);color:var(--ok)}
.tl2-dot span svg{width:1.5rem;height:1.5rem}
.tl2-dot em{font-style:normal;font-family:var(--display);font-weight:800;font-size:0.8125rem;color:var(--mute);background:#fff;padding:0 0.375rem}
.tl2-c{background:#fff;border:0.0625rem solid var(--line);border-radius:1.125rem;padding:1.125rem 1.125rem 1rem;height:calc(100% - 4.625rem);display:flex;flex-direction:column;gap:0.4375rem;transition:box-shadow .25s}
.tl2-c:hover{box-shadow:0 1.25rem 2.5rem -1.5rem rgba(23,43,77,.3)}
.tl2-c .dur{align-self:flex-start;font-size:0.7188rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);background:var(--blue-soft);border-radius:62.4375rem;padding:0.1875rem 0.625rem}
.tl2-c h3{font-size:1.1875rem}
.tl2-c p{font-size:0.9062rem;color:var(--steel)}
.g2{margin-top:auto;padding-top:0.75rem;border-top:0.0625rem dashed var(--line);display:flex;gap:0.5625rem;align-items:flex-start;font-size:0.8438rem;color:var(--ink-2)}
.g2 svg{width:0.9375rem;height:0.9375rem;flex:none;margin-top:0.125rem;color:var(--steel)}
.g2 b{display:block;font-size:0.7188rem;letter-spacing:.06em;text-transform:uppercase;color:var(--steel)}
.aip{position:relative;margin-top:2.5rem;border-radius:1.625rem;padding:2.5rem;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:2.25rem;align-items:center;color:#fff;overflow:hidden;isolation:isolate;
  background:radial-gradient(32.5rem 20rem at 85% 40%,rgba(59,130,246,.35),transparent 70%),radial-gradient(25rem 16.25rem at 0% 100%,rgba(245,181,24,.14),transparent 70%),linear-gradient(135deg,#172B4D,#0E1C36)}
.aip::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.05) 0.0625rem,transparent 0.0625rem),linear-gradient(90deg,rgba(255,255,255,.05) 0.0625rem,transparent 0.0625rem);background-size:2rem 2rem;-webkit-mask-image:radial-gradient(ellipse at 70% 50%,#000,transparent 75%);mask-image:radial-gradient(ellipse at 70% 50%,#000,transparent 75%)}
.aip h3{font-size:1.875rem;color:#fff}
.aip h3 em{color:var(--amber)}
.aip p{color:#C3D2EA;margin-top:0.75rem;font-size:1rem}
.aip-r{background:rgba(255,255,255,.06);border:0.0625rem solid rgba(255,255,255,.12);border-radius:1.125rem;padding:1rem;backdrop-filter:blur(0.375rem)}
.aip-head{display:flex;align-items:center;gap:0.375rem;margin-bottom:0.75rem;font-size:0.75rem;color:#AFC3E3;font-weight:700;letter-spacing:.04em}
.aip-head i{width:0.5625rem;height:0.5625rem;border-radius:50%;background:rgba(255,255,255,.2)}
.aip-head i:first-child{background:#FF6B55}.aip-head i:nth-child(2){background:#F5B518}.aip-head i:nth-child(3){background:#36C17A}
.aip-head span{margin-left:0.5rem}
.six2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.5rem}
.six2 div{display:flex;gap:0.625rem;align-items:center;padding:0.6875rem 0.75rem;border-radius:0.75rem;background:rgba(255,255,255,.05);border:0.0625rem solid rgba(255,255,255,.08);font-size:0.9062rem;transition:background .15s,border-color .15s}
.six2 div:hover{background:rgba(255,255,255,.1);border-color:rgba(245,181,24,.5)}
.six2 code{font-family:ui-monospace,Consolas,monospace;font-size:0.75rem;color:var(--amber);background:rgba(245,181,24,.12);border-radius:0.375rem;padding:0.125rem 0.375rem}
/* plant + platform + cta backgrounds */
#pabrik{position:relative}
.zone{background:#F5F8FC;position:relative;isolation:isolate}
.zone::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(23,43,77,.09) 0.0625rem,transparent 0.075rem);background-size:1.375rem 1.375rem;-webkit-mask-image:linear-gradient(180deg,transparent,#000 40%,transparent);mask-image:linear-gradient(180deg,transparent,#000 40%,transparent)}
.ctab{position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(31.25rem 18.75rem at 100% 0%,rgba(245,181,24,.22),transparent 70%),radial-gradient(37.5rem 18.75rem at 0% 100%,rgba(59,130,246,.25),transparent 70%),linear-gradient(135deg,#172B4D,#0E1C36)}
.ctab::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,.12) 0.0625rem,transparent 0.075rem);background-size:1.25rem 1.25rem;-webkit-mask-image:linear-gradient(90deg,transparent,#000);mask-image:linear-gradient(90deg,transparent,#000)}
@media (max-width:1180px){
  .prog2,.fam2,.aip{grid-template-columns:minmax(0,1fr)}
  .tl2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tl2::before{display:none}
}
@media (max-width:560px){
  .sect > h2{font-size:1.75rem}
  .tl2{grid-template-columns:minmax(0,1fr);gap:0.5rem}
  .tl2::before{display:block;left:1.6875rem;right:auto;top:1.75rem;bottom:1.75rem;width:0.125rem;height:auto;background:linear-gradient(180deg,var(--navy),#2B4A78 33%,var(--amber) 66%,var(--ok))}
  .tl2-i{display:grid;grid-template-columns:3.5rem minmax(0,1fr);gap:0.875rem}
  .tl2-dot{flex-direction:column;margin:0}
  .tl2-c{height:auto;margin-bottom:0.75rem}
  .pc2,.fc2,.aip{padding:1.375rem}
  .pc2 .big b{font-size:2.25rem}
  .six2{grid-template-columns:minmax(0,1fr)}
  .fnum{font-size:2.5rem}
}

/* program: navy + gold */
.b-prog{background:radial-gradient(32.5rem 18.75rem at 0% 0%,rgba(212,175,55,.18),transparent 70%),radial-gradient(37.5rem 22.5rem at 100% 100%,rgba(59,130,246,.18),transparent 70%),linear-gradient(135deg,#172B4D,#0C1830) !important;color:#fff}
.b-prog::after{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(212,175,55,.08) 0.0625rem,transparent 0.0625rem),linear-gradient(90deg,rgba(212,175,55,.08) 0.0625rem,transparent 0.0625rem);background-size:2.75rem 2.75rem;-webkit-mask-image:radial-gradient(ellipse at 30% 20%,#000,transparent 70%);mask-image:radial-gradient(ellipse at 30% 20%,#000,transparent 70%)}
.b-prog .ey{color:#D4AF37}
.b-prog .ey::before{background:linear-gradient(90deg,#D4AF37,#F5D06F)}
.b-prog h2{color:#fff}
.b-prog h2 em{background:linear-gradient(90deg,#E9C46A,#F5B518 60%,#D4AF37);-webkit-background-clip:text;background-clip:text;color:transparent}
.b-prog p.sub{color:#B8C7DE}
.b-prog .prog2{align-items:stretch}
.b-prog .pc2{background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:0.0625rem solid rgba(212,175,55,.35);box-shadow:inset 0 0.0625rem 0 rgba(255,255,255,.08),0 1.875rem 3.75rem -1.875rem rgba(0,0,0,.6);backdrop-filter:blur(0.375rem)}
.b-prog .pc2::before{background:radial-gradient(circle,rgba(212,175,55,.20),transparent 65%) !important}
.b-prog .pc2:hover{transform:none;border-color:rgba(245,208,111,.75);box-shadow:inset 0 0.0625rem 0 rgba(255,255,255,.1),0 0 0 0.0625rem rgba(212,175,55,.3),0 1.875rem 3.75rem -1.875rem rgba(0,0,0,.7)}
.b-prog .pi2{background:rgba(212,175,55,.1);border:0.0625rem solid rgba(212,175,55,.55);color:#F5D06F !important;box-shadow:none}
.b-prog .pc2 .big b{background:linear-gradient(180deg,#F8DD8A,#D4AF37);-webkit-background-clip:text;background-clip:text;color:transparent !important}
.b-prog .pc2 .big span{color:#B8C7DE}
.b-prog .pc2 h3{color:#fff}
.b-prog .pc2 .lead2{color:#B8C7DE}
.b-prog .pc2 li{border-top-color:rgba(212,175,55,.18);color:#AFC0D8}
.b-prog .pc2 li b{color:#fff}
.b-prog .pc2 .ck{background:rgba(212,175,55,.14);color:#F5D06F}
.btn.gold{background:linear-gradient(180deg,#F5D06F,#D4AF37);border-color:#D4AF37;color:#172B4D;box-shadow:0 0.625rem 1.5rem -0.625rem rgba(212,175,55,.7)}
.btn.gold:hover{background:linear-gradient(180deg,#F8DD8A,#E0BC4A);border-color:#E0BC4A}
.btn.goldline{background:transparent;border-color:rgba(212,175,55,.8);color:#F5D06F}
.btn.goldline:hover{background:rgba(212,175,55,.12);border-color:#F5D06F}
/* hero plant header */
.hph{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;flex-wrap:wrap;padding:0.75rem 1rem;background:#fff;border-bottom:0.0625rem solid var(--line-2)}
.hph b{display:block;font-family:var(--display);font-size:0.9375rem;line-height:1.3}
.hph small{display:block;font-size:0.7812rem;color:var(--steel)}
.hpf{display:flex;gap:0.25rem;flex-wrap:wrap}
.hpf span{display:inline-flex;align-items:center;gap:0.375rem;font-size:0.75rem;font-weight:700;color:var(--ink-2);padding:0.25rem 0.5625rem;border-radius:62.4375rem;border:0.0625rem solid var(--line);cursor:default;transition:background .15s}
.hpf span i{width:0.5rem;height:0.5rem;border-radius:50%}
.hpf span:hover,.hpf span.on{background:var(--soft);border-color:#C3D0E0}

/* use case premium */
.ucHero{position:relative;isolation:isolate;background:#fff}
.ucHero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(37.5rem 18.75rem at 10% 0%,rgba(245,181,24,.12),transparent 70%),radial-gradient(43.75rem 22.5rem at 90% 10%,rgba(29,78,216,.10),transparent 70%)}
.ucHero::after{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(23,43,77,.10) 0.0625rem,transparent 0.075rem);background-size:1.375rem 1.375rem;-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 20%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 70% at 50% 20%,#000 20%,transparent 75%)}
.ucHero .sect{padding-top:2.75rem;padding-bottom:2.5rem}
.ucHero h1{font-size:2.5rem;letter-spacing:-.02em}
.ucHero h1 em{font-style:normal;color:var(--blue)}
.ucHero .sub{color:var(--steel);max-width:70ch;margin-top:0.625rem;font-size:1.0625rem}
.ucl2-h{margin:1.75rem 0 0.75rem;font-size:0.7812rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
.ucl2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.ucl2c{all:unset;cursor:pointer;box-sizing:border-box;position:relative;background:#fff;border:0.0625rem solid var(--line);border-radius:1.25rem;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s,border-color .2s}
.ucl2c .ph{position:relative;display:block;aspect-ratio:16/8;background:linear-gradient(180deg,#F4F8FC,#E3ECF6);overflow:hidden}
.ucl2c .ph img{position:absolute;left:50%;top:50%;width:112%;transform:translate(-50%,-50%);transition:transform .4s}
.ucl2c.crop .ph img{left:0;top:0;width:100%;height:100%;object-fit:cover;transform:none}
.ucl2c:hover .ph img{transform:translate(-50%,-50%) scale(1.04)}
.ucl2c.crop:hover .ph img{transform:scale(1.04)}
.ucl2c .nm{display:flex;justify-content:space-between;align-items:center;gap:0.625rem;padding:0.875rem 1rem}
.ucl2c .nm b{font-family:var(--display);font-size:1rem}
.ucl2c .nm small{font-size:0.75rem;font-weight:800;color:var(--steel);background:var(--soft);border:0.0625rem solid var(--line-2);border-radius:62.4375rem;padding:0.1875rem 0.5625rem;white-space:nowrap}
.ucl2c .ck{position:absolute;right:0.75rem;top:0.75rem;width:1.625rem;height:1.625rem;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#F5B518;opacity:0;transform:scale(.6);transition:opacity .2s,transform .2s}
.ucl2c .ck svg{width:0.875rem;height:0.875rem}
.ucl2c:hover{transform:translateY(-0.1875rem);box-shadow:0 1.5rem 2.75rem -1.625rem rgba(23,43,77,.4)}
.ucl2c[aria-pressed="true"]{border-color:var(--navy);box-shadow:0 0 0 0.125rem var(--navy),0 1.5rem 2.75rem -1.625rem rgba(23,43,77,.45)}
.ucl2c[aria-pressed="true"] .ck{opacity:1;transform:none}
.ucl2c:focus-visible{outline:0.1875rem solid rgba(29,78,216,.4)}
.ucBody{background:#F5F8FC;position:relative}
.ucBody::before{content:"";position:absolute;left:0;right:0;top:0;height:0.0625rem;background:linear-gradient(90deg,transparent,var(--line) 20%,var(--line) 80%,transparent)}
.ucBody .sect{padding-top:1.75rem;padding-bottom:1.25rem}
.ucbar{position:sticky;top:4.125rem;z-index:5;display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap;margin-bottom:1.25rem;padding:0.5rem 0;background:linear-gradient(180deg,#F5F8FC 75%,rgba(245,248,252,0))}
.ucg{display:grid;grid-template-columns:repeat(auto-fill,minmax(18.75rem,1fr));gap:1.125rem}
.ucc{all:unset;cursor:pointer;box-sizing:border-box;display:flex;flex-direction:column;background:#fff;border:0.0625rem solid var(--line);border-radius:1.25rem;overflow:hidden;transition:transform .2s,box-shadow .2s}
.ucc:hover{transform:translateY(-0.1875rem);box-shadow:0 1.625rem 3rem -1.75rem rgba(23,43,77,.4)}
.ucc:focus-visible{outline:0.1875rem solid rgba(29,78,216,.4)}
.ucc .viz{position:relative;aspect-ratio:16/8.5;background:var(--sky);border-bottom:0.0625rem solid var(--line-2)}
.ucc .viz::after{content:"";position:absolute;left:0;right:0;bottom:0;height:0.1875rem;background:linear-gradient(90deg,var(--rc),transparent)}
.ucc .viz canvas{position:absolute;inset:0;width:100%;height:100%}
.ucc .code{position:absolute;left:0.75rem;top:0.75rem;font-size:0.75rem;font-weight:800;background:#fff;border-radius:0.5rem;padding:0.1875rem 0.5625rem;box-shadow:0 0.125rem 0.375rem rgba(23,43,77,.14)}
.ucc .bd{padding:1.125rem;display:flex;flex-direction:column;gap:0.75rem;flex:1}
.ucc .tg{display:inline-block;font-size:0.6562rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;border-radius:62.4375rem;padding:0.1875rem 0.5625rem;margin-bottom:0.375rem}
.ucc .tg.ng{background:var(--red-soft);color:#B42318}
.ucc .tg.ok{background:var(--ok-soft);color:var(--ok-ink)}
.ucc .pr h3{font-size:1.0312rem;line-height:1.4}
.ucc .so{position:relative;padding-left:0.875rem;border-left:0.125rem solid #BBE5CB}
.ucc .so p{font-size:0.875rem;color:var(--steel)}
.ucc .ft{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:0.625rem;padding-top:0.75rem;border-top:0.0625rem solid var(--line-2)}
.ucc .fam{display:flex;align-items:center;gap:0.4375rem;font-size:0.8125rem;font-weight:700;color:var(--ink-2);min-width:0}
.ucc .fam i{width:0.5rem;height:0.5rem;border-radius:50%;background:var(--rc);flex:none}
.ucc .go{color:var(--blue);display:flex}
.ucc .go svg{width:1.125rem;height:1.125rem;transition:transform .15s}
.ucc:hover .go svg{transform:translate(0.125rem,-0.125rem)}
.ucc .lns{display:flex;gap:0.3125rem;flex-wrap:wrap}
.ucc .lns span{font-size:0.7188rem;font-weight:600;color:var(--steel);background:var(--soft);border-radius:0.375rem;padding:0.125rem 0.4375rem}
@media (max-width:1180px){ .ucl2{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:900px){ .ucbar{top:0} }
@media (max-width:560px){ .ucHero h1{font-size:1.75rem} .ucl2{grid-template-columns:minmax(0,1fr)} .ucbar .tabs{flex-wrap:nowrap;overflow-x:auto;max-width:100%} .ucbar .tabs button{flex:none} }

/* catalog premium */
.catHero{position:relative;isolation:isolate;background:#fff}
.catHero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(37.5rem 18.75rem at 0% 0%,rgba(245,181,24,.12),transparent 70%),radial-gradient(43.75rem 22.5rem at 100% 0%,rgba(29,78,216,.10),transparent 70%)}
.catHero::after{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(23,43,77,.10) 0.0625rem,transparent 0.075rem);background-size:1.375rem 1.375rem;-webkit-mask-image:radial-gradient(ellipse 70% 90% at 70% 0%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 90% at 70% 0%,#000 20%,transparent 75%)}
.catHero .sect{padding-top:2.75rem;padding-bottom:1.75rem}
.catHero h1{font-size:2.5rem;letter-spacing:-.02em}
.catHero .sub{color:var(--steel);max-width:70ch;margin-top:0.625rem;font-size:1.0625rem}
.cstats{display:flex;gap:0.625rem;flex-wrap:wrap;margin-top:1.25rem}
.cstats span{display:inline-flex;align-items:baseline;gap:0.4375rem;padding:0.5rem 0.875rem;border-radius:0.75rem;background:#fff;border:0.0625rem solid var(--line);font-size:0.8438rem;color:var(--steel);box-shadow:0 0.375rem 1rem -0.75rem rgba(23,43,77,.3)}
.cstats b{font-family:var(--display);font-size:1.125rem;color:var(--ink)}
.catbar{position:sticky;top:4.125rem;z-index:6;background:rgba(255,255,255,.92);backdrop-filter:blur(0.625rem);border-top:0.0625rem solid var(--line-2);border-bottom:0.0625rem solid var(--line)}
body:not(.guest) .catbar{top:3.625rem}
.catbar-in{max-width:82.5rem;margin:0 auto;padding:0.625rem 2rem;display:flex;gap:0.75rem;align-items:center}
.catbar .tabs{border:0;background:transparent;padding:0;flex-wrap:wrap;row-gap:0.25rem;flex:1;min-width:0;align-items:center}
.catbar .tabs button{flex:none;border:0.0625rem solid transparent}
.catbar .tabs button em{font-style:normal;font-size:0.7188rem;font-weight:800;background:var(--soft);color:var(--steel);border-radius:62.4375rem;padding:0.0625rem 0.4375rem;margin-left:0.125rem}
.catbar .tabs button[aria-selected="true"] em{background:rgba(255,255,255,.18);color:#fff}
.tlbl{flex:none;font-size:0.6562rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);padding:0 0.25rem 0 0.625rem}
.tgrp{display:inline-flex;align-items:center;gap:0.25rem;flex:none}
.tsep{flex:none;width:0.0625rem;height:1.375rem;background:var(--line);margin:0 0.25rem}
.catbar .search{flex:0 0 14.375rem;min-width:11.25rem}
.catSect{padding-top:1.75rem}
.rsec2{margin:1.125rem 0 2.75rem}
.rh2{position:relative;display:flex;gap:1rem;align-items:flex-start;padding-bottom:1.125rem;margin-bottom:1.25rem;border-bottom:0.0625rem solid var(--line)}
.rh2::after{content:"";position:absolute;left:0;bottom:-0.0625rem;width:7.5rem;height:0.1875rem;border-radius:0.125rem;background:var(--rc)}
.rh2 .ri2{width:3.25rem;height:3.25rem;flex:none}
.rh2 .rt{flex:1;min-width:0}
.rey{display:block;font-size:0.7188rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--rc)}
.rh2 h2{font-size:1.75rem;display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap;margin-top:0.125rem}
.rh2 h2 em{font-style:normal;font-family:var(--body);font-size:0.8125rem;font-weight:800;color:var(--steel);background:#fff;border:0.0625rem solid var(--line);border-radius:62.4375rem;padding:0.1875rem 0.625rem}
.rh2 p{color:var(--steel);font-size:0.9375rem;margin-top:0.375rem;max-width:80ch}
.rnum{font-family:var(--display);font-weight:800;font-size:4rem;line-height:.9;letter-spacing:-.04em;color:color-mix(in srgb,var(--rc) 14%,#fff)}
.ccard{border-radius:1.25rem}
.ccard:hover{transform:translateY(-0.1875rem);box-shadow:0 1.625rem 3rem -1.75rem rgba(23,43,77,.4)}
.ccard .viz{border-bottom:0}
.ccard .viz::after{content:"";position:absolute;left:0;right:0;bottom:0;height:0.1875rem;background:linear-gradient(90deg,var(--rc),transparent)}
.ccard .viz .chip.code{display:inline-flex;align-items:center;gap:0.375rem;font-size:0.7812rem;padding:0.1875rem 0.625rem 0.1875rem 0.5625rem}
.ccard .viz .chip.code small{font-size:0.5938rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);padding-right:0.375rem;border-right:0.0625rem solid var(--line)}
.ccard .meta{gap:0.875rem;flex-wrap:wrap}
.ccard .meta span{display:inline-flex;align-items:center;gap:0.25rem}
.ccard .meta span svg{width:0.8125rem;height:0.8125rem;color:var(--mute)}
.fmods{display:flex;flex-wrap:wrap;gap:0.375rem;margin-top:0.375rem}
.fmods span{display:inline-flex;align-items:center;gap:0.375rem;font-size:0.7812rem;color:var(--ink-2);background:var(--soft);border:0.0625rem solid var(--line-2);border-radius:0.5rem;padding:0.25rem 0.5625rem}
.fmods b{font-size:0.7188rem;color:#7A5CD6}
@media (max-width:900px){ .catbar{top:0} body:not(.guest) .catbar{top:0} .catbar-in{flex-wrap:wrap;padding:0.625rem 1rem} .catbar .search{flex:1 1 100%} .rnum{display:none} }
@media (max-width:560px){ .catHero h1{font-size:1.75rem} .rh2 h2{font-size:1.375rem} .catbar .tabs{flex-wrap:nowrap;overflow-x:auto} }

.ucl3{display:flex !important;flex-wrap:wrap;gap:0.375rem;margin-top:0.25rem;white-space:normal !important;overflow:visible !important}
.ucl3 a{display:inline-flex;align-items:center;gap:0.375rem;font-size:0.7812rem;font-weight:600;color:var(--ink);background:var(--soft);border:0.0625rem solid var(--line-2);border-radius:0.5rem;padding:0.1875rem 0.5rem;text-decoration:none}
.ucl3 a:hover{border-color:var(--blue);text-decoration:none}
.ucl3 em{font-style:normal;font-weight:800;font-size:0.6875rem;color:var(--steel)}
.hcap.wide{align-items:flex-start}
.hpf span{cursor:pointer}

/* ===== navy + gold sections (menu targets) ===== */
.nv{position:relative;isolation:isolate;color:#fff;background:radial-gradient(32.5rem 18.75rem at 0% 0%,rgba(212,175,55,.18),transparent 70%),radial-gradient(37.5rem 22.5rem at 100% 100%,rgba(59,130,246,.18),transparent 70%),linear-gradient(135deg,#172B4D,#0C1830) !important}
.nv::before{content:"" !important;position:absolute;inset:0;z-index:-1;background:none !important}
.nv::after{content:"" !important;position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(212,175,55,.08) 0.0625rem,transparent 0.0625rem),linear-gradient(90deg,rgba(212,175,55,.08) 0.0625rem,transparent 0.0625rem) !important;background-size:2.75rem 2.75rem !important;-webkit-mask-image:radial-gradient(ellipse at 30% 20%,#000,transparent 70%) !important;mask-image:radial-gradient(ellipse at 30% 20%,#000,transparent 70%) !important}
.nv .ey{color:#D4AF37}
.nv .ey::before{background:linear-gradient(90deg,#D4AF37,#F5D06F)}
.nv h1,.nv h2,.nv h3{color:#fff}
.nv h1 em,.nv h2 em{font-style:normal;background:linear-gradient(90deg,#E9C46A,#F5B518 60%,#D4AF37);-webkit-background-clip:text;background-clip:text;color:transparent}
.nv .sub,.nv p.sub{color:#B8C7DE}
.nv .muted{color:#9FB2CE}
.glass{background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:0.0625rem solid rgba(212,175,55,.35);box-shadow:inset 0 0.0625rem 0 rgba(255,255,255,.08),0 1.875rem 3.75rem -1.875rem rgba(0,0,0,.6);backdrop-filter:blur(0.375rem)}
.band.nv + .band::before,.band.nv + .sect::before,.band + .band.nv::before{display:none}

/* use case header v3 */
.ucTop{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(20rem,.85fr);gap:2.5rem;align-items:start}
.ucHero .sect{padding-top:2.5rem;padding-bottom:2.25rem}
.ucHero .ucl2-h{color:#D4AF37;margin-top:1.875rem}
.aiAs{border-radius:1.25rem;padding:1rem;display:flex;flex-direction:column;gap:0.375rem;background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:0.0625rem solid rgba(212,175,55,.35);box-shadow:inset 0 0.0625rem 0 rgba(255,255,255,.08),0 1.875rem 3.75rem -1.875rem rgba(0,0,0,.6)}
.aiH{font-family:var(--display);font-weight:700;font-size:0.9375rem;color:#F5D06F;padding:0.125rem 0.375rem 0.375rem}
.aiR{all:unset;cursor:pointer;box-sizing:border-box;display:flex;align-items:center;gap:0.75rem;padding:0.625rem 0.75rem;border-radius:0.75rem;border:0.0625rem solid transparent;transition:background .15s,border-color .15s}
.aiR i{width:0.625rem;height:0.625rem;border-radius:50%;background:var(--rc);flex:none;box-shadow:0 0 0 0.25rem color-mix(in srgb,var(--rc) 25%,transparent)}
.aiR span{flex:1;min-width:0;display:flex;flex-direction:column}
.aiR b{font-size:0.9062rem;color:#fff}
.aiR small{font-size:0.8125rem;color:#B8C7DE;line-height:1.35}
.aiR em{font-style:normal;font-size:0.75rem;font-weight:800;color:#F5D06F;background:rgba(212,175,55,.12);border:0.0625rem solid rgba(212,175,55,.4);border-radius:62.4375rem;padding:0.125rem 0.5625rem}
.aiR:hover{background:rgba(255,255,255,.06)}
.aiR[aria-pressed="true"]{background:rgba(212,175,55,.12);border-color:rgba(245,208,111,.7)}
.aiR:focus-visible,.aiAll:focus-visible{outline:0.125rem solid #F5D06F}
.aiAll{all:unset;cursor:pointer;align-self:flex-start;margin:0.25rem 0.375rem 0;font-size:0.7812rem;font-weight:700;color:#B8C7DE;border-bottom:0.0625rem dashed rgba(184,199,222,.5)}
.aiAll[aria-pressed="true"]{color:#F5D06F;border-bottom-color:#F5D06F}
.ucl2{grid-template-columns:repeat(6,minmax(0,1fr)) !important;gap:0.75rem}
.ucl2c{border-radius:0.875rem;border-color:rgba(255,255,255,.14)}
.ucl2c .ph{aspect-ratio:16/10}
.ucl2c .nm{flex-direction:column;align-items:flex-start;gap:0.25rem;padding:0.625rem 0.75rem}
.ucl2c .nm b{font-size:0.8438rem;line-height:1.25;color:var(--ink)}
.ucl2c .nm small{font-size:0.6875rem;padding:0.125rem 0.4375rem}
.ucl2c .ck{width:1.375rem;height:1.375rem;right:0.5rem;top:0.5rem}
.ucl2c[aria-pressed="true"]{border-color:#D4AF37;box-shadow:0 0 0 0.125rem #D4AF37,0 1.5rem 2.75rem -1.625rem rgba(0,0,0,.6)}
.ucl2c .ck{background:#D4AF37;color:#172B4D}
.ucc .hw{background:#F4F7FD;border:0.0625rem solid #DFE7F7;border-radius:0.75rem;padding:0.625rem 0.75rem}
.ucc .tg.ai{display:inline-flex;align-items:center;gap:0.3125rem;background:#E8EEFC;color:var(--blue)}
.ucc .tg.ai svg{width:0.75rem;height:0.75rem}
.ucc .hw p{font-size:0.875rem;color:var(--ink-2);line-height:1.5}
.ffch{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:0.4375rem;font-size:0.8125rem;font-weight:700;background:#fff;border:0.0625rem solid var(--line);border-radius:62.4375rem;padding:0.3125rem 0.6875rem}
.ffch i{width:0.5rem;height:0.5rem;border-radius:50%;background:var(--rc)}
.ffch span{color:var(--steel);font-size:0.9375rem;line-height:1}
.ffch:hover{border-color:var(--navy)}
.ucEmpty{grid-column:1/-1;padding:1.875rem 0}
@media (max-width:1180px){ .ucTop{gap:1.75rem} .ucl2{grid-template-columns:repeat(3,minmax(0,1fr)) !important} }
@media (max-width:960px){ .ucTop{grid-template-columns:minmax(0,1fr)} }
@media (max-width:560px){ .ucl2{display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:0.375rem} .ucl2c{flex:0 0 46%;scroll-snap-align:start} }


/* catalog header v3 */
.catTop{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(22.5rem,.9fr);gap:2.5rem;align-items:center}
.catHero .sect{padding-top:2.25rem;padding-bottom:2rem}
.catHero .cstats{flex-wrap:nowrap;gap:0.5rem}
.catHero .cstats span{background:rgba(255,255,255,.06);border-color:rgba(212,175,55,.3);color:#B8C7DE;box-shadow:none;padding:0.4375rem 0.75rem}
.catHero .cstats b{color:#F5D06F}
.strk{border-radius:1.25rem;padding:0.875rem;display:flex;flex-direction:column;gap:0.25rem;background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:0.0625rem solid rgba(212,175,55,.35);box-shadow:inset 0 0.0625rem 0 rgba(255,255,255,.08),0 1.875rem 3.75rem -1.875rem rgba(0,0,0,.6);position:relative}
.skH{font-family:var(--display);font-weight:700;font-size:0.9375rem;color:#F5D06F;padding:0.125rem 0.5rem 0.5rem;display:flex;justify-content:space-between;align-items:baseline;gap:0.625rem}
.skH small{font-family:var(--body);font-size:0.75rem;font-weight:600;color:#8FA3C2}
.skR{all:unset;box-sizing:border-box;display:flex;align-items:flex-start;gap:0.75rem;padding:0.5625rem 0.625rem;border-radius:0.75rem;border:0.0625rem solid transparent;position:relative}
button.skR{cursor:pointer}
button.skR:hover,.skR[aria-pressed="true"]{background:rgba(212,175,55,.1);border-color:rgba(245,208,111,.55)}
.skR > svg{width:1rem;height:1rem;color:#D4AF37;margin-left:auto;align-self:center;transform:rotate(-90deg)}
.skR:not(:last-child)::after{content:"";position:absolute;left:1.4375rem;top:2.25rem;bottom:-0.5rem;width:0.0625rem;background:rgba(212,175,55,.35)}
.skN{width:1.625rem;height:1.625rem;flex:none;border-radius:50%;display:grid;place-items:center;font-size:0.7812rem;font-weight:800;color:#172B4D;background:linear-gradient(180deg,#F8DD8A,#D4AF37);position:relative;z-index:1}
.skT{display:flex;flex-direction:column;gap:0.125rem;min-width:0;flex:1}
.skT b{font-size:0.875rem;color:#fff}
.skT small{font-size:0.7812rem;color:#9FB2CE;line-height:1.35}
.skF{display:grid;grid-template-columns:1fr 1fr;gap:0.375rem;margin-top:0.375rem}
.skF button{all:unset;cursor:pointer;box-sizing:border-box;display:flex;align-items:center;gap:0.4375rem;font-size:0.7812rem;font-weight:700;color:#E6EDF7;background:rgba(255,255,255,.06);border:0.0625rem solid rgba(255,255,255,.12);border-radius:0.5625rem;padding:0.375rem 0.5625rem}
.skF button i{width:0.5rem;height:0.5rem;border-radius:50%;background:var(--rc);flex:none}
.skF button em{font-style:normal;margin-left:auto;font-size:0.7188rem;font-weight:800;color:#F5D06F}
.skF button:hover,.skF button[aria-pressed="true"]{border-color:#D4AF37;background:rgba(212,175,55,.14)}
.skR:focus-visible,.skF button:focus-visible{outline:0.125rem solid #F5D06F}
@media (max-width:1180px){ .catHero .cstats{flex-wrap:wrap} .catTop{gap:1.75rem} }
@media (max-width:960px){ .catTop{grid-template-columns:minmax(0,1fr)} }
@media (max-width:560px){ .skF{grid-template-columns:minmax(0,1fr)} .skH{flex-direction:column;gap:0.125rem} }


/* landing menu sections: navy + gold */
.nv.alt{background:radial-gradient(43.75rem 20rem at 50% 0%,rgba(212,175,55,.14),transparent 70%),radial-gradient(37.5rem 22.5rem at 0% 100%,rgba(59,130,246,.14),transparent 70%),linear-gradient(180deg,#0F1F3A,#0B1730) !important}
.nv.alt::after{background-image:radial-gradient(rgba(212,175,55,.16) 0.0625rem,transparent 0.0813rem) !important;background-size:1.5rem 1.5rem !important;-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000,transparent 75%) !important;mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000,transparent 75%) !important}
.band.nv{border-top:0.0625rem solid rgba(212,175,55,.22)}
.band.nv::before{display:none}
.zone.nv{margin-top:0;padding-bottom:0;border-bottom:0}
.b-plant > .sect{padding-top:4.5rem}
#bidang,#cara,#program,#platform{scroll-margin-top:4.125rem}
/* bidang */
.b-fam.nv .fc2{border-color:rgba(212,175,55,.25);box-shadow:0 1.875rem 3.75rem -2.125rem rgba(0,0,0,.7)}
.b-fam.nv .fc2:hover{box-shadow:0 0 0 0.0625rem rgba(212,175,55,.55),0 1.875rem 3.75rem -1.875rem rgba(0,0,0,.8)}
.b-fam.nv .fc2 h3{color:var(--ink)}
/* flow */
.b-how.nv .tl2::before{background:linear-gradient(90deg,rgba(212,175,55,.35),#D4AF37 50%,#F5D06F)}
.b-how.nv .tl2-dot span,.b-how.nv .tl2-i:nth-child(n) .tl2-dot span{background:#13264A;border-color:#D4AF37;color:#F5D06F;box-shadow:0 0 0 0.375rem #10213F}
.b-how.nv .tl2-dot em{background:#13264A;color:#D4AF37;border-radius:0.375rem;padding:0.0625rem 0.4375rem;border:0.0625rem solid rgba(212,175,55,.35)}
.b-how.nv .tl2-c{background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:0.0625rem solid rgba(212,175,55,.3);box-shadow:inset 0 0.0625rem 0 rgba(255,255,255,.08);backdrop-filter:blur(0.375rem)}
.b-how.nv .tl2-c:hover{border-color:rgba(245,208,111,.7);box-shadow:0 1.5rem 3rem -1.625rem rgba(0,0,0,.7)}
.b-how.nv .tl2-c .dur{background:rgba(212,175,55,.14);color:#F5D06F}
.b-how.nv .tl2-c p{color:#B8C7DE}
.b-how.nv .g2{border-top-color:rgba(212,175,55,.25);color:#D6E0EE}
.b-how.nv .g2 svg,.b-how.nv .g2 b{color:#D4AF37}
.sres{display:flex;flex-direction:column;gap:0.125rem;margin-top:0.25rem;padding:0.5625rem 0.6875rem;border-radius:0.625rem;font-size:0.8438rem;line-height:1.45;color:var(--ink-2);background:var(--soft)}
.sres b{font-size:0.6562rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ok-ink)}
.b-how.nv .sres{background:rgba(54,193,122,.1);border:0.0625rem solid rgba(54,193,122,.28);color:#E6F4EC}
.b-how.nv .sres b{color:#6EE7A8}
.note2{display:inline-flex;align-items:center;gap:0.5rem;margin-top:0.875rem;padding:0.4375rem 0.75rem;border-radius:0.625rem;font-size:0.8438rem;color:var(--ink-2);background:var(--soft)}
.note2 svg{width:0.9375rem;height:0.9375rem;flex:none}
.b-how.nv .note2{background:rgba(212,175,55,.1);border:0.0625rem solid rgba(212,175,55,.35);color:#F2E3B3}
.b-how.nv .note2 svg{color:#D4AF37}
.b-how.nv .aip{border:0.0625rem solid rgba(212,175,55,.4);background:radial-gradient(32.5rem 20rem at 85% 40%,rgba(59,130,246,.28),transparent 70%),radial-gradient(25rem 16.25rem at 0% 100%,rgba(212,175,55,.16),transparent 70%),linear-gradient(135deg,#1A3260,#0F2142)}
.b-how.nv .aip .ey{color:#D4AF37}
.b-how.nv .six2 code{color:#F5D06F;background:rgba(212,175,55,.14)}
/* plant */
.b-plant .plantwrap{border-color:rgba(212,175,55,.4);box-shadow:0 2.5rem 5rem -2.5rem rgba(0,0,0,.8)}
/* platform */
.zone.nv .rolecard{background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border-color:rgba(212,175,55,.3)}
.zone.nv .rolecard:hover{border-color:rgba(245,208,111,.75);box-shadow:0 1.25rem 2.5rem -1.5rem rgba(0,0,0,.7)}
.zone.nv .rolecard b{color:#fff}
.zone.nv .rolecard span{color:#B8C7DE}
.zone.nv .rolecard .ri{background:rgba(212,175,55,.1);border-color:rgba(212,175,55,.5);color:#F5D06F;box-shadow:none}
.zone.nv .rolecard:hover .ri{background:#D4AF37;color:#172B4D;border-color:#D4AF37}
.zone.nv .rolecard .go{color:#D4AF37}


/* menu: active item navy + gold */
.gnav nav button{position:relative;transition:background .15s,color .15s}
.gnav nav button:hover{background:rgba(23,43,77,.12)}
.gnav nav button[aria-current]{background:linear-gradient(135deg,#172B4D,#0C1830);color:#F5D06F}
.gnav nav button[aria-current]::after{content:"";position:absolute;left:0.8125rem;right:0.8125rem;bottom:0.25rem;height:0.125rem;border-radius:0.125rem;background:linear-gradient(90deg,#D4AF37,#F5D06F)}
.gnav nav .ddb[aria-current] svg{color:#F5D06F}
.ddp{background:linear-gradient(160deg,#172B4D,#0C1830);border-color:rgba(212,175,55,.45);box-shadow:0 1.5rem 3.125rem -0.625rem rgba(5,12,28,.55)}
.ddi:hover,.ddi:focus-visible{background:rgba(212,175,55,.12)}
.ddi .di{background:rgba(212,175,55,.12);color:#F5D06F;border:0.0625rem solid rgba(212,175,55,.4)}
.ddi b{color:#fff}
.ddi small{color:#9FB2CE}
.ddi em{color:#D4AF37}
.ddall{color:#F5D06F;border-top-color:rgba(212,175,55,.25)}
.ddall:hover{background:rgba(212,175,55,.12)}
.snav button[aria-current="page"]{position:relative;background:linear-gradient(135deg,#172B4D,#0C1830);color:#F5D06F}
.snav button[aria-current="page"]::before{content:"";position:absolute;left:0;top:0.4375rem;bottom:0.4375rem;width:0.1875rem;border-radius:0 0.1875rem 0.1875rem 0;background:#D4AF37}

@media (max-width:560px){ .gnav{gap:0.5rem;column-gap:0.5rem} .gnav .brand small{display:none} .gnav .sp{display:none} .gnav .lang{margin-left:auto} .gnav .brand b{font-size:0.8438rem;letter-spacing:0} .gnav .lang button{padding:0.3125rem 0.5rem !important} .gnav .btn.sm{padding:0.5rem 0.75rem} }


/* class page: back bar + navy-gold hero */
.backbar{display:flex;align-items:center;gap:0.875rem;flex-wrap:wrap;margin:-0.25rem 0 1rem}
.backbar .bk{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:0.4375rem;padding:0.4375rem 0.8125rem 0.4375rem 0.625rem;border-radius:62.4375rem;font-size:0.875rem;font-weight:700;color:var(--ink);background:#fff;border:0.0625rem solid var(--line);transition:border-color .15s,box-shadow .15s}
.backbar .bk svg{width:1rem;height:1rem;transform:rotate(180deg);color:#B8860B}
.backbar .bk:hover{border-color:#D4AF37;box-shadow:0 0 0 0.1875rem rgba(212,175,55,.18)}
.backbar .bk:focus-visible{outline:0.1875rem solid rgba(212,175,55,.5)}
.backbar .bc{display:flex;align-items:center;gap:0.5rem;font-size:0.875rem;color:var(--steel);min-width:0;flex-wrap:wrap}
.backbar .bc a{color:var(--steel);font-weight:600}
.backbar .bc a:hover{color:var(--ink)}
.backbar .bc i{font-style:normal;color:#C9A227}
.backbar .bc b{color:var(--ink)}
body:not(.guest) .backbar .bc{display:none}
.chero{border-color:rgba(212,175,55,.35)}
.chero .txt{position:relative;isolation:isolate;background:radial-gradient(26.25rem 16.25rem at 0% 0%,rgba(212,175,55,.18),transparent 70%),radial-gradient(26.25rem 16.25rem at 100% 100%,rgba(59,130,246,.18),transparent 70%),linear-gradient(135deg,#172B4D,#0C1830)}
.chero .txt::after{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(212,175,55,.07) 0.0625rem,transparent 0.0625rem),linear-gradient(90deg,rgba(212,175,55,.07) 0.0625rem,transparent 0.0625rem);background-size:2.25rem 2.25rem;-webkit-mask-image:radial-gradient(ellipse at 20% 10%,#000,transparent 70%);mask-image:radial-gradient(ellipse at 20% 10%,#000,transparent 70%)}
.chero .txt .chip.code{background:linear-gradient(180deg,#F8DD8A,#D4AF37);border-color:#D4AF37;color:#172B4D}
.chero p.lead{color:#B8C7DE}
.chero .kv div{background:rgba(255,255,255,.06);border-color:rgba(212,175,55,.3)}
.chero .kv b{color:#F5D06F}
.chero .kv span{color:#9FB2CE}
.chero .viz{border-left-color:rgba(212,175,55,.25)}


/* digital plant header: narrative + what happens */
.plTop{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(20rem,.8fr);gap:2.5rem;align-items:center}
.plTop h2{font-size:2.375rem;letter-spacing:-.02em;max-width:24ch}
.plTop p.sub{margin-top:0.625rem;font-size:1.0625rem;max-width:70ch}
.nv .plantwrap{color:var(--ink)}
@media (max-width:900px){ .plTop h2{font-size:1.75rem} }
.plSide{border-radius:1.25rem;padding:0.875rem;display:flex;flex-direction:column;gap:0.25rem;background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:0.0625rem solid rgba(212,175,55,.35);box-shadow:inset 0 0.0625rem 0 rgba(255,255,255,.08),0 1.875rem 3.75rem -1.875rem rgba(0,0,0,.6)}
.plSide .aiR{padding:0.5rem 0.625rem}
.plSide .aiR em{white-space:nowrap}
@media (max-width:1180px){ .plTop{gap:1.75rem} }
@media (max-width:960px){ .plTop{grid-template-columns:minmax(0,1fr)} }

/* learning flow: white with deep-gold accents */
.b-how{background:#fff !important}
.b-how::after{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(23,43,77,.09) 0.0625rem,transparent 0.075rem);background-size:1.375rem 1.375rem;-webkit-mask-image:radial-gradient(ellipse 70% 50% at 50% 0%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 50% at 50% 0%,#000 20%,transparent 75%)}
.b-how .ey{color:#A87C0F}
.b-how .ey::before{background:linear-gradient(90deg,#B8860B,#D4AF37)}
.b-how h2 em{font-style:normal;background:linear-gradient(90deg,#B8860B,#D4A017 60%,#B8860B);-webkit-background-clip:text;background-clip:text;color:transparent}
.b-how .tl2::before{background:linear-gradient(90deg,rgba(184,134,11,.35),#C9A227 50%,#D4AF37)}
.b-how .tl2-dot span,.b-how .tl2-i:nth-child(n) .tl2-dot span{background:#fff;border-color:#C9A227;color:#172B4D;box-shadow:0 0 0 0.375rem #fff,0 0.5rem 1.125rem -0.5rem rgba(184,134,11,.5)}
.b-how .tl2-dot em{background:#FFF8E1;color:#8A6508;border:0.0625rem solid #EBD38A;border-radius:0.375rem;padding:0.0625rem 0.4375rem}
.b-how .tl2-c{background:#fff;border:0.0625rem solid var(--line);box-shadow:0 0.875rem 1.875rem -1.5rem rgba(23,43,77,.35)}
.b-how .tl2-c:hover{border-color:#E2C870;box-shadow:0 1.375rem 2.75rem -1.625rem rgba(23,43,77,.4)}
.b-how .tl2-c .dur{background:#FFF4D2;color:#8A6508}
.b-how .tl2-c p{color:var(--steel)}
.b-how .sres{background:var(--ok-soft);border:0.0625rem solid #BBE5CB;color:var(--ink-2)}
.b-how .sres b{color:var(--ok-ink)}
.b-how .g2{border-top-color:var(--line);color:var(--ink-2)}
.b-how .g2 svg,.b-how .g2 b{color:#A87C0F}
.b-how .note2{background:#FFF8E1;border:0.0625rem solid #EBD38A;color:#5C4306}
.b-how .note2 svg{color:#A87C0F}
.b-how .aip{border:0.0625rem solid rgba(212,175,55,.45)}
.b-how .aip .ey{color:#D4AF37}
.b-how .aip h3 em{color:#F5D06F}
.b-how .six2 code{color:#F5D06F;background:rgba(212,175,55,.14)}
.b-fam.nv + .b-how::before{display:none}


/* fixed-size inline svgs scale with the root font size too */
svg.bm{width:2.25rem;height:2.25rem;flex:none}
svg[width="20"]{width:1.25rem;height:1.25rem;flex:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}