/* =========================================================
   ELITE PVP — PRO HUD THEME (override layer)
   Loaded after style.css + admin.css. Angular clipped panels,
   techno display type, neon-green energy, scan/glow motion.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700;800;900&family=Rajdhani:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

:root{
  --bg:#050807; --bg-soft:#080d0b; --bg-alt:#0a110e;
  --panel:#0b1210; --panel-2:#0f1815;
  --border:#16251f; --panel-border:#16251f;
  --red:#00ff6a; --red-2:#00c853; --red-dim:#08331d; --orange:#7dffb8;
  --green:#00ff6a;
  --gradient:linear-gradient(115deg,#00c853 0%,#00ff6a 55%,#b6ffd6 100%);
  --gradient-text:linear-gradient(100deg,#00ff6a 0%,#b6ffd6 100%);
  --font-display:"Orbitron","Segoe UI",sans-serif;
  --font-body:"Inter","Segoe UI",system-ui,sans-serif;
  --font-hud:"Rajdhani","Inter",sans-serif;
  --radius:0; --radius-lg:0;
  --cut:14px;
  --glow:0 0 24px rgba(0,255,106,.35);
  --shadow-glow:0 0 80px rgba(0,255,106,.2);
}

/* ---------- Atmosphere ---------- */
body{
  background:
    radial-gradient(900px 520px at 78% -8%, rgba(0,255,106,.10), transparent 60%),
    radial-gradient(700px 480px at 0% 100%, rgba(0,255,106,.05), transparent 60%),
    var(--bg);
}
body::before{ /* circuit grid */
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(0,255,106,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,255,106,.035) 1px,transparent 1px);
  background-size:64px 64px;
  opacity:.7; transform:translateZ(0);
}
.site-watermark{ opacity:.035; }
::-webkit-scrollbar-thumb{ background:#12301f; border-radius:0; }
::-webkit-scrollbar-thumb:hover{ background:var(--red-2); }
::selection{ background:rgba(0,255,106,.35); }

h1,h2,h3,.page-title,.brand-text,.stat-box .num{ font-family:var(--font-display); }

/* ---------- Clip helpers ---------- */
.btn,.card,.product-card,.highlight-card,.event-card,.event-stat,.staff-card,
.team-card,.status-showcase,.stat-box,.modal-box,.apply-card,.chip,.toast,
.creator-card,.empty-state,.status-ip-box,.cta-banner{
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
}
.card,.product-card,.highlight-card,.event-card,.staff-card,.team-card,
.event-stat,.creator-card,.status-showcase{
  border:0; position:relative;
  background:
    linear-gradient(180deg,rgba(0,255,106,.05),transparent 40%),
    linear-gradient(180deg,var(--panel),var(--bg-soft));
  box-shadow:inset 0 0 0 1px rgba(0,255,106,.14);
}
/* corner tick */
.card::after,.product-card::after,.highlight-card::after,.event-card::after,
.staff-card::after,.team-card::after,.status-showcase::after{
  content:""; position:absolute; top:0; right:0; width:var(--cut); height:var(--cut);
  background:linear-gradient(225deg,var(--red) 50%,transparent 50%); opacity:.7; pointer-events:none;
}
.product-card:hover,.highlight-card:hover,.event-card:hover,.staff-card:hover,
.team-card:hover,.creator-card:hover{
  box-shadow:inset 0 0 0 1px rgba(0,255,106,.6), 0 0 30px rgba(0,255,106,.12);
  border-color:transparent;
}

/* ---------- Navbar ---------- */
.navbar{
  background:rgba(5,8,7,.82); padding:12px 36px;
  border-bottom:1px solid rgba(0,255,106,.12);
}
.navbar::after{ background:linear-gradient(90deg,transparent,var(--red),transparent); opacity:.7;
   }
@keyframes navPulse{ 0%,100%{opacity:.25} 50%{opacity:.9} }
.brand-logo{ border-radius:0; border:0; clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px));
  background:linear-gradient(135deg,#0c2418,#040806); box-shadow:none; ); }
.brand-text{ font-weight:900; font-size:1.15rem; letter-spacing:.14em; }
.brand-text .accent{ color:var(--red); text-shadow:0 0 14px rgba(0,255,106,.7); }
.nav-links a{
  font-family:var(--font-hud); font-weight:700; font-size:.95rem; letter-spacing:.14em;
  border-radius:0; padding:10px 16px;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
}
.nav-links a:hover{ background:rgba(0,255,106,.07); color:#fff; }
.nav-links a.active{ background:rgba(0,255,106,.12); color:var(--red); text-shadow:0 0 12px rgba(0,255,106,.6); }
.nav-links a.active::after{ left:16px; right:16px; bottom:2px; box-shadow:0 0 10px var(--red); }
.admin-link{ border-radius:0; font-family:var(--font-hud); letter-spacing:.14em; }
.user-pill{ border-radius:0; background:var(--panel); border-color:rgba(0,255,106,.2); }
.user-pill img{ border-radius:0; }
.user-menu{ border-radius:0; }

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--font-display); font-weight:700; font-size:.74rem; letter-spacing:.16em;
  border-radius:0; padding:15px 28px; overflow:hidden; isolation:isolate;
}
.btn::before{ /* shine sweep */
  content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%; z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg); transition:left .6s var(--ease);
}
.btn:hover::before{ left:130%; }
.btn-primary{ color:#02130a; background:var(--gradient);
  box-shadow:none; ); }
