: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}
}



/* ============================================================
   STEP 11 - PREMIUM PS2BIOS CONTROL / BUTTON SYSTEM
   Visual controls only. No text, URLs, manifests or structure changed.
   ============================================================ */
:root{
  --ctl-blue-1:#6aa9ff;
  --ctl-blue-2:#2f7fe8;
  --ctl-blue-3:#1b59bd;
  --ctl-edge:rgba(129,182,255,.52);
  --ctl-edge-soft:rgba(91,137,198,.38);
  --ctl-dark-1:#111a27;
  --ctl-dark-2:#090f18;
  --ctl-text:#f5f9ff;
}

/* Shared technical control silhouette. Slight chamfering makes the controls
   feel engineered without becoming aggressive gamer UI. */
.btn,
.dl-btn{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-radius:7px;
  letter-spacing:.005em;
  -webkit-tap-highlight-color:transparent;
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    color .18s ease,
    filter .18s ease;
}

.btn::before,
.dl-btn::before{
  content:"";
  position:absolute;
  inset:1px;
  z-index:-1;
  border-radius:5px;
  border:1px solid rgba(255,255,255,.045);
  pointer-events:none;
}

/* One signature corner mark across the whole control family. */
.btn::after,
.dl-btn::after{
  content:"";
  position:absolute;
  right:6px;
  top:6px;
  width:10px;
  height:10px;
  border-top:1px solid rgba(225,238,255,.46);
  border-right:1px solid rgba(225,238,255,.46);
  opacity:.72;
  pointer-events:none;
}

/* Primary: satin console-blue, not a loud purple SaaS gradient. */
.btn-primary,
.dl-btn:not(.alt){
  color:var(--ctl-text);
  background:
    linear-gradient(180deg,rgba(255,255,255,.09),transparent 34%),
    linear-gradient(135deg,var(--ctl-blue-3) 0%,var(--ctl-blue-2) 58%,#3f8ef2 100%);
  border:1px solid var(--ctl-edge);
  box-shadow:
    0 13px 26px -18px rgba(38,118,231,.88),
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(4,25,60,.42);
  text-shadow:0 1px 0 rgba(0,0,0,.26);
}

.btn-primary:hover,
.dl-btn:not(.alt):hover{
  color:#fff;
  transform:translateY(-1px);
  filter:none;
  border-color:rgba(151,199,255,.74);
  background:
    linear-gradient(180deg,rgba(255,255,255,.12),transparent 36%),
    linear-gradient(135deg,#205fc8 0%,#3588ef 58%,#4a9bff 100%);
  box-shadow:
    0 16px 30px -18px rgba(42,129,245,.98),
    0 0 24px -18px rgba(93,159,255,.74),
    inset 0 1px 0 rgba(255,255,255,.19),
    inset 0 -1px 0 rgba(3,24,57,.46);
}

.btn-primary:active,
.dl-btn:not(.alt):active{
  transform:translateY(0);
  box-shadow:
    0 8px 18px -16px rgba(42,129,245,.78),
    inset 0 2px 4px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* Secondary controls: graphite hardware surface with a cool steel-blue edge. */
.btn-ghost,
.dl-btn.alt{
  color:#dbe7f6;
  background:
    linear-gradient(180deg,rgba(255,255,255,.025),transparent 36%),
    linear-gradient(180deg,var(--ctl-dark-1),var(--ctl-dark-2));
  border:1px solid var(--ctl-edge-soft);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 11px 24px -22px rgba(42,112,211,.60);
}

.btn-ghost::after,
.dl-btn.alt::after{
  border-color:rgba(126,169,226,.42);
}

.btn-ghost:hover,
.dl-btn.alt:hover{
  color:#f7fbff;
  transform:translateY(-1px);
  border-color:rgba(103,158,232,.72);
  background:
    linear-gradient(180deg,rgba(60,112,183,.10),transparent 42%),
    linear-gradient(180deg,#142235,#0b131f);
  box-shadow:
    0 14px 26px -22px rgba(51,124,224,.72),
    inset 0 1px 0 rgba(255,255,255,.055);
}

.btn-ghost:active,
.dl-btn.alt:active{
  transform:translateY(0);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.22);
}

/* Hero CTAs: preserve Step 8 hierarchy while bringing them into this system. */
.hero .hcta .btn{
  min-height:50px;
  border-radius:7px;
  padding:12px 23px;
}
.hero .hcta .btn-primary{
  min-width:188px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.10),transparent 34%),
    linear-gradient(135deg,#1b59bd 0%,#2e7fe8 58%,#438ff2 100%);
  border-color:rgba(126,179,255,.55);
  box-shadow:
    0 15px 30px -19px rgba(41,126,239,.92),
    inset 0 1px 0 rgba(255,255,255,.17),
    inset 0 -1px 0 rgba(5,28,65,.42);
}
.hero .hcta .btn-ghost{
  min-width:148px;
  border-color:rgba(75,111,158,.64);
  background:
    linear-gradient(180deg,rgba(255,255,255,.025),transparent 34%),
    linear-gradient(180deg,#111a27,#090f18);
}

/* Header CTA: compact, premium, and visually subordinate to the hero CTA. */
header.site .btn.desktop{
  min-height:42px;
  padding:9px 20px;
  border-radius:6px;
  font-size:.91rem;
  box-shadow:
    0 10px 22px -18px rgba(44,124,234,.86),
    inset 0 1px 0 rgba(255,255,255,.14);
}
header.site .btn.desktop:hover{transform:translateY(-1px)}

/* Download cards: same control family, slightly denser and more tactile. */
.dl-btn{
  min-height:48px;
  padding:12px 16px;
  font-size:.95rem;
  font-weight:600;
}
.dl-btn.alt{
  color:#b9d5ff;
}
.dl-btn.alt:hover{
  color:#fff;
}

/* Keyboard focus remains unmistakable without a thick generic browser ring. */
.btn:focus-visible,
.dl-btn:focus-visible{
  outline:none;
  border-color:#8fc0ff;
  box-shadow:
    0 0 0 3px rgba(78,143,235,.20),
    0 12px 28px -20px rgba(48,129,239,.90),
    inset 0 1px 0 rgba(255,255,255,.14);
}

/* Touch devices should not depend on hover to communicate state. */
@media(hover:none){
  .btn:hover,.dl-btn:hover{transform:none}
}

@media(max-width:560px){
  .hero .hcta .btn{min-height:48px;padding:12px 18px}
  .dl-btn{min-height:47px}
}

@media(prefers-reduced-motion:reduce){
  .btn,.dl-btn{transition:none!important}
}

/* ---------- 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 12 - DOWNLOAD GRID COMPOSITION
   Layout only. Card copy, order, links and manifests are untouched.
   ============================================================ */

/* Wide desktop: use a six-track grid so every card keeps exactly the
   same width while the final pair sits perfectly centered beneath the
   first three cards. */
@media(min-width:1100px){
  #download .dl-grid{
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:20px;
    align-items:stretch;
  }
  #download .dl-grid > .card{
    grid-column:span 2;
    min-width:0;
    height:100%;
  }
  #download .dl-grid > .card:nth-child(4){grid-column:2 / span 2}
  #download .dl-grid > .card:nth-child(5){grid-column:4 / span 2}
}

/* Laptop/tablet landscape: two equal columns; the fifth card is centered
   at the same width as every other card instead of stretching full-width. */
@media(min-width:700px) and (max-width:1099px){
  #download .dl-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
    align-items:stretch;
  }
  #download .dl-grid > .card{
    min-width:0;
    height:100%;
  }
  #download .dl-grid > .card:nth-child(5){
    grid-column:1 / -1;
    width:calc(50% - 9px);
    justify-self:center;
  }
}

/* Phones: one clean stack. */
@media(max-width:699px){
  #download .dl-grid{
    grid-template-columns:1fr;
    gap:15px;
  }
  #download .dl-grid > .card{
    width:100%;
    min-width:0;
  }
}

/* ---------- 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 13 - DOWNLOAD CARD VISUAL SYSTEM
   Visual styling only. Card copy, order, links and manifests remain unchanged.
   ============================================================ */
#download .card{
  isolation:isolate;
  overflow:hidden;
  border-radius:14px;
  padding:25px 23px 22px;
  background:
    radial-gradient(460px 180px at 12% -8%,rgba(62,136,244,.105),transparent 58%),
    linear-gradient(180deg,rgba(19,28,41,.98) 0%,rgba(11,17,26,.99) 66%,rgba(8,13,20,1) 100%);
  border:1px solid rgba(80,105,141,.45);
  box-shadow:
    0 18px 38px -30px rgba(0,0,0,.96),
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 -1px 0 rgba(0,0,0,.42);
  transform:none;
  transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease,background .22s ease;
}

/* Inner diagnostic frame + subtle board grid. */
#download .card::before{
  content:"";
  position:absolute;
  inset:7px;
  z-index:-1;
  pointer-events:none;
  border:1px solid rgba(104,137,181,.10);
  border-radius:10px;
  background-image:
    linear-gradient(rgba(93,127,177,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(93,127,177,.028) 1px,transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.72) 52%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.72) 52%,transparent 100%);
}

/* Bottom connector rail. Purely decorative, no text. */
#download .card::after{
  content:"";
  position:absolute;
  left:23px;
  right:23px;
  bottom:10px;
  height:3px;
  z-index:-1;
  opacity:.62;
  background:
    radial-gradient(circle at 2px 50%,rgba(105,164,255,.65) 0 1px,transparent 1.4px) 0 0/18px 3px repeat-x,
    linear-gradient(90deg,rgba(60,122,220,.32),rgba(60,122,220,.04));
}

/* Replace the generic full-width accent with a precise firmware rail. */
#download .card .top-accent{
  top:0;
  left:23px;
  right:auto;
  width:74px;
  height:2px;
  border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,#68b6ff 0%,#347ef2 58%,rgba(52,126,242,0) 100%);
  opacity:.92;
  box-shadow:0 0 15px -5px rgba(65,143,255,.72);
}

