/*
Theme Name: Next Dimension Records
Theme URI: https://next-dimension.ch
Author: Next Dimension Records
Author URI: https://next-dimension.ch
Description: Official WordPress Theme for Next Dimension Records – Swiss Hard Dance Label. Custom post types for releases and events, video hero background, and a dark minimal design.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ndr
Tags: music, dark, one-page, custom-background
*/

/* ═══════════════════════════════════════
   RESET & VARS
   ═══════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root {
  --black:    #050505;
  --dark:     #0c0c0c;
  --dark2:    #111111;
  --dark3:    #181818;
  --white:    #f4f4f4;
  --silver:   #b8b8b8;
  --silver-l: #dedede;
  --silver-d: #6e6e6e;
  --off:      #888888;
  --muted:    #444444;
  --border:   rgba(255,255,255,0.12);
  --border2:  rgba(255,255,255,0.05);
  --font:     'Barlow Condensed', sans-serif;
  --body:     'Barlow', sans-serif;
  --pirulen:  'Pirulen', 'Barlow Condensed', sans-serif;
}

html { scroll-behavior: smooth; }
body {
  background: var(--black);
  color: var(--white);
  font-family: var(--body);
  font-size: 16px;
  overflow-x: hidden;
}
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--dark); }
::-webkit-scrollbar-thumb { background: var(--silver); }

/* grain overlay */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9998; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 250px;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; }

/* ═══════════════════════════════════════
   NAV – left tabs, centered logo like Scantraxx
   ═══════════════════════════════════════ */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 999;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  background: rgba(5,5,5,0.92);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Left: toggle + tabs */
.nav-left {
  display: flex; align-items: center; gap: 0;
  flex: 1;
}

/* Hamburger toggle */
.nav-toggle {
  display: flex; align-items: center; gap: 10px;
  background: none; border: none; color: var(--white);
  cursor: pointer; padding: 8px 16px 8px 0;
  border-right: 1px solid var(--border);
  margin-right: 20px;
}
.hamburger {
  display: flex; flex-direction: column; gap: 4px; width: 20px;
}
.hamburger span {
  display: block; height: 2px; background: var(--white);
  transition: all 0.3s;
}
.hamburger span:nth-child(2) { width: 14px; }
.toggle-label {
  font-family: var(--font); font-size: 11px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
}

/* Tab links */
.nav-tabs {
  display: flex; gap: 24px; list-style: none; align-items: center;
}
.nav-tabs a {
  font-family: var(--font); font-size: 11px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--silver-d); transition: color 0.2s;
  white-space: nowrap;
}
.nav-tabs a:hover { color: var(--white); }

/* Center: Logo/Wordmark */
.nav-center {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 0;
}
.nav-center .wm {
  height: 16px;
  object-fit: contain;
  opacity: 0.95;
}

/* Right: icon links */
.nav-right-icons {
  display: flex; gap: 6px; align-items: center;
}
.nav-icon {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  font-family: var(--font); font-size: 9px; font-weight: 700;
  letter-spacing: 0.5px; color: var(--silver-d);
  transition: all 0.2s;
}
.nav-icon:hover { border-color: var(--white); color: var(--white); }

/* Mobile: hide tabs, show toggle */
@media (max-width: 1100px) {
  .nav-tabs { display: none; }
  .nav-tabs.open {
    display: flex; flex-direction: column;
    position: absolute; top: 60px; left: 0; right: 0;
    background: rgba(5,5,5,0.98);
    border-bottom: 1px solid var(--border);
    padding: 20px 32px; gap: 16px;
    backdrop-filter: blur(20px);
  }
  .nav-tabs.open a { font-size: 14px; letter-spacing: 3px; }
}
@media (min-width: 1101px) {
  /* On desktop, hide hamburger toggle */
  .nav-toggle { display: none; }
}

/* ═══════════════════════════════════════
   HERO
   ═══════════════════════════════════════ */
.hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.hero-video-wrap { position: absolute; inset: 0; z-index: 0; }
.hero-video-wrap video {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.35; filter: saturate(0) brightness(0.5);
}
.hero-video-wrap .fallback {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 60% 40%, rgba(200,200,200,0.04) 0%, transparent 70%),
    linear-gradient(160deg, #0a0a0a 0%, #080808 100%);
}
.hero-grid {
  position: absolute; inset: 0; z-index: 1;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(0,0,0,0.8) 0%, transparent 100%);
}
.hero-vignette {
  position: absolute; inset: 0; z-index: 2;
  background:
    radial-gradient(ellipse 100% 100% at 50% 50%, rgba(5,5,5,0.3) 0%, rgba(5,5,5,0.7) 100%),
    linear-gradient(180deg, rgba(5,5,5,0.8) 0%, rgba(5,5,5,0.15) 15%, rgba(5,5,5,0.15) 80%, rgba(5,5,5,0.95) 100%);
}
.hero-scan { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.scan-line {
  position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  animation: scan 7s linear infinite; opacity: 0;
}
.scan-line:nth-child(2) { animation-delay: 2.8s; }
.scan-line:nth-child(3) { animation-delay: 5.2s; }
@keyframes scan {
  0%{top:-2px;opacity:0} 5%{opacity:1} 95%{opacity:0.4} 100%{top:100%;opacity:0}
}

.hero-content {
  position: relative; z-index: 3; width: 100%;
  text-align: center; display: flex; flex-direction: column; align-items: center;
  justify-content: center;
  padding: 120px 40px 80px;
  min-height: 100vh;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 14px; margin-bottom: 32px;
  font-family: var(--font); font-size: 11px; font-weight: 600;
  letter-spacing: 5px; color: var(--silver); text-transform: uppercase;
}
.hero-eyebrow::before { content: ''; display: block; width: 36px; height: 1px; background: var(--silver); }
.hero-eyebrow::after  { content: ''; display: block; width: 36px; height: 1px; background: var(--silver); }

/* Big centered logo mark */
.hero-logo-big {
  display: block;
  width: clamp(120px, 20vw, 240px);
  height: auto;
  object-fit: contain;
  margin-bottom: 20px;
  opacity: 0.9;
}

.hero-schriftzug {
  display: block; width: 100%; max-width: 700px; height: auto; object-fit: contain;
  margin-bottom: 8px;
}
.hero-records {
  font-family: var(--font); font-size: clamp(22px,3vw,38px); font-weight: 300;
  letter-spacing: 10px; color: var(--silver-d); text-transform: uppercase; margin-bottom: 36px;
}
.hero-sub { font-size: 15px; color: var(--off); max-width: 500px; line-height: 1.7; margin-bottom: 42px; text-align: center; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* ═══════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 30px; font-family: var(--font); font-weight: 700;
  font-size: 12px; letter-spacing: 3px; text-transform: uppercase;
  cursor: pointer; border: none; transition: all 0.22s;
}
.btn-white {
  background: var(--white); color: var(--black);
  clip-path: polygon(7px 0%,100% 0%,calc(100% - 7px) 100%,0% 100%);
}
.btn-white:hover { background: var(--silver-l); }
.btn-outline { background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,0.25); }
.btn-outline:hover { border-color: var(--white); color: var(--white); }

/* ═══════════════════════════════════════
   TICKER
   ═══════════════════════════════════════ */