.btn-primary:hover{ ) brightness(1.06); transform:translateY(-2px); box-shadow:none; }
.btn-outline{ background:rgba(0,255,106,.05); border:1px solid rgba(0,255,106,.45); color:var(--red); }
.btn-outline:hover{ background:rgba(0,255,106,.14); border-color:var(--red); box-shadow:inset 0 0 20px rgba(0,255,106,.15); }
.btn-sm{ padding:10px 16px; font-size:.64rem; }
.btn-danger{ border-radius:0; }

/* ---------- Titles ---------- */
.page{ animation:pageIn .6s var(--ease) both; }
@keyframes pageIn{ from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none} }
.page-title{ font-weight:900; font-size:2rem; letter-spacing:.08em; }
.page-title .icon{ border-radius:0; background:rgba(0,255,106,.08); border:1px solid rgba(0,255,106,.4);
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%); box-shadow:inset 0 0 18px rgba(0,255,106,.2); }
.page-header{ position:relative; padding-bottom:18px; }
.page-header::after{ content:""; position:absolute; left:0; bottom:0; width:120px; height:2px;
  background:var(--gradient); box-shadow:0 0 12px var(--red); }
.page-sub{ font-family:var(--font-hud); font-size:1.1rem; letter-spacing:.04em; }

/* ---------- HERO ---------- */
.hero{
  justify-content:flex-start; text-align:left; min-height:min(94vh,900px);
  padding:150px max(32px,calc((100vw - 1220px)/2)) 120px;
}
.hero-media::after{
  background:
    linear-gradient(90deg,rgba(4,7,6,.97) 0%,rgba(4,7,6,.82) 38%,rgba(4,7,6,.25) 75%,rgba(4,7,6,.55) 100%),
    linear-gradient(180deg,rgba(4,7,6,.4),transparent 30%,#050807 100%);
}
.hero-media video,.hero-media .hero-image-bg{ opacity:.8; }
.hero-media::before{ /* green tint over media */
  content:""; position:absolute; inset:0; z-index:1; background:rgba(0,40,15,.35); pointer-events:none;
}
.hero-logo-bg{ background-position:right 8% center; background-size:min(52%,640px); opacity:.16;
  ); }
.hero::after{ height:2px; background:linear-gradient(90deg,transparent,var(--red),transparent);
  box-shadow:0 0 18px var(--red); animation:scanH 8s linear infinite; will-change:transform; }
@keyframes scanH{ 0%{transform:translateY(0);opacity:0} 8%{opacity:1} 92%{opacity:1} 100%{transform:translateY(80vh);opacity:0} }
.hero-inner{ margin:0; max-width:760px; }
.hero-inner > *{ animation:heroIn .9s var(--ease) both; }
.hero-inner > :nth-child(1){ animation-delay:.05s } .hero-inner > :nth-child(2){ animation-delay:.15s }
.hero-inner > :nth-child(3){ animation-delay:.28s } .hero-inner > :nth-child(4){ animation-delay:.4s }
.hero-inner > :nth-child(5){ animation-delay:.52s } .hero-inner > :nth-child(6){ animation-delay:.64s }
@keyframes heroIn{ from{opacity:0; transform:translateY(28px); filter:blur(6px)} to{opacity:1; transform:none; filter:none} }
.hero-logo{ width:96px; height:96px; padding:10px; margin-bottom:22px; border-radius:0;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  background:linear-gradient(160deg,rgba(0,255,106,.16),rgba(0,0,0,.4)); box-shadow:none;
  ); }
.status-pill{ margin:0 0 24px; border-radius:0; font-family:var(--font-hud); font-size:.85rem; letter-spacing:.2em;
  border-color:rgba(0,255,106,.45); color:var(--red); background:rgba(0,255,106,.06);
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px)); }
.hero h1{
  font-family:var(--font-display); font-weight:900; font-size:clamp(2.4rem,6.2vw,5rem);
  line-height:1.04; letter-spacing:.02em; text-shadow:none;
}
.hero h1 .line2{ background:linear-gradient(100deg,#00ff6a,#b6ffd6 60%,#00ff6a);
  background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  );  }