/* Tiny hardware node at the start of the top rail. */
#download .card .top-accent::before{
  content:"";
  position:absolute;
  left:-1px;
  top:-2px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#d8efff;
  box-shadow:0 0 9px rgba(91,165,255,.88);
}

#download .card:hover{
  transform:translateY(-3px);
  border-color:rgba(83,136,211,.72);
  background:
    radial-gradient(460px 190px at 12% -8%,rgba(68,145,255,.15),transparent 59%),
    linear-gradient(180deg,rgba(20,31,46,.99),rgba(11,18,28,.99) 68%,rgba(8,13,20,1));
  box-shadow:
    0 24px 52px -34px rgba(0,0,0,.98),
    0 0 32px -26px rgba(55,132,244,.78),
    inset 0 1px 0 rgba(255,255,255,.05);
}

/* Featured modules: elevated selection, not a loud neon card. */
#download .card.feat{
  border-color:rgba(75,128,207,.70);
  background:
    radial-gradient(480px 210px at 14% -8%,rgba(65,139,250,.18),transparent 58%),
    linear-gradient(180deg,#132037 0%,#0c1624 58%,#09111b 100%);
  box-shadow:
    0 20px 46px -32px rgba(0,0,0,.98),
    inset 0 1px 0 rgba(133,182,255,.07);
}
#download .card.feat:hover{
  border-color:rgba(91,154,241,.88);
  box-shadow:
    0 27px 56px -34px rgba(0,0,0,.98),
    0 0 36px -27px rgba(58,139,255,.92),
    inset 0 1px 0 rgba(151,198,255,.09);
}

#download .card-head{
  margin-bottom:15px;
  min-height:34px;
}
#download .card-head h3{
  font-size:1.46rem;
  letter-spacing:-.015em;
  color:#f4f7fc;
  text-shadow:0 1px 0 rgba(0,0,0,.45);
}

/* Region/status badge becomes an instrument tag rather than a pill. */
#download .rbadge{
  position:relative;
  padding:5px 9px 5px 18px;
  border-radius:6px;
  border:1px solid rgba(90,113,148,.36);
  background:rgba(10,17,27,.68);
  color:#8f9db2;
  letter-spacing:.045em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
#download .rbadge::before{
  content:"";
  position:absolute;
  left:8px;
  top:50%;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#6f839f;
  transform:translateY(-50%);
  box-shadow:0 0 6px rgba(111,131,159,.45);
}
#download .rbadge.rec{
  color:#dceaff;
  border-color:rgba(75,137,226,.56);
  background:linear-gradient(180deg,rgba(40,102,196,.34),rgba(22,63,124,.24));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
#download .rbadge.rec::before{
  background:#8fc8ff;
  box-shadow:0 0 8px rgba(74,155,255,.85);
}

/* Model IDs read like ROM/board identifiers. */
#download .chips{
  gap:7px;
  margin-bottom:15px;
}
#download .chip-m{
  position:relative;
  border-radius:5px;
  padding:6px 10px 6px 18px;
  background:linear-gradient(180deg,rgba(23,35,52,.96),rgba(13,22,34,.96));
  border:1px solid rgba(67,98,143,.44);
  color:#c9dcfa;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 7px 14px -14px rgba(0,0,0,.9);
}
#download .chip-m::before{
  content:"";
  position:absolute;
  left:7px;
  top:50%;
  width:4px;
  height:4px;
  border-radius:1px;
  background:#4f96ef;
  transform:translateY(-50%);
  box-shadow:0 0 6px rgba(79,150,239,.52);
}

/* File/format row becomes an inset data bay. */
#download .card .files{
  min-height:42px;
  margin:1px 0 14px;
  padding:9px 10px;
  border-radius:7px;
  border:1px solid rgba(68,88,117,.30);
  background:linear-gradient(180deg,rgba(5,10,16,.56),rgba(10,16,24,.78));
  color:#9caabd;
  box-shadow:inset 0 1px 8px rgba(0,0,0,.24);
}
#download .card .files code{
  border-color:rgba(77,116,174,.34);
  background:rgba(51,99,169,.12);
  color:#bed6ff;
  border-radius:4px;
}

/* Verification is a compact pass-state strip, not a rounded marketing pill. */
#download .card .vchip{
  width:max-content;
  max-width:100%;
  margin:0 0 18px;
  border-radius:5px;
  padding:6px 9px;
  color:#75e7b7;
  background:linear-gradient(180deg,rgba(28,99,76,.18),rgba(19,69,55,.12));
  border-color:rgba(63,184,135,.34);
  box-shadow:inset 0 1px 0 rgba(176,255,221,.035);
}

/* Keep button system from Step 11, but seat it into the module shell. */
#download .card .dl-btn{
  margin-top:2px;
  border-radius:7px;
}

/* On phones, retain the same hardware language without excessive chrome. */
@media(max-width:699px){
  #download .card{
    padding:23px 19px 20px;
    border-radius:13px;
  }
  #download .card::before{inset:6px;border-radius:9px}
  #download .card::after{left:19px;right:19px}
  #download .card .top-accent{left:19px;width:62px}
  #download .card-head h3{font-size:1.36rem}
  #download .card .files{min-height:auto}
}

@media(prefers-reduced-motion:reduce){
  #download .card{transition:none!important}
}

/* ---------- 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 14 - PS2BIOS SHAPE / EDGE SYSTEM
   Visual geometry only. No copy, links, manifests or structure changed.
   Signature: soft technical shell with one precision-cut top-right corner.
   ============================================================ */
:root{
  --shape-shell:14px 5px 14px 14px;
  --shape-panel:12px 4px 12px 12px;
  --shape-inset:9px 3px 9px 9px;
  --shape-control:7px 3px 7px 7px;
  --shape-chip:5px 2px 5px 5px;
  --shape-micro:4px 2px 4px 4px;
}

/* Large structural surfaces: same family across the whole site. */
#download .card,
.svgbox,
.honest{
  border-radius:var(--shape-shell);
}

/* Reading / utility modules use the slightly tighter panel geometry. */
.tbl-wrap,
.emu li,
.steps li,
.faq details{
  border-radius:var(--shape-panel);
}

/* The download modules keep their diagnostic inner frame aligned to the shell. */
#download .card::before{
  border-radius:var(--shape-inset);
}

/* Inset data surfaces and technical micro-panels. */
#download .card .files,
code{
  border-radius:var(--shape-chip);
}

/* Status / model identifiers follow the same precision-corner signature. */
#download .rbadge,
#download .chip-m,
#download .card .vchip,
.svgbox .tag,
header .brand .tag{
  border-radius:var(--shape-chip);
}

/* Controls stay tactile and compact, but now share the same top-right precision corner. */
.btn,
.dl-btn,
.hamburger,
.menu>li>a,
.menu .top,
.drop a{
  border-radius:var(--shape-control);
}
.btn::before,
.dl-btn::before{
  border-radius:5px 2px 5px 5px;
}

/* Menus are panels, not floating rounded bubbles. */
.drop{
  border-radius:10px 4px 10px 10px;
}

/* Step counters become small hardware keys rather than soft tiles. */
.steps li::before{
  border-radius:9px 3px 9px 9px;
}

/* FAQ state remains clean when opened; the shell geometry does not jump. */
.faq details,
.faq details[open]{
  overflow:hidden;
}

/* Keep table clipping precise against the new shell shape. */
.tbl-wrap{
  overflow-x:auto;
  overflow-y:hidden;
}

/* Mobile keeps the same brand geometry instead of reverting to softer cards. */
@media(max-width:699px){
  #download .card{border-radius:13px 5px 13px 13px}
  #download .card::before{border-radius:8px 3px 8px 8px}
  .svgbox,.honest{border-radius:13px 5px 13px 13px}
  .tbl-wrap,.emu li,.steps li,.faq details{border-radius:11px 4px 11px 11px}
}

/* ---------- 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 15 - LIGHTING / SHADOW DISCIPLINE
   Premium material depth without neon-gaming bloom.
   CSS only: no copy, links, manifests, layout or artwork changed.
   ============================================================ */
:root{
  --lux-shadow-low:0 10px 24px -22px rgba(0,0,0,.92);
  --lux-shadow-mid:0 18px 38px -29px rgba(0,0,0,.96);
  --lux-shadow-high:0 24px 48px -31px rgba(0,0,0,.98);
  --lux-inner-hi:inset 0 1px 0 rgba(255,255,255,.045);
  --lux-blue-edge:rgba(92,151,235,.46);
  --lux-blue-bloom:0 0 18px -15px rgba(66,142,247,.52);
}

/* Header / brand: quiet glass-and-metal depth. */
header.site{
  box-shadow:0 10px 28px -26px rgba(0,0,0,.98),inset 0 -1px 0 rgba(86,142,226,.055);
}
header .brand .logo{
  box-shadow:0 8px 18px -14px rgba(50,126,232,.58),inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(0,0,0,.38);
}
header .brand .wm,
header .brand .wm span,
header .brand .tag{ text-shadow:none; }

/* Navigation should indicate state by material and edge, not glow. */
.menu>li>a:hover,
.menu .top:hover,
.menu>li:focus-within .top{
  box-shadow:inset 0 -1px 0 rgba(94,151,236,.28);
}
.drop{
  box-shadow:0 22px 46px -30px rgba(0,0,0,.98),0 9px 22px -20px rgba(0,0,0,.88),inset 0 1px 0 rgba(255,255,255,.035);
}
.drop a:hover{box-shadow:inset 2px 0 0 rgba(81,145,239,.26)}

