/* PXLsuite ecosystem page, DRAFT. Web palette: gold leads, magenta only where AI acts. */
@font-face { font-family:'Sora'; src:url('fonts/Sora-Variable.ttf') format('truetype'); font-weight:100 800; font-display:swap; }
@font-face { font-family:'Roboto'; src:url('fonts/Roboto-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Roboto'; src:url('fonts/Roboto-Medium.ttf') format('truetype'); font-weight:500; font-display:swap; }

:root {
  --bg:#0d0d0d; --surface:#141414; --panel:#181818; --card:#1f1f22;
  --gold:#f2b705; --gold45:rgba(242,183,5,.45); --ai:#D7005A;
  --w87:rgba(255,255,255,.87); --w60:rgba(255,255,255,.60); --w38:rgba(255,255,255,.38); --w08:rgba(255,255,255,.08);
  --ease:cubic-bezier(0.16,1,0.3,1);
  --font-h:'Sora',sans-serif; --font-b:'Roboto',sans-serif;
  color-scheme:dark;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
body { margin:0; background:var(--bg); overflow-x:hidden; }
.eco { color:var(--w87); font-family:var(--font-b); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; }
img { max-width:100%; }
:where(.eco) a { color:var(--gold); font-family:inherit; text-decoration:underline; text-underline-offset:3px; }
:where(.eco) a:hover { color:#fff; }
:where(.eco) :is(h1,h2,h3,h4) { font-family:var(--font-h); font-weight:600; color:#fff; margin:0; text-wrap:balance; text-transform:none; letter-spacing:normal; line-height:1.2; font-size:inherit; }
:where(.eco) p, :where(.eco) li { margin:0 0 1em; font-family:inherit; font-size:inherit; font-weight:inherit; line-height:inherit; letter-spacing:normal; color:inherit; }
:where(.eco) li { margin:0; }
:where(.eco) :is(b,strong) { font-weight:600; color:inherit; }
.skip { position:absolute; left:-9999px; top:0; }
.skip:focus { left:16px; top:8px; z-index:200; background:var(--gold); color:#000; padding:10px 14px; }

/* ---------- buttons ---------- */
.e-btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 24px; border-radius:10px; background:var(--gold); color:#0d0d0d !important; font-family:var(--font-h); font-weight:600; font-size:16px; text-decoration:none; border:1px solid var(--gold); transition:transform .2s var(--ease), background .2s; }
.e-btn:hover { transform:translateY(-2px); }
.e-ghost { background:transparent; color:var(--w87) !important; border-color:rgba(255,255,255,.28); }
.e-ghost:hover { border-color:var(--gold); }
.ctas { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.ctas.center { justify-content:center; }

/* ---------- layout ---------- */
.wrap { max-width:1280px; margin:0 auto; padding:0 40px; }
.wrap.narrow { max-width:820px; }
.center { text-align:center; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
@media (max-width:900px) { .two { grid-template-columns:1fr; gap:24px; } .wrap { padding:0 16px; } }
.sec { padding:112px 0; }
.sec-alt { background:var(--surface); }
.e-eyebrow { display:flex; align-items:center; gap:12px; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--w60); font-weight:500; margin-bottom:16px; }
.e-eyebrow .rail { width:32px; height:2px; background:var(--gold); display:block; }
.e-eyebrow.ai .rail { background:var(--ai); }
:where(.eco) h2 { font-size:clamp(30px,3.4vw,46px); line-height:1.12; margin-bottom:20px; }
.sub { color:var(--w60); max-width:820px; font-size:18px; }
.sub.small { font-size:15px; margin-top:24px; }
.big { font-family:var(--font-h); font-size:22px; line-height:1.4; color:var(--w87); }
.small { font-size:14px; color:var(--w60); }
.ticks { list-style:none; padding:0; margin:0 0 1em; }
.ticks li { position:relative; padding-left:24px; margin-bottom:8px; }
.ticks li::before { content:''; position:absolute; left:2px; top:.7em; width:8px; height:8px; border-radius:50%; background:var(--gold); }
.ticks b { color:#fff; font-weight:500; }

/* ---------- hero ---------- */
.e-hero { padding:72px 0 64px; background:radial-gradient(1200px 500px at 70% 0%, rgba(242,183,5,.06), transparent 70%); }
.e-hero h1 { font-size:clamp(38px,5.4vw,76px); line-height:1.04; letter-spacing:-.01em; max-width:15ch; }
.e-hero .lead { font-size:20px; color:var(--w60); max-width:720px; margin-top:24px; }

/* ---------- diagram frame + scaling ---------- */
.dia { margin:56px auto 0; max-width:1808px; padding:0 24px; }
.fit { position:relative; width:100%; container-type:inline-size; }
.fit-l1 { aspect-ratio:1760/1040; }
.fit-l2 { aspect-ratio:1760/1150; }
.stage { position:absolute; left:0; top:0; transform-origin:0 0; transform:scale(tan(atan2(100cqw, 1760px)));
  background:var(--panel); border:1px solid var(--w08); border-radius:24px; overflow:hidden; font-family:var(--font-b); line-height:normal; }
.stage .abs { position:absolute; }
.stage svg.layer { position:absolute; left:0; top:0; overflow:visible; pointer-events:none; } /* sized by its width/height attributes = the stage coordinate system, never stretched */
.m1, .m2 { display:none; }
@media (max-width:1099px) {
  .fit { display:none; }
  .m1, .m2 { display:block; }
  .dia { padding:0 16px; margin-top:40px; }
}

/* ---------- layer 1 desktop ---------- */
.l1-stage { position:absolute; top:22px; font-size:14px; letter-spacing:.06em; color:var(--w60); font-weight:500; }
.l1-div { position:absolute; top:20px; width:1px; height:742px; background:var(--w08); }
.l1-lane { position:absolute; left:24px; top:52px; width:1712px; height:260px; background:rgba(215,0,90,.06);
  border-top:1px solid rgba(215,0,90,.30); border-bottom:1px solid rgba(215,0,90,.30); border-radius:16px; }
.l1-lanelbl { position:absolute; left:48px; top:112px; display:flex; align-items:center; gap:8px; font-size:14px; color:var(--w60); }
.l1-lanelbl i { width:12px; height:12px; border-radius:50%; border:2px solid var(--ai); display:block; }
.l1-aitxt { position:absolute; left:1272px; top:96px; font-size:14px; line-height:20px; color:var(--w60); }
.l1-node { position:absolute; background:var(--card); border:1px solid rgba(255,255,255,.10); border-radius:16px; color:var(--w87); text-decoration:none;
  display:flex; flex-direction:column; align-items:center; text-align:center; padding:15px 12px 0; transition:translate .2s var(--ease), border-color .2s; }
.l1-node img, .l1-node .glyph { width:64px; height:64px; display:block; flex:none; }
.l1-node .nm { font-family:var(--font-h); font-weight:600; font-size:20px; line-height:26px; margin-top:10px; color:var(--w87); }
.l1-node .sb { font-size:14px; line-height:18px; color:var(--w60); margin-top:2px; }
.l1-node.flow { padding-top:19px; border-color:rgba(242,183,5,.85); }
.l1-node.flow img { width:76px; height:76px; }
.l1-node.flow .nm { font-size:24px; line-height:30px; margin-top:12px; }
.l1-node.flow .sb { font-size:15px; line-height:19px; }
@media (hover:hover) { a.l1-node:hover, a.l1-comfy:hover { translate:0 -4px; border-color:rgba(255,255,255,.28); } a.l1-node.flow:hover { border-color:var(--gold); } }
a.l1-node:focus-visible, a.l1-comfy:focus-visible, a.l1-sat:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.l1-sat { position:absolute; display:flex; align-items:center; gap:12px; padding:0 16px; height:64px; border-radius:16px; text-decoration:none; color:var(--w87); }
.l1-sat img { width:32px; height:32px; }
.l1-sat.live { background:var(--card); border:1px solid rgba(255,255,255,.10); }
.l1-sat.dashed { border:1px dashed var(--w38); justify-content:center; }
.l1-sat .nm { font-family:var(--font-h); font-weight:600; font-size:20px; }
.l1-lbl { position:absolute; font-size:14px; line-height:18px; color:var(--w60); }
.l1-cap { position:absolute; font-size:13px; line-height:16px; letter-spacing:.06em; text-transform:uppercase; color:var(--w60); font-weight:500; }
.l1-hostlg img { position:absolute; top:726px; width:32px; height:32px; }
.l1-comfy { position:absolute; background:var(--card); border:1px solid rgba(255,255,255,.10); border-radius:16px; display:flex; text-decoration:none; color:var(--w87);
  flex-direction:column; align-items:center; text-align:center; padding:14px 10px 0; transition:translate .2s var(--ease); }
.l1-comfy img { width:56px; height:56px; display:block; }
.l1-comfy .nm { font-family:var(--font-h); font-weight:600; font-size:20px; line-height:26px; margin-top:8px; }
.l1-comfy .sb { font-size:14px; line-height:18px; color:var(--w60); }
.l1-libbox { position:absolute; left:200px; top:96px; width:430px; height:146px; padding:16px 18px; }
.l1-libbox .ttl { font-size:14px; line-height:17px; letter-spacing:.06em; text-transform:uppercase; color:var(--w60); font-weight:500; }
.l1-libbox .logos { display:flex; gap:14px; margin-top:12px; }
.l1-libbox .logos img { width:32px; height:32px; display:block; }
.l1-libbox .disc { font-size:15px; line-height:20px; color:var(--w60); margin-top:10px; }
.l1-node.hubn { display:grid; grid-template-columns:44px 1fr; grid-template-rows:auto auto; align-content:center; column-gap:12px; text-align:left; padding:0 14px; }
.l1-node.hubn img { width:44px; height:44px; grid-row:1 / span 2; align-self:center; }
.l1-node.hubn .nm { margin-top:0; font-size:19px; line-height:24px; }
.l1-node.hubn .sb { font-size:13px; line-height:17px; margin-top:0; }
.l1-server { position:absolute; display:flex; align-items:center; gap:10px; padding:0 12px; background:var(--card); border:1px solid rgba(255,255,255,.18); border-radius:12px; }
.l1-server svg { width:26px; height:26px; flex:none; }
.l1-server span { font-size:12px; line-height:15px; color:var(--w60); }
.l1-server b { display:block; font-family:var(--font-h); font-weight:600; font-size:16px; line-height:20px; color:var(--w87); }
.l1-hostgrp { position:absolute; pointer-events:none; }
.l1-xlbl { position:absolute; font-size:13px; line-height:16px; color:var(--w87); background:var(--panel); padding:0 4px; white-space:nowrap; }
.l1-xlbl.gold { color:var(--gold); background:none; }

/* ---------- layer 1 mobile ---------- */
.m1 { max-width:560px; margin:0 auto; }
.m1-ai { display:flex; gap:12px; align-items:center; background:rgba(215,0,90,.06); border-top:1px solid rgba(215,0,90,.30); border-bottom:1px solid rgba(215,0,90,.30); border-radius:12px; padding:12px; margin-bottom:16px; }
.m1-ai .lg { position:relative; flex:none; width:36px; height:36px; }
.m1-ai .lg img { width:36px; height:36px; display:block; }
.rg { position:absolute; right:-6px; top:-6px; width:12px; height:12px; border-radius:50%; border:2px solid var(--ai); background:var(--panel); display:block; }
.m1-ai b { display:block; font-family:var(--font-h); font-weight:600; font-size:15px; color:var(--w87); }
.m1-ai span { font-size:14px; line-height:19px; color:var(--w60); }
.m1-wrap { position:relative; padding-left:44px; padding-right:24px; }
.m1-rail { position:absolute; left:17px; top:24px; bottom:36px; width:2px; background:var(--gold); }
.m1-airail { position:absolute; right:6px; top:-16px; bottom:36px; width:2px; background:var(--ai); }
.m1-origin { display:flex; gap:12px; align-items:center; margin-left:-44px; margin-bottom:20px; position:relative; }
.m1-origin img { width:36px; height:36px; display:block; flex:none; }
.m1-origin .t { font-size:14px; line-height:19px; color:var(--w87); }
.m1-origin .t span { color:var(--w60); }
.m1-stg { font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--w60); font-weight:500; margin:22px 0 10px; padding-top:12px; border-top:1px solid var(--w08); }
.m1-n { position:relative; background:var(--card); border:1px solid rgba(255,255,255,.10); border-radius:16px; padding:12px; display:flex; gap:12px; align-items:center; min-height:72px; text-decoration:none; color:var(--w87); }
.m1-n img, .m1-n .m1g { width:44px; height:44px; flex:none; display:block; }
.m1-n .nm { font-family:var(--font-h); font-weight:600; font-size:16px; line-height:20px; }
.m1-n .sb { font-size:14px; line-height:18px; color:var(--w60); }
.m1-n.flow { border-color:rgba(242,183,5,.85); }
.m1-n.flow img { width:52px; height:52px; }
.m1-n.flow .nm { font-size:18px; }
.tap { position:absolute; left:-28px; top:50%; width:28px; height:0; border-top:1.5px solid var(--gold45); }
.tap.d { border-top-style:dashed; }
.tap::before { content:''; position:absolute; left:-5px; top:-5.75px; width:10px; height:10px; border-radius:50%; background:var(--gold); }
.tap.d::before { left:-7px; top:-7.75px; width:14px; height:14px; background:var(--bg); border:2px solid var(--gold); }
.port { position:absolute; right:-18px; top:50%; width:17px; height:0; border-top:1.5px solid var(--ai); }
.port::after { content:''; position:absolute; left:-4px; top:-4.75px; width:7px; height:7px; background:var(--ai); }
.ring { position:absolute; width:16px; height:16px; border-radius:50%; border:2.5px solid var(--ai); background:var(--panel); }
.ring.tr { right:-6px; top:-6px; }
.m1-con { position:relative; height:34px; margin-left:20px; }
.m1-con::before { content:''; position:absolute; left:0; top:4px; bottom:6px; border-left:1.5px solid var(--w60); }
.m1-con::after { content:''; position:absolute; left:-4px; bottom:4px; border:5px solid transparent; border-top:7px solid var(--w60); border-bottom:0; }
.m1-con .l { position:absolute; left:14px; top:8px; font-size:14px; line-height:18px; color:var(--w60); }
.m1-feed { position:relative; margin-left:16px; background:rgba(215,0,90,.06); border-top:1px solid rgba(215,0,90,.30); border-bottom:1px solid rgba(215,0,90,.30); border-radius:12px; padding:12px; margin-top:10px; margin-bottom:10px; }
.m1-feed .hd { display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:18px; color:var(--w60); }
.m1-feed .hd i { width:12px; height:12px; border-radius:50%; border:2px solid var(--ai); display:block; flex:none; margin-top:3px; }
.m1-feed .box { margin-top:10px; border:1px dashed var(--w38); border-radius:12px; padding:10px 12px; }
.m1-feed .box .ttl { font-size:12px; line-height:16px; letter-spacing:.06em; text-transform:uppercase; color:var(--w60); font-weight:500; }
.m1-feed .box .logos { display:flex; gap:8px; margin-top:8px; }
.m1-feed .box .logos img { width:22px; height:22px; display:block; }
.m1-feed .box .disc { font-size:13px; line-height:17px; color:var(--w60); margin-top:8px; }
.m1-feed .into { font-size:14px; line-height:18px; color:var(--w60); margin-top:10px; padding-left:22px; }
.m1-feed .cf { display:flex; gap:12px; align-items:center; }
.m1-feed .cf img { width:44px; height:44px; display:block; flex:none; }
.m1-feed .cf .nm { font-family:var(--font-h); font-weight:600; font-size:16px; line-height:20px; color:var(--w87); }
.m1-feed .sub { font-size:14px; line-height:18px; color:var(--w60); }
.m1-sat { position:relative; margin-left:16px; display:flex; align-items:center; gap:10px; padding:0 14px; height:52px; border-radius:14px; text-decoration:none; color:var(--w87); }
.m1-sat img { width:28px; height:28px; }
.m1-sat.live { background:var(--card); border:1px solid rgba(255,255,255,.10); }
.m1-sat.dashed { border:1px dashed var(--w38); }
.m1-sat .nm { font-family:var(--font-h); font-weight:600; font-size:16px; }
.m1-sat .tag { margin-left:auto; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--w60); font-weight:500; }
.m1-note { margin-left:16px; font-size:14px; line-height:18px; color:var(--w60); padding:6px 0 6px 14px; }
.m1-host { margin:8px 0 0 16px; display:flex; align-items:center; gap:12px; padding:8px 12px; border-left:2px solid var(--w60); }
.m1-host .ttl { font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--w60); font-weight:500; width:64px; line-height:16px; }
.m1-host .hl { display:flex; gap:8px; }
.m1-host img { width:24px; height:24px; display:block; }
.m1-legend { margin-top:24px; font-size:13px; line-height:18px; color:var(--w60); }

/* ---------- layer 2 desktop ---------- */
:where(.stage.l2) button { font:inherit; color:inherit; background:none; border:0; padding:0; margin:0; text-align:left; cursor:pointer; transition:none; display:block; gap:0; border-radius:0; line-height:normal; }
.l2-ph { position:absolute; top:16px; font-size:14px; letter-spacing:.06em; color:var(--w60); font-weight:500; }
.l2-phl { top:38px; height:1px; background:rgba(255,255,255,.14); }
.l2-coldiv { top:140px; width:1px; background:var(--w08); }
.stage.l2 .l2-bus { position:absolute; left:24px; top:46px; width:1712px; height:84px; background:rgba(215,0,90,.06); border-top:1px solid rgba(215,0,90,.30); border-bottom:1px solid rgba(215,0,90,.30); border-radius:16px; }
.l2-buslbl { left:496px; top:54px; display:flex; align-items:center; gap:8px; font-size:13px; color:var(--w60); pointer-events:none; }
.l2-buslbl i { width:12px; height:12px; border-radius:50%; border:2px solid var(--ai); display:block; }
.stage.l2 .bn { position:absolute; top:58px; height:60px; background:var(--card); border:1px solid rgba(255,255,255,.10); border-radius:14px; display:flex; align-items:center; gap:10px; padding:0 14px; }
.bn .nm { font-family:var(--font-h); font-weight:600; font-size:16px; color:var(--w87); }
.bn .sb { font-size:12px; line-height:15px; color:var(--w60); }
.stage.l2 .l2card { position:absolute; display:block; background:#1c1c1c; border:1px solid var(--w08); border-radius:12px; padding:12px 12px 0; transition:translate .2s var(--ease), background .2s, border-color .2s; }
.stage.l2 .l2card:hover, .stage.l2 .l2card.sel { background:#1e1e1e; border-color:rgba(255,255,255,.28); }
.stage.l2 .l2card.sel { translate:0 -4px; }
.stage.l2 button:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.l2card > span { display:block; }
.cn { font-size:12px; line-height:16px; color:var(--w60); font-weight:500; }
.cnm { font-family:var(--font-h); font-weight:600; font-size:14px; line-height:18px; color:var(--w87); height:36px; margin-top:2px; }
.lgarea { height:88px; margin-top:8px; display:flex !important; flex-direction:column; gap:6px; }
.lgarea .row { display:flex; align-items:center; gap:8px; min-height:24px; }
.lg { position:relative; display:block; flex:none; }
.lg img { width:100%; height:100%; display:block; object-fit:contain; }
.lg .rg { right:-6px; top:-6px; width:11px; height:11px; background:#1c1c1c; }
.mq { position:absolute; right:-4px; bottom:-4px; width:8px; height:8px; background:var(--ai); box-shadow:0 0 0 1.5px #1c1c1c; }
.bg2 { font-family:var(--font-h); font-weight:600; font-size:14px; line-height:17px; color:var(--w87); }
.sm { font-family:var(--font-h); font-weight:600; font-size:13px; color:var(--w87); }
.cap2 { font-size:12px; letter-spacing:.06em; color:var(--w60); font-weight:500; }
.l2chip { font-size:12px; color:var(--w60); line-height:16px; }
.pt { height:20px; margin-top:6px; }
.pill { display:inline-block; font-size:12px; line-height:18px; height:20px; padding:0 8px; border:1px solid var(--w38); border-radius:10px; color:var(--w60); white-space:nowrap; }
.dl { font-size:12px; line-height:16px; color:var(--w60); margin-top:6px; }
.l2-hd { position:absolute; font-size:13px; line-height:16px; letter-spacing:.06em; text-transform:uppercase; color:var(--w60); font-weight:500; }
.stage.l2 .tl { position:absolute; left:78px; width:128px; height:26px; display:flex; align-items:center; gap:8px; font-family:var(--font-h); font-weight:600; font-size:13px; color:var(--w87); border-radius:6px; }
.stage.l2 .tl:hover, .stage.l2 .tl.sel { color:var(--gold); }
.tl img, .tl .noic { width:20px; height:20px; display:block; flex:none; }
.seg { position:absolute; height:26px; display:flex; align-items:center; padding-left:8px; font-size:12px; color:var(--w87); white-space:nowrap; overflow:hidden; pointer-events:none; }
.l2-srch { position:absolute; font-size:12px; color:var(--w60); pointer-events:none; }
.l2-detlbl { position:absolute; font-size:12px; line-height:14px; color:var(--w87); background:var(--panel); padding:0 4px; white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .3s; }
.l2-det { opacity:0; transition:opacity .3s; }
.l2-det.on, .l2-detlbl.on { opacity:1; }
.l2-server { position:absolute; display:flex; align-items:center; gap:8px; padding:0 10px; background:var(--card); border:1px solid rgba(255,255,255,.28); border-radius:4px; font-size:13px; color:var(--w60); white-space:nowrap; }
.l2-server svg { width:18px; height:18px; flex:none; }
.l2-server b { font-weight:600; color:var(--w87); }
.l2-cxlbl { position:absolute; font-size:12px; line-height:15px; color:var(--w87); background:var(--panel); padding:0 4px; white-space:nowrap; pointer-events:none; }
.l2-cxlbl.gold { color:var(--gold); }
.xp .cx-win .container { display:block; }
.xp .cx-win .container > * { margin:0 0 14px; }
.xp .cx-win .cx-h { margin:10px 0 14px; }
.xp .cx-win .ticks { margin:0 0 16px; }
.xp .cx-win .cx-go { margin-top:24px; }
.l2-seghl, .l2-colhl { opacity:0; transition:opacity .2s; }
.l2-seghl.on, .l2-colhl.on { opacity:1; }
.stage.l2.ready .dm { transition:opacity .2s; }
.dim { opacity:.3 !important; }
.lgd { position:absolute; left:40px; font-size:13px; line-height:18px; color:var(--w60); display:flex; align-items:center; gap:7px; white-space:nowrap; }
.lgd .sp { width:12px; }
.lgd .pill { height:18px; line-height:16px; }
.ro { position:absolute; left:24px; top:878px; width:1712px; height:224px; background:var(--panel); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:20px 24px; overflow:hidden; }
.ro .t { font-family:var(--font-h); font-weight:600; font-size:20px; color:var(--w87); margin-bottom:8px; }
.ro .v { font-size:14px; line-height:20px; color:var(--w87); }
.ro .k { font-size:12px; line-height:16px; letter-spacing:.06em; text-transform:uppercase; color:var(--w60); font-weight:500; margin-bottom:4px; }
.ro-grid { display:grid; grid-template-columns:1.05fr 1.7fr 1.5fr 1.25fr; gap:32px; }
.ro-grid .v.mut { color:var(--w60); }
.ro-grid .v + .k { margin-top:8px; }
.ro a { color:var(--gold); }
.ro-in { transition:opacity .2s; }

/* ---------- layer 2 mobile ---------- */
.m2 { max-width:560px; margin:0 auto; }
.m2-mcp { background:rgba(215,0,90,.06); border-top:1px solid rgba(215,0,90,.30); border-bottom:1px solid rgba(215,0,90,.30); border-radius:12px; padding:12px; margin:0 0 16px; }
.m2-mcp .h { display:flex; align-items:center; gap:12px; }
.m2-mcp .h .lg { width:32px; height:32px; }
.m2-mcp .h span { font-size:14px; line-height:18px; color:var(--w87); }
.m2-mcp .h b { font-family:var(--font-h); font-weight:600; font-size:15px; }
.m2-mcp .al { font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--w60); font-weight:500; margin-top:10px; display:flex; gap:8px; align-items:center; }
.m2-mcp .al i { width:12px; height:12px; border-radius:50%; border:2px solid var(--ai); display:block; }
.apps { display:flex; gap:12px; margin-top:10px; align-items:flex-end; flex-wrap:wrap; }
.app { display:flex; flex-direction:column; align-items:center; gap:4px; }
.app s { display:block; width:6px; height:6px; background:var(--ai); }
.app img { width:28px; height:28px; display:block; }
.app em { font-style:normal; font-family:var(--font-h); font-weight:600; font-size:13px; height:28px; line-height:26px; padding:0 6px; border:1px solid rgba(255,255,255,.3); border-radius:6px; }
.m2-org { display:flex; gap:10px; align-items:center; margin:0 0 6px; position:relative; z-index:1; }
.m2-org img { width:32px; height:32px; flex:none; }
.m2-org div { font-size:14px; line-height:18px; color:var(--w87); }
.m2-org span { color:var(--w60); }
.m2-rows { position:relative; padding-left:34px; padding-right:22px; }
.m2-rail { position:absolute; left:15px; top:-8px; bottom:0; width:2px; background:var(--gold); }
.m2-airail { position:absolute; right:6px; top:-90px; bottom:0; width:2px; background:var(--ai); }
.m2-ph { font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--w60); font-weight:500; margin:16px 0 8px; }
.m2-st { position:relative; background:#1c1c1c; border:1px solid var(--w08); border-radius:12px; margin-bottom:8px; padding-bottom:12px; }
.m2-st.mcp::after { content:''; position:absolute; right:-17px; top:26px; width:16px; border-top:1.5px solid var(--ai); }
.m2-st.mcp::before { content:''; position:absolute; right:-4px; top:22.5px; width:7px; height:7px; background:var(--ai); z-index:1; }
.m2-st summary { list-style:none; display:block; cursor:pointer; }
.m2-st summary .hb { min-height:48px; padding:6px 12px 0; display:flex; align-items:center; gap:8px; }
.m2-st summary::-webkit-details-marker { display:none; }
.m2-st summary .n { font-size:12px; color:var(--w60); font-weight:500; }
.m2-st summary .nm { font-family:var(--font-h); font-weight:600; font-size:15px; line-height:20px; flex:1; }
.m2-st summary .pl, .ap .pl { font-size:12px; line-height:18px; padding:0 8px; border:1px solid var(--w38); border-radius:10px; color:var(--w60); white-space:nowrap; }
.chev { width:16px; height:16px; flex:none; transition:transform .2s; }
.m2-st[open] .chev { transform:rotate(180deg); }
.lr { display:flex; gap:10px; padding:4px 12px 0; align-items:center; flex-wrap:wrap; }
.lr .lg { position:relative; height:28px; width:28px; }
.lr .lg.long { width:auto; }
.lr .lg.long img { height:28px; width:auto; }
.lr .lg b { position:absolute; right:-3px; bottom:-3px; width:7px; height:7px; background:var(--ai); box-shadow:0 0 0 1.5px #1c1c1c; }
.lr .lg i { position:absolute; right:-5px; top:-5px; width:10px; height:10px; border-radius:50%; border:2px solid var(--ai); background:#1c1c1c; }
.lr .more { font-size:13px; color:var(--w60); }
.px { display:inline-flex; gap:8px; margin:8px 12px 0; padding:6px 8px 0 0; border-top:2px solid var(--gold); align-items:center; }
.px img { width:16px; height:16px; display:block; }
.px .pj { font-size:12px; line-height:16px; color:var(--w60); }
.m2-st .bd { padding:0 12px; margin-top:8px; border-top:1px solid var(--w08); }
.ap { display:flex; gap:10px; align-items:center; margin-top:10px; }
.ap .lg { position:relative; width:28px; height:28px; flex:none; }
.ap .lg b { position:absolute; right:-3px; bottom:-3px; width:8px; height:8px; background:var(--ai); box-shadow:0 0 0 1.5px #1c1c1c; }
.ap .tx { font-size:14px; line-height:18px; color:var(--w87); }
.ap .tx > span:not(.pl) { color:var(--w60); display:block; }
.ap .tx .pl { display:inline-block; margin-left:6px; }
.io, .br, .pxh { font-size:14px; line-height:19px; color:var(--w60); margin-top:10px; }
.io b, .pxh b { color:var(--w87); font-weight:500; }
.br { display:flex; gap:8px; align-items:center; }
.m2-mx { margin:20px 0 0; padding:14px 12px; background:var(--panel); border:1px solid var(--w08); border-radius:12px; }
.m2-mx .ttl { font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--w60); font-weight:500; margin-bottom:8px; }
.mr { display:flex; align-items:center; height:30px; }
.mr .nm { width:112px; display:flex; align-items:center; gap:6px; font-size:14px; flex:none; }
.mr .nm img, .mr .nm .noic { width:16px; height:16px; display:block; }
.mr .ds { display:flex; gap:9px; }
.mr .ds i { display:block; width:8px; height:8px; border-radius:50%; background:var(--w08); }
.mr .ds i.f { background:var(--gold); }
.mr .ds i.h { background:transparent; border:1.5px solid var(--gold); }
.mr.mh .ds { gap:0; }
.mr.mh .ds i { background:none; width:17px; height:16px; font-size:12px; font-style:normal; color:var(--w60); border-radius:0; }
.mn { font-size:12px; line-height:16px; color:var(--w60); margin:12px 0 0; }

/* ---------- workflow bands ---------- */
.band { display:grid; grid-template-columns:260px 1fr; gap:40px; padding:48px 0; border-top:1px solid var(--w08); }
.band:first-of-type { margin-top:40px; }
.band-head h3 { font-size:15px; letter-spacing:.08em; color:var(--gold); font-family:var(--font-b); font-weight:500; margin-bottom:12px; }
.band-head p { font-family:var(--font-h); font-size:20px; line-height:1.4; color:var(--w87); }
.band-steps { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:16px; }
.step { background:var(--panel); border:1px solid var(--w08); border-radius:16px; padding:20px; scroll-margin-top:88px; }
.step header { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.step header img, .step .noic { width:36px; height:36px; display:block; flex:none; }
.step .noic { border:1px dashed var(--w38); border-radius:8px; }
.step h4 { font-size:18px; }
.step p { font-size:15px; line-height:1.55; color:var(--w60); }
.step .ai-line { display:block; background:rgba(215,0,90,.06); border-left:2px solid var(--ai); border-radius:0 8px 8px 0; padding:10px 12px; color:var(--w87); }
.aimark { display:flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--w87); font-weight:500; margin-bottom:4px; }
.aimark i { width:12px; height:12px; border-radius:50%; border:2px solid var(--ai); display:block; }
.handoff { font-size:14px !important; margin:0 !important; padding-top:12px; border-top:1px solid var(--w08); }
.handoff span { display:block; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--w60); font-weight:500; }
.liblogos { display:flex; gap:10px; margin:4px 0 8px; }
.liblogos img { width:32px; height:32px; display:block; }
.libnote { font-size:13px !important; color:var(--w60); }
@media (max-width:900px) { .band { grid-template-columns:1fr; gap:20px; padding:36px 0; } .band-steps { grid-template-columns:1fr; } }

/* ---------- AI section ---------- */
.ai-h { box-shadow:inset 0 -3px 0 rgba(215,0,90,.0); }
.ailist { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.ailist li { background:var(--panel); border:1px solid var(--w08); border-left:2px solid var(--ai); border-radius:0 12px 12px 0; padding:14px 16px; font-size:15px; color:var(--w60); }
.ailist li b { display:block; color:var(--w87); font-family:var(--font-h); font-weight:600; font-size:16px; margin-bottom:2px; }
.ailist li.none { border-left-color:var(--w38); }

/* ---------- product standard + tools ---------- */
.grid4 { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-top:32px; }
.e-pcard { background:var(--panel); border:1px solid var(--w08); border-radius:16px; padding:24px; }
.e-pcard h4 { font-size:18px; margin-bottom:8px; }
.e-pcard p { font-size:15px; color:var(--w60); margin:0; }
@media (max-width:1000px) { .grid4 { grid-template-columns:1fr 1fr; } }
@media (max-width:600px) { .grid4 { grid-template-columns:1fr; } }
.tgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:16px; margin-top:32px; }
.tcard { display:flex; flex-direction:column; gap:10px; background:var(--panel); border:1px solid var(--w08); border-radius:16px; padding:20px; text-decoration:none; color:var(--w87); transition:transform .2s var(--ease), border-color .2s; }
.tcard:hover { transform:translateY(-4px); border-color:rgba(242,183,5,.6); }
.tc-top { display:flex; align-items:center; gap:12px; position:relative; }
.tc-top img { width:40px; height:40px; }
.tc-n { font-family:var(--font-h); font-weight:600; font-size:19px; }
.tc-ai { margin-left:auto; width:14px; height:14px; border-radius:50%; border:2.5px solid var(--ai); }
.tc-stage { font-size:12px; letter-spacing:.06em; color:var(--w60); font-weight:500; }
.tc-l { font-size:15px; line-height:1.5; color:var(--w60); flex:1; }
.tc-go { font-size:14px; color:var(--gold); }

.close { padding:120px 0; }
.sub a, .small a { display:inline-block; padding:12px 0; margin:-12px 0; }
.ro .v.cols { columns:2; column-gap:24px; }

/* ---------- Thresholds card in the origin section ---------- */
.origin-grid { align-items:center; }
.ths-card { margin:0; background:var(--panel); border:1px solid var(--w08); border-radius:16px; overflow:hidden; }
.ths-img { position:relative; display:block; aspect-ratio:16/9; overflow:hidden; text-decoration:none; }
.ths-plate { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease); }
.ths-img::after { content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0) 55%); pointer-events:none; }
.ths-logo { position:absolute; left:20px; bottom:18px; width:min(46%, 260px); height:auto; z-index:1; }
@media (hover:hover) { .ths-img:hover .ths-plate { transform:scale(1.03); } }
.ths-card figcaption { display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:14px 20px; font-size:14px; line-height:1.5; color:var(--w60); }
.ths-card figcaption a { display:inline-flex; align-items:center; min-height:44px; color:var(--gold); white-space:nowrap; }

/* ---------- tool cards are buttons that open panels ---------- */
button.tcard { font:inherit; text-align:left; width:100%; cursor:pointer; line-height:normal; border-radius:16px; }
.tc-go::after { content:' \2192'; }
.tcard:focus-visible, .su-open:focus-visible, .xp-close:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }

/* ---------- in-page panels (dialog drawer) ---------- */
html.xp-open { overflow:hidden; }
.xp { position:fixed; inset:0; z-index:500; }
.xp[hidden] { display:none; }
.xp-back { position:absolute; inset:0; background:rgba(0,0,0,.74); }
.xp-sheet { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:75vw; height:75vh;
  background:#141414; border:1px solid rgba(242,183,5,.45); border-radius:20px; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  outline:none; box-shadow:0 32px 96px rgba(0,0,0,.65); }
@media (max-width:700px) { .xp-sheet { width:94vw; height:88vh; border-radius:16px; } }
.xp-bar { position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px clamp(16px,3vw,40px);
  background:rgba(13,13,13,.97); border-bottom:1px solid var(--w08); }
.xp-crumb { display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; font-family:'Roboto',sans-serif; font-size:13px; color:var(--w60); }
.xp-crumb b { font-family:'Sora',sans-serif; font-weight:600; font-size:16px; color:#fff; }
.xp-stage { font-size:11px; letter-spacing:.12em; color:var(--gold); border:1px solid rgba(242,183,5,.5); border-radius:999px; padding:2px 10px; }
.xp-close { flex:none; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border-radius:8px; border:1px solid rgba(255,255,255,.28);
  background:transparent; color:#fff; font-family:'Roboto',sans-serif; font-size:14px; font-weight:500; cursor:pointer; line-height:1; }
.xp-close:hover { border-color:var(--gold); }
.xp-close span { font-size:20px; }
.xp-body > section { padding-top:clamp(32px,5vw,64px) !important; }
.xp-body img { max-width:100%; }
.xp-end { padding:24px clamp(16px,3vw,40px) 48px; display:flex; justify-content:center; }
.xp .tool-section-gallery, .xp .inside-grid { max-width:100%; }

/* ---------- PXLtools suite (panel + MAKE band) ---------- */
.su-wrap { padding:clamp(32px,5vw,56px) clamp(16px,3vw,40px) 8px; }
.su-head { max-width:880px; margin-bottom:24px; }
.su-title { font-size:clamp(22px,2.4vw,30px) !important; margin-bottom:8px !important; }
.su-sub { color:var(--w60); font-size:15px; }
.su-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap:16px 32px; }
.su-g { min-width:0; }
.su-h { font-family:'Roboto',sans-serif !important; font-size:12px !important; letter-spacing:.12em !important; text-transform:uppercase !important; color:var(--gold) !important; font-weight:500 !important; margin:8px 0 8px !important; }
.su-l { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.su-i { display:grid; grid-template-columns:24px 1fr auto auto; gap:12px; align-items:center; padding:10px 12px; background:var(--panel); border:1px solid var(--w08); border-radius:10px; }
.su-i img { width:24px; height:24px; display:block; border-radius:4px; }
.su-t { min-width:0; }
.su-n { display:block; font-family:'Sora',sans-serif; font-weight:600; font-size:15px; color:#fff; }
.su-line { display:block; font-size:14px; line-height:1.45; color:var(--w60); }
.su-st { font-size:11px; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; padding:3px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.28); color:var(--w87); }
.su-ok .su-st { border-color:rgba(242,183,5,.6); color:var(--gold); }
.su-dev .su-st { border-style:dashed; color:var(--w60); }
.su-guide { display:inline-flex; align-items:center; min-height:44px; padding:0 4px; font-size:13px; color:var(--gold) !important; }
.su-mini .su-g { margin-bottom:6px; }
.su-mini .su-i { grid-template-columns:20px 1fr auto; padding:6px 10px; }
.su-mini .su-i img { width:20px; height:20px; }
.su-mini .su-n { font-size:13px; font-weight:500; }
.su-mini .su-st { font-size:10px; padding:2px 6px; }
.step-suite { grid-column:1 / -1; }
.step-suite .su-mini { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap:4px 20px; margin-bottom:16px; }
.su-open { margin-top:4px; font-size:15px !important; }
@media (max-width:600px) {
  .su-i { grid-template-columns:24px 1fr; }
  .su-i .su-st { grid-column:2; justify-self:start; }
  .su-i .su-guide { grid-column:2; justify-self:start; min-height:44px; }
  .su-mini .su-i { grid-template-columns:20px 1fr auto; }
}

/* ---------- tool windows: small DCC icon beside the tool name, screenshot is the hero ---------- */
.xp .tile-head { display:flex; align-items:center; gap:10px; }
.xp .tile-head .tile-title { margin:0; }
.xp .tile-dcc, .xp .tile-dcc-group img { width:30px; height:30px; flex:none; object-fit:contain; border-radius:6px; display:block; }
.xp .tile-dcc-group { display:flex; gap:6px; flex:none; }
.xp .tb3dtt-shot .dcc-chip { height:30px; max-width:30px; padding:4px; }
@media (max-width:600px) { .xp .tile-dcc, .xp .tile-dcc-group img { width:24px; height:24px; } .xp .tb3dtt-shot .dcc-chip { height:26px; max-width:26px; } }

/* ================= ONE window template for all five tools: same palette, structure, type scale ================= */
.xp-head { display:flex; gap:16px; align-items:center; padding:clamp(24px,3vw,36px) clamp(16px,3vw,40px) 8px; }
.xp-head img { width:40px; height:40px; flex:none; display:block; }
.xp-name { font-family:'Sora',sans-serif !important; font-weight:600 !important; font-size:clamp(24px,2.4vw,32px) !important; line-height:1.15 !important; color:#fff !important; margin:0 0 4px !important; text-transform:none !important; letter-spacing:normal !important; }
.xp-line { font-family:'Roboto',sans-serif !important; font-size:16px !important; line-height:1.5 !important; color:rgba(255,255,255,.65) !important; margin:0 !important; letter-spacing:normal !important; font-weight:400 !important; max-width:70ch; }
.xp .xp-body > section, .xp .xp-body section.section-block { padding:24px clamp(16px,3vw,40px) !important; margin:0 !important; background:none !important; border:0 !important; }
.xp .section-block::before, .xp .section-block::after, .xp .section-header-loose::before, .xp .section-header-loose::after { display:none !important; content:none !important; }
.xp .container { max-width:none !important; padding:0 !important; width:auto !important; }
.xp .section-header, .xp .section-header-loose { background:none !important; border:0 !important; box-shadow:none !important; padding:0 !important; margin:0 0 24px !important; max-width:none !important; text-align:left !important; }
.xp .tool-section-h3, .xp .section-header h2 { margin:0 0 12px !important; font-size:clamp(20px,1.8vw,24px) !important; line-height:1.3 !important; font-weight:600 !important; color:#fff !important; text-align:left !important; }
.xp .tool-section-tagline, .xp .tool-section-tagline em, .xp .section-header h2 em, .xp .section-header h3 em { color:#fff !important; font-style:normal !important; font-size:inherit !important; font-family:'Sora',sans-serif !important; font-weight:600 !important; display:inline !important; letter-spacing:normal !important; text-transform:none !important; }
.xp p, .xp li, .xp .section-lead, .xp .tool-pivot-lead, .xp .tb3dtt-lead, .xp .tile-tagline { font-family:'Roboto',sans-serif !important; font-size:15px !important; line-height:1.6 !important; letter-spacing:normal !important; font-weight:400 !important; color:rgba(255,255,255,.72) !important; text-align:left !important; }
.xp .section-lead { max-width:75ch !important; margin:0 0 12px !important; }
.xp strong, .xp b { color:#fff !important; font-weight:600 !important; }
.xp h3, .xp h4, .xp .tool-detail-h, .xp .tile-title, .xp .tb3dtt-title, .xp .tool-pivot-h, .xp .nda-box-h { font-family:'Sora',sans-serif !important; font-weight:600 !important; font-size:18px !important; line-height:1.3 !important; color:#fff !important; text-transform:none !important; letter-spacing:normal !important; text-align:left !important; }
.xp .su-title { font-size:clamp(20px,1.8vw,24px) !important; }
.xp .su-h { color:var(--gold) !important; font-family:'DM Mono',monospace !important; font-size:12px !important; letter-spacing:.14em !important; text-transform:uppercase !important; }
.xp .tool-section-pivot { text-align:left !important; margin:40px 0 20px !important; padding:0 !important; }
.xp .tool-section-pivot::before, .xp .tool-section-pivot::after { display:none !important; }
.xp .pivot-eyebrow { font-family:'DM Mono',monospace !important; font-size:12px !important; letter-spacing:.2em !important; text-transform:uppercase !important; color:var(--gold) !important; margin:0 0 8px !important; justify-content:flex-start !important; }
.xp .pivot-eyebrow::before, .xp .pivot-eyebrow::after { display:none !important; }
.xp .pivot-h, .xp .pivot-h .pivot-text, .xp .pivot-h em, .xp .pivot-name { font-family:'Sora',sans-serif !important; font-size:clamp(20px,1.8vw,24px) !important; line-height:1.3 !important; color:#fff !important; font-style:normal !important; font-weight:600 !important; justify-content:flex-start !important; text-align:left !important; }
.xp .tool-detail-col, .xp .nda-box, .xp .tools-howto-item, .xp .tb3dtt-feature, .xp .inside-tile, .xp .tool-gallery-tile, .xp .tool-section-hero {
  background:#181818 !important; border:1px solid rgba(255,255,255,.08) !important; border-radius:14px !important; box-shadow:none !important; }
.xp .tool-detail-col { padding:20px !important; }
.xp .tool-detail-col::before, .xp .tool-detail-col::after, .xp .inside-tile::before, .xp .inside-tile::after { display:none !important; }
.xp .tool-section-detail { gap:16px !important; }
.xp .nda-box { padding:20px 24px !important; }
.xp .tools-howto-item { padding:20px !important; }
.xp .tool-section-hero { overflow:hidden; padding:0 !important; }
.xp .pxl-ico { color:var(--gold) !important; border-color:rgba(242,183,5,.35) !important; background:rgba(242,183,5,.08) !important; }
.xp a:not(.e-btn):not(.btn):not(.btn-primary) { color:var(--gold) !important; }
.xp .tool-gallery-tile:hover, .xp .inside-tile:hover { border-color:rgba(242,183,5,.6) !important; }
.xp figcaption { font-family:'DM Mono',monospace !important; color:rgba(255,255,255,.85) !important; letter-spacing:.08em !important; }
.xp .tools-howto-label { color:var(--gold) !important; font-family:'DM Mono',monospace !important; font-size:12px !important; letter-spacing:.14em !important; text-transform:uppercase !important; }
.xp code { color:var(--gold) !important; background:rgba(242,183,5,.08) !important; border-color:rgba(242,183,5,.25) !important; }
.xp .inside-dcc-tab { color:rgba(255,255,255,.75) !important; border-color:rgba(255,255,255,.18) !important; background:transparent !important; }
.xp .inside-dcc-tab:hover { border-color:var(--gold) !important; color:#fff !important; }
.xp .inside-dcc-tab.is-active { background:var(--gold) !important; color:#0d0d0d !important; border-color:var(--gold) !important; }
.xp .inside-dcc-tab .count { background:rgba(0,0,0,.25) !important; color:inherit !important; }
.xp .status-chip { background:rgba(13,13,13,.8) !important; color:#fff !important; border:1px solid rgba(255,255,255,.25) !important; }
.xp .tile-expand, .xp .tile-expand .expand-arrow { color:var(--gold) !important; }
.xp .btn-primary, .xp .btn-primary span { background:var(--gold) !important; color:#0d0d0d !important; border-color:var(--gold) !important; box-shadow:none !important; }
.xp .eyebrow-rail { background:var(--gold) !important; }
.xp .hero-ctas { justify-content:flex-start !important; }

/* ---------- About: ONE compact card (gold offset frame portrait, name once, credentials, strips inside) ---------- */
.ab-sec .container { max-width:1280px; }
.ab-card { background:#161616; border:1px solid rgba(255,255,255,.08); border-top:2px solid var(--gold); border-radius:18px; padding:clamp(24px,3.5vw,44px); }
.ab-top { display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(28px,4vw,56px); align-items:center; }
.ab-portrait { margin:0 14px 14px 0; }
.ab-frame { position:relative; display:block; width:180px; }
.ab-frame::before { content:''; position:absolute; inset:14px -14px -14px 14px; border:1px solid rgba(242,183,5,.55); z-index:0; }
.ab-frame img { position:relative; z-index:1; display:block; width:180px; height:180px; object-fit:cover; filter:grayscale(.2) contrast(1.05); }
.ab-txt .e-eyebrow { margin-bottom:10px; }
.ab-h { font-size:clamp(26px,2.6vw,36px) !important; line-height:1.15 !important; margin:0 0 6px !important; }
.ab-role { font-family:'DM Mono',monospace !important; font-size:13px !important; letter-spacing:.16em !important; text-transform:uppercase; color:var(--gold) !important; margin:0 0 14px !important; }
.ab-bio { font-size:16px !important; line-height:1.6 !important; color:rgba(255,255,255,.75) !important; max-width:72ch; margin:0 0 16px !important; }
.ab-bio a { color:var(--gold); }
.ab-cred { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; }
.ab-chip { font-family:'DM Mono',monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); border:1px solid rgba(242,183,5,.34); border-radius:100px; padding:5px 12px; }
.ab-ves { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 4px; text-decoration:none !important; opacity:.9; }
.ab-ves:hover { opacity:1; }
.ab-ves span { font-family:'DM Mono',monospace; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.ab-ves img { height:34px; width:auto; }
.ab-strips { margin-top:clamp(24px,3vw,36px); padding-top:clamp(20px,2.5vw,28px); border-top:1px solid rgba(255,255,255,.08);
  display:grid; grid-template-columns:repeat(3, minmax(0,auto)); justify-content:space-between; gap:24px 40px; }
.ab-strip { min-width:0; }
.ab-label { font-family:'DM Mono',monospace !important; font-size:12px !important; letter-spacing:.2em !important; text-transform:uppercase; color:rgba(255,255,255,.55) !important; margin:0 0 12px !important; }
.ab-clients, .ab-studios, .ab-partners { display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px; }
.ab-clients img { height:40px; width:auto; max-width:90px; object-fit:contain; }
.ab-studios img { height:16px; width:auto; max-width:72px; object-fit:contain; filter:brightness(0) invert(1); }
.ab-partners img { height:30px; width:auto; max-width:90px; object-fit:contain; border-radius:6px; }
.ab-px { margin-top:clamp(48px,6vw,80px); }
@media (max-width:1100px) { .ab-strips { grid-template-columns:1fr; justify-content:stretch; } }
@media (max-width:720px) {
  .ab-top { grid-template-columns:1fr; }
  .ab-frame, .ab-frame img { width:160px; height:160px; }
}
/* About: the ported production-standard card and the section marker follow the PXLsuite palette (no magenta outside AI) */
.ab-sec::after { background-color:var(--gold) !important; box-shadow:0 0 24px rgba(242,183,5,.4) !important; }
.ab-sec .conventions-card .conv-txt strong, .ab-sec .conventions-card strong { color:var(--gold) !important; }
.ab-sec .conventions-card .card-label { color:#fff !important; }
.ab-sec .pxl-ico { color:var(--gold) !important; }

/* About layout (Cris): info left, portrait right; strips centred below in the usual layout */
.ab-top { grid-template-columns:minmax(0,1fr) auto !important; }
.ab-portrait { margin:0 14px 14px 0; justify-self:end; }
.ab-frame, .ab-frame img { width:200px !important; height:200px !important; }
.ab-strips { display:flex !important; flex-direction:column; align-items:center; text-align:center; gap:clamp(32px,4vw,48px) !important; }
.ab-strip { width:100%; text-align:center; }
.ab-label { color:var(--gold) !important; letter-spacing:.26em !important; text-align:center !important; margin:0 0 clamp(16px,2vw,24px) !important; }
.ab-clients, .ab-studios, .ab-partners { justify-content:center; }
.ab-clients { gap:clamp(24px,5vw,64px) !important; }
.ab-clients img { height:clamp(56px,6vw,90px) !important; max-width:200px !important; }
.ab-studios { gap:clamp(22px,3vw,40px) !important; }
.ab-studios img { height:clamp(18px,2vw,26px) !important; max-width:120px !important; }
.ab-partners { gap:clamp(20px,3vw,40px) !important; }
.ab-partners img { height:clamp(40px,4vw,52px) !important; max-width:180px !important; }
.ab-note { margin:14px auto 0 !important; font-size:14px !important; color:rgba(255,255,255,.6) !important; text-align:center !important; max-width:640px; }
.ab-note a { color:var(--gold); }
@media (max-width:720px) {
  .ab-top { grid-template-columns:1fr !important; }
  .ab-portrait { justify-self:start; margin-top:8px; }
  .ab-frame, .ab-frame img { width:170px !important; height:170px !important; }
}



/* ---------- Contact: blackmamba3d.com engagement block, one card, PXLsuite palette ---------- */
.ct { padding:clamp(80px,9vw,120px) 0; }
.ct-card { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(32px,5vw,64px); align-items:center;
  background:#0d0d0d; border:1px solid rgba(242,183,5,.28); padding:clamp(32px,4vw,56px); position:relative; overflow:hidden; border-radius:4px; }
.ct-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, #f2b705 35%, #f2b705 65%, transparent); }
.ct-h { font-family:'Bebas Neue',Impact,sans-serif !important; font-weight:400 !important; font-size:clamp(40px,4.6vw,72px) !important; line-height:.98 !important; letter-spacing:.01em !important; text-transform:uppercase; color:#f3f1ed !important; margin:0 0 24px !important; }
.ct-p { font-size:clamp(17px,1.3vw,19px) !important; line-height:1.7 !important; color:#c8c4c0 !important; max-width:56ch; margin:0 0 32px !important; }
.ct-cta, .eco .ct-cta { display:inline-flex; align-items:center; gap:12px; min-height:48px; padding:0 24px; background:var(--gold); color:#000 !important; text-decoration:none !important;
  font-family:'DM Mono',monospace; font-size:13px; letter-spacing:.2em; text-transform:uppercase; border:1px solid var(--gold); transition:background .2s ease, transform .2s ease; }
.ct-cta:hover { background:#fbcd2e; transform:translateX(2px); }
.ct-cta .arrow { font-size:20px; line-height:1; }
.ct-cta:focus-visible, .ct-row:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.ct-ways { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.ct-row, .eco .ct-row { display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:16px; min-height:64px; padding:12px 16px; text-decoration:none !important;
  background:#141414; border-left:2px solid rgba(242,183,5,.45); color:inherit !important; transition:background .25s ease, border-color .25s ease, transform .25s ease; }
.ct-row:hover { background:#181818; border-left-color:var(--gold); transform:translateX(2px); }
.ct-ico { width:40px; height:40px; display:grid; place-items:center; color:var(--gold); border:1px solid rgba(242,183,5,.28); border-radius:8px; }
.ct-ico svg { width:20px; height:20px; }
.ct-t { min-width:0; display:flex; flex-direction:column; gap:2px; }
.ct-l { font-family:'Sora',sans-serif; font-weight:600; font-size:16px; color:#f3f1ed; }
.ct-s { font-size:14px; color:#c8c4c0; overflow-wrap:anywhere; }
.ct-row .arrow { color:var(--gold); font-size:22px; line-height:1; }
.ct-trust { margin:24px 0 0 !important; text-align:center; font-family:'DM Mono',monospace !important; font-size:12px !important; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6) !important; }
.ct-trust a { color:var(--gold); }
@media (max-width:900px) { .ct-card { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { .ct-row, .ct-cta { transition:none; } .ct-row:hover, .ct-cta:hover { transform:none; } }

/* blackmamba3d.com header: the PXLsuite lockup keeps its Round 9 size (52px, 44px on phones). */
.bm-header .nav-brand-logo { height:52px !important; width:auto !important; }
@media (max-width:600px) { .bm-header .nav-brand-logo { height:44px !important; } }
/* blackmamba3d.com footer (Round 19): the OFFICIAL PXLsuite logo, as supplied, at the header logo's size, stacked above
   "by Cristian Spagnuolo". The file carries 48px of transparent margin out of 1440 on its left; the image is shifted by
   that share of its own width so the visible mark starts at the x of the "B". Nothing is cropped or redrawn. */
footer.bm-footer .footer-logo { grid-template-columns:auto !important; gap:0 !important; }
footer.bm-footer .footer-logo-mark { position:static !important; aspect-ratio:auto !important; align-self:start !important; }
footer.bm-footer .footer-logo-img { position:static !important; height:52px !important; width:auto !important; transform:translateX(-3.3333%); }
@media (max-width:600px) { footer.bm-footer .footer-logo-img { height:44px !important; } }

.xp .nda-box { margin:24px 0 !important; max-width:none !important; width:auto !important; }
.xp .section-header + * { margin-top:0 !important; }