*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
--bg-deep:#0d0a07;
--concrete-1:#1e1c1a;--concrete-2:#1a1816;--concrete-3:#222019;--concrete-4:#161412;
--corrosion-1:#6B4423;--corrosion-2:#5A3A1A;
--olive-1:#3d3c2e;--olive-2:#4a4835;
--yellow-1:#B8960B;--yellow-2:#8B7500;
--blood-1:#6B0000;--blood-2:#5a0000;--blood-3:#3a0000;
--bone-1:#C8C0B0;--bone-2:#A89E8E;
--amber:#A08030;
--rust-1:#8B4513;--rust-2:#6B4423;--rust-3:#5A3A1A;
--bolt:#3a3530;--washer:#2a2520;
--slab-light:#2a2725;--slab-dark:#0a0908;
--font-heading:'Bebas Neue',sans-serif;
--font-body:'Special Elite',cursive;
--font-mono:'Share Tech Mono',monospace;
}
html{scroll-behavior:smooth;background:var(--bg-deep);}
body{
font-family:var(--font-body);color:var(--bone-1);
background:
repeating-radial-gradient(circle at 47% 53%, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 4px),
repeating-radial-gradient(circle at 13% 27%, rgba(200,190,170,0.015) 0px, rgba(200,190,170,0.015) 1px, transparent 1px, transparent 6px),
repeating-radial-gradient(circle at 71% 83%, rgba(255,255,255,0.01) 0px, rgba(255,255,255,0.01) 2px, transparent 2px, transparent 7px),
repeating-radial-gradient(circle at 89% 11%, rgba(180,170,150,0.013) 0px, rgba(180,170,150,0.013) 1px, transparent 1px, transparent 5px),
var(--bg-deep);
overflow-x:hidden;line-height:1.7;
}

/* ========== FLUORESCENT FLICKER OVERLAY ========== */
.flicker-overlay{
position:fixed;top:0;left:0;width:100%;height:100%;
background:rgba(8,10,14,0.04);
z-index:9998;pointer-events:none;
animation:fluorFlicker 6s ease-in-out infinite;
}
@keyframes fluorFlicker{
0%,100%{opacity:0.04;}
30%{opacity:0.0;}
50%{opacity:0.04;}
70%{opacity:0.02;}
85%{opacity:0.04;}
}

/* ========== DUST CANVAS ========== */
#dustCanvas{
position:fixed;top:0;left:0;width:100%;height:100%;
z-index:0;pointer-events:none;
}

/* ========== CONCRETE GRAIN TEXTURE ========== */
.concrete-grain::before{
content:'';position:absolute;top:0;left:0;width:100%;height:100%;
background:
repeating-radial-gradient(circle, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 3px),
repeating-radial-gradient(circle at 60% 40%, rgba(200,190,170,0.025) 0px, rgba(200,190,170,0.025) 1px, transparent 1px, transparent 5px),
repeating-radial-gradient(circle at 30% 70%, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 2px, transparent 2px, transparent 6px),
repeating-radial-gradient(circle at 80% 20%, rgba(180,170,150,0.035) 0px, rgba(180,170,150,0.035) 1px, transparent 1px, transparent 4px),
repeating-radial-gradient(circle at 15% 85%, rgba(255,255,255,0.018) 0px, rgba(255,255,255,0.018) 3px, transparent 3px, transparent 8px);
background-size:4px 4px, 6px 6px, 7px 7px, 5px 5px, 9px 9px;
opacity:0.7;pointer-events:none;z-index:1;
}

/* ========== CONCRETE PANEL ========== */
.concrete-panel{
position:relative;
background:
radial-gradient(ellipse at 20% 30%, rgba(40,35,30,0.5) 0%, transparent 50%),
radial-gradient(ellipse at 75% 65%, rgba(50,45,38,0.3) 0%, transparent 45%),
radial-gradient(ellipse at 55% 80%, rgba(107,68,35,0.08) 0%, transparent 40%),
radial-gradient(ellipse at 15% 70%, rgba(107,68,35,0.06) 0%, transparent 35%),
linear-gradient(180deg, var(--concrete-1) 0%, var(--concrete-2) 40%, var(--concrete-1) 70%, var(--concrete-2) 100%);
border-left:2px solid var(--slab-light);
border-bottom:2px solid var(--slab-dark);
border-right:1px solid rgba(10,9,8,0.8);
border-top:1px solid rgba(42,39,37,0.5);
overflow:hidden;
}

/* ========== CONCRETE ANCHORS ========== */
.anchor{
position:absolute;width:22px;height:22px;z-index:5;pointer-events:none;
}
.anchor-tl{top:12px;left:12px;}
.anchor-tr{top:12px;right:12px;}
.anchor-bl{bottom:12px;left:12px;}
.anchor-br{bottom:12px;right:12px;}