.ticker-wrap { background: var(--white); padding: 10px 0; overflow: hidden; white-space: nowrap; }
.ticker { display: inline-flex; animation: tick 30s linear infinite; }
.ticker-item {
  font-family: var(--font); font-size: 12px; font-weight: 700;
  letter-spacing: 4px; color: var(--black); padding: 0 36px; text-transform: uppercase;
}
.tdot { color: rgba(0,0,0,0.25); }
@keyframes tick { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ═══════════════════════════════════════
   SECTIONS
   ═══════════════════════════════════════ */
.ndr-section { padding: 100px 80px; }
.sec-label {
  font-family: var(--font); font-size: 10px; font-weight: 600;
  letter-spacing: 5px; color: var(--silver); text-transform: uppercase; margin-bottom: 10px;
}
.sec-title {
  font-family: var(--font); font-size: clamp(40px,5.5vw,68px); font-weight: 800;
  letter-spacing: 2px; color: var(--white); line-height: 1; text-transform: uppercase;
}
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 56px; }
.sec-more {
  font-family: var(--font); font-size: 11px; font-weight: 600; letter-spacing: 3px;
  color: var(--muted); text-transform: uppercase; display: flex; align-items: center; gap: 8px; transition: color 0.2s;
}
.sec-more::after { content: '→'; font-size: 15px; }
.sec-more:hover { color: var(--white); }
.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border) 25%, var(--border) 75%, transparent);
  margin: 0 80px;
}
.bg-dark { background: var(--dark); }
.bg-dark2 { background: var(--dark2); }
.bg-black { background: var(--black); }

/* ═══════════════════════════════════════
   FEATURED RELEASE
   ═══════════════════════════════════════ */
.feat-grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 520px; }
.feat-visual {
  position: relative; display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: #080808;
}
.feat-visual .bg-lines {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 50px 50px;
}
.feat-visual::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 65% 65% at 50% 50%, rgba(255,255,255,0.05) 0%, transparent 70%);
}
.feat-logo { position: relative; z-index: 1; width: 220px; height: 220px; object-fit: contain; opacity: 0.65; }
.feat-thumb { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.feat-info {
  padding: 70px 60px; display: flex; flex-direction: column; justify-content: center;
  border-left: 1px solid var(--border); background: var(--dark2);
}
.feat-pill {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px;
  font-family: var(--font); font-size: 10px; font-weight: 600;
  letter-spacing: 4px; color: var(--silver); text-transform: uppercase;
}
.feat-pill span { width: 7px; height: 7px; background: var(--white); animation: blink 2s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.25} }
.feat-title {
  font-family: var(--font); font-size: clamp(36px,4vw,60px); font-weight: 800;
  letter-spacing: 2px; line-height: 0.92; color: var(--white); text-transform: uppercase; margin-bottom: 10px;
}
.feat-artist {
  font-family: var(--font); font-size: 22px; font-weight: 400;
  letter-spacing: 1.5px; color: var(--silver-d); text-transform: uppercase; margin-bottom: 32px;
}
.feat-meta {
  display: flex; gap: 28px; margin-bottom: 36px;
  padding-top: 24px; border-top: 1px solid var(--border2);
}
.fm-label { font-family: var(--font); font-size: 9px; font-weight: 600; letter-spacing: 3px; color: var(--muted); text-transform: uppercase; margin-bottom: 4px; }
.fm-val { font-family: var(--font); font-size: 16px; font-weight: 700; letter-spacing: 1px; color: var(--white); text-transform: uppercase; }

/* ═══════════════════════════════════════
   STATS
   ═══════════════════════════════════════ */
