/*
Theme Name: VSR Power
Theme URI: https://vsrtech.in/
Author: VSR Tech
Description: IBM i (AS400), AIX and Power Systems theme for VSR Tech. Edit homepage text in Appearance → Customize → VSR Homepage; services and FAQs under Services and FAQs in wp-admin; contact form enquiries are saved under Enquiries.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vsr-power
*/
/* Layout: dark-first IBM Power practice site. Hero = headline + platform-switchable console (IBM i 5250 / AIX topas); ticker; KPI band; platform pillars; filterable service explorer; version/tool matrix; incident replay (two scenarios); health score (two question sets); modernization grid; process; models; FAQ; contact. */
:root{
  --bg:#0A1020; --bg-2:#0F1729; --surface:#131D33; --ink:#E8EDF7; --muted:#97A3BC; --line:#22304D;
  --accent:#6E95FF; --accent-2:#3DD6C4; --accent-ink:#0A1020; --accent-soft:rgba(110,149,255,.12);
  --glow:rgba(110,149,255,.35);
  --ibmi:#FFB21A; --aix:#5FE08A; --power:#B49CFF;
  --term-bg:#070A07; --term-fg:#FFB21A; --term-dim:#9E701B; --term-hi:#FFE2A3; --term-ok:#7FD48A;
  --aix-fg:#8FEA9F; --aix-dim:#4F8A5A; --aix-hi:#D6FFDC;
  --good:#3DD6A0; --warn:#FFB547; --bad:#FF6B6B;
  --f-display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --wrap:1200px; color-scheme:dark;
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --bg:#F2F4F9; --bg-2:#E8ECF4; --surface:#FFFFFF; --ink:#0E1A2E; --muted:#56627A; --line:#D6DCE8;
  --accent:#1E4FD8; --accent-2:#0E8F83; --accent-ink:#FFFFFF; --accent-soft:rgba(30,79,216,.08); --glow:rgba(30,79,216,.22);
  --ibmi:#B26A00; --aix:#1C8C45; --power:#6B4FD8;
  --good:#0E9F6E; --warn:#C27803; --bad:#D63B3B; color-scheme:light }}
:root[data-theme="light"]{
  --bg:#F2F4F9; --bg-2:#E8ECF4; --surface:#FFFFFF; --ink:#0E1A2E; --muted:#56627A; --line:#D6DCE8;
  --accent:#1E4FD8; --accent-2:#0E8F83; --accent-ink:#FFFFFF; --accent-soft:rgba(30,79,216,.08); --glow:rgba(30,79,216,.22);
  --ibmi:#B26A00; --aix:#1C8C45; --power:#6B4FD8;
  --good:#0E9F6E; --warn:#C27803; --bad:#D63B3B; color-scheme:light }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.6;padding-inline:20px;overflow-x:hidden}
.wrap{max-width:var(--wrap);margin-inline:auto;position:relative}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--f-display);font-stretch:112%;line-height:1.08;text-wrap:balance;margin:0}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:800;letter-spacing:-.015em}
h3{font-size:1.2rem;font-weight:700}
p{margin:0}
.eyebrow{font-family:var(--f-mono);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2);display:inline-flex;align-items:center;gap:8px}
.eyebrow::before{content:"";width:18px;height:1px;background:currentColor}
.lede{color:var(--muted);max-width:64ch}
#top > section{padding-block:clamp(60px,8vw,110px);border-top:1px solid var(--line)}
.sec-head{display:grid;gap:14px;margin-bottom:46px;max-width:800px}
.reveal{transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .7s}
.js .reveal.pre{transform:translateY(18px);opacity:.35}
.plat{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.06em;padding:2px 8px;border-radius:99px;border:1px solid currentColor;white-space:nowrap}
.plat.ibmi{color:var(--ibmi)}.plat.aix{color:var(--aix)}.plat.power{color:var(--power)}

.bgfx{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(800px 500px at 85% -10%,var(--glow),transparent 60%),radial-gradient(600px 400px at -10% 30%,rgba(61,214,196,.10),transparent 60%),linear-gradient(var(--line) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/48px 48px;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.25) 520px,transparent 900px);mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.25) 520px,transparent 900px);opacity:.6}

