:root {
  --noir: #08050f;
  --noir-2: #0e0a1c;
  --noir-3: #171029;
  --crimson: #ff2079;
  --crimson-light: #ff5fb0;
  --gold: #00f0ff;
  --gold-light: #6ffcff;
  --ivory: #eef0ff;
  --ivory-dim: rgba(238, 240, 255, 0.66);
  --line: rgba(0, 240, 255, 0.22);

  --noir-rgb: 8, 5, 15;
  --crimson-rgb: 255, 32, 121;
  --crimson-light-rgb: 255, 95, 176;
  --gold-rgb: 0, 240, 255;
  --ivory-rgb: 238, 240, 255;
}

body {
  background-image:
    linear-gradient(rgba(0,240,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,32,121,0.05) 1px, transparent 1px);
  background-size: 42px 42px;
}

body::before { display: none; }

.btn-crimson {
  color: #08050f;
  font-weight: 700;
  box-shadow: 0 0 18px rgba(255,32,121,0.55), 0 0 2px rgba(255,32,121,0.9);
  text-shadow: none;
}
.btn-gold {
  color: #08050f;
  font-weight: 700;
  box-shadow: 0 0 18px rgba(0,240,255,0.5), 0 0 2px rgba(0,240,255,0.9);
}
.btn-outline-light { border-color: rgba(0,240,255,0.5); }
.btn-outline-light:hover { border-color: var(--gold-light); box-shadow: 0 0 14px rgba(0,240,255,0.35); }

header.site-header {
  background: rgba(8,5,15,0.82);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}

.eyebrow {
  color: var(--gold-light);
  text-shadow: 0 0 10px rgba(0,240,255,0.6);
}

/* BIG LOGO HERO */
.logo-hero {
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  padding: 100px 24px 70px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,32,121,0.22), transparent 60%),
    radial-gradient(circle at 20% 90%, rgba(0,240,255,0.16), transparent 55%),
    var(--noir);
}
.logo-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 3px);
  pointer-events: none;
}
.logo-hero .logo-hero-mark {
  max-width: 640px;
  width: 80%;
  margin: 0 auto 28px;
  filter:
    drop-shadow(0 0 18px rgba(0,240,255,0.55))
    drop-shadow(0 0 38px rgba(255,32,121,0.4));
  position: relative;
  z-index: 1;
}
.logo-hero .logo-hero-mark img { width: 100%; display: block; }
.logo-hero .eyebrow { position: relative; z-index: 1; }
.logo-hero p.sub { position: relative; z-index: 1; color: var(--ivory-dim); max-width: 620px; margin: 18px auto 0; font-size: 15.5px; }
.logo-hero .hero-cta { position: relative; z-index: 1; margin-top: 30px; }

.hero h1 em,
.logo-hero h1 em {
  background: linear-gradient(120deg, var(--crimson-light), var(--gold-light));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section-head h2 { text-shadow: 0 0 20px rgba(0,240,255,0.15); }

.sense-card, .service-card, .brand-card {
  border: 1px solid var(--line);
  background: var(--noir-2);
}
.sense-card:hover, .service-card:hover { border-color: rgba(255,32,121,0.4); box-shadow: 0 0 24px rgba(255,32,121,0.12); }

.clip-showcase { border: 1px solid var(--line); box-shadow: 0 0 24px rgba(0,240,255,0.1); }

.shop-grid .product-card, .portfolio-item { border: 1px solid var(--line); }

.contact-method .icon { color: var(--gold-light); text-shadow: 0 0 8px rgba(0,240,255,0.7); }

footer.site-footer { background: var(--noir); border-top: 1px solid var(--line); }

.cta-banner {
  background:
    radial-gradient(circle at 30% 20%, rgba(255,32,121,0.14), transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(0,240,255,0.12), transparent 55%),
    linear-gradient(180deg, var(--noir-2), var(--noir));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}