.stats-row {
  background: var(--dark3); display: grid; grid-template-columns: repeat(4,1fr);
  padding: 52px 80px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.stat { text-align: center; padding: 0 20px; border-right: 1px solid var(--border2); }
.stat:last-child { border-right: none; }
.stat-n {
  font-family: var(--font); font-size: 56px; font-weight: 800;
  letter-spacing: 2px; color: var(--white); line-height: 1;
}
.stat-n sup { font-size: 22px; color: var(--silver); vertical-align: super; }
.stat-l { font-family: var(--font); font-size: 10px; font-weight: 600; letter-spacing: 4px; color: var(--muted); text-transform: uppercase; margin-top: 6px; }

/* ═══════════════════════════════════════
   RELEASES GRID
   ═══════════════════════════════════════ */
.rel-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); gap: 2px; }
.rel-card {
  position: relative; aspect-ratio: 1; overflow: hidden; cursor: pointer;
  background: var(--dark2);
}
.rel-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.04) 100%);
  opacity: 0; transition: opacity 0.3s;
}
.rel-card:hover::after { opacity: 1; }
.rel-card a { display: block; width: 100%; height: 100%; }
.rel-thumb { width: 100%; height: 100%; object-fit: cover; }
.rel-icon {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
.rel-icon img { width: 70px; height: 70px; object-fit: contain; opacity: 0.14; }
.rel-over {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgba(5,5,5,0.97) 0%, rgba(5,5,5,0.25) 55%, transparent 100%);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 16px 18px;
}
.rel-artist { font-family: var(--font); font-size: 9px; font-weight: 700; letter-spacing: 3px; color: var(--silver); text-transform: uppercase; margin-bottom: 3px; }
.rel-title { font-family: var(--font); font-size: 20px; font-weight: 800; letter-spacing: 0.5px; color: var(--white); line-height: 1.1; text-transform: uppercase; }
.rel-tag {
  display: inline-block; margin-top: 7px;
  font-family: var(--font); font-size: 9px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15); color: var(--silver-d); padding: 2px 7px;
}
.rel-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0.8);
  width: 48px; height: 48px; border: 1px solid rgba(255,255,255,0.4);
  display: flex; align-items: center; justify-content: center; z-index: 2;
  color: var(--white); font-size: 18px; opacity: 0; transition: all 0.3s;
  background: rgba(5,5,5,0.75);
  clip-path: polygon(5px 0%,100% 0%,calc(100% - 5px) 100%,0% 100%);
}
.rel-card:hover .rel-play { opacity: 1; transform: translate(-50%,-50%) scale(1); }