/* Header */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--line);margin-inline:-20px;padding-inline:20px}
.statusbar{display:flex;justify-content:space-between;gap:12px;font-family:var(--f-mono);font-size:.72rem;color:var(--muted);padding-block:6px;border-bottom:1px solid var(--line)}
.statusbar .live{display:inline-flex;align-items:center;gap:8px;color:var(--good)}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 60%,transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand-mark{font-family:var(--f-mono);font-weight:500;font-size:.85rem;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--accent-ink);padding:5px 8px;border-radius:4px}
.brand b{font-family:var(--f-display);font-stretch:125%;font-weight:800;font-size:1.15rem;letter-spacing:.03em}
.brand small{display:block;font-size:.7rem;color:var(--muted);line-height:1}
.links{display:flex;gap:24px;align-items:center}
.links a{color:var(--ink);text-decoration:none;font-size:.93rem;opacity:.85}
.links a:hover{opacity:1;color:var(--accent)}
.btn{display:inline-flex;align-items:center;gap:8px;font:600 .95rem var(--f-body);padding:12px 20px;border-radius:8px;border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .2s;opacity:1!important}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 30px -10px var(--accent)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink);box-shadow:none}
.btn.sm{padding:9px 16px;font-size:.88rem}
.mnav{display:none}
@media (max-width:980px){
  .links{display:none}.mnav{display:block;position:relative}
  .mnav summary{list-style:none;cursor:pointer;font:600 .9rem var(--f-body);border:1px solid var(--line);padding:8px 14px;border-radius:8px}
  .mnav summary::-webkit-details-marker{display:none}
  .mnav nav{position:absolute;right:0;top:calc(100% + 8px);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px;display:grid;min-width:210px;box-shadow:0 20px 50px -20px rgba(0,0,0,.6)}
  .mnav nav a{padding:10px 12px;color:var(--ink);text-decoration:none;border-radius:6px}
  .mnav nav a:hover{background:var(--accent-soft)}
  .statusbar .hide-sm{display:none}
}