/* Buttons: satin depth. Hover uses edge clarity, never a neon halo. */
.btn-primary,
.dl-btn:not(.alt){
  box-shadow:0 12px 24px -19px rgba(38,112,215,.72),inset 0 1px 0 rgba(255,255,255,.15),inset 0 -1px 0 rgba(4,25,60,.40);
  text-shadow:0 1px 0 rgba(0,0,0,.20);
}
.btn-primary:hover,
.dl-btn:not(.alt):hover{
  box-shadow:0 15px 28px -20px rgba(42,122,229,.78),var(--lux-blue-bloom),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(3,24,57,.44);
}
.btn-ghost,
.dl-btn.alt{
  box-shadow:var(--lux-inner-hi),0 10px 22px -22px rgba(0,0,0,.96);
}
.btn-ghost:hover,
.dl-btn.alt:hover{
  box-shadow:var(--lux-inner-hi),0 13px 24px -21px rgba(0,0,0,.98);
}
header.site .btn.desktop{
  box-shadow:0 9px 20px -18px rgba(38,112,216,.66),inset 0 1px 0 rgba(255,255,255,.13);
}
.btn:focus-visible,
.dl-btn:focus-visible{
  box-shadow:0 0 0 3px rgba(78,143,235,.18),0 12px 24px -21px rgba(0,0,0,.92),inset 0 1px 0 rgba(255,255,255,.13);
}

/* Download modules: physical elevation first; blue is only a restrained edge cue. */
#download .card{
  box-shadow:var(--lux-shadow-mid),var(--lux-inner-hi),inset 0 -1px 0 rgba(0,0,0,.40);
}
#download .card:hover{
  box-shadow:var(--lux-shadow-high),0 0 20px -18px rgba(55,132,244,.46),inset 0 1px 0 rgba(255,255,255,.05);
}
#download .card.feat{
  box-shadow:0 20px 42px -32px rgba(0,0,0,.98),inset 0 1px 0 rgba(133,182,255,.055);
}
#download .card.feat:hover{
  box-shadow:0 25px 48px -32px rgba(0,0,0,.98),0 0 22px -19px rgba(58,139,255,.56),inset 0 1px 0 rgba(151,198,255,.075);
}
#download .card .top-accent{box-shadow:0 0 10px -6px rgba(65,143,255,.48)}
#download .card .top-accent::before{box-shadow:0 0 6px rgba(91,165,255,.52)}
#download .rbadge::before{box-shadow:0 0 4px rgba(111,131,159,.28)}
#download .rbadge.rec::before{box-shadow:0 0 5px rgba(74,155,255,.46)}
#download .chip-m::before{box-shadow:0 0 4px rgba(79,150,239,.34)}

/* General panels: one restrained elevation vocabulary across the site. */
.svgbox,
.honest,
.emu li,
.steps li,
.faq details{
  box-shadow:var(--lux-shadow-low),var(--lux-inner-hi);
}
.tbl-wrap{
  box-shadow:0 12px 26px -25px rgba(0,0,0,.94),inset 0 1px 0 rgba(255,255,255,.025);
}

/* Interactive utility modules rise physically; they do not emit light. */
.emu li:hover{
  transform:translateY(-3px);
  border-color:rgba(79,139,218,.62);
  box-shadow:0 17px 30px -24px rgba(0,0,0,.98),inset 0 1px 0 rgba(255,255,255,.05);
}
.steps li::before{
  box-shadow:0 8px 16px -12px rgba(36,109,213,.62),inset 0 1px 0 rgba(255,255,255,.12);
}
.faq details[open]{
  box-shadow:0 14px 28px -25px rgba(0,0,0,.97),inset 2px 0 0 rgba(77,139,225,.32),inset 0 1px 0 rgba(255,255,255,.035);
}

/* Remove decorative text glow from reading surfaces. */
.hero h1,
.hero .hlead,
.s-head h2,
.card-head h3{
  text-shadow:none;
}

/* Hero artwork: preserve the locked artwork; only seat it into the page with
   a neutral, expensive shadow rather than an additional blue halo. */
.ps2-lux-viz{
  filter:saturate(.93) contrast(1.055) brightness(1.018) drop-shadow(0 27px 35px rgba(0,0,0,.245));
}
.feature.ps2-visual-stage::before{
  opacity:.78;
  filter:blur(7px);
}

@media(max-width:699px){
  #download .card,
  .svgbox,
  .honest,
  .emu li,
  .steps li,
  .faq details{box-shadow:0 12px 26px -24px rgba(0,0,0,.96),var(--lux-inner-hi)}
  .ps2-lux-viz{filter:saturate(.94) contrast(1.04) brightness(1.015) drop-shadow(0 19px 26px rgba(0,0,0,.22))}
}

@media(prefers-reduced-motion:reduce){
  .emu li{transition:none!important}
}

/* ---------- 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 16 - SECTION RHYTHM
   Premium editorial pacing: major / standard / compact sections.
   Content, order and component design remain unchanged.
   ============================================================ */
:root{
  --section-major:82px;
  --section-standard:68px;
  --section-compact:52px;
  --section-panel:60px;
}

/* Keep the locked hero spacing from Step 10 untouched. */
body > section:not(.hero){padding-block:var(--section-standard)}

/* Major destination sections: give the page breathing room. */
body > section:nth-of-type(2),  /* downloads */
body > section:nth-of-type(5),  /* which BIOS */
body > section:nth-of-type(9),  /* emulators */
body > section:nth-of-type(10), /* install */
body > section:nth-of-type(15), /* getting started */
body > section:nth-of-type(16)  /* FAQ */
{padding-block:var(--section-major)}

/* Concise information sections: intentionally tighter. */
body > section:nth-of-type(3),  /* why here */
body > section:nth-of-type(6),  /* more than one */
body > section:nth-of-type(7),  /* what you get */
body > section:nth-of-type(8),  /* checksum */
body > section:nth-of-type(11), /* problems */
body > section:nth-of-type(13), /* legal */
body > section:nth-of-type(14)  /* dump short */
{padding-block:var(--section-compact)}

/* The trust statement is a panel moment, not another full chapter. */
body > section:nth-of-type(12){padding-block:var(--section-panel)}

/* Visual explainer gets deliberate breathing room without feeling oversized. */
body > section:nth-of-type(4){padding-block:72px}

/* Heading-to-content rhythm follows the section's importance. */
body > section:nth-of-type(2) .s-head,
body > section:nth-of-type(5) .s-head,
body > section:nth-of-type(9) .s-head,
body > section:nth-of-type(15) .s-head,
body > section:nth-of-type(16) .s-head{margin-bottom:30px}

body > section:nth-of-type(3) .s-head,
body > section:nth-of-type(6) .s-head,
body > section:nth-of-type(7) .s-head,
body > section:nth-of-type(8) .s-head,
body > section:nth-of-type(11) .s-head,
body > section:nth-of-type(13) .s-head,
body > section:nth-of-type(14) .s-head{margin-bottom:20px}

/* A little more visual pause around structured content. */
body > section:nth-of-type(5) .tbl-wrap{margin-top:12px}
body > section:nth-of-type(9) .emu{margin-top:12px}
body > section:nth-of-type(15) .steps{margin-top:12px}
body > section:nth-of-type(16) .faq{margin-top:4px}

/* Tablet rhythm: preserve hierarchy but reduce dead space. */
@media(max-width:940px){
  :root{
    --section-major:64px;
    --section-standard:56px;
    --section-compact:46px;
    --section-panel:52px;
  }
  body > section:nth-of-type(4){padding-block:60px}
}

/* Mobile rhythm: faster scanning without cramped content. */
@media(max-width:560px){
  :root{
    --section-major:56px;
    --section-standard:48px;
    --section-compact:40px;
    --section-panel:44px;
  }
  body > section:nth-of-type(4){padding-block:50px}
  body > section:nth-of-type(2) .s-head,
  body > section:nth-of-type(5) .s-head,
  body > section:nth-of-type(9) .s-head,
  body > section:nth-of-type(15) .s-head,
  body > section:nth-of-type(16) .s-head{margin-bottom:24px}
  body > section:nth-of-type(3) .s-head,
  body > section:nth-of-type(6) .s-head,
  body > section:nth-of-type(7) .s-head,
  body > section:nth-of-type(8) .s-head,
  body > section:nth-of-type(11) .s-head,
  body > section:nth-of-type(13) .s-head,
  body > section:nth-of-type(14) .s-head{margin-bottom:17px}
}

/* ---------- 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 18 - SVG / VISUAL DISPLAY FRAME
   Premium PS2BIOS technical viewport for future illustrations.
   Frame only: placeholder text/structure remains untouched.
   ============================================================ */
.svgbox{
  min-height:286px;
  overflow:hidden;
  isolation:isolate;
  border-color:rgba(78,108,149,.70);
  background:
    radial-gradient(90% 78% at 50% 16%,rgba(67,126,211,.12),transparent 58%),
    repeating-linear-gradient(0deg,rgba(116,152,201,.025) 0 1px,transparent 1px 32px),
    repeating-linear-gradient(90deg,rgba(116,152,201,.022) 0 1px,transparent 1px 32px),
    linear-gradient(180deg,#0f151f 0%,#0a0f17 100%);
  box-shadow:
    0 22px 44px -36px rgba(0,0,0,.98),
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 -1px 0 rgba(31,72,126,.18);
}

/* Inner precision frame + restrained PS2-blue service-grid language. */
.svgbox::before{
  content:"";
  position:absolute;
  inset:11px;
  z-index:0;
  pointer-events:none;
  border:1px solid rgba(101,137,184,.16);
  border-radius:10px 3px 10px 10px;
  background:
    linear-gradient(90deg,rgba(91,158,247,.54),rgba(91,158,247,.54)) left top/38px 1px no-repeat,
    linear-gradient(rgba(91,158,247,.54),rgba(91,158,247,.54)) left top/1px 30px no-repeat,
    linear-gradient(90deg,rgba(91,158,247,.28),rgba(91,158,247,.28)) right bottom/46px 1px no-repeat,
    linear-gradient(rgba(91,158,247,.28),rgba(91,158,247,.28)) right bottom/1px 34px no-repeat;
  opacity:.9;
}

/* Hardware rails / contact points. They stay behind future artwork. */
.svgbox::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 18px 50%,rgba(155,205,255,.82) 0 1.3px,rgba(63,136,229,.24) 1.5px 4px,transparent 4.4px),
    radial-gradient(circle at calc(100% - 18px) 50%,rgba(155,205,255,.58) 0 1.2px,rgba(63,136,229,.18) 1.4px 3.8px,transparent 4.2px),
    linear-gradient(90deg,rgba(91,151,229,.24),transparent 72%) 18px 50%/72px 1px no-repeat,
    linear-gradient(270deg,rgba(91,151,229,.16),transparent 72%) calc(100% - 18px) 50%/72px 1px no-repeat,
    linear-gradient(90deg,transparent,rgba(98,162,244,.13),transparent) 50% calc(100% - 15px)/42% 1px no-repeat;
  opacity:.72;
}

