:root{
  --ink:#080a12; --ink-soft:#0d1020; --blue:#0b1638; --blue-soft:#0e1c46;
  --card:#141826; --card-blue:#132147; --border:#242a40; --border-blue:#294073;
  --text:#eef1fb; --muted:#a2acc9; --dim:#7b86a6;
  --blueA:#5b8cff; --violet:#a06bff; --grad:linear-gradient(135deg,#5b8cff 0%,#a06bff 100%);
  --grad-soft:linear-gradient(135deg,rgba(91,140,255,.16),rgba(160,107,255,.16));
  --verified:#33e0a1; --verified-bg:rgba(51,224,161,.13); --verified-br:rgba(51,224,161,.4);
  --code-bg:rgba(120,150,255,.15); --code-fg:#bcd0ff; --code-br:rgba(120,150,255,.34);
  --link:#7fa6ff; --link-h:#c3a4ff;
  --r:16px; --r-lg:22px; --r-sm:9px;
  --shadow:0 24px 60px -24px rgba(0,0,0,.75);
  --glow:0 0 44px -6px rgba(91,140,255,.55);
  --maxw:1240px; --measure:66ch;
  --fd:'Chakra Petch',system-ui,sans-serif;
  --fb:'Plus Jakarta Sans',system-ui,sans-serif;
  --fm:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--fb);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
h1,h2,h3,.fd{font-family:var(--fd);letter-spacing:-.01em;line-height:1.1}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-h)}
p{margin:0 0 15px;color:var(--muted);max-width:var(--measure)}
p a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(127,166,255,.5)}
code{font-family:var(--fm);font-size:.85em;background:var(--code-bg);color:var(--code-fg);border:1px solid var(--code-br);border-radius:6px;padding:.14em .45em;white-space:nowrap}
:focus-visible{outline:2px solid var(--blueA);outline-offset:3px;border-radius:5px}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:70;background:rgba(8,10,18,.78);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;gap:8px;height:70px}
.brand{display:inline-flex;align-items:center;gap:11px;color:var(--text)}
.brand:hover{color:var(--text)}
.brand .logo{width:38px;height:38px;border-radius:10px;background:var(--grad);position:relative;flex:0 0 auto;
  box-shadow:0 8px 20px -6px rgba(91,140,255,.7),inset 0 0 0 1px rgba(255,255,255,.14);display:grid;place-items:center}
.brand .logo b{font-family:var(--fd);font-weight:700;font-size:.86rem;color:#fff;letter-spacing:.02em}
.brand .wm{font-family:var(--fd);font-weight:700;font-size:1.24rem;letter-spacing:-.02em;line-height:1}
.brand .wm span{color:var(--blueA)}
.brand .tag{font-family:var(--fm);font-size:.6rem;color:var(--violet);border:1px solid rgba(160,107,255,.5);
  padding:2px 5px;border-radius:5px;margin-left:1px;transform:translateY(-1px)}
.menu{display:flex;align-items:center;gap:2px;margin-left:22px;list-style:none;padding:0}
.menu>li{position:relative}
.menu>li>a,.menu .top{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:9px;color:var(--muted);
  font-weight:600;font-size:.94rem;cursor:pointer;background:none;border:0;font-family:var(--fb)}
.menu>li>a:hover,.menu .top:hover,.menu>li:focus-within .top{color:var(--text);background:rgba(91,140,255,.12)}
.menu .chev{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s}
.menu>li:hover .chev,.menu>li:focus-within .chev{transform:rotate(225deg) translateY(-1px)}
.drop{position:absolute;top:calc(100% + 9px);left:0;min-width:252px;background:var(--ink-soft);border:1px solid var(--border);
  border-radius:14px;box-shadow:var(--shadow);padding:8px;opacity:0;visibility:hidden;transform:translateY(9px);
  transition:opacity .2s,transform .2s,visibility .2s}
.menu>li:hover .drop,.menu>li:focus-within .drop{opacity:1;visibility:visible;transform:translateY(0)}
.drop a{display:block;padding:10px 12px;border-radius:9px;color:var(--muted);font-size:.92rem;font-weight:500;transition:.16s}
.drop a:hover{background:rgba(91,140,255,.14);color:var(--text);transform:translateX(4px)}
.nav .spacer{flex:1}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--fd);font-weight:600;
  border-radius:11px;padding:12px 22px;cursor:pointer;border:1px solid transparent;font-size:.98rem;
  transition:transform .2s,box-shadow .2s,background .2s,border-color .2s,color .2s;text-decoration:none;white-space:nowrap}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 12px 28px -10px rgba(120,110,255,.85)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 38px -10px rgba(120,110,255,.95),var(--glow)}