/* Segmented switch (shared) */
.switch{display:inline-flex;border:1px solid var(--line);border-radius:10px;padding:3px;background:var(--bg-2);gap:2px}
.switch button{all:unset;cursor:pointer;font-family:var(--f-mono);font-size:.8rem;padding:7px 14px;border-radius:7px;color:var(--muted);white-space:nowrap}
.switch button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 0 var(--line),0 0 0 1px var(--line)}
.switch button[data-p="ibmi"][aria-pressed="true"]{color:var(--ibmi)}
.switch button[data-p="aix"][aria-pressed="true"]{color:var(--aix)}
.switch button[data-p="power"][aria-pressed="true"]{color:var(--power)}
.switch button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* Hero */
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,5vw,72px);align-items:center;padding-block:clamp(48px,7vw,96px) clamp(40px,5vw,64px)}
.hero>*{min-width:0}
.hero h1{font-size:clamp(2.5rem,5.4vw,4.4rem);font-weight:800;letter-spacing:-.025em;margin-block:20px 22px}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lede{font-size:1.1rem}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.trust{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.chip{font-family:var(--f-mono);font-size:.76rem;padding:6px 11px;border:1px solid var(--line);border-radius:99px;color:var(--muted);background:var(--bg-2)}
.chip b{color:var(--ink);font-weight:500}
@media (max-width:980px){.hero{grid-template-columns:1fr}}

/* Console */
.console-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.console-top .label{font-family:var(--f-mono);font-size:.74rem;color:var(--muted)}
.console-wrap{position:relative}
.console-wrap::before{content:"";position:absolute;inset:-30px 0;background:radial-gradient(closest-side,rgba(255,178,26,.16),transparent);filter:blur(10px);z-index:-1;transition:background .4s}
.console-wrap.aix::before{background:radial-gradient(closest-side,rgba(95,224,138,.16),transparent)}
.console{background:var(--term-bg);color:var(--term-fg);font-family:var(--f-mono);font-size:clamp(.62rem,1.1vw,.78rem);line-height:1.55;border-radius:12px;border:1px solid #2a2310;padding:0 0 14px;box-shadow:0 40px 80px -30px rgba(0,0,0,.7);position:relative;overflow:hidden}
.console.aix{color:var(--aix-fg);border-color:#16301c}
.console::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0 2px,rgba(0,0,0,.2) 2px 3px)}
.console .chrome{display:flex;align-items:center;gap:7px;padding:10px 14px;background:#121007;border-bottom:1px solid #2a2310;color:var(--term-dim);font-size:.9em}
.console.aix .chrome{background:#0a140c;border-color:#16301c;color:var(--aix-dim)}
.console .chrome i{width:9px;height:9px;border-radius:50%;background:#3a3218}
.console.aix .chrome i{background:#1d3a24}
.console .chrome span{margin-left:auto}
.console pre{margin:0;padding:12px 18px 0;font:inherit;white-space:pre;overflow-x:auto}
.hi{color:var(--term-hi)}.ok{color:var(--term-ok)}.dimt{color:var(--term-dim)}
.console.aix .hi{color:var(--aix-hi)}.console.aix .dimt{color:var(--aix-dim)}
.cursor{display:inline-block;width:.6em;height:1.05em;background:currentColor;vertical-align:text-bottom;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.console-cap{display:flex;justify-content:space-between;gap:10px;margin-top:12px;font-family:var(--f-mono);font-size:.72rem;color:var(--muted)}

/* Ticker */
.ticker{border-block:1px solid var(--line);margin-inline:-20px;overflow:hidden;background:var(--bg-2)}
.ticker-track{display:flex;gap:44px;width:max-content;padding-block:16px;animation:slide 55s linear infinite;font-family:var(--f-mono);font-size:.86rem;color:var(--muted)}
.ticker-track span::before{content:"▸ ";color:var(--accent-2)}
@keyframes slide{to{transform:translateX(-50%)}}

/* KPIs */
.kpis{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:clamp(40px,6vw,64px)}
.kpi{background:var(--surface);padding:26px 24px;display:grid;gap:4px}
.kpi .n{font-family:var(--f-display);font-stretch:112%;font-weight:800;font-size:clamp(2rem,3.4vw,2.7rem);line-height:1;font-variant-numeric:tabular-nums}
.kpi .n small{font-size:.5em;color:var(--accent-2);margin-left:2px}
.kpi .l{color:var(--muted);font-size:.9rem}
@media (max-width:760px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Pillars */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pillar{border:1px solid var(--line);border-radius:14px;padding:28px;background:var(--surface);display:grid;gap:14px;align-content:start;position:relative;overflow:hidden}
.pillar::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--c)}
.pillar.ibmi{--c:var(--ibmi)}.pillar.aix{--c:var(--aix)}.pillar.power{--c:var(--power)}
.pillar .k{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--c)}
.pillar h3{font-size:1.45rem;font-weight:800}
.pillar p{color:var(--muted);font-size:.96rem}
.pillar ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.pillar li{font-family:var(--f-mono);font-size:.74rem;padding:4px 9px;border:1px solid var(--line);border-radius:6px;background:var(--bg-2)}
@media (max-width:900px){.pillars{grid-template-columns:1fr}}

/* Service explorer */
.ex-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;margin-bottom:20px}
.ex-bar .count{font-family:var(--f-mono);font-size:.78rem;color:var(--muted)}
.explorer{display:grid;grid-template-columns:320px 1fr;gap:24px;align-items:start}
.explorer>*{min-width:0}
.tabs{display:grid;gap:6px;max-height:640px;overflow-y:auto;padding-right:4px}
.tab{all:unset;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;padding:13px 16px;border-radius:10px;border:1px solid transparent;transition:background .2s,border-color .2s}
.tab .t{font-weight:600}
.tab .s{font-size:.78rem;color:var(--muted);font-family:var(--f-mono);grid-column:1}
.tab .plat{grid-row:1/span 2;grid-column:2}
.tab:hover{background:var(--bg-2)}
.tab[aria-selected="true"]{background:var(--surface);border-color:var(--line);box-shadow:inset 3px 0 0 var(--accent)}
.tab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:clamp(24px,3.5vw,40px);display:grid;gap:22px;min-height:460px;align-content:start}
.panel-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:center}
.panel h3{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:800}
.cmdline{font-family:var(--f-mono);font-size:.8rem;background:var(--term-bg);color:var(--term-fg);padding:8px 12px;border-radius:6px;overflow-x:auto;max-width:100%}
.cmdline.aix{color:var(--aix-fg)}
.panel .desc{color:var(--muted);font-size:1.03rem;max-width:64ch}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.cols>*{min-width:0}
.cols h4{margin:0 0 10px;font-family:var(--f-mono);font-weight:500;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-2)}
.cols ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.cols li{display:grid;grid-template-columns:18px 1fr;gap:8px;font-size:.95rem}
.cols li::before{content:"✓";color:var(--accent);font-weight:700}
.panel-foot{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-top:18px;border-top:1px solid var(--line)}
.panel.anim{animation:fadeIn .35s ease}
@keyframes fadeIn{from{opacity:.2;transform:translateY(6px)}}
@media (max-width:900px){.explorer{grid-template-columns:1fr}.tabs{grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);overflow-x:auto;max-height:none;padding-bottom:6px}.cols{grid-template-columns:1fr}}

