:root{--line:rgba(255,255,255,.14);--glass:rgba(5,4,10,.72)}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#030105;color:#fff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button{font:inherit;color:inherit}
.stage{position:fixed;inset:0;overflow:hidden;background:#030105}
.scene-layer,.hero-layer{position:absolute;inset:0;overflow:hidden}
.scene-layer{z-index:0;background:#050208}
.scene-layer img{width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.92) contrast(1.03) brightness(.64)}
.scene-layer::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,1,5,.08),rgba(3,1,5,.34) 58%,rgba(3,1,5,.82));pointer-events:none}
.scene-fallback{position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,rgba(120,52,151,.35),rgba(4,2,7,.98) 62%,#020103)}
.hero-layer{z-index:2;pointer-events:none}
.hero-layer img{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:92%;max-width:92%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 28px 60px rgba(0,0,0,.58))}
.hero-brand-shield{position:absolute;z-index:3;left:0;right:0;bottom:0;height:29%;background:linear-gradient(to top,#030105 0%,rgba(3,1,5,1) 58%,rgba(3,1,5,.97) 73%,rgba(3,1,5,.72) 86%,rgba(3,1,5,0) 100%)}
.copy-layer{position:absolute;z-index:5;left:max(20px,4vw);bottom:max(22px,5vh);display:grid;gap:5px;max-width:min(620px,74vw)}
.copy-layer small{font-size:10px;letter-spacing:.18em;color:#c8b1d1}.copy-layer strong{font:500 clamp(2.4rem,6vw,5.8rem)/.92 Georgia,serif}.copy-layer span{font-size:12px;color:#c0b6c4}
.stage-tools{position:fixed;z-index:10;right:18px;top:18px;display:flex;gap:8px}
.stage-tools button,.panel header button{border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(18px);border-radius:999px;padding:9px 14px}
.panel{position:fixed;z-index:30;inset:5vh 5vw;background:rgba(6,4,11,.94);border:1px solid var(--line);border-radius:22px;backdrop-filter:blur(28px);padding:18px;overflow:hidden}
.panel header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.panel header>div{display:grid}.panel header small{font-size:10px;letter-spacing:.15em;color:#bba9c2}.panel header strong{font-size:20px}
.scene-grid,.module-grid{height:calc(100% - 58px);overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.scene-card,.module-card{border:1px solid var(--line);background:rgba(255,255,255,.045);border-radius:14px;overflow:hidden;text-align:left}
.scene-card img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:#0b0710}
.scene-card span,.module-card{padding:11px}.scene-card span{display:block;font-size:11px}
.module-card{display:grid;gap:4px;padding:13px}.module-card small{font-size:9px;letter-spacing:.09em;color:#aa98b1}.module-card strong{font-size:14px}.module-card span{padding:0;font-size:10px;color:#918798}
@media(max-width:720px){
  .hero-layer img{height:84%;max-width:110%}
  .hero-brand-shield{height:27%}
  .panel{inset:3vh 3vw}
  .scene-grid,.module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .copy-layer{left:18px;bottom:22px}
}

/* R32 brand shield: neutralize lower equipment-brand zone; source image unchanged. */
.hero-brand-shield{
  position:absolute;
  z-index:3;
  left:0;right:0;bottom:0;
  height:29%;
  background:linear-gradient(to top,#030105 0%,rgba(3,1,5,1) 58%,rgba(3,1,5,.97) 73%,rgba(3,1,5,.72) 86%,rgba(3,1,5,0) 100%);
}