.svgbox > *{position:relative;z-index:2}

/* Future SVG artwork can drop directly into this viewport without changing the shell. */
.svgbox > div{
  width:min(82%,430px);
  min-height:158px;
  padding:30px 28px 27px;
  display:grid;
  align-content:center;
  justify-items:center;
  gap:7px;
  position:relative;
  border:1px solid rgba(91,130,181,.18);
  border-radius:10px 3px 10px 10px;
  background:
    radial-gradient(78% 90% at 50% 45%,rgba(55,113,196,.075),transparent 70%),
    linear-gradient(180deg,rgba(8,13,21,.28),rgba(7,11,18,.55));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 -1px 0 rgba(45,86,142,.12),
    0 20px 46px -42px rgba(0,0,0,.98);
}
.svgbox > div::before,
.svgbox > div::after{
  content:"";
  position:absolute;
  pointer-events:none;
}
.svgbox > div::before{
  top:-1px;
  left:18%;
  right:18%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(96,164,255,.56),transparent);
}
.svgbox > div::after{
  left:50%;
  bottom:-1px;
  width:42px;
  height:2px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,#5b9ff3,transparent);
  box-shadow:0 0 10px -5px rgba(77,153,255,.65);
}

.svgbox .tag{
  top:17px;
  left:17px;
  min-width:42px;
  text-align:center;
  padding:4px 8px 4px 15px;
  color:#9dc5fb;
  background:rgba(12,21,33,.88);
  border-color:rgba(88,132,190,.34);
  letter-spacing:.08em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.svgbox .tag::before{
  content:"";
  position:absolute;
  left:7px;
  top:50%;
  width:3px;
  height:3px;
  border-radius:50%;
  transform:translateY(-50%);
  background:#72b8ff;
  box-shadow:0 0 6px rgba(89,166,255,.55);
}
.svgbox .nm{
  color:#8fbcf8;
  font-size:.93rem;
  letter-spacing:.075em;
  text-transform:uppercase;
  text-shadow:none;
}
.svgbox .fl{
  margin-top:2px;
  color:#77879f;
  font-size:.78rem;
  letter-spacing:.025em;
}
.svgbox > div > svg{
  width:100%;
  height:auto;
  max-height:220px;
  display:block;
}

@media(max-width:940px){
  .svgbox{min-height:252px}
  .svgbox > div{width:min(88%,460px);min-height:142px}
}
@media(max-width:560px){
  .svgbox{min-height:220px;padding:20px}
  .svgbox::before{inset:9px}
  .svgbox > div{width:92%;min-height:126px;padding:24px 18px 21px}
  .svgbox .tag{top:13px;left:13px}
  .svgbox .nm{font-size:.82rem}
  .svgbox .fl{font-size:.72rem}
}

/* ---------- 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 21 - EMULATOR SYSTEM MODULES
   Visual-only treatment for the "Which emulator are you on?" cards.
   No copy, links, order or functionality changed.
   ============================================================ */
body > section:nth-of-type(9) .emu{
  gap:16px;
}

body > section:nth-of-type(9) .emu li{
  position:relative;
  isolation:isolate;
  min-height:104px;
  padding:19px 22px 18px 58px;
  overflow:hidden;
  border:1px solid rgba(75,104,143,.62);
  background:
    radial-gradient(130% 150% at 0% 0%,rgba(62,126,210,.10),transparent 45%),
    linear-gradient(180deg,rgba(17,23,33,.96),rgba(9,14,22,.985));
  color:#aab6c9;
  box-shadow:
    0 14px 30px -27px rgba(0,0,0,.98),
    inset 0 1px 0 rgba(255,255,255,.038),
    inset 0 -1px 0 rgba(31,67,112,.12);
  transition:transform .20s ease,border-color .20s ease,box-shadow .20s ease,background .20s ease;
}

/* Precision bus rail: a repeatable PS2BIOS module signature. */
body > section:nth-of-type(9) .emu li::before{
  content:"";
  position:absolute;
  z-index:1;
  left:18px;
  top:17px;
  bottom:17px;
  width:21px;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 9px,#a6d3ff 0 1.6px,rgba(95,165,244,.24) 2px 4.5px,transparent 5px),
    radial-gradient(circle at 50% calc(100% - 9px),rgba(121,188,255,.74) 0 1.3px,rgba(80,148,230,.17) 1.8px 4px,transparent 4.5px),
    linear-gradient(rgba(91,157,238,.50),rgba(91,157,238,.08)) 50% 14px/1px calc(100% - 28px) no-repeat,
    linear-gradient(90deg,rgba(91,157,238,.54),transparent) 50% 23px/18px 1px no-repeat,
    linear-gradient(90deg,rgba(91,157,238,.28),transparent) 50% calc(100% - 23px)/14px 1px no-repeat;
  opacity:.9;
}

/* Top-right connector contacts and a restrained data lane. */
body > section:nth-of-type(9) .emu li::after{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,transparent,rgba(103,164,242,.20),transparent) 58px 0/42% 1px no-repeat,
    repeating-linear-gradient(90deg,rgba(119,146,179,.25) 0 3px,transparent 3px 8px) calc(100% - 19px) 15px/42px 2px no-repeat,
    linear-gradient(135deg,transparent 0 72%,rgba(64,117,184,.07) 72% 73%,transparent 73%) 0 0/100% 100% no-repeat;
  opacity:.8;
}

body > section:nth-of-type(9) .emu li strong{
  display:inline-block;
  margin-bottom:4px;
  color:#f4f7fc;
  font-family:var(--fd);
  font-weight:600;
  letter-spacing:-.005em;
}