.btn-ghost{background:rgba(255,255,255,.03);color:var(--text);border-color:var(--border-blue)}
.btn-ghost:hover{border-color:var(--blueA);color:#fff;background:rgba(91,140,255,.12);transform:translateY(-2px)}
.hamburger{display:none;background:var(--card);border:1px solid var(--border);color:var(--text);width:42px;height:42px;border-radius:10px;font-size:1.1rem;cursor:pointer}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(900px 500px at 82% 0%,rgba(160,107,255,.28),transparent 58%),
  radial-gradient(760px 460px at 8% 12%,rgba(91,140,255,.24),transparent 55%),
  linear-gradient(180deg,#0a0f26,#080a12 78%)}
.hero .grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:46px 46px;mask-image:radial-gradient(700px 400px at 60% 20%,#000,transparent 75%);opacity:.6}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:48px;align-items:center;padding:54px 26px 66px}
h1.htitle{font-size:clamp(2.7rem,6vw,4.3rem);font-weight:700;margin:0 0 20px}
h1.htitle .accent{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hlead{font-size:1.24rem;line-height:1.5;color:#fff;font-weight:500;margin:0 0 14px;max-width:36ch}
.hsub{color:var(--muted);margin:0 0 28px;max-width:52ch}
.hcta{display:flex;gap:14px;flex-wrap:wrap}

/* featured hero card = real USA download */
.feature{position:relative;background:linear-gradient(180deg,var(--card-blue),#0f1836);border:1px solid var(--border-blue);
  border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow)}
.feature::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:var(--grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.55;pointer-events:none}
.feature .pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--fm);font-size:.72rem;color:var(--violet);
  background:rgba(160,107,255,.14);border:1px solid rgba(160,107,255,.42);padding:5px 11px;border-radius:100px;margin-bottom:14px}
.feature h3{font-size:1.7rem;margin:0 0 4px}
.feature .sub{color:var(--muted);font-size:.95rem;margin:0 0 16px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.chip-m{font-family:var(--fm);font-size:.82rem;color:#dbe6ff;background:rgba(91,140,255,.14);border:1px solid rgba(91,140,255,.34);padding:6px 10px;border-radius:8px}
.vchip{display:inline-flex;align-items:center;gap:7px;font-family:var(--fm);font-size:.76rem;color:var(--verified);background:var(--verified-bg);border:1px solid var(--verified-br);padding:5px 11px;border-radius:100px}
.feature .alllink{display:block;text-align:center;margin-top:13px;font-size:.9rem;font-weight:600}

/* ---------- sections & rhythm ---------- */
section{padding:66px 0;position:relative}
.s-blue{background:linear-gradient(180deg,var(--blue),var(--blue-soft));border-top:1px solid var(--border-blue);border-bottom:1px solid var(--border-blue)}
.s-dark{background:var(--ink)}
.s-head{max-width:60ch;margin-bottom:26px}
h2{font-size:clamp(1.75rem,3.3vw,2.5rem);font-weight:700;margin:0 0 12px}
.lead{font-size:1.15rem;color:#fff;font-weight:600;margin:0 0 12px;font-family:var(--fb);max-width:62ch}
.s-blue p,.s-blue .lead{color:#c7d3f2}
.s-blue .lead{color:#fff}

/* download cards grid */
.dl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(256px,1fr));gap:20px}
.card{position:relative;background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px 22px 22px;
  display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s}
.card .top-accent{position:absolute;top:0;left:22px;right:22px;height:3px;border-radius:0 0 4px 4px;background:var(--grad);opacity:.85}
.card:hover{transform:translateY(-7px) scale(1.02);border-color:var(--blueA);box-shadow:var(--shadow),var(--glow)}
.card.feat{border-color:rgba(160,107,255,.5);background:linear-gradient(180deg,#191636,var(--card) 55%)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.card-head h3{font-size:1.42rem;margin:0}
.rbadge{font-family:var(--fm);font-size:.66rem;padding:4px 9px;border-radius:100px;border:1px solid var(--border);color:var(--dim);white-space:nowrap}
.rbadge.rec{color:#fff;border-color:transparent;background:var(--grad)}
.card .files{color:var(--muted);font-size:.9rem;margin:2px 0 14px;display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.card .vchip{margin:0 0 18px}
.card .spend{flex:1}
.dl-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px;border-radius:12px;
  font-family:var(--fd);font-weight:600;font-size:.98rem;color:#fff;background:var(--grad);border:0;cursor:pointer;
  box-shadow:0 10px 24px -12px rgba(120,110,255,.9);transition:transform .2s,box-shadow .2s,filter .2s}
.dl-btn:hover{transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(120,110,255,1);filter:brightness(1.06);text-decoration:none}
.dl-btn.alt{background:rgba(91,140,255,.14);color:var(--blueA);border:1px solid rgba(91,140,255,.4);box-shadow:none}
.dl-btn.alt:hover{background:var(--grad);color:#fff}
.dl-note{margin-top:22px;color:var(--muted)}

/* split w/ svg */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.svgbox{border:1px solid var(--border-blue);background:linear-gradient(160deg,rgba(91,140,255,.08),rgba(160,107,255,.06));
  border-radius:var(--r-lg);min-height:230px;display:grid;place-items:center;text-align:center;padding:26px;position:relative}
.svgbox .tag{position:absolute;top:13px;left:13px;font-family:var(--fm);font-size:.66rem;color:var(--violet);
  background:rgba(160,107,255,.15);border:1px solid rgba(160,107,255,.4);padding:3px 8px;border-radius:6px}
.svgbox .nm{font-family:var(--fm);color:var(--blueA);font-size:.95rem}
.svgbox .fl{color:var(--dim);font-size:.82rem;margin-top:8px}

/* table */
.tbl-wrap{overflow-x:auto;border:1px solid var(--border-blue);border-radius:var(--r);margin-top:6px}
.tbl{width:100%;border-collapse:collapse;font-size:.97rem;min-width:520px}
.tbl thead th{font-family:var(--fd);font-weight:600;text-align:left;padding:14px 18px;background:rgba(91,140,255,.16);color:#fff;font-size:.92rem;border-bottom:1px solid var(--border-blue)}
.tbl td{padding:13px 18px;border-bottom:1px solid rgba(41,64,115,.5);color:#c7d3f2}
.tbl tbody tr:nth-child(even) td{background:rgba(91,140,255,.05)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl td:first-child{color:#fff;font-weight:600}

/* emulator cards */
.emu{list-style:none;padding:0;margin:6px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.emu li{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:16px 18px;color:var(--muted);transition:transform .22s,border-color .22s,box-shadow .22s}
.emu li:hover{transform:translateY(-4px);border-color:var(--blueA);box-shadow:var(--glow)}
.emu strong{color:#fff;font-family:var(--fd);font-weight:600}
.s-blue .emu li{background:var(--card-blue);border-color:var(--border-blue)}

/* steps */
.steps{list-style:none;counter-reset:s;padding:0;margin:8px 0 0;display:grid;gap:14px;max-width:820px}
.steps li{counter-increment:s;position:relative;padding:18px 20px 18px 76px;background:var(--card);border:1px solid var(--border);border-radius:var(--r);color:#fff;font-weight:500;font-size:1.02rem}
.steps li::before{content:counter(s);position:absolute;left:18px;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:12px;
  display:grid;place-items:center;font-family:var(--fd);font-weight:700;font-size:1.3rem;color:#fff;background:var(--grad);box-shadow:0 8px 18px -8px rgba(120,110,255,.9)}
.s-blue .steps li{background:var(--card-blue);border-color:var(--border-blue)}

/* honest panel (on-brand) */
.honest{position:relative;background:linear-gradient(160deg,rgba(91,140,255,.1),rgba(160,107,255,.08));
  border:1px solid var(--border-blue);border-radius:var(--r-lg);padding:32px 34px;overflow:hidden}
.honest::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad)}
.honest h2{margin-top:0}

/* faq */
.faq{display:grid;gap:12px;max-width:900px}
.faq details{background:var(--card);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;transition:border-color .2s}
.faq details[open]{border-color:var(--blueA)}
.faq summary{cursor:pointer;padding:17px 20px;font-family:var(--fd);font-weight:600;font-size:1.04rem;color:var(--text);
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:#fff;background:rgba(91,140,255,.08)}
.faq details[open] summary{color:#fff;background:rgba(91,140,255,.12)}
.faq .pm{width:22px;height:22px;position:relative;flex:0 0 auto}
.faq .pm::before,.faq .pm::after{content:"";position:absolute;background:var(--blueA);border-radius:2px;transition:.3s}
.faq .pm::before{top:10px;left:3px;right:3px;height:2px}
.faq .pm::after{left:10px;top:3px;bottom:3px;width:2px}
.faq details[open] .pm::after{opacity:0;transform:rotate(90deg)}
.faq details[open] .pm::before{background:var(--violet)}
.faq .ans{padding:2px 20px 18px;color:var(--muted);animation:fade .28s ease}
@keyframes fade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* footer */
footer.site{background:#06080f;border-top:1px solid var(--border);padding:56px 0 28px}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:32px}
.f-brand p{font-size:.92rem;margin-top:14px}
.f-col h4{font-family:var(--fd);font-size:.82rem;color:#fff;margin:0 0 13px;font-weight:600;letter-spacing:.02em}
.f-col ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.f-col a{color:var(--muted);font-size:.9rem}
.f-col a:hover{color:var(--blueA)}
.f-bot{border-top:1px solid var(--border);margin-top:36px;padding-top:22px;color:var(--dim);font-size:.82rem;display:grid;gap:6px}

@media(max-width:940px){
  .hero .wrap{grid-template-columns:1fr;gap:34px;padding:40px 26px 52px}
  .feature{max-width:440px}
  .split{grid-template-columns:1fr;gap:26px}
  .menu,.btn.desktop{display:none}
  .hamburger{display:grid;place-items:center}
  .emu{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){ .f-grid{grid-template-columns:1fr} section{padding:52px 0} }

.mobile{display:none;position:fixed;inset:70px 0 0;z-index:65;background:var(--ink);padding:20px 26px;overflow:auto}
.mobile.open{display:block}
.mobile .grp{color:var(--violet);font-size:.74rem;font-family:var(--fm);margin:18px 0 4px}
.mobile a{display:block;padding:13px 4px;border-bottom:1px solid var(--border);color:var(--text);font-family:var(--fd);font-weight:600}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}


/* ============================================================
   PREMIUM PS2BIOS FOUNDATION - visual layer only
   No HTML/content/link/functionality changes in this step.
   ============================================================ */
:root{
  --ink:#06080d;
  --ink-soft:#0a0e16;
  --blue:#0a101a;
  --blue-soft:#0d1522;
  --card:#0f141d;
  --card-blue:#101a29;
  --border:#253044;
  --border-blue:#355175;
  --text:#f3f7ff;
  --muted:#aab6c8;
  --dim:#748198;
  --blueA:#2f7dff;
  --violet:#6f7cff;
  --grad:linear-gradient(135deg,#1f5eff 0%,#2f8cff 60%,#6f7cff 100%);
  --grad-soft:linear-gradient(135deg,rgba(47,125,255,.14),rgba(111,124,255,.07));
  --verified:#39d9a2;
  --verified-bg:rgba(57,217,162,.10);
  --verified-br:rgba(57,217,162,.34);
  --code-bg:rgba(84,132,214,.12);
  --code-fg:#c6d9fb;
  --code-br:rgba(84,132,214,.28);
  --link:#79aaff;
  --link-h:#b9d1ff;
  --r:12px;
  --r-lg:16px;
  --r-sm:7px;
  --shadow:0 22px 52px -28px rgba(0,0,0,.88),0 10px 24px -22px rgba(18,74,165,.42);
  --glow:0 0 34px -15px rgba(47,125,255,.62);
}

body{
  background:
    radial-gradient(1100px 620px at 50% -220px,rgba(36,103,222,.12),transparent 64%),
    linear-gradient(180deg,#06080d 0%,#070a10 48%,#06080d 100%);
}

/* Global surface language: graphite hardware + cool PS2-blue accents */
header.site{
  background:rgba(6,8,13,.90);
  border-bottom-color:rgba(76,105,148,.32);
  box-shadow:0 10px 28px -24px rgba(0,0,0,.95);
}
.brand .logo{
  background:linear-gradient(145deg,#173f92 0%,#286eff 48%,#536dff 100%);
  border:1px solid rgba(132,169,239,.28);
  box-shadow:0 9px 22px -13px rgba(47,125,255,.72),inset 0 1px 0 rgba(255,255,255,.13);
}
.brand .tag{
  color:#9ebcff;
  border-color:rgba(111,154,239,.38);
  background:rgba(66,104,173,.08);
}
.menu>li>a:hover,.menu .top:hover,.menu>li:focus-within .top{
  background:rgba(47,125,255,.08);
}
.drop{
  background:rgba(9,13,21,.98);
  border-color:rgba(75,96,132,.48);
  box-shadow:0 22px 54px -24px rgba(0,0,0,.92);
}
.drop a:hover{background:rgba(47,125,255,.09);}

.btn{
  border-radius:8px;
}
.btn-primary{
  background:linear-gradient(135deg,#1d5ee8 0%,#2c80ff 68%,#526eff 100%);
  border-color:rgba(123,170,255,.18);
  box-shadow:0 10px 26px -15px rgba(47,125,255,.76),inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-primary:hover{
  box-shadow:0 14px 30px -16px rgba(47,125,255,.88),0 0 26px -18px rgba(93,153,255,.95);
}
.btn-ghost{
  background:rgba(14,20,30,.72);
  border-color:#34445f;
}
.btn-ghost:hover{
  border-color:#527ab4;
  background:rgba(40,79,139,.12);
}

/* Hero now reads as a console/firmware environment instead of a SaaS banner */
.hero{
  background:
    radial-gradient(780px 420px at 78% 8%,rgba(42,111,235,.18),transparent 66%),
    radial-gradient(620px 360px at 12% 10%,rgba(21,72,165,.17),transparent 68%),
    linear-gradient(180deg,#090e18 0%,#070b12 72%,#06080d 100%);
  border-bottom:1px solid rgba(50,74,110,.28);
}
.hero::after{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  right:-250px;
  top:-255px;
  border:1px solid rgba(75,131,229,.10);
  border-radius:50%;
  box-shadow:0 0 0 62px rgba(75,131,229,.024),0 0 0 124px rgba(75,131,229,.014);
  pointer-events:none;
}
.hero .grid-bg{
  background-image:
    linear-gradient(rgba(71,111,174,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(71,111,174,.055) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(90deg,rgba(0,0,0,.86),rgba(0,0,0,.40) 54%,transparent 92%);
  opacity:.72;
}
h1.htitle .accent{
  background:linear-gradient(115deg,#73a9ff 0%,#3282ff 55%,#7d8dff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* Section rhythm: no more full blue / black striping */
section.s-dark{
  background:
    linear-gradient(180deg,rgba(7,10,16,.96),rgba(8,11,18,.98));
}
section.s-blue{
  background:
    radial-gradient(720px 240px at 84% 0%,rgba(35,91,184,.075),transparent 72%),
    linear-gradient(180deg,#0a0f18 0%,#0b111c 52%,#090e17 100%);
  border-top-color:rgba(65,88,126,.30);
  border-bottom-color:rgba(65,88,126,.30);
}
section.s-blue::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(90deg,transparent 0%,rgba(89,135,209,.032) 50%,transparent 100%);
  opacity:.8;
}
.s-blue p{color:#afbbce;}
.s-blue .lead{color:#f1f5fb;}

/* Shared component surfaces adopt the same hardware/firmware material */
.feature{
  background:linear-gradient(180deg,#111b2a 0%,#0d1420 100%);
  border-color:#365177;
  box-shadow:0 22px 54px -29px rgba(0,0,0,.92),0 0 32px -25px rgba(47,125,255,.70);
}
.feature::before{opacity:.38;}
.feature .pill{
  color:#a8c5ff;
  background:rgba(47,125,255,.09);
  border-color:rgba(92,143,230,.30);
}
.card{
  background:linear-gradient(180deg,#10151f 0%,#0d121a 100%);
  border-color:#273348;
  border-radius:var(--r-lg);
}
.card.feat{
  background:linear-gradient(180deg,#111b2a 0%,#0e141f 62%);
  border-color:rgba(68,111,181,.58);
}
.card .top-accent{
  background:linear-gradient(90deg,#2c76f0 0%,#4aa0ff 72%,#6b78ff 100%);
  opacity:.76;
}
.card:hover{
  border-color:#3f6ba8;
  box-shadow:0 20px 44px -28px rgba(0,0,0,.94),0 0 28px -24px rgba(47,125,255,.72);
}
.rbadge.rec{
  background:linear-gradient(135deg,#225fd1,#367fe7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
.chip-m{
  color:#d7e5ff;
  background:rgba(47,125,255,.09);
  border-color:rgba(78,126,201,.29);
}
.dl-btn{
  border-radius:8px;
  background:linear-gradient(135deg,#1f5ed9,#2e7ff3 72%,#536dff);
  box-shadow:0 9px 24px -16px rgba(47,125,255,.74),inset 0 1px 0 rgba(255,255,255,.10);
}
.dl-btn.alt{
  background:rgba(29,59,100,.18);
  color:#8eb8ff;
  border-color:#35547d;
}
.dl-btn.alt:hover{
  background:linear-gradient(135deg,#1d5ad1,#2d79e8);
}

.svgbox{
  border-color:#2f4566;
  background:
    linear-gradient(135deg,rgba(31,78,148,.09),rgba(17,28,44,.42)),
    #0d131d;
  border-radius:var(--r-lg);
}
.svgbox .tag{
  color:#9ebcff;
  background:rgba(55,93,154,.10);
  border-color:rgba(84,125,191,.31);
}
.svgbox .nm{color:#7eb1ff;}

.tbl-wrap{border-color:#304867;}
.tbl thead th{
  background:#111d2c;
  border-bottom-color:#304867;
}
.tbl td{border-bottom-color:rgba(55,77,108,.44);color:#b6c2d5;}
.tbl tbody tr:nth-child(even) td{background:rgba(41,72,119,.055);}

.emu li,.steps li,.faq details{
  background:linear-gradient(180deg,#0f141d,#0d1219);
  border-color:#273348;
}
.s-blue .emu li,.s-blue .steps li{
  background:linear-gradient(180deg,#101925,#0d141e);
  border-color:#30445f;
}
.steps li::before{
  border-radius:8px;
  background:linear-gradient(145deg,#205fd3,#347fe9);
  box-shadow:0 7px 18px -12px rgba(47,125,255,.86),inset 0 1px 0 rgba(255,255,255,.10);
}
.honest{
  background:linear-gradient(150deg,rgba(32,74,137,.11),rgba(14,21,31,.72));
  border-color:#304761;
  border-radius:var(--r-lg);
}
.honest::before{
  background:linear-gradient(180deg,#2d7cff,#5e78ff);
}
.faq details[open]{border-color:#426d9f;}
.faq summary:hover{background:rgba(47,125,255,.055);}
.faq details[open] summary{background:rgba(47,125,255,.075);}
.faq .pm::before,.faq .pm::after{background:#69a2ff;}

footer.site{
  background:linear-gradient(180deg,#06080d 0%,#05070b 100%);
  border-top-color:rgba(71,91,122,.34);
}
.f-bot{border-top-color:rgba(71,91,122,.30);}

/* Make the technical material feel intentional on smaller screens too */
@media(max-width:940px){
  .hero::after{width:360px;height:360px;right:-210px;top:-190px;}
}


/* ============================================================
   STEP 4 - PS2 BIOS BACKGROUND SYSTEM
   Background / atmosphere only. No content or component redesign.
   ============================================================ */

/* A calmer console-black canvas with a cool electronic falloff. */
body{
  background:
    radial-gradient(1000px 520px at 50% -180px,rgba(38,91,178,.095),transparent 66%),
    linear-gradient(180deg,#05070b 0%,#070a10 42%,#06080d 100%);
}

/* HERO: replace the generic circular SaaS ornament with firmware/memory-bus geometry. */
.hero{
  isolation:isolate;
  background:
    radial-gradient(700px 390px at 79% 10%,rgba(41,104,214,.17),transparent 68%),
    radial-gradient(560px 320px at 10% 18%,rgba(19,62,136,.14),transparent 72%),
    linear-gradient(180deg,#080d16 0%,#070b12 72%,#06080d 100%);
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,transparent 0 61%,rgba(89,143,232,.12) 61% 61.10%,transparent 61.10% 100%),
    linear-gradient(90deg,transparent 0 68%,rgba(89,143,232,.075) 68% 68.08%,transparent 68.08% 100%),
    linear-gradient(0deg,transparent 0 28%,rgba(89,143,232,.09) 28% 28.12%,transparent 28.12% 100%),
    linear-gradient(0deg,transparent 0 67%,rgba(89,143,232,.06) 67% 67.10%,transparent 67.10% 100%);
  mask-image:linear-gradient(90deg,transparent 34%,#000 60%,#000 93%,transparent 100%);
  opacity:.72;
}
.hero::after{
  content:"";
  position:absolute;
  z-index:0;
  width:min(620px,52vw);
  height:360px;
  right:-82px;
  top:18px;
  border:0;
  border-radius:0;
  box-shadow:none;
  pointer-events:none;
  transform:skewX(-13deg) rotate(-3deg);
  transform-origin:center;
  background:
    linear-gradient(90deg,transparent 0 8%,rgba(76,132,224,.19) 8% 8.45%,transparent 8.45% 22%,rgba(76,132,224,.105) 22% 22.35%,transparent 22.35% 100%),
    linear-gradient(90deg,transparent 0 47%,rgba(76,132,224,.14) 47% 47.35%,transparent 47.35% 73%,rgba(76,132,224,.08) 73% 73.3%,transparent 73.3% 100%),
    linear-gradient(0deg,transparent 0 16%,rgba(76,132,224,.105) 16% 16.5%,transparent 16.5% 46%,rgba(76,132,224,.16) 46% 46.5%,transparent 46.5% 78%,rgba(76,132,224,.08) 78% 78.4%,transparent 78.4% 100%),
    radial-gradient(circle at 8% 16%,rgba(91,151,255,.50) 0 2px,transparent 2.5px),
    radial-gradient(circle at 47% 46%,rgba(91,151,255,.40) 0 2px,transparent 2.5px),
    radial-gradient(circle at 73% 78%,rgba(91,151,255,.34) 0 2px,transparent 2.5px);
  opacity:.48;
  mask-image:linear-gradient(90deg,transparent 0%,#000 16%,#000 76%,transparent 100%);
}
.hero .grid-bg{
  z-index:0;
  background-image:
    linear-gradient(rgba(72,111,171,.050) 1px,transparent 1px),
    linear-gradient(90deg,rgba(72,111,171,.050) 1px,transparent 1px),
    radial-gradient(circle,rgba(112,159,235,.095) 1px,transparent 1.5px);
  background-size:48px 48px,48px 48px,96px 96px;
  background-position:0 0,0 0,24px 24px;
  mask-image:linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.55) 48%,rgba(0,0,0,.22) 76%,transparent 96%);
  opacity:.64;
}
.hero .wrap{z-index:1;}

/* All long-form sections now sit on one family of graphite surfaces.
   Difference comes from depth and faint firmware-grid detail, not blue/black stripes. */
section.s-dark,
section.s-blue{
  isolation:isolate;
  overflow:hidden;
}
section.s-dark > .wrap,
section.s-blue > .wrap{
  position:relative;
  z-index:1;
}
section.s-dark{
  background:
    radial-gradient(680px 210px at 12% 0%,rgba(28,67,130,.035),transparent 72%),
    linear-gradient(180deg,#070a10 0%,#080b12 100%);
}
section.s-blue{
  background:
    radial-gradient(760px 230px at 86% 0%,rgba(34,82,160,.070),transparent 74%),
    linear-gradient(180deg,#090e16 0%,#0a1019 52%,#090e16 100%);
  border-top-color:rgba(67,91,128,.24);
  border-bottom-color:rgba(67,91,128,.24);
}

/* Dark sections get a very faint motherboard trace from the left. */
section.s-dark::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(80,125,197,.05) 1px,transparent 1px),
    linear-gradient(rgba(80,125,197,.027) 1px,transparent 1px);
  background-size:82px 82px;
  mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.20) 30%,transparent 62%);
  opacity:.34;
}

/* Raised sections use a sparse right-side bus pattern instead of a full blue fill. */
section.s-blue::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,transparent 0 74%,rgba(93,143,218,.052) 74% 74.10%,transparent 74.10% 100%),
    linear-gradient(90deg,transparent 0 82%,rgba(93,143,218,.038) 82% 82.10%,transparent 82.10% 100%),
    linear-gradient(0deg,transparent 0 32%,rgba(93,143,218,.038) 32% 32.12%,transparent 32.12% 100%),
    linear-gradient(0deg,transparent 0 68%,rgba(93,143,218,.028) 68% 68.10%,transparent 68.10% 100%);
  opacity:.68;
  mask-image:linear-gradient(90deg,transparent 48%,#000 74%,rgba(0,0,0,.75) 100%);
}
section.s-blue::after{
  content:"";
  position:absolute;
  right:7.5%;
  top:18px;
  z-index:0;
  width:76px;
  height:28px;
  pointer-events:none;
  background:
    radial-gradient(circle at 8px 14px,rgba(99,156,248,.38) 0 2px,transparent 2.5px),
    linear-gradient(90deg,rgba(99,156,248,.12),rgba(99,156,248,.12)) 10px 13px/52px 1px no-repeat,
    radial-gradient(circle at 66px 14px,rgba(99,156,248,.24) 0 2px,transparent 2.5px);
  opacity:.52;
}

/* Break repetition across the long homepage without changing section order or layout. */
section.s-dark:nth-of-type(4n+1)::before{
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.18) 42%,#000 100%);
}
section.s-dark:nth-of-type(4n+1){
  background:
    radial-gradient(700px 220px at 88% 0%,rgba(31,72,140,.042),transparent 72%),
    linear-gradient(180deg,#070a10 0%,#080b12 100%);
}
section.s-blue:nth-of-type(4n+2){
  background:
    radial-gradient(720px 230px at 14% 0%,rgba(34,82,160,.062),transparent 74%),
    linear-gradient(180deg,#090e16 0%,#0a1019 52%,#090e16 100%);
}

@media(max-width:940px){
  .hero::after{
    width:520px;
    height:300px;
    right:-270px;
    top:40px;
    opacity:.34;
  }
  .hero::before{opacity:.52;}
  section.s-dark::before{opacity:.22;}
  section.s-blue::before{opacity:.45;}
  section.s-blue::after{right:26px;opacity:.34;}
}

@media(max-width:560px){
  .hero::after{right:-360px;opacity:.25;}
  .hero .grid-bg{opacity:.50;}
  section.s-dark::before,
  section.s-blue::before{opacity:.20;}
  section.s-blue::after{opacity:.24;}
}


/* ============================================================
   STEP 5 - PREMIUM PS2 BIOS HEADER + BRAND TREATMENT
   Visual header layer only. No navigation/content/link changes.
   ============================================================ */

/* Sticky shell: darker hardware glass, precise edge lighting. */
header.site{
  height:76px;
  background:linear-gradient(180deg,rgba(8,12,19,.965),rgba(5,8,13,.945));
  border-bottom:1px solid rgba(80,116,169,.34);
  box-shadow:0 14px 34px -28px rgba(0,0,0,.98),inset 0 -1px 0 rgba(103,158,246,.035);
  backdrop-filter:blur(18px) saturate(118%);
  -webkit-backdrop-filter:blur(18px) saturate(118%);
}
header.site::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,rgba(47,125,255,.08) 16%,rgba(79,146,255,.45) 50%,rgba(47,125,255,.08) 84%,transparent 100%);
  opacity:.78;
}
.nav{height:76px;gap:10px;}

/* Brand mark becomes a tiny BIOS-chip module instead of a generic app tile. */
header .brand{gap:10px;min-height:46px;padding:3px 0;}
header .brand .logo{
  width:42px;height:42px;
  border-radius:8px;
  background:
    linear-gradient(135deg,rgba(87,144,243,.13),transparent 45%),
    linear-gradient(180deg,#111c2c 0%,#0b1320 100%);
  border:1px solid rgba(91,139,211,.58);
  box-shadow:
    0 12px 28px -18px rgba(47,125,255,.82),
    inset 0 0 0 1px rgba(255,255,255,.025),
    inset 0 -10px 24px rgba(15,50,105,.16);
  overflow:visible;
}
header .brand .logo::before{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid rgba(117,166,242,.28);
  border-radius:5px;
  background:
    linear-gradient(90deg,transparent 49%,rgba(102,158,250,.10) 49% 51%,transparent 51%),
    linear-gradient(0deg,transparent 49%,rgba(102,158,250,.08) 49% 51%,transparent 51%);
  pointer-events:none;
}
header .brand .logo::after{
  content:"";
  position:absolute;
  left:-4px;right:-4px;top:8px;bottom:8px;
  border-top:1px solid rgba(75,122,195,.38);
  border-bottom:1px solid rgba(75,122,195,.38);
  clip-path:polygon(0 0,8% 0,8% 100%,0 100%,0 75%,3% 75%,3% 58%,0 58%,0 42%,3% 42%,3% 25%,0 25%,100% 25%,97% 25%,97% 42%,100% 42%,100% 58%,97% 58%,97% 75%,100% 75%,100% 100%,92% 100%,92% 0,100% 0);
  opacity:.9;
  pointer-events:none;
}
header .brand .logo b{
  position:relative;z-index:1;
  font-size:.84rem;
  letter-spacing:.055em;
  color:#f6f9ff;
  text-shadow:0 0 14px rgba(75,137,239,.35);
}
header .brand .wm{
  font-size:1.20rem;
  letter-spacing:-.025em;
  color:#f4f7fd;
  text-shadow:0 1px 0 rgba(255,255,255,.02);
}
header .brand .wm span{color:#72a7ff;}
header .brand .tag{
  margin-left:0;
  transform:translateY(-1px);
  padding:3px 6px 2px;
  border-radius:4px;
  color:#9fc0ff;
  background:rgba(50,89,151,.11);
  border:1px solid rgba(96,139,207,.42);
  letter-spacing:.075em;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.018);
}

/* Desktop navigation: tighter technical tabs, not pill-shaped SaaS nav. */
.menu{margin-left:26px;gap:3px;}
.menu>li>a,.menu .top{
  min-height:38px;
  padding:9px 12px;
  border-radius:6px;
  color:#aab7c9;
  font-size:.91rem;
  letter-spacing:-.005em;
  transition:color .18s ease,background .18s ease,box-shadow .18s ease;
}
.menu>li>a:hover,.menu .top:hover,.menu>li:focus-within .top{
  color:#f5f8ff;
  background:linear-gradient(180deg,rgba(54,104,184,.12),rgba(32,72,135,.08));
  box-shadow:inset 0 -1px 0 rgba(89,146,239,.34);
}
.menu .chev{width:6px;height:6px;border-width:1.5px;opacity:.82;}

/* Dropdowns read like firmware option panels. */
.drop{
  top:calc(100% + 10px);
  min-width:264px;
  padding:7px;
  border-radius:10px;
  background:linear-gradient(180deg,rgba(12,17,26,.995),rgba(8,12,19,.995));
  border:1px solid rgba(72,103,150,.52);
  box-shadow:0 24px 58px -24px rgba(0,0,0,.98),inset 0 1px 0 rgba(255,255,255,.025);
  overflow:hidden;
}
.drop::before{
  content:"";
  position:absolute;
  left:10px;right:10px;top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(78,141,244,.68),transparent);
  opacity:.65;
}
.drop a{
  position:relative;
  padding:10px 11px 10px 14px;
  border-radius:6px;
  color:#aab7c9;
  font-size:.89rem;
  transition:background .16s,color .16s,transform .16s,box-shadow .16s;
}
.drop a::before{
  content:"";
  position:absolute;
  left:6px;top:50%;
  width:3px;height:3px;
  border-radius:50%;
  background:#4f91ff;
  transform:translateY(-50%) scale(.7);
  opacity:0;
  transition:opacity .16s,transform .16s;
}
.drop a:hover{
  background:rgba(47,125,255,.085);
  color:#f3f7ff;
  transform:translateX(2px);
  box-shadow:inset 2px 0 0 rgba(79,145,255,.34);
}
.drop a:hover::before{opacity:.9;transform:translateY(-50%) scale(1);}

/* Header CTA: compact firmware-action treatment. Hero CTAs remain untouched. */
header .nav .btn-primary.desktop{
  min-height:40px;
  padding:10px 18px;
  border-radius:7px;
  background:linear-gradient(180deg,#327fff 0%,#1d63e8 100%);
  border:1px solid rgba(116,165,244,.44);
  box-shadow:0 12px 26px -16px rgba(47,125,255,.80),inset 0 1px 0 rgba(255,255,255,.15);
  letter-spacing:.01em;
}
header .nav .btn-primary.desktop:hover{
  transform:translateY(-1px);
  background:linear-gradient(180deg,#428bff 0%,#256bed 100%);
  box-shadow:0 15px 30px -17px rgba(47,125,255,.88),inset 0 1px 0 rgba(255,255,255,.18);
}

/* Mobile trigger + menu use the same hardware language. */
.hamburger{
  width:44px;height:44px;
  border-radius:7px;
  background:linear-gradient(180deg,#101824,#0b111a);
  border-color:rgba(78,107,149,.56);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 10px 24px -20px rgba(0,0,0,.95);
  font-size:1.05rem;
}
.hamburger:hover,.hamburger:focus-visible{
  border-color:rgba(79,145,255,.72);
  background:linear-gradient(180deg,#122039,#0d1727);
}
.mobile{
  inset:76px 0 0;
  padding:20px 26px 30px;
  background:
    linear-gradient(rgba(73,112,174,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(73,112,174,.025) 1px,transparent 1px),
    linear-gradient(180deg,#080c13,#06090f);
  background-size:44px 44px,44px 44px,auto;
  border-top:1px solid rgba(74,108,159,.22);
}
.mobile .grp{
  margin:20px 0 6px;
  padding-left:9px;
  color:#7faaf3;
  font-size:.68rem;
  letter-spacing:.12em;
  border-left:2px solid rgba(79,145,255,.58);
}
.mobile a{
  padding:13px 10px;
  border-bottom-color:rgba(70,91,123,.30);
  border-radius:5px;
  color:#dce4ef;
  font-size:.96rem;
}
.mobile a:hover,.mobile a:focus-visible{
  color:#fff;
  background:rgba(47,125,255,.075);
}

@media(max-width:1100px){
  .menu{margin-left:16px;}
  .menu>li>a,.menu .top{padding-left:9px;padding-right:9px;font-size:.88rem;}
  header .nav .btn-primary.desktop{padding-left:15px;padding-right:15px;}
}
@media(max-width:940px){
  header.site,.nav{height:72px;}
  .mobile{inset:72px 0 0;}
  header .brand .logo{width:40px;height:40px;}
}
@media(max-width:560px){
  header .brand .wm{font-size:1.12rem;}
  header .brand .tag{font-size:.56rem;padding:2px 5px;}
}


/* ============================================================
   STEP 6 - PS2BIOS LAB BRAND MARK REFINEMENT
   Brand/logo visual layer only. No text, links or structure changed.
   ============================================================ */

/* Give the brand a deliberate firmware-lab signature without imitating Sony marks. */
header .brand{
  position:relative;
  isolation:isolate;
  gap:11px;
}

header .brand .logo{
  width:44px;
  height:44px;
  border-radius:7px;
  background:
    linear-gradient(90deg,rgba(100,157,249,.10) 1px,transparent 1px),
    linear-gradient(0deg,rgba(100,157,249,.08) 1px,transparent 1px),
    radial-gradient(circle at 72% 24%,rgba(66,138,255,.18),transparent 34%),
    linear-gradient(145deg,#121d2b 0%,#0a111b 68%,#080d14 100%);
  background-size:9px 9px,9px 9px,auto,auto;
  border:1px solid rgba(96,149,228,.68);
  box-shadow:
    0 14px 30px -20px rgba(47,125,255,.92),
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 0 18px rgba(22,64,126,.18);
  clip-path:polygon(7px 0,calc(100% - 3px) 0,100% 3px,100% calc(100% - 7px),calc(100% - 7px) 100%,3px 100%,0 calc(100% - 3px),0 7px);
}

/* Inner silicon frame + four corner contacts. */
header .brand .logo::before{
  content:"";
  position:absolute;
  inset:6px;
  border:1px solid rgba(113,168,250,.35);
  border-radius:3px;
  background:
    linear-gradient(90deg,transparent 48%,rgba(93,151,245,.10) 48% 52%,transparent 52%),
    linear-gradient(0deg,transparent 48%,rgba(93,151,245,.08) 48% 52%,transparent 52%);
  box-shadow:
    -5px -5px 0 -4px rgba(125,177,255,.78),
    5px -5px 0 -4px rgba(125,177,255,.78),
    -5px 5px 0 -4px rgba(125,177,255,.78),
    5px 5px 0 -4px rgba(125,177,255,.78);
  pointer-events:none;
}

/* IC-style side contacts: unmistakably BIOS-chip, still lightweight CSS. */
header .brand .logo::after{
  content:"";
  position:absolute;
  inset:8px -5px;
  border:0;
  background:
    repeating-linear-gradient(to bottom,
      rgba(112,162,235,.72) 0 2px,
      transparent 2px 7px) left center / 5px calc(100% - 2px) no-repeat,
    repeating-linear-gradient(to bottom,
      rgba(112,162,235,.72) 0 2px,
      transparent 2px 7px) right center / 5px calc(100% - 2px) no-repeat;
  opacity:.82;
  clip-path:none;
  pointer-events:none;
}

header .brand .logo b{
  z-index:2;
  font-size:.80rem;
  letter-spacing:.085em;
  color:#f7faff;
  text-shadow:0 0 10px rgba(78,143,246,.38);
}

/* Wordmark is cleaner and more proprietary: white core + measured BIOS-blue split. */
header .brand .wm{
  position:relative;
  display:inline-block;
  padding-bottom:3px;
  font-size:1.19rem;
  font-weight:700;
  letter-spacing:-.03em;
  color:#f5f8fe;
}
header .brand .wm span{
  color:#76aaff;
  text-shadow:0 0 18px rgba(74,137,239,.16);
}
header .brand .wm::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  background:linear-gradient(90deg,rgba(106,160,246,.18),rgba(106,160,246,.62) 58%,transparent 100%);
  transform:scaleX(.86);
  transform-origin:left;
  opacity:.72;
}

/* LAB becomes a compact instrument label, not a decorative pill. */
header .brand .tag{
  position:relative;
  top:-1px;
  padding:3px 6px 2px;
  border-radius:3px;
  color:#b2cbf7;
  background:linear-gradient(180deg,rgba(49,82,132,.18),rgba(23,40,67,.14));
  border:1px solid rgba(91,132,194,.45);
  letter-spacing:.11em;
  font-size:.56rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}

/* Premium but restrained interaction: the chip energizes, the copy does not jump. */
header .brand:hover .logo,
header .brand:focus-visible .logo{
  border-color:rgba(117,175,255,.82);
  box-shadow:
    0 15px 32px -18px rgba(47,125,255,.96),
    0 0 22px -16px rgba(86,151,255,.96),
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 0 20px rgba(31,79,151,.22);
}
header .brand:hover .wm::after{opacity:1;transform:scaleX(1);}
header .brand .logo,header .brand .wm::after{transition:border-color .18s,box-shadow .18s,opacity .18s,transform .18s;}

/* Keep the same identity compact on phones. */
@media(max-width:560px){
  header .brand{gap:9px;}
  header .brand .logo{width:40px;height:40px;}
  header .brand .logo b{font-size:.75rem;}
  header .brand .wm{font-size:1.10rem;}
  header .brand .tag{font-size:.53rem;padding:3px 5px 2px;}
}



/* ============================================================
   STEP 7 - HERO BACKGROUND REFINEMENT
   Hero atmosphere only. No copy, CTA, card, header or layout changes.
   ============================================================ */

/* Make the hero feel like a focused console-firmware workspace rather than
   a generic dark-tech banner. Keep the center calm for readability. */
.hero{
  background:
    radial-gradient(760px 430px at 80% 18%,rgba(38,104,220,.20),transparent 67%),
    radial-gradient(520px 330px at 13% 16%,rgba(24,73,157,.12),transparent 72%),
    linear-gradient(115deg,rgba(16,42,82,.12) 0%,transparent 35%,transparent 70%,rgba(28,70,143,.08) 100%),
    linear-gradient(180deg,#080d15 0%,#070b12 68%,#06080d 100%);
  box-shadow:
    inset 0 -1px 0 rgba(98,142,206,.12),
    inset 0 -90px 120px -110px rgba(32,92,187,.34);
}

/* Left-to-right motherboard/data-lane traces. They sit behind the content and
   intentionally become denser toward the visual/card side of the hero. */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,transparent 0 56%,rgba(87,145,238,.12) 56% 56.10%,transparent 56.10% 100%),
    linear-gradient(90deg,transparent 0 63%,rgba(87,145,238,.065) 63% 63.08%,transparent 63.08% 100%),
    linear-gradient(90deg,transparent 0 73%,rgba(87,145,238,.09) 73% 73.08%,transparent 73.08% 100%),
    linear-gradient(0deg,transparent 0 22%,rgba(87,145,238,.075) 22% 22.10%,transparent 22.10% 100%),
    linear-gradient(0deg,transparent 0 48%,rgba(87,145,238,.11) 48% 48.10%,transparent 48.10% 100%),
    linear-gradient(0deg,transparent 0 74%,rgba(87,145,238,.055) 74% 74.09%,transparent 74.09% 100%),
    radial-gradient(circle at 56% 48%,rgba(112,169,255,.64) 0 2px,transparent 2.6px),
    radial-gradient(circle at 73% 22%,rgba(112,169,255,.43) 0 2px,transparent 2.6px),
    radial-gradient(circle at 63% 74%,rgba(112,169,255,.32) 0 2px,transparent 2.6px);
  mask-image:linear-gradient(90deg,transparent 28%,rgba(0,0,0,.20) 43%,#000 62%,#000 94%,transparent 100%);
  opacity:.80;
}

/* A restrained firmware-frame behind the feature-card zone. It uses hard
   right angles and edge markers rather than the previous generic circles. */
.hero::after{
  content:"";
  position:absolute;
  z-index:0;
  width:min(590px,48vw);
  height:360px;
  right:1.5%;
  top:50%;
  transform:translateY(-48%) skewX(-4deg);
  pointer-events:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:
    linear-gradient(#6fa8ff,#6fa8ff) left top/92px 1px no-repeat,
    linear-gradient(#6fa8ff,#6fa8ff) left top/1px 54px no-repeat,
    linear-gradient(#4f91ff,#4f91ff) right top/74px 1px no-repeat,
    linear-gradient(#4f91ff,#4f91ff) right top/1px 38px no-repeat,
    linear-gradient(#4f91ff,#4f91ff) left bottom/62px 1px no-repeat,
    linear-gradient(#4f91ff,#4f91ff) left bottom/1px 38px no-repeat,
    linear-gradient(#6fa8ff,#6fa8ff) right bottom/108px 1px no-repeat,
    linear-gradient(#6fa8ff,#6fa8ff) right bottom/1px 58px no-repeat,
    linear-gradient(90deg,transparent 0 18%,rgba(79,145,255,.11) 18% 18.18%,transparent 18.18% 71%,rgba(79,145,255,.075) 71% 71.15%,transparent 71.15% 100%),
    linear-gradient(0deg,transparent 0 31%,rgba(79,145,255,.08) 31% 31.18%,transparent 31.18% 69%,rgba(79,145,255,.055) 69% 69.15%,transparent 69.15% 100%);
  opacity:.34;
  filter:drop-shadow(0 0 22px rgba(41,112,229,.10));
  mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 92%,transparent 100%);
}

/* Fine diagnostic grid. Larger spacing keeps it premium and avoids gamer-RGB noise. */
.hero .grid-bg{
  z-index:0;
  background-image:
    linear-gradient(rgba(76,119,184,.044) 1px,transparent 1px),
    linear-gradient(90deg,rgba(76,119,184,.044) 1px,transparent 1px),
    radial-gradient(circle,rgba(111,166,250,.105) 1px,transparent 1.4px);
  background-size:56px 56px,56px 56px,112px 112px;
  background-position:0 0,0 0,28px 28px;
  mask-image:
    linear-gradient(90deg,rgba(0,0,0,.76) 0%,rgba(0,0,0,.56) 44%,rgba(0,0,0,.34) 76%,transparent 98%);
  opacity:.62;
}

/* Subtle lower horizon anchors the hero to the first content section. */
.hero .grid-bg::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:84px;
  pointer-events:none;
  background:
    linear-gradient(180deg,transparent,rgba(5,8,13,.64)),
    linear-gradient(90deg,transparent 0 8%,rgba(77,132,219,.13) 8% 8.10%,transparent 8.10% 92%,rgba(77,132,219,.08) 92% 92.10%,transparent 92.10% 100%);
  opacity:.72;
}

@media(max-width:940px){
  .hero::before{
    mask-image:linear-gradient(90deg,transparent 18%,rgba(0,0,0,.20) 38%,#000 72%,transparent 100%);
    opacity:.58;
  }
  .hero::after{
    width:520px;
    height:320px;
    right:-245px;
    top:59%;
    opacity:.24;
  }
  .hero .grid-bg{opacity:.50;}
}

@media(max-width:560px){
  .hero::before{opacity:.34;}
  .hero::after{right:-365px;opacity:.18;}
  .hero .grid-bg{opacity:.40;}
  .hero .grid-bg::after{height:58px;opacity:.52;}
}


/* ============================================================
   STEP 8 - HERO LEFT-SIDE HIERARCHY
   Presentation only. No copy, links, card content or section order changes.
   ============================================================ */

/* Give the copy block a deliberate console-interface rhythm without boxing it in. */
.hero .wrap > div:first-child{
  position:relative;
  z-index:2;
  max-width:690px;
  padding:8px 0 10px;
}

/* Headline: stronger, cleaner and less "SaaS gradient". */
h1.htitle{
  position:relative;
  max-width:10.8ch;
  margin:0 0 28px;
  font-size:clamp(3rem,5.55vw,4.65rem);
  line-height:.98;
  letter-spacing:-.035em;
  text-wrap:balance;
  text-shadow:0 14px 38px rgba(0,0,0,.36);
}
h1.htitle .accent{
  background:linear-gradient(110deg,#9bc3ff 0%,#5c9cff 35%,#2f7dff 72%,#6b87ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 8px 22px rgba(47,125,255,.18));
}
h1.htitle::after{
  content:"";
  position:absolute;
  left:2px;
  bottom:-15px;
  width:96px;
  height:2px;
  background:linear-gradient(90deg,#6fa8ff 0 58%,rgba(111,168,255,.18) 58% 82%,transparent 82%);
  box-shadow:26px 0 0 -0.5px rgba(111,168,255,.20);
}

/* The lead reads like a concise firmware-status statement. */
.hlead{
  position:relative;
  max-width:41ch;
  margin:0 0 17px;
  padding-left:18px;
  font-size:1.20rem;
  line-height:1.52;
  color:#f7f9fd;
  font-weight:600;
  letter-spacing:-.01em;
}
.hlead::before{
  content:"";
  position:absolute;
  left:0;
  top:.34em;
  bottom:.34em;
  width:2px;
  background:linear-gradient(180deg,#79b0ff,#397fe8 72%,rgba(57,127,232,.20));
  box-shadow:0 0 16px rgba(70,137,239,.25);
}
.hlead::after{
  content:"";
  position:absolute;
  left:-2px;
  top:.32em;
  width:6px;
  height:6px;
  border:1px solid rgba(121,176,255,.74);
  background:#0b111b;
  box-shadow:0 0 8px rgba(83,149,247,.24);
}

.hsub{
  max-width:57ch;
  margin:0 0 31px;
  color:#aeb8ca;
  font-size:.99rem;
  line-height:1.72;
}

/* CTA group: one confident primary action plus a quieter technical secondary. */
.hcta{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.hero .hcta .btn{
  min-height:50px;
  padding:12px 22px;
  border-radius:8px;
  font-size:.96rem;
  letter-spacing:.005em;
  position:relative;
  overflow:hidden;
}
.hero .hcta .btn-primary{
  min-width:185px;
  background:linear-gradient(135deg,#205fcf 0%,#2e7fe8 58%,#3c8eff 100%);
  border-color:rgba(126,177,255,.34);
  box-shadow:
    0 14px 32px -20px rgba(47,125,255,.95),
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(8,28,64,.34);
}
.hero .hcta .btn-primary::after,
.hero .hcta .btn-ghost::after{
  content:"";
  position:absolute;
  right:6px;
  top:6px;
  width:12px;
  height:12px;
  border-top:1px solid rgba(223,236,255,.42);
  border-right:1px solid rgba(223,236,255,.42);
  pointer-events:none;
  opacity:.72;
}
.hero .hcta .btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:
    0 18px 36px -20px rgba(47,125,255,1),
    0 0 30px -20px rgba(93,153,255,.78),
    inset 0 1px 0 rgba(255,255,255,.18);
}
.hero .hcta .btn-ghost{
  min-width:145px;
  background:linear-gradient(180deg,rgba(16,24,37,.88),rgba(11,17,27,.92));
  border-color:#344862;
  color:#dce6f5;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.hero .hcta .btn-ghost:hover{
  transform:translateY(-2px);
  border-color:#557caf;
  background:linear-gradient(180deg,rgba(24,39,61,.92),rgba(13,23,37,.94));
  box-shadow:0 13px 28px -24px rgba(78,137,224,.78),inset 0 1px 0 rgba(255,255,255,.05);
}

/* Keep the hero's two columns visually balanced while leaving the card itself untouched. */
@media(min-width:941px){
  .hero .wrap{
    grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr);
    gap:58px;
    padding-top:62px;
    padding-bottom:72px;
  }
}

@media(max-width:940px){
  .hero .wrap > div:first-child{
    max-width:720px;
    padding-top:4px;
  }
  h1.htitle{
    max-width:11.5ch;
    font-size:clamp(2.8rem,9vw,4.15rem);
    margin-bottom:27px;
  }
  .hlead{max-width:45ch;}
  .hsub{max-width:62ch;}
}

@media(max-width:560px){
  .hero .wrap > div:first-child{padding:0;}
  h1.htitle{
    max-width:10.5ch;
    font-size:clamp(2.55rem,13vw,3.5rem);
    line-height:1.01;
    margin-bottom:26px;
  }
  h1.htitle::after{
    bottom:-13px;
    width:78px;
  }
  .hlead{
    padding-left:15px;
    font-size:1.08rem;
    line-height:1.52;
    margin-bottom:15px;
  }
  .hsub{
    font-size:.95rem;
    line-height:1.66;
    margin-bottom:25px;
  }
  .hcta{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }
  .hero .hcta .btn{
    width:100%;
    min-width:0;
    min-height:49px;
  }
}


/* STEP 9 - BRANDED PS2 BIOS CORE V2 */
.hero .wrap{grid-template-columns:minmax(0,1.02fr) minmax(480px,.98fr);gap:40px}
.feature.ps2-visual-stage{position:relative;min-height:510px;display:grid;place-items:center;padding:0;margin:0;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible;isolation:isolate}
.feature.ps2-visual-stage::before{content:""!important;position:absolute;inset:6% -6% 3% -1%;background:radial-gradient(ellipse at 54% 49%,rgba(45,137,255,.21),rgba(17,53,102,.075) 46%,transparent 72%);filter:blur(5px);z-index:-1;pointer-events:none}.feature.ps2-visual-stage::after{content:none!important}
.ps2-brand-core{width:min(100%,615px);height:auto;display:block;overflow:visible;filter:drop-shadow(0 34px 44px rgba(0,0,0,.28))}
.ps2-brand-core .brand-core{transform-origin:0 0;animation:brand-core-float 7s ease-in-out infinite}
@keyframes brand-core-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media(max-width:1080px){.hero .wrap{grid-template-columns:minmax(0,1fr) minmax(440px,.94fr);gap:24px}.feature.ps2-visual-stage{min-height:475px}}
@media(max-width:940px){.hero .wrap{grid-template-columns:1fr;gap:22px}.feature.ps2-visual-stage{min-height:445px;max-width:620px;width:100%;margin:0 auto}.ps2-brand-core{width:min(100%,590px)}}
@media(max-width:620px){.feature.ps2-visual-stage{min-height:355px}.ps2-brand-core{width:112%;max-width:none;margin-left:-6%}}
@media(prefers-reduced-motion:reduce){.ps2-brand-core .brand-core{animation:none!important}}

/* STEP 9 corrective pass: grounded PS2 BIOS hardware visualization */
.ps2-bios-hardware{display:block;width:min(100%,640px);height:auto;overflow:visible;filter:saturate(.96) contrast(1.02)}
.feature.ps2-visual-stage{min-height:520px}
@media(max-width:1080px){.ps2-bios-hardware{width:min(100%,590px)}}
@media(max-width:940px){.feature.ps2-visual-stage{min-height:455px}.ps2-bios-hardware{width:min(100%,600px)}}
@media(max-width:620px){.feature.ps2-visual-stage{min-height:370px}.ps2-bios-hardware{width:112%;max-width:none;margin-left:-6%}}

/* === Step 9 premium hero hardware visual: authentic PS2 BIOS-inspired macro board === */
.feature.ps2-visual-stage{
  position:relative;
  min-height:530px;
  display:grid;
  place-items:center;
  padding:0;
  margin:0;
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
  isolation:isolate;
}
.feature.ps2-visual-stage::before{
  content:""!important;
  position:absolute;
  inset:4% -5% 0 -4%;
  background:
    radial-gradient(ellipse at 52% 48%,rgba(39,135,255,.22),rgba(22,75,142,.075) 44%,transparent 72%),
    radial-gradient(ellipse at 60% 54%,rgba(0,224,255,.08),transparent 57%);
  filter:blur(10px);
  z-index:-2;
  pointer-events:none;
}
.feature.ps2-visual-stage::after{content:none!important}
.ps2-lux-viz{display:block;width:min(100%,665px);height:auto;overflow:visible;filter:saturate(.93) contrast(1.06) brightness(1.025) drop-shadow(0 30px 38px rgba(0,0,0,.28))}
.viz-board{transform-origin:360px 250px;animation:vizFloat 12s cubic-bezier(.4,0,.2,1) infinite}
.viz-orbits{transform-origin:330px 272px;animation:vizOrbit 120s linear infinite}
.viz-pulse{stroke-dasharray:4 12;animation:vizPulse 2.8s linear infinite}
.viz-pulse.slow{animation-duration:4.1s;animation-direction:reverse}
@keyframes vizFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes vizOrbit{to{transform:rotate(360deg)}}
@keyframes vizScan{0%,100%{opacity:.035;transform:translateX(-95px)}50%{opacity:.22;transform:translateX(95px)}}
@keyframes vizPulse{to{stroke-dashoffset:-64}}
@media(max-width:1080px){.feature.ps2-visual-stage{min-height:495px}.ps2-lux-viz{width:min(100%,610px)}}
@media(max-width:940px){.feature.ps2-visual-stage{min-height:455px;max-width:650px;width:100%;margin:0 auto}.ps2-lux-viz{width:min(100%,610px)}}
@media(max-width:620px){.feature.ps2-visual-stage{min-height:385px}.ps2-lux-viz{width:112%;max-width:none;margin-left:-6%}}
@media(prefers-reduced-motion:reduce){.viz-board,.viz-orbits,.viz-pulse{animation:none!important}}



/* ---------- Step 20: premium PS2BIOS diagnostic table ---------- */
.tbl-wrap{
  position:relative;
  overflow-x:auto;
  border:1px solid rgba(104,136,194,.28);
  border-radius:12px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.018),transparent 22%),
    linear-gradient(180deg,#0c111c 0%,#0a0f18 100%);
  box-shadow:
    0 18px 42px -32px rgba(0,0,0,.95),
    inset 0 1px 0 rgba(255,255,255,.025),
    inset 0 0 0 1px rgba(255,255,255,.01);
}
.tbl-wrap::before{
  content:"";
  position:absolute;
  top:0;left:18px;right:18px;height:2px;
  background:linear-gradient(90deg,transparent 0%,rgba(79,145,255,.82) 18%,rgba(79,145,255,.24) 72%,transparent 100%);
  pointer-events:none;
  z-index:2;
}
.tbl-wrap::after{
  content:"";
  position:absolute;
  top:13px;right:15px;width:5px;height:5px;border-radius:50%;
  background:#5ba0ff;
  box-shadow:0 0 10px rgba(79,145,255,.45);
  pointer-events:none;
  z-index:3;
}
.tbl{
  background:transparent;
  font-size:.96rem;
}
.tbl thead th{
  position:relative;
  padding:15px 18px 14px;
  background:
    linear-gradient(180deg,rgba(32,49,79,.78),rgba(19,29,49,.72));
  color:#f2f6ff;
  border-bottom:1px solid rgba(104,136,194,.32);
  font-size:.84rem;
  letter-spacing:.035em;
  text-transform:uppercase;
}
.tbl thead th+th::before{
  content:"";
  position:absolute;
  left:0;top:13px;bottom:13px;width:1px;
  background:linear-gradient(180deg,transparent,rgba(129,157,210,.22),transparent);
}
.tbl td{
  position:relative;
  padding:14px 18px;
  border-bottom:1px solid rgba(104,136,194,.14);
  color:#b9c4dc;
  background:rgba(255,255,255,.008);
  transition:background .18s ease,color .18s ease;
}
.tbl tbody tr:nth-child(even) td{
  background:rgba(82,113,169,.035);
}
.tbl tbody tr:hover td{
  background:rgba(79,145,255,.055);
  color:#dbe6f9;
}
.tbl tbody tr:first-child td{
  background:linear-gradient(90deg,rgba(79,145,255,.07),rgba(79,145,255,.025));
}
.tbl tbody tr:first-child:hover td{
  background:linear-gradient(90deg,rgba(79,145,255,.105),rgba(79,145,255,.04));
}
.tbl td:first-child{
  color:#f5f7fb;
  font-family:var(--fd);
  font-weight:600;
  letter-spacing:.005em;
  border-left:2px solid transparent;
}
.tbl tbody tr:first-child td:first-child{
  border-left-color:#4f91ff;
  color:#fff;
}
.tbl td:nth-child(2){
  font-family:var(--fm);
  color:#9fb9ee;
  font-size:.9rem;
}
.tbl tbody tr:last-child td{border-bottom:0}
@media(max-width:700px){
  .tbl{font-size:.92rem}
  .tbl thead th,.tbl td{padding:13px 15px}
  .tbl-wrap::before{left:14px;right:14px}
}


/* ---------- Step 22: boot/setup sequence ---------- */
.steps{
  gap:16px;
  max-width:860px;
  position:relative;
}
.steps::before{
  content:"";
  position:absolute;
  left:39px;
  top:32px;
  bottom:32px;
  width:1px;
  background:linear-gradient(180deg,rgba(79,145,255,.55),rgba(79,145,255,.16));
  box-shadow:0 0 0 1px rgba(255,255,255,.015);
}
.steps li{
  position:relative;
  padding:20px 22px 20px 88px;
  min-height:76px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,0)),
    linear-gradient(135deg,rgba(79,145,255,.055),transparent 38%),
    #101521;
  border:1px solid rgba(86,104,142,.42);
  border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 10px 28px -22px rgba(0,0,0,.75);
  overflow:hidden;
}
.steps li::after{
  content:"";
  position:absolute;
  left:74px;
  right:18px;
  top:0;
  height:1px;
  background:linear-gradient(90deg,rgba(79,145,255,.45),rgba(79,145,255,.08) 35%,transparent 70%);
}
.steps li::before{
  left:16px;
  width:48px;
  height:48px;
  border-radius:8px;
  background:
    linear-gradient(180deg,rgba(92,154,255,.26),rgba(92,154,255,.10)),
    #121a29;
  border:1px solid rgba(91,140,255,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 18px -14px rgba(0,0,0,.9);
  font-size:1.18rem;
  color:#eef4ff;
}
.steps li:hover{
  transform:translateY(-2px);
  border-color:rgba(91,140,255,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 14px 34px -24px rgba(0,0,0,.82);
}
.steps li:hover::before{
  border-color:rgba(91,140,255,.78);
}
.s-blue .steps li{
  background:
    linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,0)),
    linear-gradient(135deg,rgba(79,145,255,.055),transparent 38%),
    #101521;
  border-color:rgba(86,104,142,.42);
}
@media(max-width:560px){
  .steps{gap:13px}
  .steps::before{left:32px;top:28px;bottom:28px}
  .steps li{padding:18px 16px 18px 72px;min-height:68px}
  .steps li::before{left:12px;width:40px;height:40px;font-size:1.05rem}
  .steps li::after{left:60px;right:12px}
}



/* ---------- Step 24: FAQ / diagnostics accordion ---------- */
/* Keep the native details/summary interaction, but present each row as a calm
   diagnostic module rather than a generic accordion card. */
.faq{
  max-width:920px;
  gap:10px;
}
.faq details{
  position:relative;
  isolation:isolate;
  background:
    linear-gradient(180deg,rgba(255,255,255,.014),transparent 42%),
    linear-gradient(145deg,#0f141e 0%,#0c1119 100%);
  border:1px solid rgba(78,96,128,.43);
  border-radius:12px 4px 12px 12px;
  overflow:hidden;
  box-shadow:0 11px 25px -24px rgba(0,0,0,.97),inset 0 1px 0 rgba(255,255,255,.025);
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease,transform .2s ease;
}
/* Small precision rail + state point. Pure decoration, no new text. */
.faq details::before{
  content:"";
  position:absolute;
  z-index:2;
  top:0;
  left:18px;
  width:88px;
  height:1px;
  background:
    radial-gradient(circle at 0 50%,#91c5ff 0 2px,rgba(145,197,255,.22) 2.5px 4px,transparent 4.5px),
    linear-gradient(90deg,rgba(92,157,239,.5),rgba(92,157,239,.08) 68%,transparent);
  opacity:.55;
  pointer-events:none;
}
.faq details::after{
  content:"";
  position:absolute;
  z-index:2;
  left:0;
  top:14px;
  bottom:14px;
  width:2px;
  background:linear-gradient(180deg,rgba(100,167,255,.12),rgba(100,167,255,.42),rgba(100,167,255,.12));
  opacity:.3;
  transition:opacity .2s ease,box-shadow .2s ease;
  pointer-events:none;
}
.faq details:hover{
  transform:translateY(-1px);
  border-color:rgba(88,120,168,.56);
  box-shadow:0 14px 28px -25px rgba(0,0,0,.98),inset 0 1px 0 rgba(255,255,255,.032);
}
.faq details[open]{
  background:
    radial-gradient(520px 120px at 8% 0%,rgba(58,124,220,.075),transparent 64%),
    linear-gradient(180deg,rgba(255,255,255,.016),transparent 38%),
    #0f151f;
  border-color:rgba(83,133,201,.60);
  box-shadow:0 15px 30px -25px rgba(0,0,0,.98),inset 2px 0 0 rgba(78,143,231,.30),inset 0 1px 0 rgba(255,255,255,.035);
}
.faq details[open]::before{opacity:.9}
.faq details[open]::after{
  opacity:.9;
  box-shadow:0 0 10px -4px rgba(69,143,242,.55);
}
.faq summary{
  position:relative;
  z-index:1;
  min-height:58px;
  padding:17px 18px 17px 20px;
  gap:18px;
  color:#edf3ff;
  background:transparent;
  font-size:1.02rem;
  letter-spacing:-.006em;
  transition:background .2s ease,color .2s ease;
}
.faq summary:hover{
  color:#fff;
  background:linear-gradient(90deg,rgba(55,126,223,.045),transparent 58%);
}
.faq details[open] summary{
  color:#fff;
  background:linear-gradient(90deg,rgba(55,126,223,.07),rgba(55,126,223,.015) 48%,transparent 78%);
  border-bottom:1px solid rgba(80,108,149,.23);
}
/* Turn the existing plus/minus into a compact hardware control, without
   adding any new icon or text. */
.faq .pm{
  width:30px;
  height:30px;
  border-radius:7px 3px 7px 7px;
  border:1px solid rgba(86,109,147,.48);
  background:linear-gradient(180deg,#151c28,#0d131d);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 7px 14px -12px rgba(0,0,0,.95);
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease,transform .2s ease;
}
.faq .pm::before,.faq .pm::after{
  background:#7fb5ff;
  box-shadow:none;
}
.faq .pm::before{top:13px;left:8px;right:8px;height:2px}
.faq .pm::after{left:14px;top:8px;bottom:8px;width:2px}
.faq summary:hover .pm{
  border-color:rgba(91,145,218,.64);
  background:linear-gradient(180deg,#182334,#101722);
}
.faq details[open] .pm{
  border-color:rgba(82,147,232,.72);
  background:linear-gradient(180deg,#17263a,#101a28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 0 12px -8px rgba(65,143,244,.7);
}
.faq details[open] .pm::before{background:#9bc8ff}
.faq .ans{
  position:relative;
  z-index:1;
  padding:14px 66px 19px 20px;
  color:#aebbd0;
  line-height:1.68;
  background:linear-gradient(180deg,rgba(255,255,255,.004),transparent);
  animation:fade .22s ease;
}
.faq .ans code{background:rgba(89,126,181,.12)}
.faq .ans a{color:#8fbaff;text-decoration-color:rgba(143,186,255,.4)}
.faq .ans a:hover{color:#c4dcff}

@media(max-width:700px){
  .faq{gap:9px}
  .faq summary{min-height:56px;padding:15px 14px 15px 16px;gap:13px;font-size:.98rem;line-height:1.35}
  .faq .pm{width:28px;height:28px;flex:0 0 28px}
  .faq .pm::before{top:12px;left:7px;right:7px}
  .faq .pm::after{left:13px;top:7px;bottom:7px}
  .faq .ans{padding:12px 16px 17px;font-size:.96rem;line-height:1.62}
  .faq details::before{left:15px;width:72px}
  .faq details::after{top:12px;bottom:12px}
}
@media(prefers-reduced-motion:reduce){
  .faq details,.faq .pm,.faq summary{transition:none!important}
  .faq .ans{animation:none!important}
}



/* ===== sub-page additions (do not affect the homepage) ===== */
.page-hero{position:relative;overflow:hidden;background:radial-gradient(900px 460px at 82% 0%,rgba(160,107,255,.22),transparent 58%),radial-gradient(700px 420px at 6% 10%,rgba(91,140,255,.2),transparent 55%),linear-gradient(180deg,#0a0f26,#080a12 82%);border-bottom:1px solid var(--border-blue)}
.page-hero .grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:46px 46px;mask-image:radial-gradient(680px 380px at 70% 30%,#000,transparent 78%);opacity:.55}
.page-hero .wrap{position:relative;padding:44px 26px 40px}
.crumb{font-family:var(--fm);font-size:.76rem;color:var(--dim);margin:0 0 15px}
.crumb a{color:var(--muted)}.crumb a:hover{color:var(--blueA)}
.page-hero h1{font-size:clamp(2.1rem,4.6vw,3.15rem);font-weight:700;margin:0 0 15px;line-height:1.1}
.page-hero .intro{font-size:1.2rem;color:#fff;font-weight:500;max-width:62ch;margin:0;line-height:1.5}
.s3{font-size:1.18rem;margin:24px 0 8px;font-family:var(--fd);font-weight:600;color:#fff}
.codeblock{background:#0b0f1c;border:1px solid var(--border-blue);border-radius:12px;padding:15px 18px;overflow:auto;margin:6px 0 16px;max-width:var(--measure)}
.codeblock code{background:none;border:0;color:#cdd8f0;padding:0;white-space:pre;font-size:.85rem;line-height:1.7}
.blist{list-style:none;padding:0;margin:8px 0 16px;display:grid;gap:10px;max-width:var(--measure)}
.blist li{position:relative;padding-left:22px;color:var(--muted)}
.blist li::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;border-radius:2px;background:var(--grad)}
.diagram{max-width:520px;margin:6px auto 8px}
.page-hero .intro-sub{color:var(--muted);font-size:1.06rem;max-width:64ch;margin:14px 0 0;line-height:1.6}
main section .tbl-wrap{margin:8px 0 20px}
main section p{margin:0 0 15px}
main section p.lead{margin:0 0 12px}
main section ol.steps,main section ul.blist{margin-top:10px}
@media(max-width:940px){.page-hero .wrap{padding:34px 26px 32px}}

/* ============================================================
   STEP 30 - PREMIUM MOTION / HOVER DISCIPLINE
   Interaction styling only. No content, layout, URLs or artwork changed.
   ============================================================ */
:root{
  --motion-fast:150ms;
  --motion-ui:180ms;
  --motion-panel:220ms;
  --motion-ease:cubic-bezier(.2,.72,.2,1);
}

.menu>li>a,.menu .top,
.drop a,
.btn,.dl-btn,
#download .card,
body > section:nth-of-type(9) .emu li,
.steps li,
.faq details,
.faq summary,
.faq .pm,
.svgbox,
.tbl td,
footer.site .f-col a{
  transition-timing-function:var(--motion-ease);
}
.menu>li>a,.menu .top{transition-duration:var(--motion-fast)}
.menu .chev{transition:transform var(--motion-ui) var(--motion-ease)}
.drop{transition:opacity var(--motion-fast) ease,transform var(--motion-ui) var(--motion-ease),visibility var(--motion-fast)}
.drop a{transition:background var(--motion-fast) ease,color var(--motion-fast) ease,transform var(--motion-ui) var(--motion-ease),box-shadow var(--motion-fast) ease}
.btn,.dl-btn{transition:transform var(--motion-ui) var(--motion-ease),box-shadow var(--motion-ui) ease,background var(--motion-ui) ease,border-color var(--motion-ui) ease,color var(--motion-fast) ease,filter var(--motion-fast) ease}
#download .card{transition:border-color var(--motion-panel) ease,box-shadow var(--motion-panel) ease,transform var(--motion-panel) var(--motion-ease),background var(--motion-panel) ease}
body > section:nth-of-type(9) .emu li,.steps li{transition:transform var(--motion-panel) var(--motion-ease),border-color var(--motion-panel) ease,box-shadow var(--motion-panel) ease,background var(--motion-panel) ease}
.faq details{transition:border-color var(--motion-ui) ease,background var(--motion-ui) ease,box-shadow var(--motion-ui) ease}
.faq summary,.faq .pm{transition:background var(--motion-ui) ease,color var(--motion-fast) ease,border-color var(--motion-ui) ease,box-shadow var(--motion-ui) ease}
.svgbox{transition:border-color var(--motion-panel) ease,box-shadow var(--motion-panel) ease,background var(--motion-panel) ease}
.tbl td{transition:background var(--motion-fast) ease,color var(--motion-fast) ease}
footer.site .f-col a{transition:color var(--motion-fast) ease,transform var(--motion-ui) var(--motion-ease)}

/* The locked BIOS hero stays alive, but the motion is intentionally almost imperceptible. */
.viz-board{animation-duration:15s;animation-timing-function:cubic-bezier(.4,0,.2,1)}
.viz-orbits{animation-duration:160s}
.viz-pulse{animation-duration:3.6s}
.viz-pulse.slow{animation-duration:5.2s}
@keyframes vizFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-1.25px)}
}
@keyframes fade{
  from{opacity:0;transform:translateY(-3px)}
  to{opacity:1;transform:none}
}
.faq .ans{animation-duration:180ms;animation-timing-function:ease-out}

/* Desktop/fine-pointer states: tiny physical response, no bouncy cards or neon jumps. */
@media (hover:hover) and (pointer:fine){
  .btn:hover,.dl-btn:hover{
    transform:translateY(-1px);
    filter:none;
  }
  .btn:active,.dl-btn:active{
    transform:translateY(0) scale(.995);
  }
  .hero .hcta .btn-primary:hover,
  .hero .hcta .btn-ghost:hover,
  header .nav .btn-primary.desktop:hover{
    transform:translateY(-1px);
  }
  #download .card:hover,
  #download .card.feat:hover{
    transform:translateY(-2px);
  }
  body > section:nth-of-type(9) .emu li:hover,
  .steps li:hover{
    transform:translateY(-1px);
  }
  .faq details:hover{transform:none}
  .svgbox:hover{
    border-color:rgba(72,109,163,.62);
    box-shadow:0 16px 34px -30px rgba(0,0,0,.98),inset 0 1px 0 rgba(255,255,255,.035);
  }
  .drop a:hover{transform:translateX(1px)}
  footer.site .f-col a:hover{transform:translateX(2px)}
}

/* Touchscreens never inherit sticky desktop hover movement. */
@media (hover:none),(pointer:coarse){
  .btn:hover,.dl-btn:hover,
  #download .card:hover,#download .card.feat:hover,
  body > section:nth-of-type(9) .emu li:hover,
  .steps li:hover,.faq details:hover,
  .drop a:hover,footer.site .f-col a:hover{
    transform:none;
    filter:none;
  }
  .mobile a:hover{padding-left:15px}
}

/* Accessibility: decorative motion disappears when reduced motion is requested. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  .viz-board,.viz-orbits,.viz-pulse,.faq .ans{animation:none!important}
  .menu .chev,.drop,.drop a,.btn,.dl-btn,#download .card,
  body > section:nth-of-type(9) .emu li,.steps li,.faq details,.faq summary,.faq .pm,
  .svgbox,.tbl td,footer.site .f-col a,.mobile a,.hamburger,.hamburger::before,.hamburger::after{
    transition:none!important;
  }
}


/* ==========================================================
   STEP 32 - MICRO COMPONENT CONSISTENCY
   Small labels, identifiers, verification states and code
   tokens now share one PS2BIOS precision-instrument language.
   ========================================================== */
:root{
  --micro-surface-top:rgba(25,36,52,.94);
  --micro-surface-bot:rgba(11,18,28,.96);
  --micro-edge:rgba(78,108,151,.46);
  --micro-edge-soft:rgba(72,96,130,.34);
  --micro-text:#c7d4e8;
  --micro-dim:#93a2b8;
  --micro-blue:#8bbcff;
  --micro-blue-edge:rgba(80,143,229,.62);
}

/* Shared physical baseline: these should feel stamped into the same instrument panel. */
#download .rbadge,
#download .chip-m,
#download .card .vchip,
.svgbox .tag,
header .brand .tag,
footer .brand .tag{
  font-family:var(--fm);
  font-variant-numeric:tabular-nums;
  line-height:1;
  letter-spacing:.055em;
  border-radius:var(--shape-chip);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 5px 12px -12px rgba(0,0,0,.92);
}

/* Region / state tags. */
#download .rbadge{
  min-height:25px;
  display:inline-flex;
  align-items:center;
  padding:5px 9px 5px 18px;
  color:var(--micro-dim);
  background:linear-gradient(180deg,var(--micro-surface-top),var(--micro-surface-bot));
  border-color:var(--micro-edge);
}
#download .rbadge::before{
  left:8px;
  width:4px;
  height:4px;
  background:#7b8da8;
  box-shadow:0 0 4px rgba(119,141,170,.30);
}
#download .rbadge.rec{
  color:#e4efff;
  background:linear-gradient(180deg,rgba(37,91,170,.42),rgba(17,48,94,.42));
  border-color:var(--micro-blue-edge);
  box-shadow:
    inset 0 1px 0 rgba(181,216,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.24),
    0 6px 14px -13px rgba(55,126,220,.62);
}
#download .rbadge.rec::before{
  background:#9bcbff;
  box-shadow:0 0 5px rgba(83,158,247,.46);
}

/* ROM/model identifiers. */
#download .chip-m{
  min-height:28px;
  display:inline-flex;
  align-items:center;
  padding:6px 10px 6px 18px;
  color:#cadcf5;
  background:linear-gradient(180deg,rgba(22,33,48,.98),rgba(11,18,28,.98));
  border-color:rgba(76,107,151,.48);
}
#download .chip-m::before{
  left:7px;
  width:4px;
  height:4px;
  border-radius:1px;
  background:#72aefa;
  box-shadow:0 0 4px rgba(79,150,239,.36);
}

/* Verification is the only green micro-state on the page. */
#download .card .vchip{
  min-height:27px;
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  color:#81e7bc;
  background:linear-gradient(180deg,rgba(20,81,61,.24),rgba(10,47,37,.24));
  border-color:var(--edge-verified);
  box-shadow:
    inset 2px 0 0 rgba(81,218,160,.62),
    inset 0 1px 0 rgba(190,255,226,.045),
    0 6px 14px -14px rgba(38,154,108,.46);
  letter-spacing:.045em;
}

/* Inline file/path tokens: same engineering language, quieter than badges. */
code{
  font-variant-numeric:tabular-nums;
  border-color:var(--micro-edge-soft);
  background:linear-gradient(180deg,rgba(30,48,72,.40),rgba(18,30,47,.44));
  color:#c4d8f7;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  padding:.16em .44em;
  line-height:1.35;
}
#download .card .files code{
  border-color:rgba(78,117,171,.40);
  background:linear-gradient(180deg,rgba(42,75,122,.24),rgba(25,49,79,.22));
  color:#c8dcfb;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}

/* LAB is a brand instrument mark, not a promotional badge. */
header .brand .tag,
footer .brand .tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:19px;
  padding:3px 6px 2px;
  color:#a9c8f7;
  background:linear-gradient(180deg,rgba(27,46,72,.66),rgba(13,25,40,.72));
  border-color:rgba(83,126,190,.48);
  box-shadow:
    inset 2px 0 0 rgba(92,157,238,.48),
    inset 0 1px 0 rgba(255,255,255,.035);
}

/* Future illustration label follows the same family but stays subordinate. */
.svgbox .tag{
  min-height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 8px 4px 15px;
  color:#a8cbf7;
  background:linear-gradient(180deg,rgba(20,34,52,.92),rgba(9,18,29,.94));
  border-color:rgba(76,119,177,.44);
}
.svgbox .tag::before{
  background:#83bfff;
  box-shadow:0 0 4px rgba(87,161,245,.38);
}

/* Micro components stay precise rather than glowing on interaction. */
@media (hover:hover) and (pointer:fine){
  #download .chip-m,
  #download .rbadge,
  #download .card .vchip,
  .svgbox .tag,
  header .brand .tag,
  footer .brand .tag{
    transition:border-color var(--motion-fast) ease,background var(--motion-fast) ease,color var(--motion-fast) ease;
  }
  #download .card:hover .chip-m{border-color:rgba(88,130,187,.56)}
  #download .card:hover .rbadge:not(.rec){border-color:rgba(99,128,168,.48)}
}

@media(max-width:699px){
  #download .rbadge{min-height:23px;padding:4px 8px 4px 17px;letter-spacing:.045em}
  #download .chip-m{min-height:26px;padding:5px 9px 5px 17px;letter-spacing:.04em}
  #download .card .vchip{min-height:25px;padding:5px 9px}
  .svgbox .tag{min-height:22px}
  code{padding:.13em .38em}
}


/* ============================================================
   STEP 33 - TECHNICAL MICRO-DETAIL SYSTEM
   Decorative-only PS2BIOS precision accents. No copy/layout data
   is changed; accents remain subordinate to the content.
   ============================================================ */
:root{
  --sig-line:rgba(108,166,236,.34);
  --sig-line-soft:rgba(108,166,236,.16);
  --sig-node:#89c4ff;
  --sig-steel:rgba(151,171,198,.24);
}

/* A tiny diagnostic signature on section intro blocks.
   It repeats the brand language without becoming another heading ornament. */
.s-head{position:relative}
.s-head::after{
  content:"";
  position:absolute;
  right:2px;
  top:8px;
  width:48px;
  height:6px;
  pointer-events:none;
  opacity:.42;
  background:
    radial-gradient(circle at 4px 50%,var(--sig-node) 0 1.2px,rgba(137,196,255,.14) 1.7px 3.2px,transparent 3.5px),
    radial-gradient(circle at 22px 50%,rgba(137,196,255,.52) 0 1px,transparent 1.5px),
    linear-gradient(90deg,var(--sig-line),transparent) 8px 50%/38px 1px no-repeat;
}

/* Download-module micro contacts: a small hardware fingerprint, not another glow. */
#download .card-head{position:relative}
#download .card-head::after{
  content:"";
  position:absolute;
  right:1px;
  bottom:-7px;
  width:34px;
  height:3px;
  pointer-events:none;
  opacity:.34;
  background:repeating-linear-gradient(90deg,var(--sig-steel) 0 3px,transparent 3px 7px);
}
#download .card .files{position:relative;overflow:hidden}
#download .card .files::after{
  content:"";
  position:absolute;
  right:7px;
  bottom:6px;
  width:15px;
  height:9px;
  pointer-events:none;
  opacity:.32;
  border-right:1px solid var(--sig-line);
  border-bottom:1px solid var(--sig-line);
}

/* Region table: a tiny end-of-bus contact in the header, keeping data surfaces in-family. */
.tbl thead th:last-child{position:relative;padding-right:58px}
.tbl thead th:last-child::after{
  content:"";
  position:absolute;
  right:16px;
  top:50%;
  width:28px;
  height:5px;
  transform:translateY(-50%);
  pointer-events:none;
  opacity:.38;
  background:
    radial-gradient(circle at 3px 50%,var(--sig-node) 0 1px,transparent 1.6px),
    linear-gradient(90deg,var(--sig-line),transparent) 8px 50%/20px 1px no-repeat;
}

/* Emulator module titles get a restrained signal terminator. */
body > section:nth-of-type(9) .emu li strong::after{
  content:"";
  display:inline-block;
  width:18px;
  height:5px;
  margin-left:8px;
  vertical-align:middle;
  opacity:.34;
  background:
    radial-gradient(circle at 2px 50%,var(--sig-node) 0 1px,transparent 1.5px),
    linear-gradient(90deg,var(--sig-line),transparent) 6px 50%/12px 1px no-repeat;
}

/* FAQ rows: a small connector near the control, visually tying the accordion to the system UI. */
.faq summary{position:relative}
.faq summary::before{
  content:"";
  position:absolute;
  right:49px;
  top:50%;
  width:24px;
  height:4px;
  transform:translateY(-50%);
  pointer-events:none;
  opacity:.24;
  background:repeating-linear-gradient(90deg,rgba(130,164,207,.42) 0 2px,transparent 2px 6px);
}
.faq details[open] summary::before{opacity:.42}

/* Footer labels finish with the same line/node signature used elsewhere. */
footer.site .f-col h4{display:flex;align-items:center;gap:8px}
footer.site .f-col h4::after{
  content:"";
  width:22px;
  height:5px;
  flex:0 0 auto;
  opacity:.34;
  background:
    linear-gradient(90deg,var(--sig-line),transparent) left 50%/16px 1px no-repeat,
    radial-gradient(circle at 20px 50%,rgba(137,196,255,.58) 0 1px,transparent 1.6px);
}

/* Keep micro-detail density low on small screens. */
@media(max-width:699px){
  .s-head::after{width:34px;opacity:.26}
  #download .card-head::after{opacity:.22}
  .tbl thead th:last-child{padding-right:42px}
  .tbl thead th:last-child::after{right:10px;width:22px;opacity:.27}
  body > section:nth-of-type(9) .emu li strong::after{width:13px;margin-left:6px;opacity:.24}
  .faq summary::before{display:none}
  footer.site .f-col h4::after{opacity:.24}
}
@media(max-width:420px){
  .s-head::after{display:none}
  #download .card-head::after{display:none}
  body > section:nth-of-type(9) .emu li strong::after{display:none}
}

@media(prefers-reduced-motion:reduce){
  /* purely static by design; retained here to document the intent */
}


/* ============================================================
   STEP 34 - PS2BIOS BRAND CONSISTENCY PASS
   Final visual alignment of editorial/UI leftovers. No copy,
   URLs, manifests, section order, artwork or functionality changed.
   ============================================================ */
:root{
  --brand-ice:#cfe1ff;
  --brand-link:#84b2fb;
  --brand-link-hover:#c7dcff;
  --brand-copy:#aab7ca;
  --brand-copy-strong:#f0f5fd;
  --brand-subtle:#8291a8;
  --brand-line:rgba(83,119,166,.34);
  --brand-line-soft:rgba(83,119,166,.18);
}

/* Eliminate the last visible purple/SaaS cues from shared UI states. */
.faq details[open] .pm::before{background:#78b2ff}
.mobile .grp{color:#8fb9f6}

/* Editorial typography now uses the same cool hardware palette on every section type. */
section.s-dark p,
section.s-blue p{color:var(--brand-copy)}
section.s-dark .lead,
section.s-blue .lead{color:var(--brand-copy-strong)}
section h2,
section h3{color:#f3f7fd}
section .s-head{position:relative}

/* Inline links should read as technical references, never as generic purple web links. */
section a:not(.btn):not(.dl-btn){color:var(--brand-link)}
section a:not(.btn):not(.dl-btn):hover{color:var(--brand-link-hover)}
p a{
  text-decoration-color:rgba(105,158,230,.46);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
p a:hover{text-decoration-color:rgba(151,194,249,.72)}

/* The one secondary content heading on the page joins the same precision-heading family. */
section .wrap > h3{
  width:max-content;
  max-width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  color:#dce8f8;
  letter-spacing:.01em;
}
section .wrap > h3::after{
  content:"";
  width:34px;
  height:5px;
  flex:0 0 auto;
  opacity:.52;
  background:
    linear-gradient(90deg,rgba(104,166,242,.48),transparent) left 50%/27px 1px no-repeat,
    radial-gradient(circle at 32px 50%,rgba(137,196,255,.78) 0 1px,transparent 1.6px);
}

/* Download-note copy is anchored to the module system without turning into another card. */
#download .dl-note{
  position:relative;
  margin-top:24px;
  padding:15px 0 0 18px;
  border-top:1px solid var(--brand-line-soft);
  color:#9eacc0;
}
#download .dl-note::before{
  content:"";
  position:absolute;
  left:0;
  top:20px;
  width:7px;
  height:7px;
  border:1px solid rgba(104,166,242,.54);
  border-radius:2px 1px 2px 2px;
  background:#0b111b;
  box-shadow:inset 0 0 0 2px rgba(75,139,224,.10);
}

/* Neutral metadata / secondary text uses one consistent steel tone. */
.card .files,
.svgbox .fl,
.f-bot,
.rbadge:not(.rec){color:var(--brand-subtle)}

/* Subtle selection/focus branding for the whole product, without adding glow. */
::selection{background:rgba(64,127,218,.34);color:#fff}
:focus-visible{outline-color:#78b2ff}

/* Make surface transitions between dark and tinted sections consistent and quiet. */
section.s-dark,
section.s-blue{background-clip:padding-box}
section.s-blue{border-top-color:rgba(74,101,140,.28);border-bottom-color:rgba(74,101,140,.28)}

/* Mobile keeps the same system but removes secondary ornament when space is tight. */
@media(max-width:699px){
  section .wrap > h3{gap:8px}
  section .wrap > h3::after{width:24px;background-size:18px 1px,auto}
  #download .dl-note{margin-top:20px;padding-left:15px}
  #download .dl-note::before{width:6px;height:6px}
}
@media(max-width:420px){
  section .wrap > h3::after{display:none}
}


/* ============================================================
   STEP 35 - PERFORMANCE-SAFE PREMIUM DESIGN
   Runtime/rendering optimizations only. Visual identity/content unchanged.
   ============================================================ */

/* Keep the premium glass header, but reduce full-viewport backdrop sampling. */
header.site{
  backdrop-filter:blur(12px) saturate(112%);
  -webkit-backdrop-filter:blur(12px) saturate(112%);
}

/* Off-screen long-form sections do not need to be fully painted during first load. */
@supports (content-visibility:auto){
  body > section:not(.hero){
    content-visibility:auto;
    contain-intrinsic-size:auto 640px;
  }
  footer.site{
    content-visibility:auto;
    contain-intrinsic-size:auto 420px;
  }
}

/* Avoid promoting static components to expensive filter/compositing layers. */
.card,.emu li,.steps li,.faq details,.svgbox,.tbl-wrap,.honest{
  will-change:auto;
}

/* The hero keeps its luxury motion on capable desktop devices only. */
@media (hover:hover) and (pointer:fine) and (min-width:941px){
  .viz-board,.viz-orbits,.viz-pulse{will-change:transform,stroke-dashoffset}
}

/* Tablets/phones: opaque shell is visually equivalent, cheaper than live backdrop blur. */
@media (max-width:940px){
  header.site{
    background:linear-gradient(180deg,rgba(5,9,15,.985),rgba(7,12,20,.975));
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .viz-board,.viz-orbits,.viz-pulse{
    animation:none!important;
    will-change:auto!important;
  }
}

/* Small phones: preserve the artwork composition but drop GPU-heavy SVG/CSS filter work. */
@media (max-width:620px){
  .ps2-lux-viz{
    filter:none!important;
  }
  .feature.ps2-visual-stage::before{
    filter:blur(6px);
    opacity:.82;
  }
}

/* Extremely small / low-data contexts get the clean static presentation. */
@media (max-width:420px){
  .feature.ps2-visual-stage::before{filter:none;opacity:.62}
}

@media (prefers-reduced-data:reduce){
  .viz-board,.viz-orbits,.viz-pulse{animation:none!important}
  .hero .grid-bg,section.s-dark::before,section.s-blue::before{opacity:.12}
  .feature.ps2-visual-stage::before{filter:none;opacity:.58}
}

/* Existing reduced-motion contract remains authoritative. */
@media (prefers-reduced-motion:reduce){
  .viz-board,.viz-orbits,.viz-pulse,.brand-core,.faq .ans{animation:none!important}
  .ps2-lux-viz{will-change:auto!important}
}


/* ============================================================
   STEP 36 - ACCESSIBILITY VISUAL QA + POLISH
   Visual/accessibility behavior only. No copy, URLs, manifests,
   section order, hero artwork or functional logic changed.
   ============================================================ */
:root{
  --a11y-focus:#9ac8ff;
  --a11y-focus-soft:rgba(93,159,244,.24);
  --a11y-muted:#8493aa;
  --a11y-tap:44px;
}

/* Raise the lowest secondary-text floor without changing hierarchy. */
:root{--dim:var(--a11y-muted)}

/* Sticky-header-safe anchor/focus landing. */
section[id], [id].faq, #download{scroll-margin-top:94px}

/* One consistent, high-visibility keyboard focus language. */
:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--a11y-focus);
  outline-offset:3px;
  border-radius:6px;
}

/* Controls with their own shells get a refined outer focus halo. */
.btn:focus-visible,
.dl-btn:focus-visible,
.hamburger:focus-visible,
.menu .top:focus-visible,
.menu>li>a:focus-visible{
  outline:2px solid var(--a11y-focus);
  outline-offset:3px;
  border-color:var(--a11y-focus)!important;
  box-shadow:0 0 0 4px var(--a11y-focus-soft),inset 0 1px 0 rgba(255,255,255,.10);
}

/* Header/navigation targets stay comfortably operable by keyboard and touch. */
.menu>li>a,.menu .top{min-height:44px}
.drop a{
  min-height:44px;
  display:flex;
  align-items:center;
}
.brand:focus-visible{outline-offset:5px}

/* The secondary hero route is a real target, not a tiny text link. */
.feature .alllink{
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.feature .alllink:focus-visible{
  background:rgba(74,132,214,.08);
}

/* FAQ keyboard state is visible on the whole row, not only the plus/minus icon. */
.faq summary:focus-visible{
  outline:none;
  box-shadow:inset 0 0 0 2px var(--a11y-focus),inset 4px 0 0 rgba(92,158,245,.72);
  background:rgba(62,119,198,.10);
}
.faq summary:focus-visible .pm{
  border-color:var(--a11y-focus)!important;
  box-shadow:0 0 0 3px rgba(88,151,236,.12);
}

/* Inline reference links remain identifiable without relying on color alone. */
section p a:focus-visible,
.faq .ans a:focus-visible{
  text-decoration-thickness:2px;
  text-decoration-color:currentColor;
}

/* Data/code remains readable when a long path must wrap on constrained screens. */
@media(max-width:700px){
  code{white-space:normal;overflow-wrap:anywhere}
  .card .files code{white-space:nowrap}
}

/* Coarse-pointer/touch targets: preserve the design, raise the hit area. */
@media(pointer:coarse){
  .btn,.dl-btn,.hamburger,.mobile a,.faq summary{min-height:var(--a11y-tap)}
  footer.site .f-col a{
    min-height:44px;
    display:flex;
    align-items:center;
  }
  .alllink{min-height:44px}
}

/* High-contrast preference gets stronger structure without changing the theme. */
@media(prefers-contrast:more){
  :root{
    --muted:#bdc8d8;
    --dim:#a5b3c7;
    --brand-copy:#bdc8d8;
    --brand-subtle:#a5b3c7;
    --edge-default:rgba(137,170,214,.72);
    --edge-active:rgba(139,191,255,.96);
    --edge-focus:#b8d9ff;
  }
  section a:not(.btn):not(.dl-btn),p a{color:#a9ccff}
  .card,.emu li,.steps li,.faq details,.svgbox,.tbl-wrap,.honest{border-width:1px}
  .faq details[open],#download .card:hover{border-color:var(--edge-active)}
  .hero .grid-bg,section.s-dark::before,section.s-blue::before{opacity:.10}
}

/* Windows/high-contrast mode: keep controls and states legible. */
@media(forced-colors:active){
  :where(a,button,summary,[tabindex]):focus-visible{outline:2px solid Highlight}
  .btn,.dl-btn,.hamburger,.card,.emu li,.steps li,.faq details,.svgbox,.tbl-wrap,.honest,.drop{
    forced-color-adjust:auto;
    border:1px solid CanvasText;
  }
  .vchip{border-color:CanvasText!important}
}

/* Reduced motion remains absolute and also neutralizes focus/FAQ animation. */
@media(prefers-reduced-motion:reduce){
  :where(a,button,summary,[tabindex]){scroll-behavior:auto!important}
  .faq summary:focus-visible,.faq .pm{transition:none!important}
}


/* ============================================================
   STEP 37 - DESKTOP END-TO-END FINAL VISUAL AUDIT
   Only genuine desktop consistency fixes. No copy, URLs, manifests,
   section order, hero artwork or component content changed.
   ============================================================ */

/* Final brand consistency: footer now uses the same BIOS-chip identity
   as the header instead of reverting to the old generic gradient tile. */
footer.site .f-brand .logo{
  width:40px;
  height:40px;
  position:relative;
  overflow:visible;
  border-radius:7px;
  clip-path:polygon(7px 0,calc(100% - 3px) 0,100% 3px,100% calc(100% - 7px),calc(100% - 7px) 100%,3px 100%,0 calc(100% - 3px),0 7px);
  background:
    linear-gradient(90deg,rgba(100,157,249,.09) 1px,transparent 1px),
    linear-gradient(0deg,rgba(100,157,249,.07) 1px,transparent 1px),
    radial-gradient(circle at 72% 24%,rgba(66,138,255,.15),transparent 34%),
    linear-gradient(145deg,#121d2b 0%,#0a111b 68%,#080d14 100%);
  background-size:9px 9px,9px 9px,auto,auto;
  border:1px solid rgba(96,149,228,.62);
  box-shadow:
    0 12px 28px -21px rgba(47,125,255,.80),
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 0 16px rgba(22,64,126,.15);
}
footer.site .f-brand .logo::before{
  content:"";
  position:absolute;
  inset:6px;
  border:1px solid rgba(113,168,250,.31);
  border-radius:3px;
  background:
    linear-gradient(90deg,transparent 48%,rgba(93,151,245,.085) 48% 52%,transparent 52%),
    linear-gradient(0deg,transparent 48%,rgba(93,151,245,.065) 48% 52%,transparent 52%);
  box-shadow:
    -5px -5px 0 -4px rgba(125,177,255,.66),
    5px -5px 0 -4px rgba(125,177,255,.66),
    -5px 5px 0 -4px rgba(125,177,255,.66),
    5px 5px 0 -4px rgba(125,177,255,.66);
  pointer-events:none;
}
footer.site .f-brand .logo::after{
  content:"";
  position:absolute;
  inset:8px -5px;
  background:
    repeating-linear-gradient(to bottom,rgba(112,162,235,.62) 0 2px,transparent 2px 7px) left center / 5px calc(100% - 2px) no-repeat,
    repeating-linear-gradient(to bottom,rgba(112,162,235,.62) 0 2px,transparent 2px 7px) right center / 5px calc(100% - 2px) no-repeat;
  opacity:.76;
  pointer-events:none;
}
footer.site .f-brand .logo b{
  position:relative;
  z-index:2;
  font-size:.75rem;
  letter-spacing:.085em;
  color:#f7faff;
  text-shadow:0 0 9px rgba(78,143,246,.30);
}
footer.site .f-brand .wm{
  color:#f3f7fd;
  letter-spacing:-.025em;
}
footer.site .f-brand .wm span{color:#76aaff}

/* Desktop-only optical alignment: keep footer brand baseline and column labels
   visually locked without changing grid structure or spacing hierarchy. */
@media(min-width:941px){
  footer.site .f-brand .brand{min-height:40px;align-items:center}
  footer.site .f-col{padding-top:3px}
  footer.site .f-bot{align-items:start}
}


/* ============================================================
   STEP 43 - LIGHTWEIGHT PS2 SIGNATURE DETAILS
   CSS-only, static and paint-cheap. No images, JS, SVG filters,
   blur or continuous animation added.
   ============================================================ */

/* Text-only sections: one oversized, nearly-watermark PS2 symbol in
   the unused right-side space. Content stays dominant. */
body > section:nth-of-type(3) > .wrap,
body > section:nth-of-type(6) > .wrap,
body > section:nth-of-type(7) > .wrap,
body > section:nth-of-type(8) > .wrap{position:relative}

body > section:nth-of-type(3) > .wrap::before,
body > section:nth-of-type(6) > .wrap::before,
body > section:nth-of-type(7) > .wrap::before,
body > section:nth-of-type(8) > .wrap::before{
  position:absolute;
  right:5.5%;
  top:50%;
  transform:translateY(-50%);
  width:220px;
  text-align:center;
  font:500 176px/1 Arial,sans-serif;
  color:rgba(104,158,225,.045);
  text-shadow:0 0 1px rgba(140,190,255,.045);
  pointer-events:none;
  user-select:none;
  z-index:0;
}
body > section:nth-of-type(3) > .wrap::before{content:"□"}
body > section:nth-of-type(6) > .wrap::before{content:"△";font-size:188px}
body > section:nth-of-type(7) > .wrap::before{content:"○";font-size:190px}
body > section:nth-of-type(8) > .wrap::before{content:"×";font-size:174px}
body > section:nth-of-type(3) > .wrap > *,
body > section:nth-of-type(6) > .wrap > *,
body > section:nth-of-type(7) > .wrap > *,
body > section:nth-of-type(8) > .wrap > *{position:relative;z-index:1}

/* Replace a few generic signal dots with PS2-hardware-like cues.
   These are static 1px CSS lines, so there is virtually no runtime cost. */
body > section:nth-of-type(7)::after{
  right:7%;top:28px;width:82px;height:22px;
  background:repeating-linear-gradient(90deg,rgba(103,153,218,.14) 0 2px,transparent 2px 9px);
  border-top:1px solid rgba(103,153,218,.08);
  border-bottom:1px solid rgba(103,153,218,.05);
  opacity:.48;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
}
body > section:nth-of-type(13)::after{
  right:7%;top:26px;width:88px;height:24px;
  background:
    linear-gradient(90deg,rgba(101,154,223,.14),rgba(101,154,223,.14)) 8px 6px/29px 1px no-repeat,
    linear-gradient(90deg,rgba(101,154,223,.10),rgba(101,154,223,.10)) 50px 17px/28px 1px no-repeat,
    linear-gradient(0deg,rgba(101,154,223,.10),rgba(101,154,223,.10)) 37px 6px/1px 12px no-repeat,
    radial-gradient(circle at 7px 6px,rgba(133,190,255,.32) 0 1.5px,transparent 2px),
    radial-gradient(circle at 80px 17px,rgba(133,190,255,.24) 0 1.5px,transparent 2px);
  opacity:.62;
}

/* Tiny monochrome controller-symbol signature on the legal divider. */
footer.site .f-bot::after{
  content:"△  ○  ×  □";
  position:absolute;
  left:50%;
  top:-7px;
  transform:translateX(-50%);
  padding:0 10px;
  background:#05070b;
  color:rgba(129,170,225,.32);
  font:600 9px/14px Arial,sans-serif;
  letter-spacing:4px;
  white-space:nowrap;
  pointer-events:none;
}

/* On compact layouts, whitespace is valuable; decorative watermarks disappear. */
@media(max-width:940px){
  body > section:nth-of-type(3) > .wrap::before,
  body > section:nth-of-type(6) > .wrap::before,
  body > section:nth-of-type(7) > .wrap::before,
  body > section:nth-of-type(8) > .wrap::before{display:none}
  body > section:nth-of-type(7)::after,
  body > section:nth-of-type(13)::after{opacity:.28}
}
@media(max-width:560px){
  body > section:nth-of-type(7)::after,
  body > section:nth-of-type(13)::after,
  footer.site .f-bot::after{display:none}
}


/* STEP 45 - temporary CSS chip mark removed. Reserved class for the final logo asset. */
header .brand, footer .brand{gap:7px}
.brand-image{display:block;width:auto;height:44px;max-width:52px;object-fit:contain;flex:0 0 auto}
footer .brand-image{height:42px;max-width:50px}
@media(max-width:560px){.brand-image{height:38px;max-width:46px}}