.anchor-intact::before{
content:'';position:absolute;top:0;left:0;width:22px;height:22px;border-radius:50%;
background:radial-gradient(ellipse at 40% 35%, #332e2a, var(--washer) 60%, #1a1815 100%);
}
.anchor-intact::after{
content:'+';position:absolute;top:1px;left:1px;width:20px;height:20px;
display:flex;align-items:center;justify-content:center;
font-family:var(--font-mono);font-size:14px;font-weight:bold;line-height:1;
color:rgba(255,255,255,0.08);
background:radial-gradient(ellipse at 38% 32%, rgba(255,255,255,0.08), var(--bolt) 45%, #2a2520 100%);
border-radius:50%;
box-shadow:inset 0 -1px 2px rgba(0,0,0,0.6), inset 0 1px 1px rgba(255,255,255,0.05);
}

.anchor-corroded::before{
content:'';position:absolute;top:0;left:0;width:22px;height:22px;border-radius:50%;
background:radial-gradient(ellipse at 45% 40%, #5a3a1a, #3d2a10 70%, #1a1510 100%);
box-shadow:0 0 3px rgba(107,68,35,0.3);
}
.anchor-corroded::after{
content:'+';position:absolute;top:2px;left:2px;width:18px;height:18px;
display:flex;align-items:center;justify-content:center;
font-family:var(--font-mono);font-size:12px;font-weight:bold;line-height:1;
color:rgba(90,58,26,0.25);
background:radial-gradient(ellipse at 40% 35%, #7a5533, #5a3a1a 50%, #3d2a10 100%);
border-radius:50%;
box-shadow:inset 0 -1px 3px rgba(0,0,0,0.7);
}

.anchor-missing::before{
content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
background:radial-gradient(circle, #030303 35%, #0a0908 60%, #151210 100%);
box-shadow:inset 0 2px 5px rgba(0,0,0,0.95), 0 0 2px rgba(0,0,0,0.5);
}
.anchor-missing::after{
content:'';position:absolute;top:0;left:8px;width:6px;height:4px;
background:var(--concrete-1);border-radius:0 0 3px 3px;
transform:rotate(15deg);opacity:0.7;
}

.anchor-stripped::before{
content:'';position:absolute;top:0;left:0;width:22px;height:22px;border-radius:50%;
background:radial-gradient(ellipse at 50% 50%, #2a2520, #1a1815);
border:1px solid rgba(58,53,48,0.4);
border-top-color:transparent;
}
.anchor-stripped::after{
content:'+';position:absolute;top:2px;left:3px;width:17px;height:17px;
display:flex;align-items:center;justify-content:center;
font-family:var(--font-mono);font-size:13px;font-weight:bold;line-height:1;
color:rgba(255,255,255,0.05);
background:radial-gradient(ellipse at 50% 40%, #4a4540, #2a2520);
border-radius:50%;
box-shadow:inset 0 -2px 3px rgba(0,0,0,0.7);
transform:rotate(25deg) translate(1px, -1px);
}

/* ========== HAZARD DIVIDER ========== */
.hazard-divider{
position:relative;width:100%;height:18px;overflow:hidden;z-index:1;
}
.hazard-divider::before{
content:'';position:absolute;top:0;left:0;width:100%;height:100%;
background:
repeating-radial-gradient(circle, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 3px),
repeating-linear-gradient(
-45deg,
var(--yellow-1) 0px, var(--yellow-1) 10px,
#1a1a1a 10px, #1a1a1a 20px
);
background-size:3px 3px, auto;
opacity:0.25;
}
.hazard-divider::after{
content:'';position:absolute;top:0;left:0;width:100%;height:100%;
background:
repeating-radial-gradient(circle at 50% 50%, rgba(30,28,26,0.4) 0px, rgba(30,28,26,0.4) 2px, transparent 2px, transparent 5px),
linear-gradient(to right, var(--bg-deep) 0%, transparent 15%, transparent 85%, var(--bg-deep) 100%);
background-size:5px 5px, 100% 100%;
}

/* Customer cross-link (tickets ↔ shop) */
body.storefront { padding-top: 60px; }

.customer-merch-bar {
  max-width: 900px;
  margin: 0 auto 20px;
  padding: 12px 18px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--bone-2);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(184, 150, 11, 0.25);
}

.customer-merch-bar a {
  color: var(--yellow-1);
  text-decoration: none;
  margin-left: 6px;
}

.customer-merch-bar a:hover { text-decoration: underline; }

.storefront .nav-links a.is-active { color: var(--yellow-1); }

/* ========== NAV ========== */
.nav{
position:fixed;top:0;left:0;width:100%;z-index:9999;
background:
repeating-radial-gradient(circle, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 4px),
repeating-radial-gradient(circle at 70% 50%, rgba(200,190,170,0.015) 0px, rgba(200,190,170,0.015) 1px, transparent 1px, transparent 5px),
radial-gradient(ellipse at 20% 50%, rgba(40,35,30,0.3) 0%, transparent 40%),
radial-gradient(ellipse at 80% 50%, rgba(50,45,38,0.2) 0%, transparent 35%),
linear-gradient(180deg, var(--concrete-4) 0%, #100e0c 100%);
background-size:4px 4px, 5px 5px, 100% 100%, 100% 100%, 100% 100%;
border-bottom:1px solid var(--slab-light);
box-shadow:0 4px 15px rgba(0,0,0,0.8);
}
.nav-inner{
max-width:1280px;margin:0 auto;display:flex;align-items:center;
justify-content:space-between;padding:0 30px;height:60px;
}
.nav-brand{
}
.nav-links{display:flex;align-items:center;gap:28px;list-style:none;}
.nav-links a{
font-family:var(--font-mono);font-size:0.78rem;color:var(--bone-1);
text-decoration:none;letter-spacing:2px;text-transform:uppercase;
transition:color 0.3s;
}
.nav-links a:hover{color:var(--bone-2);}
.nav-cta{
font-family:var(--font-mono);font-size:0.72rem;
background:var(--blood-1);color:var(--bone-1);
border:1px solid var(--corrosion-1);
padding:8px 18px;text-decoration:none;text-transform:uppercase;
letter-spacing:2px;transition:background 0.3s;cursor:pointer;
}
.nav-cta:hover{background:#7a0000;}
.nav-rivet-strip{
position:absolute;bottom:0;left:0;width:100%;height:4px;
background:repeating-radial-gradient(circle, #3a3530 1px, transparent 1.5px);
background-size:12px 12px;
background-position:0 center;
opacity:0.5;
}

/* ========== CSS LOGO ========== */
.logo-mark{
position:relative;display:inline-flex;align-items:center;gap:10px;
}
.logo-gear{
position:relative;width:36px;height:36px;flex-shrink:0;
}
.logo-gear-circle{
position:absolute;top:4px;left:4px;width:28px;height:28px;
border:3px solid var(--yellow-1);border-radius:50%;
background:transparent;
}
.logo-gear-dot{
position:absolute;top:50%;left:50%;width:6px;height:6px;
background:var(--yellow-1);border-radius:50%;
transform:translate(-50%,-50%);
}
.logo-gear-teeth1{
position:absolute;top:50%;left:50%;width:34px;height:34px;
transform:translate(-50%,-50%) rotate(0deg);
}
.logo-gear-teeth1::before{
content:'';position:absolute;top:0;left:50%;width:4px;height:100%;
transform:translateX(-50%);
background:linear-gradient(to bottom, var(--yellow-1) 0%, var(--yellow-1) 5px, transparent 5px, transparent calc(100% - 5px), var(--yellow-1) calc(100% - 5px));
}
.logo-gear-teeth1::after{
content:'';position:absolute;top:50%;left:0;width:100%;height:4px;
transform:translateY(-50%);
background:linear-gradient(to right, var(--yellow-1) 0%, var(--yellow-1) 5px, transparent 5px, transparent calc(100% - 5px), var(--yellow-1) calc(100% - 5px));
}
.logo-gear-teeth2{
position:absolute;top:50%;left:50%;width:34px;height:34px;
transform:translate(-50%,-50%) rotate(45deg);
}
.logo-gear-teeth2::before{
content:'';position:absolute;top:0;left:50%;width:4px;height:100%;
transform:translateX(-50%);
background:linear-gradient(to bottom, var(--yellow-1) 0%, var(--yellow-1) 5px, transparent 5px, transparent calc(100% - 5px), var(--yellow-1) calc(100% - 5px));
}
.logo-gear-teeth2::after{
content:'';position:absolute;top:50%;left:0;width:100%;height:4px;
transform:translateY(-50%);
background:linear-gradient(to right, var(--yellow-1) 0%, var(--yellow-1) 5px, transparent 5px, transparent calc(100% - 5px), var(--yellow-1) calc(100% - 5px));
}
.logo-text{display:flex;flex-direction:column;line-height:1;}
.logo-text-main{
font-family:var(--font-heading);font-size:1.3rem;
color:var(--yellow-1);letter-spacing:3px;font-weight:bold;
line-height:1.1;
}
.logo-text-sub{
font-family:var(--font-mono);font-size:0.55rem;
color:var(--bone-2);letter-spacing:4px;text-transform:uppercase;
line-height:1.2;
}

.hamburger{
display:none;flex-direction:column;gap:4px;cursor:pointer;
background:none;border:none;padding:8px;
}
.hamburger span{
display:block;width:22px;height:2px;background:var(--bone-1);
transition:all 0.3s;
}
.mobile-menu{
position:fixed;top:0;right:-300px;width:280px;height:100vh;
background:
repeating-radial-gradient(circle, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 4px),
linear-gradient(180deg, var(--concrete-4) 0%, #100e0c 100%);
background-size:4px 4px, 100% 100%;
border-left:2px solid var(--slab-light);
z-index:10001;transition:right 0.35s ease;
padding:80px 30px 30px;
display:flex;flex-direction:column;gap:24px;
}
.mobile-menu.open{right:0;}
.mobile-menu a,
.mobile-menu .mobile-link{
font-family:var(--font-mono);font-size:0.85rem;color:var(--bone-1);
text-decoration:none;letter-spacing:2px;text-transform:uppercase;
display:block;padding:10px 0;border-bottom:1px solid rgba(107,68,35,0.3);
}
.mobile-menu .mobile-link.is-active,
.mobile-menu a.is-active{color:var(--yellow-1);}
.mobile-close{
position:absolute;top:18px;right:18px;background:none;border:none;
color:var(--bone-1);font-size:1.75rem;line-height:1;cursor:pointer;padding:4px 8px;
}
.mobile-close:hover{color:var(--yellow-1);}
.mobile-overlay{
position:fixed;top:0;left:0;width:100%;height:100%;
background:rgba(0,0,0,0.7);z-index:10000;
display:none;
}
.mobile-overlay.open{display:block;}

/* ========== HERO ========== */
.hero{
position:relative;min-height:100vh;display:flex;flex-direction:column;
align-items:center;justify-content:center;text-align:center;
padding:120px 30px 80px;
background:
radial-gradient(ellipse at 30% 40%, rgba(40,35,30,0.3) 0%, transparent 50%),
radial-gradient(ellipse at 70% 60%, rgba(50,45,38,0.2) 0%, transparent 45%),
radial-gradient(ellipse at 50% 80%, rgba(107,68,35,0.05) 0%, transparent 40%),
linear-gradient(180deg, var(--bg-deep) 0%, #110e0b 50%, var(--bg-deep) 100%);
z-index:1;
}
.hero.concrete-grain::before{opacity:0.4;}
.hero-fade{
position:absolute;bottom:0;left:0;width:100%;height:200px;
background:linear-gradient(to bottom, transparent, var(--bg-deep));
z-index:2;
}
.hero-content{position:relative;z-index:3;}
.hero-presents{
font-family:var(--font-mono);font-size:0.7rem;
color:var(--yellow-2);letter-spacing:8px;
text-transform:uppercase;margin-bottom:24px;
}
.hero-title{
font-family:var(--font-heading);
font-size:clamp(3.5rem,10vw,8rem);
color:var(--bone-1);letter-spacing:10px;
line-height:1;margin-bottom:28px;
text-transform:uppercase;
}
.hero-tagline{
font-family:var(--font-body);font-size:1.2rem;
color:var(--bone-2);max-width:650px;margin:0 auto 16px;
}
.hero-sub{
font-family:var(--font-body);font-size:1.05rem;
color:var(--bone-2);opacity:0.7;max-width:600px;margin:0 auto 48px;
}
.cta-btn{
display:inline-block;
font-family:var(--font-heading);font-size:1.15rem;
color:var(--bone-1);letter-spacing:4px;text-transform:uppercase;
background:linear-gradient(180deg, var(--blood-2) 0%, var(--blood-3) 100%);
border:1px solid var(--corrosion-1);
padding:18px 50px;text-decoration:none;
clip-path:polygon(12px 0%, calc(100% - 12px) 0%, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0% calc(100% - 12px), 0% 12px);
transition:background 0.3s, transform 0.3s;
cursor:pointer;
}
.cta-btn:hover{
background:linear-gradient(180deg, #7a0000 0%, #4a0000 100%);
transform:scale(1.03);
}
.hero-anim{
animation:fadeInUp 1.5s ease-out both;
}
@keyframes fadeInUp{
from{opacity:0;transform:translateY(30px);}
to{opacity:1;transform:translateY(0);}
}

/* ========== SECTIONS ========== */
.section{
position:relative;z-index:1;
padding:90px 30px;
}
.section-inner{
max-width:1100px;margin:0 auto;position:relative;z-index:2;
}
.section-label{
font-family:var(--font-mono);font-size:0.7rem;
color:var(--amber);letter-spacing:6px;text-transform:uppercase;
margin-bottom:14px;
}
.section-title{
font-family:var(--font-heading);font-size:clamp(2rem,5vw,3.2rem);
color:var(--bone-1);letter-spacing:5px;margin-bottom:40px;
text-transform:uppercase;
}

/* ========== SECTION SLAB ROTATIONS ========== */
.section-about{
transform:rotate(-0.3deg);
box-shadow:6px 8px 30px rgba(0,0,0,0.6);
}
.section-features{
transform:rotate(0.2deg);
box-shadow:4px 6px 25px rgba(0,0,0,0.5);
}
.section-cta{
transform:rotate(-0.15deg);
box-shadow:5px 7px 28px rgba(0,0,0,0.55);
}

/* ========== ABOUT GRID ========== */
.about-grid{
display:grid;grid-template-columns:1fr 1fr;gap:50px;
align-items:start;
}
.about-text p{
font-family:var(--font-body);font-size:1.05rem;
color:var(--bone-1);line-height:1.9;margin-bottom:22px;
}

/* ========== DOSSIER BOX ========== */
.dossier-box{
background:
radial-gradient(ellipse at 30% 40%, rgba(40,35,30,0.4) 0%, transparent 50%),
radial-gradient(ellipse at 70% 80%, rgba(107,68,35,0.06) 0%, transparent 40%),
#0a0908;
border:2px solid var(--rust-3);
box-shadow:inset 0 0 0 1px rgba(90,58,26,0.3), inset 0 2px 6px rgba(0,0,0,0.5);
overflow:hidden;
transform:rotate(0.4deg);
}
.dossier-header{
background:
radial-gradient(circle at 12px 50%, rgba(58,53,48,0.6) 0%, rgba(58,53,48,0.6) 3px, transparent 3.5px),
radial-gradient(circle at calc(100% - 12px) 50%, rgba(58,53,48,0.6) 0%, rgba(58,53,48,0.6) 3px, transparent 3.5px),
linear-gradient(180deg, #2e2924, var(--washer));
padding:10px 18px;
font-family:var(--font-mono);font-size:0.75rem;
color:var(--amber);letter-spacing:3px;text-transform:uppercase;
border-bottom:1px solid var(--corrosion-2);
}
.dossier-content{
padding:22px 18px;
}
.dossier-content p{
font-family:var(--font-mono);font-size:0.82rem;
color:var(--amber);line-height:2;margin:0;
}
.blink-cursor{
display:inline-block;width:8px;height:14px;
background:var(--amber);vertical-align:middle;
margin-left:4px;
animation:cursorBlink 1s step-end infinite;
}
@keyframes cursorBlink{
0%,100%{opacity:1;}50%{opacity:0;}
}

/* ========== FEATURES GRID ========== */
.features-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:15px;
}

/* ========== FEATURE CARD — CONCRETE SLAB ========== */
.feature-card{
position:relative;
background:
radial-gradient(ellipse at 25% 35%, rgba(40,35,30,0.5) 0%, transparent 50%),
radial-gradient(ellipse at 75% 70%, rgba(50,45,38,0.3) 0%, transparent 45%),
radial-gradient(ellipse at 60% 20%, rgba(107,68,35,0.08) 0%, transparent 40%),
linear-gradient(160deg, var(--concrete-1) 0%, var(--concrete-2) 40%, var(--concrete-3) 70%, var(--concrete-1) 100%);
border-left:2px solid var(--slab-light);
border-bottom:2px solid var(--slab-dark);
border-right:1px solid rgba(10,9,8,0.8);
border-top:1px solid rgba(42,39,37,0.4);
padding:35px 25px;
transition:transform 0.3s, box-shadow 0.3s;
overflow:hidden;
}
/* Individual card rotations and shadows */
.feature-card:nth-child(1){transform:rotate(-0.8deg);box-shadow:4px 6px 20px rgba(0,0,0,0.7);}
.feature-card:nth-child(2){transform:rotate(0.5deg);box-shadow:2px 3px 12px rgba(0,0,0,0.5);}
.feature-card:nth-child(3){transform:rotate(-0.3deg);box-shadow:4px 6px 20px rgba(0,0,0,0.7);}
.feature-card:nth-child(4){transform:rotate(0.6deg);box-shadow:2px 3px 12px rgba(0,0,0,0.5);}
.feature-card:nth-child(5){transform:rotate(-0.5deg);box-shadow:4px 6px 20px rgba(0,0,0,0.7);}
.feature-card:nth-child(6){transform:rotate(0.4deg);box-shadow:2px 3px 12px rgba(0,0,0,0.5);}

/* Vary concrete textures per card */
.feature-card:nth-child(2){
background:
radial-gradient(ellipse at 70% 25%, rgba(50,45,38,0.4) 0%, transparent 45%),
radial-gradient(ellipse at 20% 75%, rgba(40,35,30,0.35) 0%, transparent 50%),
radial-gradient(ellipse at 85% 80%, rgba(107,68,35,0.07) 0%, transparent 38%),
linear-gradient(160deg, var(--concrete-2) 0%, var(--concrete-1) 40%, var(--concrete-3) 70%, var(--concrete-2) 100%);
}
.feature-card:nth-child(3){
background:
radial-gradient(ellipse at 50% 15%, rgba(45,40,34,0.45) 0%, transparent 48%),
radial-gradient(ellipse at 30% 85%, rgba(50,45,38,0.3) 0%, transparent 42%),
radial-gradient(ellipse at 10% 50%, rgba(107,68,35,0.09) 0%, transparent 35%),
linear-gradient(160deg, var(--concrete-3) 0%, var(--concrete-1) 50%, var(--concrete-2) 100%);
}
.feature-card:nth-child(4){
background:
radial-gradient(ellipse at 10% 50%, rgba(40,35,30,0.5) 0%, transparent 48%),
radial-gradient(ellipse at 90% 40%, rgba(50,45,38,0.3) 0%, transparent 40%),
radial-gradient(ellipse at 50% 90%, rgba(107,68,35,0.07) 0%, transparent 42%),
linear-gradient(160deg, var(--concrete-1) 0%, var(--concrete-3) 50%, var(--concrete-2) 100%);
}
.feature-card:nth-child(5){
background:
radial-gradient(ellipse at 60% 80%, rgba(45,40,34,0.4) 0%, transparent 45%),
radial-gradient(ellipse at 25% 20%, rgba(50,45,38,0.35) 0%, transparent 42%),
radial-gradient(ellipse at 80% 50%, rgba(107,68,35,0.08) 0%, transparent 38%),
linear-gradient(160deg, var(--concrete-2) 0%, var(--concrete-3) 40%, var(--concrete-1) 100%);
}
.feature-card:nth-child(6){
background:
radial-gradient(ellipse at 40% 40%, rgba(40,35,30,0.45) 0%, transparent 50%),
radial-gradient(ellipse at 75% 65%, rgba(50,45,38,0.3) 0%, transparent 45%),
radial-gradient(ellipse at 20% 90%, rgba(107,68,35,0.08) 0%, transparent 40%),
linear-gradient(160deg, var(--concrete-3) 0%, var(--concrete-2) 50%, var(--concrete-1) 100%);
}

.feature-card.concrete-grain::before{opacity:0.6;z-index:0;}
/* Hover: lift, increase shadow, halve rotation */
.feature-card:nth-child(1):hover{transform:rotate(-0.4deg) translateY(-6px);box-shadow:8px 12px 30px rgba(0,0,0,0.8);}
.feature-card:nth-child(2):hover{transform:rotate(0.25deg) translateY(-6px);box-shadow:8px 12px 30px rgba(0,0,0,0.8);}
.feature-card:nth-child(3):hover{transform:rotate(-0.15deg) translateY(-6px);box-shadow:8px 12px 30px rgba(0,0,0,0.8);}
.feature-card:nth-child(4):hover{transform:rotate(0.3deg) translateY(-6px);box-shadow:8px 12px 30px rgba(0,0,0,0.8);}
.feature-card:nth-child(5):hover{transform:rotate(-0.25deg) translateY(-6px);box-shadow:8px 12px 30px rgba(0,0,0,0.8);}
.feature-card:nth-child(6):hover{transform:rotate(0.2deg) translateY(-6px);box-shadow:8px 12px 30px rgba(0,0,0,0.8);}

.feature-card .anchor{z-index:2;}
.card-symbol{
font-size:2.2rem;color:var(--yellow-2);margin-bottom:16px;
line-height:1;position:relative;z-index:2;
display:inline-flex;align-items:center;justify-content:center;
width:52px;height:52px;
background:radial-gradient(circle, rgba(0,0,0,0.35) 0%, rgba(26,22,20,0.5) 60%, transparent 75%);
border-radius:6px;
box-shadow:inset 0 1px 4px rgba(0,0,0,0.5);
}
.card-title{
font-family:var(--font-heading);font-size:1.3rem;
color:var(--yellow-1);letter-spacing:3px;margin-bottom:14px;
text-transform:uppercase;position:relative;z-index:2;
}
.card-desc{
font-family:var(--font-body);font-size:0.92rem;
color:var(--bone-2);line-height:1.8;position:relative;z-index:2;
}

/* ========== CTA SECTION ========== */
.cta-section{
text-align:center;
background:
radial-gradient(ellipse at 50% 50%, rgba(90,0,0,0.06) 0%, transparent 60%),
radial-gradient(ellipse at 30% 70%, rgba(40,35,30,0.4) 0%, transparent 45%),
radial-gradient(ellipse at 70% 30%, rgba(50,45,38,0.3) 0%, transparent 40%),
radial-gradient(ellipse at 60% 80%, rgba(107,68,35,0.06) 0%, transparent 35%),
linear-gradient(160deg, var(--concrete-1) 0%, var(--concrete-2) 50%, var(--concrete-1) 100%);
padding:100px 30px;
position:relative;z-index:1;
border-left:2px solid var(--slab-light);
border-bottom:2px solid var(--slab-dark);
border-right:1px solid rgba(10,9,8,0.8);
border-top:1px solid rgba(42,39,37,0.4);
}
.cta-section .section-label{margin-bottom:14px;}
.cta-section .section-title{margin-bottom:20px;}
.cta-subtext{
font-family:var(--font-body);font-size:1.05rem;
color:var(--bone-2);max-width:550px;margin:0 auto 40px;
}
.cta-large{
font-size:1.5rem;padding:22px 65px;
animation:breathe 3s ease-in-out infinite;
}
@keyframes breathe{
0%,100%{opacity:0.85;}50%{opacity:1;}
}

/* ========== FOOTER ========== */
.footer{
position:relative;z-index:1;
background:
repeating-radial-gradient(circle, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 4px),
repeating-radial-gradient(circle at 40% 60%, rgba(200,190,170,0.015) 0px, rgba(200,190,170,0.015) 1px, transparent 1px, transparent 6px),
radial-gradient(ellipse at 50% 80%, rgba(40,35,30,0.3) 0%, transparent 50%),
linear-gradient(160deg, rgba(10,9,8,0.9) 0%, var(--slab-dark) 50%, rgba(10,9,8,0.9) 100%),
var(--slab-dark);
background-size:4px 4px, 6px 6px, 100% 100%, 100% 100%, 100% 100%;
border-top:2px solid var(--concrete-1);
box-shadow:inset 0 2px 6px rgba(0,0,0,0.4);
padding:35px 30px 25px;text-align:center;
}
.footer-rivets{
position:absolute;top:2px;left:0;width:100%;height:4px;
background:repeating-radial-gradient(circle, #3a3530 1px, transparent 1.5px);
background-size:12px 12px;opacity:0.5;
}
.footer-copy{
font-family:var(--font-mono);font-size:0.75rem;
color:#555;letter-spacing:2px;margin-bottom:8px;
}
.footer-warn{
font-family:var(--font-mono);font-size:0.65rem;
color:var(--olive-1);letter-spacing:1px;
}

/* ========== REVEAL ========== */
.reveal{
opacity:0;transform:translateY(30px);
transition:opacity 0.8s ease-out, transform 0.8s ease-out;
}
.reveal.visible{
opacity:1;transform:translateY(0);
}

/* ========== RESPONSIVE ========== */
@media(max-width:820px){
.nav:not(.nav--pill-menu) .nav-links{display:none;}
.nav:not(.nav--pill-menu) .hamburger{display:flex;}
.about-grid{grid-template-columns:1fr;gap:30px;}
.features-grid{grid-template-columns:1fr;gap:20px;}
.hero-title{letter-spacing:5px;}
.cta-btn{padding:16px 35px;font-size:1rem;}
.cta-large{padding:18px 40px;font-size:1.2rem;}
.section{padding:60px 20px;}
}
@media(max-width:768px){
/* Remove rotations on mobile */
.section-about,
.section-features,
.section-cta{transform:none;}
.feature-card:nth-child(1),
.feature-card:nth-child(2),
.feature-card:nth-child(3),
.feature-card:nth-child(4),
.feature-card:nth-child(5),
.feature-card:nth-child(6){transform:none;}
.feature-card:nth-child(1):hover,
.feature-card:nth-child(2):hover,
.feature-card:nth-child(3):hover,
.feature-card:nth-child(4):hover,
.feature-card:nth-child(5):hover,
.feature-card:nth-child(6):hover{transform:translateY(-4px);}
.dossier-box{transform:none;}
}
@media(max-width:500px){
.nav-inner{padding:0 16px;}
.hero{padding:100px 18px 60px;}
.hero-tagline{font-size:1.05rem;}
.hero-sub{font-size:0.95rem;}
.feature-card{padding:28px 20px;}
.logo-text-main{font-size:1.1rem;letter-spacing:2px;}
.logo-text-sub{font-size:0.5rem;letter-spacing:2px;}
.logo-gear{width:30px;height:30px;}
.logo-gear-circle{top:3px;left:3px;width:24px;height:24px;border-width:2px;}
.logo-gear-teeth1,.logo-gear-teeth2{width:28px;height:28px;}
}

/* === ADMIN LOGIN BUNKER OVERRIDES === */
.auth-shell {
  background: #0a0a08 url("../img/bg-bunker.jpg") center center / cover no-repeat scroll !important;
  min-height: 100vh;
}
.panel {
  background: rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(212,148,10,0.25) !important;
  box-shadow: 0 0 30px rgba(0,0,0,0.6), 0 0 15px rgba(212,148,10,0.08) !important;
  border-radius: 4px !important;
}
.brand-header img {
  filter: drop-shadow(0 0 12px rgba(212,148,10,0.3)) !important;
}
.form-group label {
  color: #a89878 !important;
  font-family: 'Share Tech Mono', monospace !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  font-size: 0.75rem !important;
}
.form-group input {
  background: rgba(0,0,0,0.5) !important;
  border: 1px solid rgba(212,148,10,0.2) !important;
  color: #f0e6d0 !important;
  font-family: 'Share Tech Mono', monospace !important;
  border-radius: 3px !important;
  padding: 10px 12px !important;
  transition: border-color 0.3s, box-shadow 0.3s !important;
}
.form-group input:focus {
  border-color: #d4940a !important;
  box-shadow: 0 0 12px rgba(212,148,10,0.2) !important;
  outline: none !important;
}
.form-group input::placeholder {
  color: #5a5040 !important;
}
.btn.primary {
  background: transparent !important;
  border: 1px solid #d4940a !important;
  color: #d4940a !important;
  font-family: 'Bebas Neue', sans-serif !important;
  letter-spacing: 3px !important;
  font-size: 1.1rem !important;
  text-shadow: 0 0 8px rgba(212,148,10,0.3) !important;
  transition: all 0.3s !important;
  border-radius: 3px !important;
  cursor: pointer !important;
}
.btn.primary:hover {
  background: #d4940a !important;
  color: #0a0a08 !important;
  text-shadow: none !important;
  box-shadow: 0 0 25px rgba(212,148,10,0.4) !important;
}
.status {
  color: #d44a0a !important;
  font-family: 'Share Tech Mono', monospace !important;
  text-shadow: 0 0 6px rgba(212,74,10,0.3) !important;
}

/* ═══════════════════════════════════════════════════════════
   BUNKER 66 — MASTER THEME OVERRIDES
   Covers: dashboard, audit, staff-list, staff-edit,
           staff-register, events, badge, forgot-password, logout
   Excludes: scan.html
   ═══════════════════════════════════════════════════════════ */

/* Admin / staff pages only — guest bodies use device-compat + page themes */
body:not(.storefront):not(.portal-page):not(.shop-page):not(.wallet-body):not(.verify-body):not(.bunker-game-body):not(.bunker-terminal-body) {
  background-color: #0a0a08 !important;
  color: #d0c4a8 !important;
  font-family: 'Share Tech Mono', monospace !important;
  margin: 0;
  -webkit-text-size-adjust: 100%;
}

body:not(.storefront):not(.portal-page):not(.shop-page):not(.wallet-body):not(.verify-body):not(.bunker-game-body):not(.bunker-terminal-body)::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  z-index: -1;
  background: url("../img/bg-bunker.jpg") center center no-repeat;
  background-size: cover;
  background-attachment: scroll;
}

/* ── WELCOME BAR (Dashboard header) ── */
.welcome-bar {
  background: rgba(0,0,0,0.4) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-bottom: 1px solid rgba(212,148,10,0.2) !important;
  color: #f0e6d0 !important;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5) !important;
}

/* ── DASHBOARD PANELS ── */
.dash-panels {
  background: transparent !important;
}

.dash-grid {
  gap: 1rem !important;
}

.dash-card {
  background: rgba(0,0,0,0.4) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border: 1px solid rgba(212,148,10,0.2) !important;
  box-shadow: 0 0 12px rgba(0,0,0,0.4) !important;
  border-radius: 4px !important;
  transition: border-color 0.3s, box-shadow 0.3s !important;
}

.dash-card:hover {
  border-color: rgba(212,148,10,0.45) !important;
  box-shadow: 0 0 20px rgba(212,148,10,0.12) !important;
}

/* Card accent borders — amber spectrum */
.dash-card.c-amber {
  border-left: 3px solid #d4940a !important;
}
.dash-card.c-blue {
  border-left: 3px solid #4a90d4 !important;
}
.dash-card.c-cyan {
  border-left: 3px solid #4abfd4 !important;
}
.dash-card.c-rose {
  border-left: 3px solid #d44a6a !important;
}
.dash-card.c-violet {
  border-left: 3px solid #8a4ad4 !important;
}

.dash-icon {
  opacity: 0.7 !important;
  filter: drop-shadow(0 0 4px rgba(212,148,10,0.2)) !important;
}

.dash-label {
  color: #a89878 !important;
  font-family: 'Share Tech Mono', monospace !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-size: 0.7rem !important;
}

.dash-val {
  color: #f0e6d0 !important;
  font-family: 'Bebas Neue', sans-serif !important;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4) !important;
}

.dash-footer {
  background: transparent !important;
  border-top: 1px solid rgba(212,148,10,0.1) !important;
  color: #8a7e68 !important;
}

/* ── SECTION TITLES ── */
.subtitle {
  color: #f0e6d0 !important;
  font-family: 'Bebas Neue', sans-serif !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.6) !important;
  letter-spacing: 2px !important;
}

.sub {
  color: #a89878 !important;
}

/* ── TABLES (Staff List, Audit) ── */
.table, table {
  background: rgba(0,0,0,0.35) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border: 1px solid rgba(212,148,10,0.15) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
}

.table th, table th {
  background: rgba(212,148,10,0.08) !important;
  color: #d4940a !important;
  font-family: 'Share Tech Mono', monospace !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  font-size: 0.7rem !important;
  border-bottom: 1px solid rgba(212,148,10,0.2) !important;
  padding: 12px 14px !important;
  text-shadow: 0 0 6px rgba(212,148,10,0.15) !important;
}

.table td, table td {
  color: #d0c4a8 !important;
  border-bottom: 1px solid rgba(212,148,10,0.06) !important;
  padding: 10px 14px !important;
  font-size: 0.85rem !important;
}

.table tr:hover td, table tr:hover td {
  background: rgba(212,148,10,0.04) !important;
}

.staff-tbl {
  background: transparent !important;
}

.select-row {
  background: rgba(212,148,10,0.06) !important;
  border: 1px solid rgba(212,148,10,0.15) !important;
  border-radius: 3px !important;
}

/* ── FORMS (Staff Edit/Register, Forgot Password) ── */
.form-group {
  margin-bottom: 1.4rem !important;
}

.form-group label {
  display: block !important;
  color: #a89878 !important;
  font-family: 'Share Tech Mono', monospace !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  font-size: 0.7rem !important;
  margin-bottom: 8px !important;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100% !important;
  background: rgba(0,0,0,0.5) !important;
  border: 1px solid rgba(212,148,10,0.2) !important;
  color: #f0e6d0 !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 0.95rem !important;
  border-radius: 3px !important;
  padding: 10px 14px !important;
  transition: border-color 0.3s, box-shadow 0.3s !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: #d4940a !important;
  box-shadow: 0 0 12px rgba(212,148,10,0.2) !important;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #5a5040 !important;
}

.form-group select option {
  background: #0a0a08 !important;
  color: #f0e6d0 !important;
}

.form-actions {
  margin-top: 1.5rem !important;
}

.select-panel {
  background: rgba(0,0,0,0.4) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border: 1px solid rgba(212,148,10,0.15) !important;
  border-radius: 4px !important;
  padding: 1.5rem !important;
}

/* ── BUTTONS ── */
.btn.primary, button.primary {
  background: transparent !important;
  border: 1px solid #d4940a !important;
  color: #d4940a !important;
  font-family: 'Bebas Neue', sans-serif !important;
  letter-spacing: 3px !important;
  font-size: 1.05rem !important;
  text-shadow: 0 0 8px rgba(212,148,10,0.3) !important;
  transition: all 0.3s !important;
  border-radius: 3px !important;
  cursor: pointer !important;
  padding: 10px 24px !important;
}

.btn.primary:hover, button.primary:hover {
  background: #d4940a !important;
  color: #0a0a08 !important;
  text-shadow: none !important;
  box-shadow: 0 0 25px rgba(212,148,10,0.4) !important;
}

.btn.secondary, button.secondary {
  background: transparent !important;
  border: 1px solid rgba(212,148,10,0.3) !important;
  color: #a89878 !important;
  font-family: 'Share Tech Mono', monospace !important;
  letter-spacing: 1px !important;
  transition: all 0.3s !important;
  border-radius: 3px !important;
  cursor: pointer !important;
  padding: 8px 18px !important;
}

.btn.secondary:hover, button.secondary:hover {
  border-color: #d4940a !important;
  color: #d4940a !important;
}

.refresh-btn {
  background: transparent !important;
  border: 1px solid rgba(212,148,10,0.25) !important;
  color: #d4940a !important;
  border-radius: 3px !important;
  cursor: pointer !important;
  transition: all 0.3s !important;
}

.refresh-btn:hover {
  background: rgba(212,148,10,0.1) !important;
  border-color: #d4940a !important;
}

/* ── EVENTS PAGE ── */
.events-row {
  background: rgba(0,0,0,0.35) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border: 1px solid rgba(212,148,10,0.15) !important;
  border-radius: 4px !important;
  padding: 1rem 1.2rem !important;
  margin-bottom: 0.8rem !important;
  transition: border-color 0.3s !important;
}

.events-row:hover {
  border-color: rgba(212,148,10,0.4) !important;
}

.events-row .ev-status {
  font-family: 'Share Tech Mono', monospace !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  border-radius: 2px !important;
}

.events-row .ev-dates {
  color: #8a7e68 !important;
  font-family: 'Share Tech Mono', monospace !important;
}

.events-row .ts {
  color: #6a6050 !important;
  font-size: 0.7rem !important;
}

/* ── BADGE PAGE ── */
.badge-container {
  background: transparent !important;
}

.badge-card {
  background: rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(212,148,10,0.25) !important;
  box-shadow: 0 0 20px rgba(0,0,0,0.5) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}

.badge-avatar-wrap {
  background: rgba(212,148,10,0.05) !important;
  border-bottom: 1px solid rgba(212,148,10,0.15) !important;
}

.badge-avatar {
  border: 2px solid rgba(212,148,10,0.3) !important;
  box-shadow: 0 0 12px rgba(212,148,10,0.15) !important;
}

.badge-emp-name {
  color: #f0e6d0 !important;
  font-family: 'Bebas Neue', sans-serif !important;
  letter-spacing: 2px !important;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4) !important;
}

.badge-emp-role {
  color: #d4940a !important;
  font-family: 'Share Tech Mono', monospace !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  font-size: 0.75rem !important;
}

.badge-emp-title {
  color: #a89878 !important;
}

.badge-footer {
  background: rgba(0,0,0,0.3) !important;
  border-top: 1px solid rgba(212,148,10,0.1) !important;
  color: #6a6050 !important;
}

.badge-actions {
  border-top: 1px solid rgba(212,148,10,0.1) !important;
}

.badge-empty {
  color: #6a6050 !important;
  font-family: 'Share Tech Mono', monospace !important;
}

.avatar-preview {
  border: 2px solid rgba(212,148,10,0.3) !important;
  box-shadow: 0 0 10px rgba(212,148,10,0.1) !important;
}

.avatar-hint {
  color: #6a6050 !important;
  font-size: 0.75rem !important;
}

/* ── AUTH PAGES (Forgot Password, Logout) ── */
.auth-shell {
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
}

.panel {
  background: rgba(0,0,0,0.5) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(212,148,10,0.25) !important;
  box-shadow: 0 0 40px rgba(0,0,0,0.6), 0 0 15px rgba(212,148,10,0.08) !important;
  border-radius: 4px !important;
  padding: 2.5rem 2rem !important;
  max-width: 420px !important;
  width: 100% !important;
}

.brand-header img {
  filter: drop-shadow(0 0 14px rgba(212,148,10,0.35)) !important;
}

/* ── STATUS / MESSAGES ── */
.status {
  color: #d44a0a !important;
  font-family: 'Share Tech Mono', monospace !important;
  text-shadow: 0 0 6px rgba(212,74,10,0.3) !important;
}

.status-msg {
  font-family: 'Share Tech Mono', monospace !important;
  padding: 12px 16px !important;
  border-radius: 3px !important;
  border: 1px solid rgba(212,148,10,0.15) !important;
  background: rgba(0,0,0,0.3) !important;
}

.active {
  color: #DAA520 !important;
  text-shadow: 0 0 6px rgba(218,165,32,0.2) !important;
}

.empty, .placeholder {
  color: #5a5040 !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-style: italic !important;
}

.ts {
  color: #6a6050 !important;
  font-size: 0.72rem !important;
  font-family: 'Share Tech Mono', monospace !important;
}

/* ── SCAN FEED (won't affect scan page if it has own styles) ── */
.scan-feed {
  background: rgba(0,0,0,0.3) !important;
  border: 1px solid rgba(212,148,10,0.1) !important;
  border-radius: 4px !important;
}

/* ── LINKS ── */
a {
  color: #d4940a !important;
  transition: color 0.2s !important;
}

a:hover {
  color: #e8b84a !important;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar {
  width: 6px !important;
}
::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.2) !important;
}
::-webkit-scrollbar-thumb {
  background: rgba(212,148,10,0.25) !important;
  border-radius: 3px !important;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(212,148,10,0.4) !important;
}

/* ── SCANLINE OVERLAY ── */
body::after {
  content: '' !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.03) 2px,
    rgba(0,0,0,0.03) 4px
  ) !important;
  pointer-events: none !important;
  z-index: 9999 !important;
}

/* BADGE AVATAR FRAME */
.badge-avatar-wrap,.avatar-preview{position:relative!important;background:url(../img/badge-frame.png) center/contain no-repeat!important;padding:30px 40px!important;display:inline-block!important;}
.badge-avatar,.avatar-preview img{border-radius:4px!important;border:none!important;}

/* BADGE PAGE OVERRIDES  amber, inline style kills */
.badge-container button, .badge-container .btn, #generate-badge-btn, button[type="submit"] {
  background: linear-gradient(135deg,#d4940a,#b8820a)!important;
  color:#0a0a08!important;
  border:1px solid rgba(212,148,10,0.4)!important;
  font-family:"Bebas Neue",sans-serif!important;
  letter-spacing:2px!important;
  text-transform:uppercase!important;
  border-radius:3px!important;
  cursor:pointer!important;
  text-shadow:none!important;
  box-shadow:0 0 12px rgba(212,148,10,0.15)!important;
}
.badge-container button:hover, #generate-badge-btn:hover {
  background:linear-gradient(135deg,#e0a020,#d4940a)!important;
  box-shadow:0 0 20px rgba(212,148,10,0.3)!important;
}
input:focus, select:focus, textarea:focus {
  border-color:#d4940a!important;
  box-shadow:0 0 14px rgba(212,148,10,0.2)!important;
  outline:none!important;
}
label {
  color:#a89878!important;
  font-family:"Share Tech Mono",monospace!important;
  text-transform:uppercase!important;
  letter-spacing:1.5px!important;
  font-size:0.7rem!important;
}
.badge-container input, .badge-container select {
  background:rgba(0,0,0,0.5)!important;
  border:1px solid rgba(212,148,10,0.2)!important;
  color:#f0e6d0!important;
  font-family:"Share Tech Mono",monospace!important;
  border-radius:3px!important;
  padding:10px 12px!important;
}