/* =========================================================
   JUICEWORKS — HALLOWEEN SPECIAL EDITION
   Full adventurous spooky overhaul
   ========================================================= */

/* ── FESTIVE FONTS ─────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Creepster&family=Playfair+Display:ital,wght@0,700;1,700&display=swap');

/* ── ROOT PALETTE — FULL HALLOWEEN OVERHAUL ────────────── */
:root {
  --navy:        #1A0D2E;   /* deep purple-black */
  --navy-deep:   #0A0010;   /* void black */
  --gold:        #FF6600;   /* vivid pumpkin orange */
  --gold-light:  #FF8822;
  --gold-text:   #CC4400;
  --cream:       #F5EFE8;   /* warm parchment */
  --white:       #FFF8F0;
  --grey-light:  #2A1840;   /* dark purple for light sections */
  --grey-mid:    #9B7BBB;
  --grey-dark:   #E8D5FF;

  /* Halloween extras */
  --hw-orange:   #FF6600;
  --hw-orange-glow: rgba(255,102,0,0.6);
  --hw-purple:   #6B2D8B;
  --hw-purple-mid: #3D1A5C;
  --hw-purple-dark: #1A0D2E;
  --hw-green:    #39FF14;   /* neon slime green for accents */
  --hw-blood:    #8B0000;
  --hw-bone:     #F5EFE8;

  --font-display: 'Creepster', 'Playfair Display', Georgia, serif;
  --shadow-card:  0 4px 24px rgba(107,45,139,0.3);
  --shadow-hover: 0 12px 40px rgba(107,45,139,0.5);
}

/* ── GLOBAL ────────────────────────────────────────────── */
body { background: #0A0010; }

/* Subtle scanline texture over everything */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.03) 2px,
    rgba(0,0,0,0.03) 4px
  );
}