@keyframes shine{ to{ background-position:-200% 0; } }
.hero p{ margin:22px 0 34px; max-width:520px; font-family:var(--font-hud); font-weight:600; font-size:1.35rem;
  letter-spacing:.2em; text-transform:uppercase; color:#cfe9db; }
.hero-actions{ justify-content:flex-start; margin-bottom:52px; }
.hero-stats{ justify-content:flex-start; gap:14px; }
.stat-box{ border:0; border-radius:0; padding:18px 30px; min-width:150px; text-align:left;
  background:linear-gradient(180deg,rgba(0,255,106,.08),rgba(0,0,0,.45));
  box-shadow:inset 0 0 0 1px rgba(0,255,106,.25); }
.stat-box:hover{ box-shadow:inset 0 0 0 1px var(--red), 0 0 24px rgba(0,255,106,.2); }
.stat-box .num{ font-size:1.7rem; font-weight:800; color:var(--red); text-shadow:0 0 16px rgba(0,255,106,.55); }
.stat-box .label{ font-family:var(--font-hud); font-size:.85rem; letter-spacing:.2em; }
.hero-video-controls,.hero-music-controls{ border-radius:0; border-color:rgba(0,255,106,.25); }
.hvc-btn{ border-radius:0; }
.hero-caption{ font-family:var(--font-hud); letter-spacing:.18em; color:var(--muted-2); }

/* corner brackets around hero */
.hero-inner::before{ content:""; position:absolute; left:-20px; top:-20px; width:46px; height:46px;
  border-left:2px solid var(--red); border-top:2px solid var(--red); opacity:.7; ); }

/* ---------- Sections ---------- */
.home-section h2{ font-weight:900; font-size:1.6rem; letter-spacing:.1em; position:relative; padding-bottom:16px; }
.home-section h2::after{ content:"" !important; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:90px; height:2px; background:var(--gradient); box-shadow:0 0 12px var(--red); }
.home-section .section-sub{ font-family:var(--font-hud); font-size:1.1rem; letter-spacing:.06em; }
.home-section h2 .accent{ text-shadow:0 0 18px rgba(0,255,106,.6); }

.status-left,.status-right{ position:relative; }
.status-showcase::before{ height:2px; box-shadow:0 0 14px var(--red);  background-size:200% 100%; }
@keyframes barSlide{ 0%,100%{background-position:0 0} 50%{background-position:100% 0} }
.status-badge,.status-metric-label,.status-ip-label{ font-family:var(--font-hud); font-size:.9rem; letter-spacing:.18em; }
.status-metric-value{ font-family:var(--font-display); font-size:1.15rem; color:var(--red); }
.status-bar{ border-radius:0; height:10px; background:rgba(0,255,106,.08);
  clip-path:polygon(0 0,100% 0,calc(100% - 6px) 100%,0 100%); }