/* Matrix */
.matrix{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.matrix table{border-collapse:collapse;width:100%;min-width:760px;font-size:.94rem}
.matrix th,.matrix td{text-align:left;padding:16px 20px;border-bottom:1px solid var(--line);vertical-align:top}
.matrix th{font-family:var(--f-mono);font-weight:500;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:var(--bg-2)}
.matrix tr:last-child td{border-bottom:0}
.matrix td:first-child{font-weight:600;white-space:nowrap}
.matrix td.mono{font-family:var(--f-mono);font-size:.84rem}
.lvl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:24px}
.lvl div{background:var(--surface);padding:20px;display:grid;gap:6px;align-content:start}
.lvl b{font-family:var(--f-display);font-stretch:112%;font-size:1.5rem;color:var(--accent)}
.lvl span{font-size:.9rem;color:var(--muted)}
@media (max-width:760px){.lvl{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Incident replay */
.incident{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.inc-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;align-items:center;padding:20px 24px;border-bottom:1px solid var(--line)}
.inc-head .title{font-family:var(--f-mono);font-size:.86rem;min-width:0}
.inc-head .title b{color:var(--warn);font-weight:500}
.inc-ctrl{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.clock{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:1.4rem;color:var(--accent-2)}
.lane{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.stage{padding:24px 20px 26px;border-right:1px solid var(--line);display:grid;gap:8px;align-content:start;position:relative;transition:background .3s}
.stage:last-child{border-right:0}
.stage .when{font-family:var(--f-mono);font-size:.76rem;color:var(--muted)}
.stage .who{justify-self:start;font-family:var(--f-mono);font-size:.7rem;padding:2px 8px;border-radius:99px;border:1px solid var(--line);color:var(--muted)}
.stage h4{margin:0;font-family:var(--f-display);font-stretch:112%;font-size:1.05rem}
.stage p{font-size:.9rem;color:var(--muted)}
.stage code{font-family:var(--f-mono);font-size:.82em;color:var(--ink);background:var(--bg-2);padding:1px 5px;border-radius:4px}
.stage::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--line);transition:background .3s}
.stage.on::before{background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.stage.cur{background:var(--accent-soft)}
.stage.cur .who{color:var(--accent);border-color:var(--accent)}
@media (max-width:900px){.lane{grid-template-columns:1fr}.stage{border-right:0;border-bottom:1px solid var(--line)}.stage::before{right:auto;bottom:0;width:3px;height:auto}}

/* Health score */
.health{display:grid;grid-template-columns:1.2fr 1fr;gap:24px}
.health>*{min-width:0}
.qs{display:grid;gap:10px;align-content:start}
.q{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:10px}
.q span{font-size:.96rem;min-width:0}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;flex-shrink:0}
.seg button{all:unset;cursor:pointer;font-family:var(--f-mono);font-size:.8rem;padding:7px 14px;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.result{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:28px;display:grid;gap:18px;align-content:start;position:sticky;top:130px}
.gauge{display:grid;place-items:center;position:relative}
.gauge svg{width:min(220px,100%);height:auto}
.gauge .val{position:absolute;text-align:center}
.gauge .val b{display:block;font-family:var(--f-display);font-stretch:112%;font-size:3rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.gauge .val span{font-family:var(--f-mono);font-size:.74rem;color:var(--muted);letter-spacing:.1em}
.verdict{font-weight:600;text-align:center}
.recs{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:.92rem;color:var(--muted)}
.recs li{padding-left:16px;position:relative}
.recs li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:2px;background:var(--warn)}
@media (max-width:900px){.health{grid-template-columns:1fr}.result{position:static}}

/* Modernize */
.modern{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.mcard{border:1px solid var(--line);border-radius:14px;padding:26px;background:linear-gradient(180deg,var(--surface),var(--bg-2));display:grid;gap:12px;align-content:start}
.mcard .ba{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;font-family:var(--f-mono);font-size:.74rem}
.mcard .ba span{padding:6px 8px;border-radius:6px;border:1px solid var(--line);text-align:center}
.mcard .ba span:last-child{border-color:var(--accent-2);color:var(--accent-2)}
.mcard p{color:var(--muted);font-size:.95rem}
.mcard .plat{justify-self:start}
@media (max-width:900px){.modern{grid-template-columns:1fr}}

/* Code sample */
.codeblock{background:var(--term-bg);color:#D7DEEA;border-radius:12px;border:1px solid var(--line);overflow:hidden;margin-top:28px}
.codeblock .cb-head{display:flex;justify-content:space-between;gap:10px;padding:10px 16px;font-family:var(--f-mono);font-size:.74rem;color:#7C879C;border-bottom:1px solid #1c2333;flex-wrap:wrap}
.codeblock .cb-grid{display:grid;grid-template-columns:1fr 1fr}
.codeblock .cb-grid>div{min-width:0;border-right:1px solid #1c2333}
.codeblock .cb-grid>div:last-child{border-right:0}
.codeblock .cap{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;padding:10px 16px 0;color:#7C879C}
.codeblock pre{margin:0;padding:10px 16px 16px;font:.78rem/1.6 var(--f-mono);overflow-x:auto;white-space:pre}
.codeblock .kw{color:#7FA2FF}.codeblock .st{color:#8FEA9F}.codeblock .cm{color:#6B7488}
@media (max-width:800px){.codeblock .cb-grid{grid-template-columns:1fr}.codeblock .cb-grid>div{border-right:0;border-bottom:1px solid #1c2333}}

/* Process */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;counter-reset:s}
.step{display:grid;gap:10px;padding-top:18px;border-top:2px solid var(--line);position:relative}
.step::after{content:"";position:absolute;top:-2px;left:0;width:40%;height:2px;background:var(--accent)}
.step::before{counter-increment:s;content:"STEP " counter(s,decimal-leading-zero);font-family:var(--f-mono);font-size:.74rem;letter-spacing:.12em;color:var(--accent-2)}
.step p{color:var(--muted);font-size:.95rem}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* Models */
.models{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.model{border:1px solid var(--line);border-radius:14px;padding:28px;background:var(--surface);display:grid;gap:12px;align-content:start}
.model.pick{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 30px 60px -30px var(--glow)}
.pill{justify-self:start;font-family:var(--f-mono);font-size:.72rem;padding:3px 10px;border-radius:99px;border:1px solid var(--accent);color:var(--accent)}
.model p{color:var(--muted);font-size:.95rem}
.model ul{margin:0;padding-left:18px;font-size:.93rem;display:grid;gap:4px}
@media (max-width:900px){.models{grid-template-columns:1fr}}

/* FAQ */
.split{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(32px,5vw,72px);align-items:start}
.split>*{min-width:0}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;font-weight:600;font-size:1.04rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:16px;font-family:var(--f-mono);font-size:1.3rem;color:var(--accent)}
.faq details[open] summary::after{content:"−"}
.faq .answer{color:var(--muted);padding-bottom:22px;max-width:70ch}

/* Contact */
.contact{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,5vw,64px)}
.contact>*{min-width:0}
.channels{display:grid;gap:18px;margin-top:28px}
.channel{display:grid;gap:2px}
.channel .k{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.channel .v{font-size:1.08rem;font-weight:600}
.copy{all:unset;cursor:pointer;font-family:var(--f-mono);font-size:.72rem;color:var(--accent);margin-left:8px}
#enquiry{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:28px;display:grid;gap:16px}
#enquiry .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){#enquiry .row{grid-template-columns:1fr}}
#enquiry label{display:grid;gap:6px;font-size:.88rem;font-weight:500}
#enquiry input,#enquiry select,#enquiry textarea{font:inherit;font-size:.97rem;padding:11px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);width:100%}
#enquiry textarea{min-height:110px;resize:vertical}
.form-note{font-size:.88rem;color:var(--muted)}
.sent{font-family:var(--f-mono);font-size:.88rem;color:var(--good)}
@media (max-width:900px){.contact{grid-template-columns:1fr}}

.site-footer{border-top:1px solid var(--line);padding-block:36px;display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between;color:var(--muted);font-size:.88rem}
.site-footer nav{display:flex;flex-wrap:wrap;gap:20px}
.site-footer a{color:var(--muted);text-decoration:none}
.site-footer a:hover{color:var(--accent)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}.js .reveal.pre{transform:none;opacity:1}}

/* ---------- WordPress additions ---------- */
body{margin:0}
img{max-width:100%;height:auto}
[hidden]{display:none!important}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:16px;top:16px;z-index:100;background:var(--surface);color:var(--ink);padding:8px 12px;border-radius:6px}
.admin-bar header.top{top:32px}
@media (max-width:782px){.admin-bar header.top{top:46px}}
@media (max-width:600px){.admin-bar header.top{top:0}}
.logo{display:inline-flex;align-items:center;flex-shrink:0}
.logo.plate{background:#fff;padding:6px 10px;border-radius:8px;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.logo img{display:block;width:auto;max-width:220px;object-fit:contain}
.tagline{font-size:.72rem;color:var(--muted);max-width:16ch;line-height:1.3}
@media (max-width:520px){.tagline{display:none}.logo img{max-width:160px}}
.links ul{display:flex;gap:24px;list-style:none;margin:0;padding:0;align-items:center}
.links ul a{color:var(--ink);text-decoration:none;font-size:.93rem;opacity:.85}
.links ul a:hover{opacity:1;color:var(--accent)}
.mnav nav ul{list-style:none;margin:0;padding:0;display:grid}
.mnav nav .btn{margin-top:8px;justify-content:center}
.panels{min-width:0}
.channel .v a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.channel .v a:hover{color:var(--accent);border-color:var(--accent)}
.faq .answer p{margin:0 0 10px}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.notice{padding:12px 14px;border-radius:8px;font-size:.93rem;margin:0}
.notice.ok{border:1px solid var(--good);color:var(--good);background:color-mix(in srgb,var(--good) 10%,transparent)}
.notice.bad{border:1px solid var(--bad);color:var(--bad);background:color-mix(in srgb,var(--bad) 10%,transparent)}
.site-footer ul{display:flex;flex-wrap:wrap;gap:20px;list-style:none;margin:0;padding:0}
.site-footer .tm{flex-basis:100%;font-size:.78rem}

/* Inner pages (Submit Ticket, My Tickets, About...) */
.page-wrap{padding-block:clamp(40px,6vw,80px)}
.entry-head{display:grid;gap:12px;margin-bottom:28px}
.entry-head h1{font-size:clamp(2rem,4.4vw,3.2rem);font-weight:800;letter-spacing:-.015em}
.entry-card{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:clamp(20px,4vw,44px);overflow-x:auto}
.vsr-inner-light .entry-card{--surface:#FFFFFF;--ink:#0E1A2E;--muted:#56627A;--line:#D6DCE8;--bg:#F6F8FC;--bg-2:#EEF1F7;--accent:#1E4FD8;--accent-ink:#FFFFFF;background:#FFFFFF;color:#0E1A2E;color-scheme:light}
.entry-content{line-height:1.7}
.entry-content>*+*{margin-top:1em}
.entry-content h2,.entry-content h3{margin-top:1.6em}
.entry-content a{color:var(--accent)}
.entry-content table{border-collapse:collapse;width:100%}
.entry-content th,.entry-content td{border:1px solid var(--line);padding:8px 10px;text-align:left}
.entry-content input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]),.entry-content select,.entry-content textarea{font:inherit;padding:9px 11px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink);max-width:100%}
.post-item{padding-block:18px;border-bottom:1px solid var(--line)}
.post-item h2{font-size:1.4rem;margin:0}
.post-item .meta{color:var(--muted);font-size:.85rem}
.links .btn,.links .btn:hover{color:var(--accent-ink);opacity:1}

/* ---------- v1.1: menus ---------- */
.links .nav-menu{display:flex;gap:22px;list-style:none;margin:0;padding:0;align-items:center}
.links .nav-menu>li{position:relative}
.links .nav-menu a{color:var(--ink);text-decoration:none;font-size:.93rem;opacity:.85}
.links .nav-menu a:hover,.links .nav-menu .current-menu-item>a,.links .nav-menu .current-menu-parent>a{opacity:1;color:var(--accent)}
.links .menu-item-has-children{padding-block:12px;margin-block:-12px}
.links .menu-item-has-children>a::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg);opacity:.7}
.links .sub-menu{position:absolute;top:100%;left:-14px;min-width:240px;list-style:none;margin:0;padding:8px;display:grid;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 24px 50px -20px rgba(0,0,0,.55);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s,transform .18s,visibility .18s;z-index:40}
.links li:hover>.sub-menu,.links li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none}
.links .sub-menu a{display:block;padding:10px 12px;border-radius:8px;opacity:1;font-size:.92rem}
.links .sub-menu a:hover{background:var(--accent-soft)}
.mnav nav .nav-menu{list-style:none;margin:0;padding:0;display:grid}
.mnav nav .nav-menu a{display:block;padding:10px 12px;color:var(--ink);text-decoration:none;border-radius:6px}
.mnav nav .sub-menu{list-style:none;margin:0 0 6px 12px;padding:0 0 0 8px;border-left:1px solid var(--line);display:grid}
.mnav nav .sub-menu a{font-size:.92rem;color:var(--muted)}
.mnav nav{max-height:75vh;overflow-y:auto}
.pillar .more{font-family:var(--f-mono);font-size:.8rem;color:var(--accent);text-decoration:none;justify-self:start}
.pillar .more:hover{text-decoration:underline}

/* ---------- v1.1: detail pages (services, about) ---------- */
.detail{--c:var(--power)}
.detail.c-ibmi{--c:var(--ibmi)}.detail.c-aix{--c:var(--aix)}
.d-hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr);gap:clamp(28px,5vw,64px);align-items:end;padding-block:clamp(36px,6vw,80px) clamp(32px,4vw,56px)}
.d-hero h1{font-size:clamp(2.4rem,5.2vw,4.2rem);font-weight:800;letter-spacing:-.025em;margin-block:16px 18px}
.d-hero .lede{font-size:1.1rem}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-family:var(--f-mono);font-size:.76rem;color:var(--muted);margin-bottom:22px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.crumbs [aria-current]{color:var(--ink)}
.detail .eyebrow{color:var(--c)}
.glance{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px 24px;display:grid;gap:14px;position:relative;overflow:hidden}
.glance::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--c)}
.glance .k,.toc .k{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.glance dl{margin:0;display:grid}
.glance dl>div{display:grid;gap:2px;padding-block:11px;border-bottom:1px solid var(--line)}
.glance dl>div:last-child{border-bottom:0;padding-bottom:0}
.glance dt{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.glance dd{margin:0;font-weight:600}
.d-body{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(28px,5vw,72px);padding-block:clamp(36px,5vw,72px);border-top:1px solid var(--line)}
.d-body.no-toc{grid-template-columns:minmax(0,1fr)}
.d-body.no-toc .toc{display:none}
.toc{position:sticky;top:140px;align-self:start;display:grid;gap:12px}
.admin-bar .toc{top:172px}
.toc ol{list-style:none;margin:0;padding:0;display:grid;border-left:1px solid var(--line)}
.toc a{display:block;padding:7px 14px;margin-left:-1px;border-left:2px solid transparent;color:var(--muted);text-decoration:none;font-size:.9rem;line-height:1.35}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--ink);border-left-color:var(--c)}
@media (max-width:900px){.d-hero,.d-body{grid-template-columns:minmax(0,1fr)}.toc{display:none}}