/* ── ANNOUNCEMENT BAR ──────────────────────────────────── */
.nav-announce {
  background: linear-gradient(90deg, #0A0010 0%, #2A0A40 50%, #0A0010 100%) !important;
  color: var(--hw-orange) !important;
  font-size: 13px;
  font-weight: 700;
  border-bottom: 1px solid rgba(255,102,0,0.3) !important;
  letter-spacing: 0.5px;
  animation: announceFlicker 8s ease-in-out infinite;
}
.nav-announce a { color: #FF8822 !important; }
.nav-announce span[aria-hidden] { display: none !important; }

@keyframes announceFlicker {
  0%,88%,100% { opacity: 1; }
  90%         { opacity: 0.7; }
  92%         { opacity: 1; }
  94%         { opacity: 0.5; }
  96%         { opacity: 1; }
}

/* ── NAVIGATION ────────────────────────────────────────── */
nav {
  background: #0D0018 !important;
  border-bottom: 2px solid #FF6600 !important;
  box-shadow: 0 2px 30px rgba(255,102,0,0.2) !important;
}
.nav-logo-text { color: #fff !important; }
.nav-logo-text span { color: #FF6600 !important; }
.nav-links a { color: rgba(255,255,255,0.75) !important; }
.nav-links a:hover { color: #FF8822 !important; background: rgba(255,102,0,0.1) !important; }
.nav-links .nav-cta { background: #FF6600 !important; color: #0A0010 !important; font-weight: 800 !important; }
.nav-links .nav-cta:hover { background: #FF8822 !important; }
.accred-badge { color: #FF6600 !important; border-color: rgba(255,102,0,0.4) !important; background: rgba(255,102,0,0.08) !important; }

/* ── HERO — HAUNTED NIGHT SKY ──────────────────────────── */
.hero {
  background: #050008 !important;
  overflow: hidden;
}
.hero-bg-pattern { display: none !important; }
.hero-grid-lines  { display: none !important; }

/* Moon */
.hero-moon {
  position: absolute;
  top: 8%;
  right: 12%;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFF8D0, #FFEC6E 40%, #D4A017 70%, #8B6800);
  box-shadow:
    0 0 30px 10px rgba(255,220,80,0.4),
    0 0 70px 30px rgba(255,200,50,0.2),
    0 0 140px 60px rgba(255,180,0,0.08);
  z-index: 1;
  animation: moonPulse 4s ease-in-out infinite;
  pointer-events: none;
}
.hero-moon::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 25% 30%, rgba(0,0,0,0.15) 0%, transparent 30%),
    radial-gradient(circle at 60% 60%, rgba(0,0,0,0.1) 0%, transparent 25%),
    radial-gradient(circle at 45% 75%, rgba(0,0,0,0.08) 0%, transparent 20%);
}
@keyframes moonPulse {
  0%,100% { box-shadow: 0 0 30px 10px rgba(255,220,80,0.4), 0 0 70px 30px rgba(255,200,50,0.2), 0 0 140px 60px rgba(255,180,0,0.08); }
  50%     { box-shadow: 0 0 45px 15px rgba(255,220,80,0.5), 0 0 90px 40px rgba(255,200,50,0.25), 0 0 180px 80px rgba(255,180,0,0.12); }
}

/* Fog */
.hero-fog {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 180px;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}
.fog-bar {
  position: absolute;
  bottom: 0; left: -50%; right: -50%;
  border-radius: 50%;
  animation: fogDrift linear infinite;
}
.fog-bar:nth-child(1) {
  height: 80px;
  background: radial-gradient(ellipse 60% 50% at 50% 100%, rgba(40,20,60,0.9) 0%, transparent 70%);
  animation-duration: 20s;
  animation-delay: 0s;
  bottom: -10px;
}
.fog-bar:nth-child(2) {
  height: 60px;
  background: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(50,20,70,0.7) 0%, transparent 70%);
  animation-duration: 28s;
  animation-delay: -8s;
  bottom: 20px;
}
.fog-bar:nth-child(3) {
  height: 50px;
  background: radial-gradient(ellipse 80% 70% at 50% 100%, rgba(30,10,50,0.5) 0%, transparent 70%);
  animation-duration: 35s;
  animation-delay: -14s;
  bottom: 50px;
}
@keyframes fogDrift {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(5%); }
  100% { transform: translateX(0); }
}

/* Spiderweb — top left corner */
.hero-spiderweb {
  position: absolute;
  top: 0; left: 0;
  width: 200px; height: 200px;
  pointer-events: none;
  z-index: 3;
  opacity: 0.5;
}
.hero-spiderweb svg {
  width: 100%; height: 100%;
}

/* Hero text */
.hero-content { position: relative; z-index: 4; }
.hero h1 {
  font-family: 'Creepster', 'Playfair Display', Georgia, serif !important;
  font-size: clamp(42px, 6vw, 72px) !important;
  letter-spacing: 2px !important;
  text-shadow: 0 0 30px rgba(255,102,0,0.4), 0 2px 10px rgba(0,0,0,0.8) !important;
}
.hero h1 em {
  color: #FF6600 !important;
  text-shadow: 0 0 20px rgba(255,102,0,0.6) !important;
  font-style: normal !important;
}
.hero-eyebrow { background: rgba(255,102,0,0.15) !important; border-color: rgba(255,102,0,0.4) !important; }
.hero-eyebrow span { color: #FF8822 !important; }
.hero-dot { background: #FF6600 !important; box-shadow: 0 0 8px rgba(255,102,0,0.6) !important; }
.hero-stat-num { color: #FF6600 !important; text-shadow: 0 0 15px rgba(255,102,0,0.4) !important; }
.hero-brand-card:hover { background: rgba(255,102,0,0.12) !important; border-color: rgba(255,102,0,0.4) !important; }
.brc-badge-hero { background: rgba(255,102,0,0.12) !important; border-color: rgba(255,102,0,0.3) !important; }
.brc-badge-hero strong { color: #FF8822 !important; }
.hero-stats { border-top-color: rgba(255,255,255,0.1) !important; }

/* ── TRUST BAR ─────────────────────────────────────────── */
.trust-bar { background: #0D0018 !important; border-top: 2px solid #FF6600 !important; box-shadow: 0 -4px 20px rgba(255,102,0,0.1) !important; }
.trust-icon { color: #FF6600 !important; }
.trust-item { color: rgba(255,255,255,0.75) !important; }

/* ── SECTION LABELS ────────────────────────────────────── */
.section-label { color: #CC4400 !important; letter-spacing: 4px !important; }
.gold-bar { background: #FF6600 !important; box-shadow: 0 0 10px rgba(255,102,0,0.4) !important; }
.section-title {
  font-family: 'Creepster', 'Playfair Display', Georgia, serif !important;
  letter-spacing: 1px !important;
}

/* ── CAPABILITIES ──────────────────────────────────────── */
.capabilities { background: #0F0520 !important; }
.capabilities .section-title { color: #F5EFE8 !important; }
.capabilities .section-intro { color: rgba(245,239,232,0.65) !important; }
.capabilities .cap-header .section-title { color: #F5EFE8 !important; }
.cap-header p { color: rgba(245,239,232,0.65) !important; }
.cap-icon { background: #1A0D2E !important; box-shadow: 0 0 12px rgba(255,102,0,0.15) !important; }
.cap-card { background: #160A28 !important; border: 1px solid rgba(107,45,139,0.3) !important; }
.cap-card::before { background: #FF6600 !important; }
.cap-card:hover { background: #1E0E38 !important; box-shadow: 0 12px 40px rgba(107,45,139,0.4) !important; border-color: rgba(255,102,0,0.4) !important; }
.cap-card h3 { color: #F5EFE8 !important; }
.cap-card p   { color: rgba(245,239,232,0.6) !important; }

/* ── BRANDS SECTION ────────────────────────────────────── */
.brands-section { background: #050008 !important; }
.brand-tag { background: rgba(255,102,0,0.2) !important; border-color: rgba(255,102,0,0.4) !important; color: #FF8822 !important; }
.brand-card:hover { border-color: rgba(255,102,0,0.5) !important; box-shadow: 0 20px 60px rgba(255,102,0,0.15) !important; }

/* ── CO-PACKING ────────────────────────────────────────── */
.copacking { background: #0A0016 !important; }
.copacking-content .section-title { color: #F5EFE8 !important; }
.copacking-content .section-intro { color: rgba(245,239,232,0.65) !important; }
.copacking-content p { color: rgba(245,239,232,0.65) !important; }
.cp-main-box { background: #1A0D2E !important; border: 1px solid rgba(107,45,139,0.4) !important; }
.cp-main-box::before { background: linear-gradient(90deg, #FF6600 0%, #6B2D8B 100%) !important; }
.cp-stat-num { color: #FF6600 !important; text-shadow: 0 0 12px rgba(255,102,0,0.4) !important; }
.cp-stat-label { color: rgba(245,239,232,0.5) !important; }
.cp-badge { background: rgba(255,102,0,0.15) !important; border-color: rgba(255,102,0,0.3) !important; color: #FF8822 !important; }
.cp-title { color: #fff !important; }
.cp-sub { color: rgba(255,255,255,0.5) !important; }
.process-num { background: #FF6600 !important; color: #0A0010 !important; font-weight: 800 !important; }
.process-text strong { color: #F5EFE8 !important; }
.process-text span   { color: rgba(245,239,232,0.55) !important; }
.process-item { border-bottom-color: rgba(107,45,139,0.2) !important; }

/* ── QUALITY ───────────────────────────────────────────── */
.quality { background: #0F0520 !important; }
.quality .section-title { color: #F5EFE8 !important; }
.quality-inner > div > p { color: rgba(245,239,232,0.65) !important; }
.q-cert-card { background: #1A0D2E !important; border: 1px solid rgba(107,45,139,0.3) !important; }
.q-cert-card strong { color: #FF8822 !important; }
.q-cert-card span { color: rgba(245,239,232,0.5) !important; }
.quality-content ul { border-color: rgba(107,45,139,0.2) !important; }
.quality-content li { color: #F5EFE8 !important; border-bottom-color: rgba(107,45,139,0.15) !important; }
.quality-content li::before { content: '🕷️' !important; font-size: 14px !important; color: unset !important; }

/* ── WHY SECTION ───────────────────────────────────────── */
.why { background: #0A0016 !important; }
.why .section-title { color: #F5EFE8 !important; }
.why .section-intro { color: rgba(245,239,232,0.6) !important; }
.why-icon-wrap { background: linear-gradient(135deg, #1A0D2E 0%, #2E1050 100%) !important; box-shadow: 0 4px 12px rgba(255,102,0,0.15) !important; }
.why-card { background: #160A28 !important; border: 1px solid rgba(107,45,139,0.3) !important; overflow: hidden; }
.why-card h3 { color: #F5EFE8 !important; }
.why-card p   { color: rgba(245,239,232,0.6) !important; }
.why-card:hover { box-shadow: 0 12px 40px rgba(107,45,139,0.4) !important; border-color: rgba(255,102,0,0.3) !important; }

/* ── SECTORS ───────────────────────────────────────────── */
.sectors { background: #0F0520 !important; }
.sectors .section-title { color: #F5EFE8 !important; }
.sectors-inner > div > p { color: rgba(245,239,232,0.65) !important; }
.sector-num { color: #CC4400 !important; }
.sector-item span { color: #F5EFE8 !important; }
.sector-item { border-bottom-color: rgba(107,45,139,0.2) !important; }
.sector-item:hover .arrow { color: #FF6600 !important; }
.sector-card { background: #160A28 !important; border: 1px solid rgba(107,45,139,0.25) !important; }
.sector-card h3 { color: #F5EFE8 !important; }
.sector-card p   { color: rgba(245,239,232,0.6) !important; }
.sector-card:hover { background: #1A0D2E !important; }

/* ── GROUP SECTION ─────────────────────────────────────── */
.group-section { background: #050008 !important; }
.group-text .section-title { color: #F5EFE8 !important; }
.group-text p { color: rgba(245,239,232,0.6) !important; }

/* ── CONTACT ───────────────────────────────────────────── */
.contact { background: #0A0016 !important; }
.contact-info .section-title { color: #F5EFE8 !important; }
.contact-info p { color: rgba(245,239,232,0.65) !important; }
.contact-form { background: #160A28 !important; border: 1px solid rgba(107,45,139,0.3) !important; }
.contact-form h2 { color: #F5EFE8 !important; }
.contact-form > p { color: rgba(245,239,232,0.6) !important; }
.form-group label { color: #F5EFE8 !important; }
.form-group input,.form-group select,.form-group textarea {
  background: #0F0520 !important;
  border-color: rgba(107,45,139,0.4) !important;
  color: #F5EFE8 !important;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus {
  border-color: #FF6600 !important;
  box-shadow: 0 0 0 3px rgba(255,102,0,0.15) !important;
}
.form-submit { background: #FF6600 !important; color: #0A0010 !important; font-weight: 800 !important; }
.form-submit:hover { background: #FF8822 !important; }
.cd-icon { background: #1A0D2E !important; }
.cd-text strong { color: rgba(245,239,232,0.6) !important; }
.cd-text span, .cd-text a { color: #F5EFE8 !important; }
.contact-detail { border-bottom-color: rgba(107,45,139,0.15) !important; }
.social-link { background: #1A0D2E !important; color: #F5EFE8 !important; }
.social-link:hover { background: #FF6600 !important; color: #0A0010 !important; }

/* ── BUTTONS ───────────────────────────────────────────── */
.btn-primary { background: #FF6600 !important; border-color: #FF6600 !important; color: #0A0010 !important; font-weight: 800 !important; box-shadow: 0 4px 15px rgba(255,102,0,0.3) !important; }
.btn-primary:hover { background: #FF8822 !important; border-color: #FF8822 !important; box-shadow: 0 6px 20px rgba(255,102,0,0.4) !important; }
.btn-outline { border-color: rgba(255,102,0,0.5) !important; color: #FF8822 !important; }
.btn-outline:hover { background: rgba(255,102,0,0.1) !important; border-color: #FF6600 !important; }

/* ── FOOTER ────────────────────────────────────────────── */
footer { background: #030006 !important; }
.footer-brand p { color: rgba(245,239,232,0.55) !important; }
.footer-col h3 { color: #FF8822 !important; }
.footer-col a { color: rgba(245,239,232,0.45) !important; }
.footer-col a:hover { color: #FF8822 !important; }
.footer-accred { background: rgba(255,102,0,0.1) !important; border-color: rgba(255,102,0,0.25) !important; color: #FF8822 !important; }
.footer-bottom p { color: rgba(245,239,232,0.45) !important; }
.footer-bottom-links a { color: rgba(245,239,232,0.45) !important; }
.footer-bottom-links a:hover { color: #FF8822 !important; }

.hw-footer-msg {
  text-align: center;
  padding: 20px 16px;
  font-family: 'Creepster', serif;
  font-size: 20px;
  letter-spacing: 1px;
  color: #FF6600;
  background: rgba(255,102,0,0.06);
  border-top: 1px solid rgba(255,102,0,0.2);
  text-shadow: 0 0 15px rgba(255,102,0,0.5);
}

/* ── SEO SECTION ───────────────────────────────────────── */
.seo-content-section { background: #0F0520 !important; border-top-color: rgba(107,45,139,0.2) !important; }
.seo-col h3 { color: #F5EFE8 !important; border-bottom-color: #FF6600 !important; }
.seo-col p, .seo-col li { color: rgba(245,239,232,0.6) !important; }
.seo-col li::before { color: #FF6600 !important; }

/* ── CORNER RIBBON ─────────────────────────────────────── */
.halloween-ribbon {
  position: fixed;
  top: 0; right: 0;
  width: 160px; height: 160px;
  pointer-events: none;
  z-index: 10001;
  overflow: hidden;
}
.halloween-ribbon::before {
  content: "🎃 HALLOWEEN EDITION";
  position: absolute;
  top: 36px; right: -46px;
  width: 200px;
  text-align: center;
  background: #FF6600;
  color: #0A0010;
  font-family: 'Creepster', serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 6px 0;
  transform: rotate(45deg);
  box-shadow: 0 3px 10px rgba(0,0,0,0.6);
}

/* ── BAT ANIMATION (JS-generated) ─────────────────────── */
@keyframes batFlight {
  0%   { left: -80px; transform: translateY(0) scaleX(1); }
  20%  { transform: translateY(-40px) scaleX(1); }
  40%  { transform: translateY(15px)  scaleX(-1); }
  60%  { transform: translateY(-30px) scaleX(-1); }
  80%  { transform: translateY(10px)  scaleX(1); }
  100% { left: calc(110vw); transform: translateY(0) scaleX(1); }
}
@keyframes batFlightRev {
  0%   { left: calc(110vw); transform: translateY(0) scaleX(-1); }
  25%  { transform: translateY(-35px) scaleX(-1); }
  50%  { transform: translateY(20px)  scaleX(1); }
  75%  { transform: translateY(-25px) scaleX(1); }
  100% { left: -80px; transform: translateY(0) scaleX(-1); }
}
@keyframes wingFlap {
  0%,100% { transform: scaleY(1); }
  50%     { transform: scaleY(0.6); }
}
.halloween-bat {
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  user-select: none;
  animation: var(--bat-anim, batFlight) var(--bat-dur, 12s) var(--bat-del, 0s) linear infinite;
  top: var(--bat-top, 200px);
  font-size: var(--bat-size, 20px);
  opacity: var(--bat-op, 0.7);
  filter: drop-shadow(0 0 4px rgba(255,102,0,0.4));
}

/* ── Accessibility: honour reduced-motion preference (WCAG 2.3.3) ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}