.status-bar-fill{ border-radius:0; box-shadow:0 0 14px var(--red);
  background:repeating-linear-gradient(115deg,#00c853 0 8px,#00ff6a 8px 16px);  }
@keyframes barMove{ to{ background-position:32px 0; } }
.status-ip-box{ border-radius:0; border:0; background:rgba(0,255,106,.05); box-shadow:inset 0 0 0 1px rgba(0,255,106,.25);
  color:var(--red); letter-spacing:.06em; }
.status-copy-btn{ border-radius:0; font-family:var(--font-display); font-size:.74rem; letter-spacing:.16em;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  box-shadow:none; ); }
.players-online-list{ border-radius:0; border-color:rgba(0,255,106,.16); }
.player-row{ border-radius:0; }
.player-row:hover{ background:rgba(0,255,106,.06); }
.player-dot{ box-shadow:0 0 10px var(--red); background:var(--red); }

/* ---------- Shop / content cards ---------- */
.chip{ border-radius:0; border:0; font-family:var(--font-hud); font-size:.95rem; letter-spacing:.12em;
  background:rgba(0,255,106,.04); box-shadow:inset 0 0 0 1px rgba(0,255,106,.2); }
.chip:hover:not(.active){ box-shadow:inset 0 0 0 1px var(--red); color:#fff; }
.chip.active{ color:#02130a; box-shadow:0 0 18px rgba(0,255,106,.45); }
.chip .count{ border-radius:0; }
.product-img,.highlight-thumb{ background-color:#06100b; }
.product-img::after{ background:linear-gradient(180deg,transparent 40%,rgba(5,8,7,.9)); }
.product-img{ transition:transform .5s var(--ease); }
.product-card{ overflow:hidden; }
.product-card:hover .product-img{ transform:scale(1.06); }
.product-card .product-img{ margin:0; }
.product-title{ font-family:var(--font-display); font-size:.95rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.product-price{ font-family:var(--font-display); font-size:1.15rem; color:var(--red); text-shadow:0 0 14px rgba(0,255,106,.5); }
.product-footer,.social-row{ border-top-color:rgba(0,255,106,.14); }
.badge{ border-radius:0; font-family:var(--font-hud); font-size:.78rem; letter-spacing:.12em; }
.event-img{ border-radius:0; clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%); }
.event-info h3{ font-family:var(--font-display); font-size:1rem; letter-spacing:.06em; text-transform:uppercase; }
.event-stat .num{ font-family:var(--font-display); text-shadow:0 0 18px rgba(0,255,106,.5); }
.event-stat .label,.stat-box .label{ font-family:var(--font-hud); font-size:.9rem; letter-spacing:.18em; }
.staff-avatar,.team-avatar{ border-radius:0; clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px)); }
.staff-avatar{ border:0; box-shadow:0 0 0 2px var(--red-2); }
.team-name{ font-family:var(--font-display); font-size:.95rem; letter-spacing:.05em; text-transform:uppercase; }
.team-badge,.social-badge{ border-radius:0; }
.reaction-btn{ border-radius:0; }
.creator-card{ border:0; }
.creator-card.live{ box-shadow:inset 0 0 0 2px var(--red), 0 0 40px rgba(0,255,106,.25); }
.cta-banner{ border-radius:0; color:#02130a; }
.cta-banner h3{ font-family:var(--font-display); letter-spacing:.06em; }
.cta-banner .btn{ background:#02130a; color:var(--red); }
.cta-banner .btn:hover{ background:#06210f; }

/* ---------- Forms ---------- */
.field label{ font-family:var(--font-hud); font-size:.88rem; letter-spacing:.16em; color:#8fb3a1; }
.field input,.field textarea,.field select{ border-radius:0; background:rgba(0,255,106,.025); border-color:#183326; }
.field input:focus,.field textarea:focus,.field select:focus{ border-color:var(--red); box-shadow:0 0 0 3px rgba(0,255,106,.12), 0 0 18px rgba(0,255,106,.15); }
.yesno-btn{ border-radius:0; font-family:var(--font-hud); font-size:.95rem; letter-spacing:.12em; }
.yesno-btn.selected{ color:#02130a; }

/* ---------- Modal / toast ---------- */
.modal-overlay{ background:rgba(2,5,4,.82);  }
.modal-box{ border:0; box-shadow:inset 0 0 0 1px rgba(0,255,106,.3); border-radius:0; }
.modal-header{ border-bottom-color:rgba(0,255,106,.18); }
.modal-header h3{ font-family:var(--font-display); letter-spacing:.1em; text-transform:uppercase; font-size:.9rem; }
.pm-method{ border-radius:0; }
.toast{ border:0; border-left:3px solid var(--red); border-radius:0; box-shadow:inset 0 0 0 1px rgba(0,255,106,.15), 0 16px 40px rgba(0,0,0,.6); }

/* ---------- Footer ---------- */
.site-footer{ background:linear-gradient(180deg,transparent,rgba(0,255,106,.04)); border-top:1px solid rgba(0,255,106,.15); position:relative; }
.site-footer::before{ content:""; position:absolute; top:-1px; left:0; width:100%; height:1px;
  background:linear-gradient(90deg,transparent,var(--red),transparent); opacity:.6; }

/* ---------- Scroll reveal (driven by motion.js) ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:var(--d,0s); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Admin panel carry-over ---------- */
.admin-sidebar{ border-radius:0; border:0; box-shadow:inset 0 0 0 1px rgba(0,255,106,.16);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%); }
.admin-nav a{ border-radius:0; font-family:var(--font-hud); font-size:1rem; letter-spacing:.1em; }
.admin-brand{ font-family:var(--font-display); letter-spacing:.1em; font-size:1.05rem; }
.admin-nav a.active{ box-shadow:inset 2px 0 0 var(--red); }

@media (max-width:900px){
  .hero{ text-align:center; padding-top:120px; justify-content:center; }
  .hero-inner{ margin:0 auto; } .hero-actions,.hero-stats{ justify-content:center; }
  .hero p{ margin-left:auto; margin-right:auto; }
  .hero-inner::before{ display:none; }
  .navbar{ padding:12px 18px; }
}
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; }
}

/* =========================================================
   PERFORMANCE LAYER — keeps the look, drops the GPU cost
   ========================================================= */
.navbar,.stat-box,.status-pill,.hero-video-controls,.hero-music-controls,
.hero-logo,.modal-overlay,.user-pill{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
.navbar{ background:rgba(5,8,7,.96); }
.modal-overlay{ background:rgba(2,5,4,.9); }
.hero-logo-bg{ animation:none !important; filter:none !important; }
.hero::before{ -webkit-mask-image:none; mask-image:none; opacity:.35; }
.hero{ contain:paint; }
.hero-media video{ transform:translateZ(0); }
.btn::before{ display:none; }                     /* shine sweep */
.btn:hover{ transform:translateY(-1px); }
.status-bar-fill{ background:var(--gradient); }
.status-bar-fill,.status-showcase::before{ animation:none !important; }
.card::before{ transition:none; }
.product-card:hover .product-img{ transform:none; }
.product-card,.highlight-card,.event-card,.staff-card,.team-card,.creator-card,.stat-box,.btn{
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
/* skip rendering of off-screen sections */
.home-section,.staff-group,.site-footer{ content-visibility:auto; contain-intrinsic-size:auto 600px; }
/* reveal: lighter, no blur */
.reveal{ transition:opacity .45s ease, transform .45s ease; transition-delay:var(--d,0s); will-change:opacity,transform; }
.reveal.in{ will-change:auto; }
@keyframes heroIn{ from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:none} }
@media (max-width:900px){
  body::before,.hero::before,.hero::after,.site-watermark{ display:none; }
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* =========================================================
   HERO KEY-ART (Elite PvP character background)
   ========================================================= */
.hero-art{
  position:absolute; inset:0; z-index:0;
  background-repeat:no-repeat; background-size:cover; background-position:right center;
  transform-origin:80% 50%; will-change:transform;
  animation:artDrift 28s ease-in-out infinite alternate;
}
@keyframes artDrift{ from{ transform:scale(1); } to{ transform:scale(1.045); } }
.hero-art-fx{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg,rgba(5,8,7,.98) 0%,rgba(5,8,7,.95) 34%,rgba(5,8,7,.72) 48%,rgba(5,8,7,.18) 62%,rgba(5,8,7,0) 74%),
    linear-gradient(180deg,rgba(5,8,7,.65) 0%,rgba(5,8,7,0) 24%,rgba(5,8,7,0) 66%,#050807 100%),
    radial-gradient(520px 460px at 84% 62%,rgba(0,255,106,.16),transparent 70%);
}
.hero-art-fx::after{ /* neon floor line */
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--red) 30%,var(--red) 70%,transparent);
  box-shadow:0 0 18px var(--red); opacity:.8;
}
.hero-art-fx::before{ /* HUD corner bracket, bottom-right */
  content:""; position:absolute; right:max(24px,3vw); bottom:34px; width:54px; height:54px;
  border-right:2px solid var(--red); border-bottom:2px solid var(--red); opacity:.75;
  box-shadow:6px 6px 14px -8px var(--red);
}
/* the generic overlay from before would dim the character — swap it out when art is present */
.hero-media:has(.hero-art)::after{ background:none; }
.hero-media:has(.hero-art)::before{ display:none; }

@media (max-width:900px){
  .hero-art{ background-position:72% center; animation:none; }
  .hero-art-fx{
    background:
      linear-gradient(180deg,rgba(5,8,7,.8) 0%,rgba(5,8,7,.62) 45%,rgba(5,8,7,.9) 100%);
  }
  .hero-art-fx::before{ display:none; }
}
@media (prefers-reduced-motion:reduce){ .hero-art{ animation:none; } }

/* =========================================================
   HERO V2 — CINEMATIC KEY-ART LAYOUT (Elite PvP)
   The artwork already carries the logo + character, so the
   page keeps it clean and puts the call-to-action in a
   compact HUD block in the lower-left. Mobile gets its own
   character-focused crop.
   ========================================================= */
.hero:has(.hero-art){
  align-items:flex-end; justify-content:flex-start; text-align:left;
  min-height:clamp(620px, calc(100svh - 72px), 960px);
  padding:96px max(32px,calc((100vw - 1320px)/2)) 52px;
  background:#050807;
}
.hero-art{
  background-image:url('/assets/hero-art.jpg?v=3');
  background-position:right center;
  filter:contrast(1.08) saturate(1.15) brightness(1.06);
  animation:artIn 1.6s cubic-bezier(.2,.7,.2,1) both, artDrift 30s ease-in-out 1.6s infinite alternate;
}
@keyframes artIn{ from{ opacity:0; transform:scale(1.07); } to{ opacity:1; transform:scale(1); } }

/* light vignette (keeps the baked-in logo visible) + legibility floor for the CTA block */
.hero-art-fx{
  background:
    linear-gradient(180deg,rgba(5,8,7,.55) 0%,rgba(5,8,7,0) 14%,rgba(5,8,7,0) 62%,rgba(5,8,7,.62) 82%,#050807 100%),
    linear-gradient(90deg,rgba(5,8,7,.55) 0%,rgba(5,8,7,0) 20%,rgba(5,8,7,0) 84%,rgba(5,8,7,.40) 100%),
    radial-gradient(620px 520px at 82% 58%,rgba(0,255,106,.14),transparent 70%);
}
/* film grain + edge vignette (also hides upscaling softness) */
.hero-media:has(.hero-art)::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:1;
  background:
    radial-gradient(ellipse at 58% 45%,transparent 60%,rgba(0,0,0,.4) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.55'/></svg>");
  background-size:auto,160px 160px;
  opacity:.4;
}
.hero-art-fx::before{ right:max(28px,3vw); bottom:30px; width:46px; height:46px; }

/* CTA block */
.hero:has(.hero-art) .hero-inner{
  position:static; margin:0; max-width:680px; display:flex; flex-direction:column; align-items:flex-start;
}
.hero:has(.hero-art) .hero-inner::before{ display:none; }
.hero:has(.hero-art) .hero-logo{ display:none; }
/* brand is in the artwork: keep the H1 for SEO / screen readers only */
.hero:has(.hero-art) h1{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* live status pill pinned top-left as a HUD indicator */
.hero:has(.hero-art) .status-pill{
  position:absolute; top:30px; left:max(32px,calc((100vw - 1320px)/2)); margin:0;
  background:rgba(5,8,7,.72);
}
.hero:has(.hero-art) .hero-inner > p{
  position:relative; margin:0 0 22px; padding-left:56px; max-width:none;
  font-size:1.05rem; letter-spacing:.34em; color:#e6f5ee; text-shadow:0 2px 14px rgba(0,0,0,.8);
}
.hero:has(.hero-art) .hero-inner > p::before{
  content:""; position:absolute; left:0; top:50%; width:42px; height:2px;
  background:var(--gradient); box-shadow:0 0 12px var(--red);
}
.hero:has(.hero-art) .hero-actions{ margin-bottom:18px; gap:12px; }
.hero:has(.hero-art) .hero-actions .btn{ padding:14px 26px; }
.hero:has(.hero-art) .hero-stats{ gap:10px; }
.hero:has(.hero-art) .stat-box{
  min-width:112px; padding:11px 22px;
  background:linear-gradient(180deg,rgba(0,255,106,.10),rgba(5,8,7,.78));
}
.hero:has(.hero-art) .stat-box .num{ font-size:1.3rem; }
.hero:has(.hero-art) .stat-box .label{ font-size:.78rem; }
.hero:has(.hero-art) ~ .hero-caption,
.hero-caption{ padding-top:18px; }

/* short laptop screens: tighten so the CTA never climbs over the logo */
@media (max-height:820px) and (min-width:901px){
  .hero:has(.hero-art){ padding-bottom:36px; }
  .hero:has(.hero-art) .hero-inner > p{ display:none; }
  .hero:has(.hero-art) .stat-box{ padding:9px 18px; }
}

/* mobile / portrait: character-focused crop, content at the bottom */
@media (max-width:900px){
  .hero:has(.hero-art){
    min-height:clamp(600px, calc(100svh - 64px), 820px);
    padding:90px 20px 34px; justify-content:center; text-align:center;
  }
  .hero-art{
    background-image:url('/assets/hero-art-mobile.jpg?v=3'), url('/assets/hero-art.jpg?v=3');
    background-position:center top, 78% center; background-size:cover, cover;
  }
  .hero-art-fx{
    background:
      linear-gradient(180deg,rgba(5,8,7,.65) 0%,rgba(5,8,7,0) 18%,rgba(5,8,7,0) 42%,rgba(5,8,7,.88) 72%,#050807 100%),
      radial-gradient(420px 360px at 60% 30%,rgba(0,255,106,.14),transparent 70%);
  }
  .hero:has(.hero-art) .hero-inner{ align-items:center; max-width:100%; width:100%; }
  .hero:has(.hero-art) .status-pill{ left:0; right:0; margin:0 auto; width:max-content; top:22px; white-space:nowrap; }
  .hero:has(.hero-art) .hero-inner > p{ padding-left:0; font-size:.9rem; letter-spacing:.26em; }
  .hero:has(.hero-art) .hero-inner > p::before{ display:none; }
  .hero:has(.hero-art) .hero-actions{ justify-content:center; }
  .hero:has(.hero-art) .hero-stats{ justify-content:center; }
  .hero:has(.hero-art) .stat-box{ min-width:92px; padding:10px 14px; text-align:center; }
}
@media (prefers-reduced-motion:reduce){ .hero-art{ animation:none; } }

/* ROOT-CAUSE FIX: `.hero > *{position:relative}` (style.css) was overriding the
   background layer's position:absolute, collapsing .hero-media to 0x0 so no
   background (image/video) could ever show. Re-assert the intended positioning. */
.hero > .hero-media{ position:absolute; inset:0; z-index:0; }
.hero > .hero-video-controls,
.hero > .hero-music-controls{ position:absolute; }

/* =========================================================
   HERO V3 — CENTERED COMMAND PANEL
   One unified glass-style HUD dock, centered at the bottom of
   the key art: [status] [tagline + buttons] [stats].
   ========================================================= */
.hero:has(.hero-art){
  justify-content:center; align-items:flex-end; text-align:center;
  padding:96px 24px 44px;
}
.hero:has(.hero-art) .hero-inner{
  position:relative; margin:0 auto; width:min(1080px,100%); max-width:none;
  display:grid; align-items:center; justify-items:center; text-align:center;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  grid-template-areas:"tag tag tag" "status cta stats";
  column-gap:28px; row-gap:18px;
  padding:22px 34px 24px;
  background:linear-gradient(180deg,rgba(9,16,13,.80),rgba(5,8,7,.93));
  box-shadow:inset 0 0 0 1px rgba(0,255,106,.20), 0 24px 70px rgba(0,0,0,.65), 0 0 60px rgba(0,255,106,.07);
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));
}
/* neon top edge + centre notch */
.hero:has(.hero-art) .hero-inner::before{
  display:block; content:""; position:absolute; left:0; right:0; top:0; width:auto; height:2px; border:0; opacity:1;
  background:linear-gradient(90deg,transparent,var(--red) 22%,var(--red) 78%,transparent);
  box-shadow:0 0 16px var(--red);
}
.hero:has(.hero-art) .hero-inner > p{
  grid-area:tag; margin:0; padding:0; display:flex; align-items:center; gap:18px;
  font-size:1.02rem; letter-spacing:.42em; color:#eaf7f0; white-space:nowrap;
}
.hero:has(.hero-art) .hero-inner > p::before,
.hero:has(.hero-art) .hero-inner > p::after{
  content:""; position:static; display:block; width:64px; height:1px; transform:none;
  background:linear-gradient(90deg,transparent,var(--red)); box-shadow:0 0 10px var(--red);
}
.hero:has(.hero-art) .hero-inner > p::after{ background:linear-gradient(270deg,transparent,var(--red)); }
.hero:has(.hero-art) .status-pill{
  grid-area:status; position:static; margin:0; justify-self:start; width:auto;
}
.hero:has(.hero-art) .hero-actions{ grid-area:cta; margin:0; gap:12px; justify-content:center; flex-wrap:nowrap; }
.hero:has(.hero-art) .hero-actions .btn{ padding:15px 30px; white-space:nowrap; }
.hero:has(.hero-art) .hero-stats{
  grid-area:stats; justify-self:end; gap:0; flex-wrap:nowrap;
}
.hero:has(.hero-art) .stat-box{
  min-width:92px; padding:4px 22px; text-align:center; background:none; box-shadow:none !important;
  clip-path:none; border-left:1px solid rgba(0,255,106,.22);
}
.hero:has(.hero-art) .stat-box:first-child{ border-left:0; }
.hero:has(.hero-art) .stat-box .num{ font-size:1.25rem; }
.hero:has(.hero-art) .stat-box .label{ font-size:.74rem; margin-top:2px; }

@media (max-height:820px) and (min-width:901px){
  .hero:has(.hero-art){ padding-bottom:28px; }
  .hero:has(.hero-art) .hero-inner{ padding:16px 30px 18px; row-gap:12px; }
  .hero:has(.hero-art) .hero-inner > p{ display:flex; font-size:.9rem; }
  .hero:has(.hero-art) .hero-actions .btn{ padding:12px 24px; }
}
@media (max-width:1100px) and (min-width:901px){
  .hero:has(.hero-art) .hero-inner{ grid-template-columns:1fr; grid-template-areas:"tag" "cta" "status" "stats"; }
  .hero:has(.hero-art) .status-pill,.hero:has(.hero-art) .hero-stats{ justify-self:center; }
}
@media (max-width:900px){
  .hero:has(.hero-art){ padding:90px 14px 24px; justify-content:center; }
  .hero:has(.hero-art) .hero-inner{
    grid-template-columns:1fr; grid-template-areas:"status" "tag" "cta" "stats";
    padding:20px 16px 18px; row-gap:14px;
  }
  .hero:has(.hero-art) .status-pill{ justify-self:center; left:auto; right:auto; top:auto; width:max-content; }
  .hero:has(.hero-art) .hero-inner > p{ font-size:.78rem; letter-spacing:.26em; gap:10px; }
  .hero:has(.hero-art) .hero-inner > p::before,.hero:has(.hero-art) .hero-inner > p::after{ width:28px; }
  .hero:has(.hero-art) .hero-actions{ flex-wrap:wrap; width:100%; }
  .hero:has(.hero-art) .hero-actions .btn{ flex:1 1 100%; justify-content:center; }
  .hero:has(.hero-art) .hero-stats{ justify-self:center; width:100%; justify-content:center; }
  .hero:has(.hero-art) .stat-box{ min-width:0; flex:1; padding:4px 8px; }
}

/* V3 fit pass: wider dock, no wrapping */
.hero:has(.hero-art) .hero-inner{ width:min(1260px,100%); padding:22px 30px 24px; column-gap:22px; grid-template-columns:1fr auto 1fr; }
.hero:has(.hero-art) .status-pill{ white-space:nowrap; }
.hero:has(.hero-art) .stat-box{ min-width:84px; padding:4px 18px; }
@media (max-width:1240px) and (min-width:901px){
  .hero:has(.hero-art) .hero-inner{ width:min(1000px,100%); grid-template-columns:auto 1fr; grid-template-areas:"tag tag" "cta cta" "status stats"; }
  .hero:has(.hero-art) .status-pill{ justify-self:start; }
  .hero:has(.hero-art) .hero-stats{ justify-self:end; }
}


/* =========================================================
   SHOP GALLERY — multi-picture cards + lightbox
   ========================================================= */
.product-img.has-gallery{ cursor:zoom-in; }
.product-photos{
  position:absolute; left:12px; bottom:12px; z-index:2; display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; font-family:var(--font-hud); font-weight:700; font-size:.85rem; letter-spacing:.1em; color:#fff;
  background:rgba(5,8,7,.8); box-shadow:inset 0 0 0 1px rgba(0,255,106,.5); pointer-events:none;
}
.product-photos svg{ width:14px; height:14px; color:var(--red); flex-shrink:0; }
.product-zoom{
  position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-display); font-weight:700; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:#fff;
  background:rgba(2,8,5,.58); opacity:0; transition:opacity .18s ease; pointer-events:none;
}
.product-zoom svg{ width:18px; height:18px; color:var(--red); flex-shrink:0; }
.product-img.has-gallery:hover .product-zoom,
.product-img.has-gallery:focus-visible .product-zoom{ opacity:1; }
.product-img.has-gallery:focus-visible{ outline:2px solid var(--red); outline-offset:-2px; }
@media (hover:none){ .product-zoom{ display:none; } }

body.gallery-open{ overflow:hidden; }
.gallery-overlay{
  position:fixed; inset:0; z-index:400; display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(2,5,4,.95); animation:galFade .18s ease both;
}
@keyframes galFade{ from{ opacity:0; } to{ opacity:1; } }
.gallery-box{ width:min(1100px,100%); max-height:100%; display:flex; flex-direction:column; gap:14px; }
.gallery-top{ display:flex; align-items:center; gap:16px; }
.gallery-title{
  flex:1; min-width:0; font-family:var(--font-display); font-weight:800; font-size:1rem; letter-spacing:.08em;
  text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.gallery-price{ margin-left:14px; color:var(--red); text-shadow:0 0 14px rgba(0,255,106,.5); }
.gallery-counter{ font-family:var(--font-hud); font-size:1.05rem; letter-spacing:.2em; color:var(--muted); white-space:nowrap; }
.gallery-close{
  width:42px; height:42px; padding:0; font-size:1.7rem; line-height:1; color:#fff; cursor:pointer; border:0;
  background:rgba(0,255,106,.06); box-shadow:inset 0 0 0 1px rgba(0,255,106,.35); transition:background .15s, color .15s;
}
.gallery-close:hover,.gallery-close:focus-visible{ background:rgba(0,255,106,.2); color:var(--red); outline:0; }
.gallery-stage{
  position:relative; display:flex; align-items:center; justify-content:center; height:min(62vh,640px); overflow:hidden;
  background:#040807; box-shadow:inset 0 0 0 1px rgba(0,255,106,.22);
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
}
.gallery-stage img{
  max-width:100%; max-height:100%; object-fit:contain; display:block; user-select:none; -webkit-user-drag:none;
  transition:opacity .15s ease;
}
.gallery-stage img.swap{ opacity:0; }
.gallery-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:46px; height:68px; padding:0; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:#fff; background:rgba(5,8,7,.72);
  box-shadow:inset 0 0 0 1px rgba(0,255,106,.35); transition:background .15s, color .15s;
}
.gallery-nav svg{ width:24px; height:24px; }
.gallery-nav:hover,.gallery-nav:focus-visible{ background:rgba(0,255,106,.22); color:var(--red); outline:0; }
.gallery-nav.prev{ left:12px; }
.gallery-nav.next{ right:12px; }
.gallery-thumbs{ display:flex; gap:10px; overflow-x:auto; padding:3px 3px 8px; scrollbar-width:thin; scrollbar-color:#12301f transparent; }
.gallery-thumb{
  flex:0 0 auto; width:108px; height:70px; padding:0; border:0; cursor:pointer; background:#06100b; opacity:.5;
  outline:1px solid rgba(0,255,106,.2); outline-offset:0; transition:opacity .15s, outline-color .15s;
}
.gallery-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.gallery-thumb:hover{ opacity:.9; }
.gallery-thumb.active{ opacity:1; outline:2px solid var(--red); box-shadow:0 0 18px rgba(0,255,106,.35); }
.gallery-foot{ display:flex; justify-content:flex-end; }
@media (max-width:700px){
  .gallery-overlay{ padding:12px; }
  .gallery-stage{ height:min(52vh,460px); }
  .gallery-nav{ width:38px; height:54px; }
  .gallery-thumb{ width:84px; height:56px; }
  .gallery-title{ font-size:.85rem; }
  .gallery-foot .btn{ width:100%; justify-content:center; }
}