.prose{max-width:800px;font-size:1.04rem;line-height:1.7}
.prose>*{margin:0}
.prose>*+*{margin-top:1.1em}
.prose p{color:color-mix(in srgb,var(--ink) 84%,var(--bg))}
.prose h2{font-size:clamp(1.6rem,2.8vw,2.2rem);font-weight:800;letter-spacing:-.01em;margin-top:2.2em;padding-top:1.1em;border-top:1px solid var(--line);scroll-margin-top:150px}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose h3{font-size:1.18rem;margin-top:1.9em;display:flex;align-items:center;gap:10px;scroll-margin-top:150px}
.prose h3::before{content:"";flex:0 0 8px;height:8px;border-radius:2px;background:var(--c)}
.prose h2+h3{margin-top:1.2em}
.prose strong{color:var(--ink)}
.prose a{color:var(--accent)}
.prose ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 28px}
.prose ul li{position:relative;padding-left:26px}
.prose ul li::before{content:"✓";position:absolute;left:0;top:0;color:var(--accent);font-weight:700}
@media (max-width:700px){.prose ul{grid-template-columns:1fr}}
.prose ol{list-style:none;padding:0;counter-reset:o;display:grid;gap:12px}
.prose ol li{counter-increment:o;display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.prose ol li::before{content:counter(o,decimal-leading-zero);font-family:var(--f-mono);font-size:.85rem;color:var(--c);padding-top:3px}
.prose .wp-block-table{margin-inline:0;overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.prose table{border-collapse:collapse;width:100%;min-width:560px;font-size:.95rem;table-layout:auto}
.prose th,.prose td{text-align:left;padding:14px 18px;border:0;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{font-family:var(--f-mono);font-weight:500;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:var(--bg-2)}
.prose tr:last-child td{border-bottom:0}
.prose td:first-child{font-weight:600;color:var(--ink);white-space:nowrap}
.prose .callout{border:1px solid var(--line);border-left:3px solid var(--c);background:var(--surface);border-radius:10px;padding:14px 18px;color:var(--ink);font-size:.97rem}

.svc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:16px}
.svc-cards.hub{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));margin-bottom:clamp(36px,5vw,64px)}
.svc-card{--c:var(--power);display:grid;gap:10px;align-content:start;padding:24px 22px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);text-decoration:none;position:relative;overflow:hidden;transition:border-color .2s,transform .2s}
.svc-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--c)}
.svc-card.ibmi{--c:var(--ibmi)}.svc-card.aix{--c:var(--aix)}
.svc-card h3{font-size:1.2rem}
.svc-card p{color:var(--muted);font-size:.93rem}
.svc-card .more{font-family:var(--f-mono);font-size:.78rem;color:var(--accent)}
.svc-card:hover{border-color:var(--c);transform:translateY(-2px)}
.related{padding-block:clamp(40px,6vw,72px);border-top:1px solid var(--line)}
.related h2{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:800;margin-bottom:24px}
.detail > #contact{padding-block:clamp(60px,8vw,110px);border-top:1px solid var(--line)}
@media (prefers-reduced-motion:reduce){.svc-card:hover{transform:none}}