/* B&W tonal release backgrounds (when no thumbnail) */
.rc0{background:linear-gradient(145deg,#0a0a0a,#181818,#252525)}
.rc1{background:linear-gradient(145deg,#050505,#101010,#1c1c1c)}
.rc2{background:linear-gradient(145deg,#0c0c0c,#1a1a1a,#282828)}
.rc3{background:linear-gradient(145deg,#070707,#131313,#202020)}
.rc4{background:linear-gradient(145deg,#0a0a0a,#161616,#222222)}
.rc5{background:linear-gradient(145deg,#060606,#0f0f0f,#1b1b1b)}
.rc6{background:linear-gradient(145deg,#0b0b0b,#191919,#262626)}
.rc7{background:linear-gradient(145deg,#080808,#141414,#1e1e1e)}

/* ═══════════════════════════════════════
   ARTISTS
   ═══════════════════════════════════════ */
.art-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; }
.art-card { position: relative; aspect-ratio: 2/3; overflow: hidden; cursor: pointer; }
.art-bg { position: absolute; inset: 0; transition: transform 0.5s cubic-bezier(.25,.46,.45,.94); }
.art-card:hover .art-bg { transform: scale(1.06); }
.art-bg img { width: 100%; height: 100%; object-fit: cover; }
.art-sil { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; }
.art-sil svg { width: 70%; opacity: 0.07; }
.art-over {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 25%, rgba(5,5,5,0.99) 100%);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 28px 26px;
}
.art-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--silver), transparent);
  opacity: 0; z-index: 2; transition: opacity 0.3s;
}
.art-card:hover::before { opacity: 1; }
.art-badge { font-family: var(--font); font-size: 9px; font-weight: 700; letter-spacing: 3px; color: var(--silver); text-transform: uppercase; margin-bottom: 6px; }
.art-name { font-family: var(--font); font-size: 36px; font-weight: 800; letter-spacing: 1.5px; color: var(--white); line-height: 1; text-transform: uppercase; margin-bottom: 5px; }
.art-genre { font-family: var(--font); font-size: 11px; font-weight: 500; letter-spacing: 2.5px; color: var(--muted); text-transform: uppercase; margin-bottom: 18px; }
.art-socs { display: flex; gap: 8px; opacity: 0; transform: translateY(8px); transition: all 0.3s; }
.art-card:hover .art-socs { opacity: 1; transform: translateY(0); }
.sl {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.2); font-family: var(--font); font-size: 10px; font-weight: 700;
  color: var(--silver-d); transition: all 0.2s;
}
.sl:hover { border-color: var(--white); color: var(--white); background: rgba(255,255,255,0.06); }

/* artist bg colors */
.a0{background:radial-gradient(ellipse at 42% 30%,#282828,#060606)}
.a1{background:radial-gradient(ellipse at 58% 25%,#1e1e1e,#050505)}
.a2{background:radial-gradient(ellipse at 46% 35%,#242424,#070707)}
.a3{background:radial-gradient(ellipse at 50% 28%,#1a1a1a,#040404)}
.a4{background:radial-gradient(ellipse at 54% 26%,#222222,#060606)}
.a5{background:radial-gradient(ellipse at 42% 38%,#1c1c1c,#050505)}

/* ═══════════════════════════════════════
   EVENTS
   ═══════════════════════════════════════ */
.evt-list { display: flex; flex-direction: column; }
.evt-row {
  display: grid; grid-template-columns: 100px 1fr auto; align-items: center;
  gap: 36px; padding: 28px 4px; border-bottom: 1px solid var(--border2); cursor: pointer; transition: all 0.2s;
}
.evt-row:first-child { border-top: 1px solid var(--border2); }
.evt-row:hover { background: rgba(255,255,255,0.02); padding-left: 14px; }
.evt-day { font-family: var(--font); font-size: 48px; font-weight: 800; color: var(--white); line-height: 1; }
.evt-mo { font-family: var(--font); font-size: 10px; font-weight: 600; letter-spacing: 3px; color: var(--silver); text-transform: uppercase; }
.evt-name { font-family: var(--font); font-size: 26px; font-weight: 700; letter-spacing: 1px; color: var(--white); text-transform: uppercase; margin-bottom: 5px; }
.evt-venue { font-family: var(--font); font-size: 11px; font-weight: 500; letter-spacing: 2px; color: var(--muted); text-transform: uppercase; display: flex; align-items: center; gap: 7px; }
.evt-venue::before { content: '◆'; font-size: 6px; color: var(--silver); }

/* ═══════════════════════════════════════
   MERCH
   ═══════════════════════════════════════ */
.merch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.merch-img {
  position: relative; background: var(--dark2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; padding: 36px;
}
.merch-img::before { content:''; position:absolute; top:-1px; left:-1px; width:28px; height:28px; border-top:2px solid var(--silver); border-left:2px solid var(--silver); }
.merch-img::after  { content:''; position:absolute; bottom:-1px; right:-1px; width:28px; height:28px; border-bottom:2px solid var(--silver); border-right:2px solid var(--silver); }
.merch-live {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
  font-family: var(--font); font-size: 10px; font-weight: 700; letter-spacing: 4px;
  color: var(--silver); text-transform: uppercase;
}
.merch-live::before { content:''; width:7px; height:7px; background:var(--white); animation: blink 1.8s ease-in-out infinite; }
.merch-name { font-family:var(--font); font-size:clamp(32px,4vw,52px); font-weight:800; letter-spacing:2px; line-height:0.92; color:var(--white); text-transform:uppercase; margin-bottom:10px; }
.merch-sub { font-family:var(--font); font-size:20px; font-weight:400; letter-spacing:1px; color:var(--silver-d); text-transform:uppercase; margin-bottom:22px; }
.merch-desc { font-size:15px; color:var(--off); line-height:1.7; margin-bottom:24px; max-width:380px; }
.merch-price { font-family:var(--font); font-size:40px; font-weight:800; color:var(--white); letter-spacing:1px; margin-bottom:20px; }
.merch-price small { font-size:16px; color:var(--muted); font-weight:400; margin-right:4px; }
.sizes { display:flex; gap:8px; margin-bottom:28px; flex-wrap:wrap; }
.sz {
  width:42px; height:42px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); font-family:var(--font); font-size:13px; font-weight:700;
  color:var(--muted); cursor:pointer; transition:all 0.2s; background:transparent;
}
.sz:hover,.sz.on { border-color:var(--white); color:var(--white); background:rgba(255,255,255,0.05); }

/* ═══════════════════════════════════════
   DEMO FORM
   ═══════════════════════════════════════ */
.demo-inner { max-width: 640px; margin: 0 auto; text-align: center; }
.demo-desc { font-size: 16px; color: var(--off); line-height: 1.7; margin: 14px 0 40px; }
.ndr-form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-f { display: flex; flex-direction: column; gap: 5px; }
.form-f label { font-family:var(--font); font-size:9px; font-weight:700; letter-spacing:3px; color:var(--muted); text-transform:uppercase; }
.form-f input,.form-f textarea,.form-f select {
  background:var(--dark); border:1px solid var(--border2); color:var(--white);
  font-family:var(--body); font-size:15px; padding:12px 16px; outline:none; transition:border-color 0.2s; width:100%;
}
.form-f input:focus,.form-f textarea:focus,.form-f select:focus { border-color:rgba(255,255,255,0.4); }
.form-f textarea { resize:vertical; min-height:90px; }
.form-f select option { background:var(--dark); }

/* ═══════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════ */
.site-footer { background: var(--dark); border-top: 1px solid var(--border); }
.footer-top { padding: 64px 80px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; }
.footer-logo-wrap { display:flex; align-items:center; margin-bottom:16px; }
.footer-logo-wrap .mark { height:40px; width:40px; object-fit:contain; }
.footer-logo-wrap .wm { height:16px; object-fit:contain; margin-left:10px; }
.footer-tag { font-family:var(--font); font-size:10px; font-weight:600; letter-spacing:4px; color:var(--silver-d); text-transform:uppercase; margin-bottom:14px; display:block; }
.footer-desc { font-size:14px; color:var(--muted); line-height:1.7; margin-bottom:24px; max-width:250px; }
.footer-socs { display:flex; gap:8px; }
.fsoc { width:34px; height:34px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border2); font-family:var(--font); font-size:10px; font-weight:700; color:var(--muted); transition:all 0.2s; }
.fsoc:hover { border-color:var(--white); color:var(--white); }
.footer-col h5 { font-family:var(--font); font-size:10px; font-weight:700; letter-spacing:4px; color:var(--white); text-transform:uppercase; margin-bottom:22px; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:11px; }
.footer-col ul a { font-size:14px; color:var(--muted); transition:color 0.2s; display:flex; align-items:center; gap:7px; }
.footer-col ul a::before { content:'//'; font-family:var(--font); font-size:9px; color:var(--silver-d); font-weight:700; }
.footer-col ul a:hover { color:var(--white); }
.footer-bottom { padding:22px 80px; border-top:1px solid var(--border2); display:flex; align-items:center; justify-content:space-between; }
.footer-bottom p { font-family:var(--font); font-size:10px; font-weight:500; letter-spacing:2px; color:var(--muted); text-transform:uppercase; }
.footer-bottom .s { color:var(--silver); }

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */
@media (max-width: 980px) {
  .ndr-section { padding: 60px 24px; }
  .hero-content { padding: 100px 24px 60px; }
  .feat-grid { grid-template-columns: 1fr; }
  .feat-visual { min-height: 260px; }
  .stats-row { grid-template-columns: 1fr 1fr; padding: 36px 24px; }
  .stat { border-right: none; border-bottom: 1px solid var(--border2); padding-bottom: 24px; }
  .stat:nth-child(3),.stat:nth-child(4) { border-bottom: none; }
  .merch-grid { grid-template-columns: 1fr; }
  .art-grid { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; padding: 40px 24px; }
  .footer-bottom { flex-direction: column; gap: 8px; padding: 18px 24px; }
  .divider { margin: 0 24px; }
  .evt-row { grid-template-columns: 80px 1fr; }
  .evt-row .btn { display: none; }
  .form-row { grid-template-columns: 1fr; }
  .nav-right-icons { gap: 4px; }
  .nav-icon { width: 30px; height: 30px; font-size: 8px; }
}