body > section:nth-of-type(9) .emu li a{
  color:#8dbaf2;
  text-decoration-color:rgba(116,179,250,.34);
}
body > section:nth-of-type(9) .emu li a:hover{color:#c0dbff}

/* Each module gets a tiny hardware fingerprint, not a decorative color theme. */
body > section:nth-of-type(9) .emu li:nth-child(2n){
  background:
    radial-gradient(125% 145% at 100% 0%,rgba(53,112,192,.075),transparent 46%),
    linear-gradient(180deg,rgba(16,22,32,.97),rgba(9,14,22,.99));
}
body > section:nth-of-type(9) .emu li:nth-child(3n)::after{
  background:
    linear-gradient(90deg,transparent,rgba(103,164,242,.18),transparent) 58px 0/35% 1px no-repeat,
    repeating-linear-gradient(90deg,rgba(119,146,179,.22) 0 2px,transparent 2px 7px) calc(100% - 19px) 15px/48px 2px no-repeat,
    linear-gradient(135deg,transparent 0 78%,rgba(64,117,184,.065) 78% 79%,transparent 79%) 0 0/100% 100% no-repeat;
}

body > section:nth-of-type(9) .emu li:hover{
  transform:translateY(-3px);
  border-color:rgba(87,144,218,.74);
  background:
    radial-gradient(135% 155% at 0% 0%,rgba(64,133,222,.13),transparent 46%),
    linear-gradient(180deg,rgba(18,25,36,.985),rgba(10,15,23,.995));
  box-shadow:
    0 20px 38px -30px rgba(0,0,0,.99),
    0 0 18px -17px rgba(64,137,235,.44),
    inset 0 1px 0 rgba(255,255,255,.05);
}

/* The final chooser module remains in-family but reads as a broader routing option. */
body > section:nth-of-type(9) .emu li:last-child{
  border-color:rgba(84,121,170,.70);
  background:
    radial-gradient(110% 160% at 12% 0%,rgba(67,135,224,.12),transparent 50%),
    linear-gradient(180deg,rgba(18,25,36,.98),rgba(9,14,22,.995));
}

@media(max-width:940px){
  body > section:nth-of-type(9) .emu{gap:13px}
  body > section:nth-of-type(9) .emu li{
    min-height:0;
    padding:18px 20px 17px 54px;
  }
  body > section:nth-of-type(9) .emu li::before{left:16px;top:15px;bottom:15px}
}

@media(max-width:560px){
  body > section:nth-of-type(9) .emu{gap:11px}
  body > section:nth-of-type(9) .emu li{
    padding:17px 17px 16px 49px;
  }
  body > section:nth-of-type(9) .emu li::before{
    left:14px;
    top:14px;
    bottom:14px;
    width:19px;
  }
  body > section:nth-of-type(9) .emu li::after{
    opacity:.58;
  }
}

@media(prefers-reduced-motion:reduce){
  body > section:nth-of-type(9) .emu li{transition:none!important}
}

/* ---------- 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 25 - PREMIUM DESKTOP FOOTER SYSTEM
   Footer presentation only. No footer copy, links or order changed.
   ============================================================ */
footer.site{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:64px 0 30px;
  background:
    radial-gradient(760px 260px at 12% -30px,rgba(60,126,232,.105),transparent 66%),
    radial-gradient(560px 220px at 86% 10%,rgba(48,85,156,.055),transparent 70%),
    linear-gradient(180deg,#070a10 0%,#05070b 100%);
  border-top:1px solid rgba(103,137,191,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
}
/* precision top rail - brand signature, not a neon divider */
footer.site::before{
  content:"";
  position:absolute;
  top:-1px;
  left:50%;
  width:min(1240px,calc(100% - 52px));
  height:1px;
  transform:translateX(-50%);
  background:
    radial-gradient(circle at 0 50%,rgba(166,213,255,.9) 0 2px,transparent 2.5px),
    radial-gradient(circle at 100% 50%,rgba(89,153,255,.48) 0 1.5px,transparent 2px),
    linear-gradient(90deg,rgba(112,177,255,.52),rgba(112,177,255,.14) 24%,rgba(112,177,255,.05) 68%,transparent 100%);
  pointer-events:none;
}
/* barely-there service grid to stop the footer reading as a flat black block */
footer.site::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.16;
  background-image:
    linear-gradient(rgba(124,163,218,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(124,163,218,.035) 1px,transparent 1px);
  background-size:42px 42px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.75),transparent 76%);
          mask-image:linear-gradient(180deg,rgba(0,0,0,.75),transparent 76%);
}
footer.site>.wrap{position:relative;z-index:1}
footer.site .f-grid{
  align-items:start;
  gap:36px;
}
footer.site .f-brand{
  position:relative;
  min-width:0;
}
footer.site .f-brand .brand{
  gap:12px;
  width:max-content;
  max-width:100%;
}
footer.site .f-brand .brand:hover{transform:none}
footer.site .f-brand .logo{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 10px 24px -18px rgba(54,126,236,.72);
}
footer.site .f-brand p{
  max-width:31ch;
  margin:17px 0 0;
  color:#92a0b8;
  font-size:.9rem;
  line-height:1.72;
}
footer.site .f-col{
  position:relative;
  padding-top:2px;
}
footer.site .f-col h4{
  position:relative;
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 0 16px;
  color:#e8effb;
  font-size:.73rem;
  font-weight:700;
  letter-spacing:.105em;
  line-height:1.2;
  text-transform:uppercase;
}
footer.site .f-col h4::before{
  content:"";
  width:14px;
  height:1px;
  flex:0 0 14px;
  background:linear-gradient(90deg,#75b1ff,rgba(117,177,255,.16));
  box-shadow:-3px 0 0 -1px rgba(165,213,255,.9);
}
footer.site .f-col ul{gap:8px}
footer.site .f-col li{line-height:1.35}
footer.site .f-col a{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:3px 0 3px 13px;
  color:#8f9db4;
  font-size:.875rem;
  transition:color .18s ease,transform .18s ease;
}
footer.site .f-col a::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:4px;
  height:4px;
  border:1px solid rgba(101,155,233,.46);
  transform:translateY(-50%) rotate(45deg);
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
footer.site .f-col a:hover{
  color:#dce9ff;
  transform:translateX(3px);
}
footer.site .f-col a:hover::before{
  border-color:#86b9ff;
  background:rgba(102,164,255,.38);
  box-shadow:0 0 7px -2px rgba(80,149,255,.7);
}
footer.site .f-bot{
  position:relative;
  margin-top:38px;
  padding-top:20px;
  color:#6f7d93;
  font-size:.775rem;
  line-height:1.55;
  border-top:1px solid rgba(86,109,145,.27);
}
footer.site .f-bot::before{
  content:"";
  position:absolute;
  top:-1px;
  left:0;
  width:82px;
  height:1px;
  background:linear-gradient(90deg,rgba(112,177,255,.72),transparent);
}

@media(min-width:941px){
  footer.site .f-grid{
    grid-template-columns:minmax(250px,1.55fr) repeat(4,minmax(118px,1fr));
    gap:38px;
  }
  footer.site .f-brand{
    padding-right:32px;
  }
  footer.site .f-brand::after{
    content:"";
    position:absolute;
    top:4px;
    right:0;
    width:1px;
    height:88%;
    background:linear-gradient(180deg,rgba(91,122,169,.34),rgba(91,122,169,.07) 72%,transparent);
  }
  footer.site .f-bot{
    grid-template-columns:minmax(0,1.25fr) minmax(260px,.9fr);
    gap:34px;
    align-items:start;
  }
  footer.site .f-bot>div:last-child{text-align:right}
}

@media(prefers-reduced-motion:reduce){
  footer.site .f-col a{transition:none!important}
}


/* ============================================================
   STEP 26 - PREMIUM MOBILE FOOTER LAYOUT
   Layout only. Footer copy, links, order and desktop presentation unchanged.
   ============================================================ */
@media(max-width:760px){
  footer.site{
    padding:48px 0 24px;
  }
  footer.site::before{
    width:calc(100% - 40px);
  }
  footer.site::after{
    opacity:.11;
    background-size:36px 36px;
  }
  footer.site .f-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:26px 20px;
    align-items:start;
  }
  /* Brand becomes the full-width introduction; navigation follows as a compact 2×2 matrix. */
  footer.site .f-brand{
    grid-column:1 / -1;
    padding:0 0 24px;
    margin-bottom:2px;
    border-bottom:1px solid rgba(83,105,140,.24);
  }
  footer.site .f-brand::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-1px;
    width:72px;
    height:1px;
    background:linear-gradient(90deg,rgba(112,177,255,.68),transparent);
  }
  footer.site .f-brand .brand{
    gap:10px;
  }
  footer.site .f-brand p{
    max-width:44ch;
    margin-top:14px;
    font-size:.875rem;
    line-height:1.66;
  }
  footer.site .f-col{
    min-width:0;
    padding-top:0;
  }
  footer.site .f-col h4{
    margin-bottom:12px;
    gap:7px;
    font-size:.69rem;
    letter-spacing:.09em;
  }
  footer.site .f-col h4::before{
    width:11px;
    flex-basis:11px;
  }
  footer.site .f-col ul{
    gap:5px;
  }
  footer.site .f-col a{
    min-height:30px;
    max-width:100%;
    padding:4px 0 4px 11px;
    font-size:.84rem;
    line-height:1.34;
    white-space:normal;
  }
  footer.site .f-col a:hover{
    transform:none;
  }
  footer.site .f-col a::before{
    width:3px;
    height:3px;
  }
  footer.site .f-bot{
    grid-template-columns:1fr;
    gap:7px;
    margin-top:28px;
    padding-top:17px;
    font-size:.735rem;
    line-height:1.52;
  }
  footer.site .f-bot>div:last-child{
    text-align:left;
  }
}

@media(max-width:420px){
  footer.site{
    padding-top:42px;
  }
  footer.site .f-grid{
    gap:24px 16px;
  }
  footer.site .f-brand{
    padding-bottom:21px;
  }
  footer.site .f-col h4{
    font-size:.655rem;
    letter-spacing:.075em;
  }
  footer.site .f-col a{
    font-size:.81rem;
    padding-left:10px;
  }
  footer.site .f-bot{
    margin-top:25px;
    font-size:.71rem;
  }
}


/* ============================================================
   STEP 27 - MOBILE HERO OPTIMIZATION
   Mobile composition only. No copy, links, hero artwork or
   desktop presentation is changed.
   ============================================================ */
@media(max-width:760px){
  .hero .wrap{
    grid-template-columns:1fr;
    gap:4px;
    padding:30px 20px 30px;
    align-items:start;
  }
  .hero .wrap > div:first-child{
    width:100%;
    max-width:640px;
    margin:0 auto;
    padding:0;
  }
  h1.htitle{
    max-width:10.2ch;
    margin:0 0 22px;
    font-size:clamp(2.55rem,11.8vw,3.35rem);
    line-height:.99;
    letter-spacing:-.038em;
  }
  h1.htitle::after{
    bottom:-11px;
    width:72px;
  }
  .hlead{
    max-width:none;
    margin:0 0 12px;
    padding-left:14px;
    font-size:1.03rem;
    line-height:1.48;
  }
  .hlead::before{top:.28em;bottom:.28em}
  .hlead::after{top:.27em}
  .hsub{
    max-width:none;
    margin:0 0 20px;
    font-size:.925rem;
    line-height:1.59;
  }
  .hcta{
    display:grid;
    grid-template-columns:minmax(0,1.18fr) minmax(0,.92fr);
    gap:9px;
    width:100%;
  }
  .hero .hcta .btn{
    width:100%;
    min-width:0;
    min-height:46px;
    padding:10px 12px;
    font-size:.88rem;
  }
  .feature.ps2-visual-stage{
    width:100%;
    max-width:560px;
    min-height:310px;
    margin:-2px auto 0;
    transform:none;
  }
  .ps2-lux-viz{
    width:108%;
    max-width:none;
    margin-left:-4%;
  }
  .feature.ps2-visual-stage::before{
    inset:8% -5% 5%;
    opacity:.78;
    filter:blur(12px);
  }
}

@media(max-width:420px){
  .hero .wrap{
    gap:0;
    padding:27px 18px 27px;
  }
  h1.htitle{
    max-width:10.2ch;
    font-size:clamp(2.42rem,12vw,3.05rem);
    margin-bottom:21px;
  }
  .hlead{
    font-size:.995rem;
    line-height:1.47;
    margin-bottom:11px;
  }
  .hsub{
    font-size:.90rem;
    line-height:1.56;
    margin-bottom:18px;
  }
  .hcta{gap:8px}
  .hero .hcta .btn{
    min-height:45px;
    padding:9px 10px;
    font-size:.84rem;
  }
  .feature.ps2-visual-stage{
    min-height:292px;
    margin-top:-1px;
  }
  .ps2-lux-viz{
    width:111%;
    margin-left:-5.5%;
  }
}

@media(max-width:350px){
  .hcta{grid-template-columns:1fr}
  .hero .hcta .btn{font-size:.88rem}
  .feature.ps2-visual-stage{min-height:276px}
}


/* ============================================================
   STEP 28 - MOBILE HEADER + MENU PREMIUM PASS
   Visual-only responsive layer. No navigation text/URLs changed.
   ============================================================ */
@media (max-width:940px){
  header.site{
    height:68px;
    background:
      linear-gradient(180deg,rgba(5,9,15,.96),rgba(7,12,20,.935));
    border-bottom:1px solid rgba(83,120,171,.34);
    box-shadow:
      0 14px 34px -28px rgba(0,0,0,.96),
      inset 0 -1px 0 rgba(111,171,255,.035);
    backdrop-filter:blur(18px) saturate(118%);
  }
  header.site::after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:-1px;
    height:1px;
    background:linear-gradient(90deg,
      transparent 0%,
      rgba(70,143,239,.08) 18%,
      rgba(92,160,248,.42) 48%,
      rgba(92,160,248,.12) 77%,
      transparent 100%);
    pointer-events:none;
  }
  header .nav{
    height:68px;
    padding-left:18px;
    padding-right:18px;
    gap:10px;
  }
  header .brand{
    gap:9px;
    min-width:0;
  }
  header .brand .logo{
    width:38px;
    height:38px;
    flex:0 0 38px;
    box-shadow:
      0 10px 22px -18px rgba(69,145,255,.88),
      inset 0 1px 0 rgba(255,255,255,.045),
      inset 0 0 14px rgba(22,64,126,.13);
  }
  header .brand .logo b{font-size:.79rem}
  header .brand .wm{
    font-size:1.10rem;
    letter-spacing:-.025em;
  }
  header .brand .tag{
    font-size:.54rem;
    padding:2px 5px;
    letter-spacing:.08em;
    border-color:rgba(96,149,228,.38);
    background:rgba(59,103,168,.07);
  }
  .hamburger{
    display:grid;
    place-items:center;
    position:relative;
    width:40px;
    height:40px;
    flex:0 0 40px;
    border-radius:8px 3px 8px 8px;
    border:1px solid rgba(91,133,190,.48);
    background:
      linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,0)),
      #0c131e;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.035),
      0 10px 22px -20px rgba(0,0,0,.9);
    color:transparent;
    font-size:0;
    overflow:hidden;
  }
  .hamburger::before,
  .hamburger::after{
    content:"";
    position:absolute;
    left:10px;
    width:18px;
    height:1.5px;
    border-radius:2px;
    background:#dce9fb;
    box-shadow:0 0 7px rgba(93,157,244,.10);
    transition:transform .22s ease, top .22s ease, background .22s ease;
  }
  .hamburger::before{top:14px;box-shadow:0 6px 0 #dce9fb}
  .hamburger::after{top:25px;width:12px;left:16px;background:#79aef6}
  .hamburger:hover,
  .hamburger:focus-visible{
    border-color:rgba(103,164,244,.72);
    background:#101a28;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
  }
  body:has(.mobile.open) .hamburger{
    border-color:rgba(103,164,244,.68);
    background:#101a28;
  }
  body:has(.mobile.open) .hamburger::before{
    top:19px;
    box-shadow:none;
    transform:rotate(45deg);
  }
  body:has(.mobile.open) .hamburger::after{
    top:19px;
    left:10px;
    width:18px;
    transform:rotate(-45deg);
    background:#dce9fb;
  }

  .mobile{
    inset:68px 0 0;
    padding:18px 18px 28px;
    background:
      radial-gradient(520px 240px at 82% -5%,rgba(47,112,205,.095),transparent 58%),
      linear-gradient(rgba(92,145,218,.022) 1px,transparent 1px),
      linear-gradient(90deg,rgba(92,145,218,.018) 1px,transparent 1px),
      #080d15;
    background-size:auto,32px 32px,32px 32px,auto;
    border-top:1px solid rgba(83,120,171,.20);
    overflow-y:auto;
    overscroll-behavior:contain;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.012);
  }
  .mobile::before{
    content:"";
    position:absolute;
    top:0;left:18px;right:18px;
    height:1px;
    background:linear-gradient(90deg,rgba(86,153,246,.42),rgba(86,153,246,.05) 44%,transparent 78%);
    pointer-events:none;
  }
  .mobile::after{
    content:"";
    position:fixed;
    top:68px;
    right:0;
    bottom:0;
    width:2px;
    background:linear-gradient(180deg,rgba(84,151,245,.24),transparent 56%);
    pointer-events:none;
  }
  .mobile .grp{
    position:relative;
    margin:20px 0 7px;
    padding:0 0 7px 18px;
    color:#82b3f4;
    font-family:var(--fm);
    font-size:.64rem;
    line-height:1;
    letter-spacing:.16em;
    border:0;
  }
  .mobile .grp:first-child{margin-top:8px}
  .mobile .grp::before{
    content:"";
    position:absolute;
    left:0;
    top:1px;
    width:7px;
    height:7px;
    border:1px solid rgba(112,172,248,.68);
    background:#0b1420;
    box-shadow:inset 0 0 0 2px #0b1420,0 0 0 1px rgba(79,145,255,.06);
    transform:rotate(45deg);
  }
  .mobile .grp::after{
    content:"";
    position:absolute;
    left:18px;right:0;bottom:0;
    height:1px;
    background:linear-gradient(90deg,rgba(74,125,193,.38),rgba(74,125,193,.05) 62%,transparent);
  }
  .mobile a{
    position:relative;
    display:flex;
    align-items:center;
    min-height:45px;
    margin:0;
    padding:11px 34px 11px 16px;
    border:0;
    border-bottom:1px solid rgba(68,87,116,.25);
    border-radius:0;
    background:transparent;
    color:#d9e2ef;
    font-family:var(--fb);
    font-size:.92rem;
    font-weight:600;
    line-height:1.35;
    letter-spacing:-.005em;
    transition:background .16s ease,color .16s ease,padding-left .16s ease,border-color .16s ease;
  }
  .mobile a::before{
    content:"";
    position:absolute;
    left:2px;
    top:50%;
    width:4px;
    height:4px;
    border-radius:1px;
    background:#5f9bec;
    opacity:.36;
    transform:translateY(-50%) rotate(45deg);
    transition:opacity .16s ease,box-shadow .16s ease;
  }
  .mobile a::after{
    content:"";
    position:absolute;
    right:9px;
    top:50%;
    width:6px;
    height:6px;
    border-right:1px solid rgba(145,178,222,.42);
    border-top:1px solid rgba(145,178,222,.42);
    transform:translateY(-50%) rotate(45deg);
    transition:right .16s ease,border-color .16s ease;
  }
  .mobile a:hover,
  .mobile a:focus-visible{
    color:#fff;
    padding-left:20px;
    background:linear-gradient(90deg,rgba(52,110,190,.10),rgba(52,110,190,.025) 58%,transparent);
    border-bottom-color:rgba(74,117,177,.34);
  }
  .mobile a:hover::before,
  .mobile a:focus-visible::before{
    opacity:.95;
    box-shadow:0 0 7px rgba(79,145,255,.28);
  }
  .mobile a:hover::after,
  .mobile a:focus-visible::after{
    right:6px;
    border-color:rgba(157,197,249,.78);
  }
  body:has(.mobile.open){overflow:hidden}
}

@media (max-width:560px){
  header.site,header .nav{height:64px}
  header .nav{padding-left:14px;padding-right:14px}
  header .brand{gap:8px}
  header .brand .logo{width:35px;height:35px;flex-basis:35px}
  header .brand .wm{font-size:1.02rem}
  header .brand .tag{font-size:.50rem;padding:2px 4px}
  .hamburger{width:38px;height:38px;flex-basis:38px}
  .hamburger::before{left:10px;width:17px}
  .hamburger::after{left:15px;width:12px}
  body:has(.mobile.open) .hamburger::before,
  body:has(.mobile.open) .hamburger::after{left:10px;width:17px}
  .mobile{inset:64px 0 0;padding:15px 14px 24px}
  .mobile::after{top:64px}
  .mobile .grp{margin-top:17px;font-size:.61rem}
  .mobile a{min-height:44px;font-size:.89rem;padding-left:15px}
}

@media (max-width:370px){
  header .brand .tag{display:none}
  header .brand .wm{font-size:.98rem}
  .mobile a{font-size:.87rem}
}


/* ============================================================
   STEP 29 - MOBILE RESPONSIVE QA + POLISH
   Mobile-only containment, density and overflow corrections.
   No text, links, ordering, artwork or functionality changed.
   ============================================================ */
@media (max-width:700px){
  /* Keep every content system inside the viewport while retaining intentional table scroll. */
  .wrap{min-width:0}
  section:not(.hero) > .wrap{padding-left:18px;padding-right:18px}
  .split,.s-head,.dl-grid,.card,.emu,.steps,.faq,.svgbox,.honest,.tbl-wrap{min-width:0;max-width:100%}

  /* Download modules: preserve hierarchy without cramped metadata. */
  #download .card{
    padding:20px 18px 18px;
    min-height:0;
  }
  #download .card-head{
    align-items:center;
    flex-wrap:wrap;
    row-gap:8px;
    margin-bottom:12px;
  }
  #download .card-head h3{min-width:0;line-height:1.05}
  #download .rbadge{max-width:100%;flex:0 0 auto}
  #download .chips{gap:6px;margin-bottom:13px;min-width:0}
  #download .chip-m{
    max-width:100%;
    padding:5px 8px;
    font-size:.75rem;
    overflow-wrap:anywhere;
  }
  #download .card .files{
    gap:5px;
    margin-bottom:13px;
    font-size:.84rem;
    line-height:1.5;
    overflow-wrap:anywhere;
  }
  #download .card .files code{font-size:.82em;padding:.12em .36em}
  #download .card .vchip{
    width:max-content;
    max-width:100%;
    margin-bottom:15px;
    font-size:.70rem;
  }
  #download .card .dl-btn{min-height:46px;padding:12px 11px;font-size:.90rem}
  #download .dl-note{margin-top:18px;font-size:.93rem;line-height:1.62}

  /* SVG bays: keep the future artwork viewport useful on small screens. */
  .svgbox{
    width:100%;
    min-height:210px;
    padding:18px;
    overflow:hidden;
  }
  .svgbox::before{inset:8px}
  .svgbox > div{
    width:min(94%,420px);
    min-width:0;
    min-height:120px;
    padding:22px 16px 19px;
  }
  .svgbox .nm,.svgbox .fl{max-width:100%;overflow-wrap:anywhere}

  /* Region table intentionally scrolls inside its own frame, never the page. */
  .tbl-wrap{
    width:100%;
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-inline:contain;
    scrollbar-width:thin;
    scrollbar-color:rgba(92,151,232,.48) rgba(7,12,20,.55);
  }
  .tbl{min-width:540px;font-size:.90rem}
  .tbl thead th,.tbl td{padding:12px 13px}
  .tbl thead th{font-size:.78rem;letter-spacing:.035em}

  /* Emulator modules: long platform/path strings must never force page overflow. */
  body > section:nth-of-type(9) .emu{gap:10px}
  body > section:nth-of-type(9) .emu li{
    min-width:0;
    padding:16px 15px 16px 23px;
    font-size:.93rem;
    line-height:1.58;
    overflow-wrap:anywhere;
  }
  body > section:nth-of-type(9) .emu li strong{line-height:1.35}
  body > section:nth-of-type(9) .emu li a{overflow-wrap:anywhere}
  body > section:nth-of-type(9) .emu li code{
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  /* Boot sequence: tighter but still touch-friendly/readable. */
  .steps{width:100%;gap:11px}
  .steps::before{left:30px;top:27px;bottom:27px}
  .steps li{
    min-width:0;
    min-height:64px;
    padding:16px 14px 16px 66px;
    font-size:.94rem;
    line-height:1.48;
    overflow-wrap:anywhere;
  }
  .steps li::before{left:10px;width:39px;height:39px;font-size:1rem}
  .steps li::after{left:55px;right:10px}

  /* FAQ: long questions/answers remain clean at 360-430px. */
  .faq{width:100%;gap:9px}
  .faq details{min-width:0}
  .faq summary{
    min-width:0;
    min-height:54px;
    padding:14px 12px 14px 15px;
    gap:10px;
    font-size:.96rem;
    line-height:1.38;
    overflow-wrap:anywhere;
  }
  .faq summary > :first-child{min-width:0}
  .faq .pm{width:27px;height:27px;flex:0 0 27px}
  .faq .ans{
    min-width:0;
    padding:11px 15px 16px;
    font-size:.94rem;
    line-height:1.62;
    overflow-wrap:anywhere;
  }
  .faq .ans code{
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  /* Trust panel and inline technical tokens cannot create horizontal drift. */
  .honest{max-width:100%}
  section p,section .lead{overflow-wrap:break-word}
}

@media (max-width:430px){
  section:not(.hero) > .wrap{padding-left:16px;padding-right:16px}
  section h2,.split h2{padding-left:35px;font-size:clamp(1.55rem,7.3vw,1.82rem);line-height:1.08}
  section h2::before{width:24px}
  section h2::after{width:9px}

  #download .card{padding:18px 16px 16px}
  #download .card-head h3{font-size:1.28rem}
  #download .rbadge{font-size:.61rem;padding:4px 7px}
  #download .chip-m{font-size:.71rem}

  .svgbox{min-height:196px;padding:15px}
  .svgbox > div{width:95%;min-height:112px;padding:20px 14px 17px}

  .tbl{min-width:510px}
  .tbl thead th,.tbl td{padding:11px 12px}

  body > section:nth-of-type(9) .emu li{padding:15px 13px 15px 21px;font-size:.91rem}

  .steps li{padding-right:12px;font-size:.92rem}
  .faq summary{font-size:.93rem;padding-left:14px}
  .faq .ans{font-size:.92rem;padding-left:14px;padding-right:14px}
}

@media (max-width:370px){
  section:not(.hero) > .wrap{padding-left:14px;padding-right:14px}
  #download .card-head{align-items:flex-start}
  #download .card .files{font-size:.81rem}
  .svgbox{min-height:186px;padding:13px}
  .tbl{min-width:490px}
  .steps::before{left:28px}
  .steps li{padding-left:62px}
  .steps li::before{left:9px;width:37px;height:37px}
  .steps li::after{left:52px}
  .faq summary{font-size:.91rem}
}

@media (hover:none) and (pointer:coarse){
  /* Touch devices should not retain desktop hover elevation after taps. */
  #download .card:hover,
  body > section:nth-of-type(9) .emu li:hover,
  .steps li:hover,
  .faq details:hover{
    transform:none;
  }
}


/* ============================================================
   STEP 31 - BORDER / EDGE HIERARCHY
   CSS-only consistency pass. No copy, links, manifests, layout or artwork changed.
   ============================================================ */
:root{
  /* Structural hierarchy: graphite first, blue only for state/priority. */
  --edge-section:rgba(77,101,136,.28);
  --edge-default:rgba(82,108,145,.46);
  --edge-panel:rgba(88,119,161,.54);
  --edge-inset:rgba(92,125,169,.22);
  --edge-control:rgba(94,130,181,.48);
  --edge-active:rgba(82,145,231,.72);
  --edge-primary:rgba(118,174,248,.66);
  --edge-featured:rgba(76,137,220,.72);
  --edge-verified:rgba(64,181,135,.42);
  --edge-focus:#8fc0ff;
}

/* Section separators are intentionally quieter than component borders. */
.s-blue{
  border-top-color:var(--edge-section);
  border-bottom-color:var(--edge-section);
}
header.site{border-bottom-color:rgba(83,119,171,.36)}
footer.site{border-top-color:rgba(87,117,159,.30)}

/* Header / navigation surfaces. */
.drop{border-color:var(--edge-default)}
.hamburger{border-color:var(--edge-control)}
header .brand .tag{border-color:rgba(90,137,204,.46)}

/* Controls: dark controls use a steel edge; primary controls use one clear blue edge. */
.btn-ghost,
.dl-btn.alt{border-color:var(--edge-control)}
.btn-primary,
.dl-btn:not(.alt),
header.site .btn.desktop{border-color:var(--edge-primary)}
.btn-ghost:hover,
.dl-btn.alt:hover,
.menu>li>a:hover,
.menu .top:hover,
.menu>li:focus-within .top{border-color:var(--edge-active)}
.btn:focus-visible,
.dl-btn:focus-visible,
.hamburger:focus-visible{border-color:var(--edge-focus)}

/* Download modules: default < featured < interactive state. */
#download .card{border-color:var(--edge-default)}
#download .card:hover{border-color:var(--edge-active)}
#download .card.feat{border-color:var(--edge-featured)}
#download .card.feat:hover{border-color:rgba(101,164,246,.84)}
#download .card::before{border-color:var(--edge-inset)}

#download .rbadge{border-color:rgba(89,117,156,.40)}
#download .rbadge.rec{border-color:rgba(78,140,224,.58)}
#download .chip-m{border-color:rgba(74,108,156,.46)}
#download .card .files{border-color:rgba(73,96,130,.34)}
#download .card .files code{border-color:rgba(80,122,181,.38)}
#download .card .vchip{border-color:var(--edge-verified)}

/* Reading / utility panels all share the same structural edge family. */
.svgbox,
.honest,
.tbl-wrap,
body > section:nth-of-type(9) .emu li,
.steps li,
.faq details{border-color:var(--edge-default)}

/* Inner visualization frames remain subordinate to the outer shell. */
.svgbox::before,
.svgbox > div:not(.tag){border-color:var(--edge-inset)}
.svgbox .tag{border-color:rgba(81,128,194,.42)}

/* Table is data, not a CTA: active state stays restrained. */
.tbl-wrap{border-color:rgba(82,113,155,.54)}
.tbl thead th{border-bottom-color:rgba(87,123,174,.44)}
.tbl td{border-bottom-color:rgba(75,102,141,.34)}

/* Emulator modules and setup sequence use the same active blue edge. */
body > section:nth-of-type(9) .emu li:hover,
.steps li:hover{border-color:var(--edge-active)}
.steps li::before{border-color:rgba(87,143,222,.58)}
.steps li:hover::before{border-color:rgba(112,174,249,.78)}

/* FAQ: closed = structural edge, open/focus = active edge. */
.faq details{border-color:var(--edge-default)}
.faq details[open]{border-color:var(--edge-active)}
.faq .pm{border-color:rgba(91,131,184,.46)}
.faq details[open] .pm{border-color:rgba(104,165,244,.68)}

/* Footer separators are quieter than interactive controls. */
footer.site .f-grid{border-color:var(--edge-section)}
footer.site .f-bot{border-top-color:rgba(82,108,145,.30)}

/* Keyboard focus remains the brightest edge state on the page. */
:focus-visible{outline-color:var(--edge-focus)}

@media(max-width:699px){
  /* Slightly softer edges on small screens prevent dense chrome. */
  #download .card,
  .svgbox,
  .honest,
  .tbl-wrap,
  body > section:nth-of-type(9) .emu li,
  .steps li,
  .faq details{border-color:rgba(80,106,143,.42)}

  #download .card.feat{border-color:rgba(76,137,220,.66)}
  .faq details[open]{border-color:rgba(82,145,231,.66)}
}


/* STEP 41 - final PS2-specific hero authenticity. Visual-only. */
.hero .viz-console{filter:url(#luxShadow)}
.hero .viz-console .console-rib{stroke-opacity:.62}
.hero .viz-console .port-recess{stroke:#35516f;stroke-width:1.15}
.hero .viz-console .port-slot{stroke-opacity:.82}
.hero .viz-disc{mix-blend-mode:screen}
.hero .viz-orbits{filter:saturate(.82)}
@media(max-width:940px){
  .hero .viz-orbits{opacity:.28}
  .hero .viz-console{opacity:.93}
  .hero .viz-disc{opacity:.54}
}
@media(max-width:620px){
  .hero .viz-orbits{opacity:.20}
  .hero .viz-console{opacity:.90}
  .hero .viz-disc{opacity:.46}
}


/* STEP 42 - subtle controller-symbol background motif. Hero visual only. */
.hero .viz-pad-symbols{opacity:.74;mix-blend-mode:screen;pointer-events:none}
.hero .viz-pad-symbols .pad-cap,.hero .viz-pad-symbols .pad-mark{vector-effect:non-scaling-stroke}
@media(max-width:940px){.hero .viz-pad-symbols{opacity:.48}}
@media(max-width:620px){.hero .viz-pad-symbols{opacity:.30}}
@media(prefers-reduced-data:reduce){.hero .viz-pad-symbols{opacity:.24}}


/* STEP 44 - Match all regional download actions to the USA primary button. */
#download .dl-btn.alt{
  background:linear-gradient(180deg,#3a8dff 0%,#2569e7 100%);
  color:#fff;
  border:1px solid rgba(123,175,255,.58);
  box-shadow:0 10px 24px -16px rgba(47,125,255,.82),inset 0 1px 0 rgba(255,255,255,.16);
}
#download .dl-btn.alt:hover,
#download .dl-btn.alt:focus-visible{
  background:linear-gradient(180deg,#4a98ff 0%,#2d72ec 100%);
  color:#fff;
  border-color:rgba(151,194,255,.72);
  box-shadow:0 12px 26px -16px rgba(47,125,255,.90),inset 0 1px 0 rgba(255,255,255,.18);
}


    .metal-pin{fill:none;stroke:url(#metal);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
    .pad{fill:url(#gold);opacity:.88}
    .trace{fill:none;stroke:#67c8c1;stroke-opacity:.55;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
    .trace-hot{fill:none;stroke:#5bcfff;stroke-opacity:.82;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:url(#microGlow)}
    .via-rim{fill:url(#gold);opacity:.82} .via-hole{fill:#05131a}
    .passive{fill:#151a20;stroke:#73808b;stroke-width:.8} .passive-cap{fill:#d2aa68}
    .console-rib{stroke:#6f88a8;stroke-opacity:.60;stroke-width:1.7;stroke-linecap:round}
    .console-groove{stroke:#020407;stroke-opacity:.9;stroke-width:3.8;stroke-linecap:round}
    .port-recess{fill:#020406;stroke:#273b55;stroke-width:1.1}
    .port-slot{fill:#101b28;stroke:#6488ad;stroke-opacity:.78;stroke-width:.9}
    .lux-solder{fill:#d9ad61;stroke:#fff1c4;stroke-opacity:.18;stroke-width:.5}

/* STEP 10 - HERO INTEGRATION POLISH
   Purpose: balance the locked Step 9 visual with the existing hero copy.
   Content and SVG artwork remain unchanged. */
@media(min-width:941px){
  .hero .wrap{
    grid-template-columns:minmax(0,.94fr) minmax(520px,1.06fr);
    gap:22px;
    align-items:center;
    padding-top:62px;
    padding-bottom:70px;
  }
  .hero .wrap > div:first-child{
    max-width:575px;
    padding-right:10px;
  }
  .feature.ps2-visual-stage{
    min-height:540px;
    transform:translate3d(18px,-3px,0);
  }
  .ps2-lux-viz{
    width:min(107%,700px);
    max-width:none;
  }
}

@media(min-width:941px) and (max-width:1180px){
  .hero .wrap{
    grid-template-columns:minmax(0,.98fr) minmax(460px,1.02fr);
    gap:18px;
    padding-top:56px;
    padding-bottom:64px;
  }
  .hero .wrap > div:first-child{max-width:550px;padding-right:4px}
  .feature.ps2-visual-stage{min-height:500px;transform:translate3d(8px,-2px,0)}
  .ps2-lux-viz{width:min(104%,640px)}
}

@media(max-width:940px){
  .hero .wrap{
    gap:14px;
    padding-top:42px;
    padding-bottom:50px;
  }
  .hero .wrap > div:first-child{
    max-width:680px;
    margin:0 auto;
  }
  .feature.ps2-visual-stage{
    min-height:430px;
    margin-top:2px;
    transform:none;
  }
  .ps2-lux-viz{
    width:min(104%,630px);
    max-width:none;
  }
}

@media(max-width:620px){
  .hero .wrap{
    gap:8px;
    padding-top:34px;
    padding-bottom:42px;
  }
  .feature.ps2-visual-stage{
    min-height:340px;
    margin-top:0;
  }
  .ps2-lux-viz{
    width:108%;
    margin-left:-4%;
  }
}


/* ---------- STEP 17: section heading identity ---------- */
/* Visual-only brand marker. No heading text/content is altered. */
section h2{
  position:relative;
  padding-left:48px;
  width:fit-content;
  max-width:100%;
  color:#f6f8ff;
  text-wrap:balance;
}
section h2::before{
  content:"";
  position:absolute;
  left:0;
  top:.57em;
  width:34px;
  height:10px;
  transform:translateY(-50%);
  background:
    radial-gradient(circle at 4px 50%,#8cc8ff 0 2px,rgba(140,200,255,.24) 2.5px 4.5px,transparent 5px),
    linear-gradient(90deg,rgba(113,184,255,.92),rgba(113,184,255,.12)) 10px 50%/24px 1px no-repeat;
  filter:drop-shadow(0 0 4px rgba(78,154,255,.18));
  pointer-events:none;
}
/* Precision tick: a tiny second rail keeps the marker proprietary without looking decorative. */
section h2::after{
  content:"";
  position:absolute;
  left:10px;
  top:calc(.57em + 5px);
  width:13px;
  height:1px;
  background:linear-gradient(90deg,rgba(163,207,255,.48),transparent);
  pointer-events:none;
}
/* Split-layout headings keep the same marker but a little more breathing room. */
.split h2{padding-left:50px}
/* The honest panel already has a strong vertical rail, so its marker is deliberately quieter. */
.honest h2::before{opacity:.72;filter:none}
.honest h2::after{opacity:.72}
/* FAQ title should remain a section title, not compete with accordion rows. */
#download h2,.faq+h2{isolation:isolate}

@media(max-width:560px){
  section h2{padding-left:40px}
  section h2::before{width:28px}
  section h2::after{width:10px}
  .split h2{padding-left:40px}
}

/* ---------- 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 23: honest-answer trust panel ---------- */
/* Refined as a calm trust / provenance panel, not another glowing feature card. */
.honest{
  position:relative;
  isolation:isolate;
  padding:36px 38px 34px 42px;
  background:
    radial-gradient(620px 180px at 7% 0%,rgba(82,142,226,.095),transparent 58%),
    linear-gradient(180deg,rgba(255,255,255,.018),transparent 34%),
    linear-gradient(145deg,#101621 0%,#0d121b 58%,#0a0f17 100%);
  border:1px solid rgba(88,111,150,.42);
  box-shadow:
    0 18px 38px -31px rgba(0,0,0,.98),
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 1px 0 0 rgba(255,255,255,.012);
  overflow:hidden;
}
/* Primary confidence rail: thinner, more instrument-like than the old gradient stripe. */
.honest::before{
  content:"";
  position:absolute;
  left:0;
  top:18px;
  bottom:18px;
  width:3px;
  background:linear-gradient(180deg,rgba(139,199,255,.94),rgba(76,137,225,.72) 52%,rgba(54,91,151,.18));
  box-shadow:0 0 12px -5px rgba(87,158,255,.7);
  border-radius:0 2px 2px 0;
  pointer-events:none;
}
/* Precision top rail + status point. Decorative only; no content added. */
.honest::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:42px;
  right:34px;
  top:0;
  height:1px;
  background:
    radial-gradient(circle at 0 50%,#a6d5ff 0 2px,rgba(166,213,255,.22) 2.5px 4px,transparent 4.5px),
    linear-gradient(90deg,rgba(111,179,255,.52),rgba(111,179,255,.10) 34%,transparent 72%);
  filter:drop-shadow(0 0 3px rgba(79,145,255,.18));
  pointer-events:none;
}
.honest h2{
  margin:0 0 16px;
  max-width:24ch;
  letter-spacing:-.018em;
}
/* Keep Step 17's marker but make it quieter inside this trust panel. */
.honest h2::before,
.honest h2::after{
  opacity:.58;
  filter:none;
}
.honest .lead{
  margin:0 0 14px;
  max-width:68ch;
  color:#eef4ff;
  font-weight:600;
}
.honest p:not(.lead){
  margin-bottom:0;
  max-width:74ch;
  color:#aebbd2;
}
.honest a{
  color:#8fbaff;
  text-decoration-color:rgba(143,186,255,.42);
}
.honest a:hover{color:#c0d9ff}

@media(max-width:760px){
  .honest{
    padding:30px 28px 28px 32px;
  }
  .honest::before{top:14px;bottom:14px}
  .honest::after{left:32px;right:24px}
  .honest h2{max-width:28ch;margin-bottom:14px}
}
@media(max-width:560px){
  .honest{
    padding:26px 22px 24px 26px;
    background:
      radial-gradient(420px 150px at 4% 0%,rgba(82,142,226,.075),transparent 58%),
      linear-gradient(145deg,#101621,#0b1018 72%);
  }
  .honest::before{width:2px}
  .honest::after{left:26px;right:20px}
}


/* ============================================================
   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}}