/* ============================================
   DAVE'S HOT SAUCES — Ultra Retro Diner
   ============================================ */

/* --- CSS Variables --- */
:root {
  --red: #C41E3A;
  --red-dark: #8B1A2B;
  --red-light: #E63950;
  --teal: #00A99D;
  --teal-dark: #007F76;
  --teal-light: #33C4B8;
  --cream: #FFF5E1;
  --cream-dark: #F0E4CC;
  --chrome: #A8A9AD;
  --chrome-light: #D1D3D6;
  --chrome-dark: #6D6E71;
  --dark: #0D0D0D;
  --dark-soft: #1A1A1A;
  --orange: #FF6B2B;
  --orange-hot: #FF4500;
  --green-mild: #2E8B57;
  --gold: #DAA520;
  --pink-neon: #FF2D78;
  --check-light: #F5F0E1;
  --check-dark: #E8DFC8;
  --shadow: rgba(26, 26, 26, 0.15);
  --shadow-heavy: rgba(26, 26, 26, 0.3);

  --font-display: 'Rye', 'Georgia', serif;
  --font-script: 'Allura', cursive;
  --font-body: 'Libre Baskerville', 'Georgia', serif;
  --font-typewriter: 'Special Elite', cursive;

  /* Neon glow shadows */
  --neon-red: 0 0 7px rgba(196,30,58,0.8), 0 0 10px rgba(196,30,58,0.6), 0 0 21px rgba(196,30,58,0.4), 0 0 42px rgba(196,30,58,0.2);
  --neon-teal: 0 0 7px rgba(0,169,157,0.8), 0 0 10px rgba(0,169,157,0.6), 0 0 21px rgba(0,169,157,0.4);
  --neon-gold: 0 0 7px rgba(218,165,32,0.8), 0 0 14px rgba(218,165,32,0.5), 0 0 28px rgba(218,165,32,0.3);
}

/* --- Reset & Base --- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  background-color: var(--cream);
  color: var(--dark);
  line-height: 1.7;
  font-weight: 400;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: var(--red);
  color: var(--cream);
}

/* --- Scanline Overlay --- */
.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.02) 2px,
    rgba(0, 0, 0, 0.02) 4px
  );
  mix-blend-mode: multiply;
}

/* --- Checkerboard Pattern --- */
.checkerboard {
  background-image:
    linear-gradient(45deg, var(--check-dark) 25%, transparent 25%),
    linear-gradient(-45deg, var(--check-dark) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--check-dark) 75%),
    linear-gradient(-45deg, transparent 75%, var(--check-dark) 75%);
  background-size: 40px 40px;
  background-position: 0 0, 0 20px, 20px -20px, -20px 0px;
  background-color: var(--check-light);
}

/* --- Vintage Noise Texture --- */
.vintage-texture {
  position: relative;
}
.vintage-texture::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* --- Section Titles --- */
.section-script {
  font-family: var(--font-script);
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  color: var(--red);
  margin-bottom: 0.25rem;
  letter-spacing: 0.02em;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 5vw, 3rem);
  color: var(--dark);
  letter-spacing: 0.04em;
  line-height: 1.15;
}

.section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 5rem 1.5rem;
  position: relative;
  z-index: 1;
}

/* --- Dividers --- */
.about-divider,
.menu-divider,
.heat-divider,
.reviews-divider,
.contact-divider {
  width: 100px;
  height: 3px;
  background: var(--red);
  margin: 1rem 0 2rem;
  position: relative;
  overflow: visible;
}

.about-divider::before,
.menu-divider::before,
.heat-divider::before,
.reviews-divider::before,
.contact-divider::before {
  content: '◆';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--red);
  font-size: 0.5rem;
}

.about-divider::after,
.menu-divider::after,
.heat-divider::after,
.reviews-divider::after,
.contact-divider::after {
  content: '◆';
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--red);
  font-size: 0.5rem;
}

/* ============================================
   NAVIGATION
   ============================================ */
.diner-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--dark);
  border-bottom: 3px solid var(--red);
  box-shadow: 0 2px 20px rgba(196, 30, 58, 0.15);
  transition: transform 0.3s ease;
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  height: 64px;
}

.nav-logo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--cream);
  letter-spacing: 0.08em;
  position: relative;
  text-shadow: var(--neon-red);
  animation: navNeonGlow 3s ease-in-out infinite alternate;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 2rem;
}

.nav-links a {
  font-family: var(--font-typewriter);
  font-size: 0.85rem;
  color: var(--chrome-light);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: relative;
  padding: 0.25rem 0;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--teal);
  box-shadow: 0 0 6px var(--teal);
  transition: width 0.3s ease;
}

.nav-links a:hover {
  color: var(--teal-light);
  text-shadow: 0 0 8px rgba(0,169,157,0.4);
}

.nav-links a:hover::after {
  width: 100%;
}

/* Mobile Toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--cream);
  transition: all 0.3s ease;
}

.nav-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.nav-toggle.active span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

@media (max-width: 768px) {
  .nav-toggle {
    display: flex;
  }

  .nav-links {
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--dark);
    flex-direction: column;
    padding: 1.5rem;
    gap: 1rem;
    border-bottom: 3px solid var(--red);
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: all 0.35s ease;
  }

  .nav-links.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
  }
}

/* ============================================
   HERO
   ============================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6rem 1.5rem 4rem;
  overflow: hidden;
  background: var(--dark);
}

/* Retro sunburst rays */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    rgba(196, 30, 58, 0.06) 3deg,
    transparent 6deg,
    transparent 30deg,
    rgba(0, 169, 157, 0.04) 33deg,
    transparent 36deg,
    transparent 60deg,
    rgba(196, 30, 58, 0.06) 63deg,
    transparent 66deg,
    transparent 90deg,
    rgba(218, 165, 32, 0.04) 93deg,
    transparent 96deg,
    transparent 120deg,
    rgba(196, 30, 58, 0.06) 123deg,
    transparent 126deg,
    transparent 150deg,
    rgba(0, 169, 157, 0.04) 153deg,
    transparent 156deg,
    transparent 180deg,
    rgba(196, 30, 58, 0.06) 183deg,
    transparent 186deg,
    transparent 210deg,
    rgba(218, 165, 32, 0.04) 213deg,
    transparent 216deg,
    transparent 240deg,
    rgba(196, 30, 58, 0.06) 243deg,
    transparent 246deg,
    transparent 270deg,
    rgba(0, 169, 157, 0.04) 273deg,
    transparent 276deg,
    transparent 300deg,
    rgba(196, 30, 58, 0.06) 303deg,
    transparent 306deg,
    transparent 330deg,
    rgba(218, 165, 32, 0.04) 333deg,
    transparent 336deg,
    transparent 360deg
  );
  z-index: 0;
}

.hero-checkerboard {
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background-image:
    linear-gradient(45deg, var(--chrome) 25%, transparent 25%),
    linear-gradient(-45deg, var(--chrome) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--chrome) 75%),
    linear-gradient(-45deg, transparent 75%, var(--chrome) 75%);
  background-size: 40px 40px;
  background-position: 0 0, 0 20px, 20px -20px, -20px 0px;
  background-color: transparent;
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-script {
  font-family: var(--font-script);
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--gold);
  margin-bottom: 0.5rem;
  letter-spacing: 0.08em;
  text-shadow: var(--neon-gold);
  opacity: 0;
  animation: fadeSlideUp 0.8s ease forwards 0.3s;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 10vw, 7rem);
  color: var(--cream);
  line-height: 1;
  letter-spacing: 0.04em;
  text-shadow:
    0 0 7px rgba(255, 45, 120, 0.8),
    0 0 10px rgba(255, 45, 120, 0.6),
    0 0 21px rgba(255, 45, 120, 0.4),
    0 0 42px rgba(196, 30, 58, 0.3),
    0 0 82px rgba(196, 30, 58, 0.2),
    0 0 92px rgba(196, 30, 58, 0.15),
    0 4px 8px rgba(0,0,0,0.5);
  opacity: 0;
  animation: fadeSlideUp 0.8s ease forwards 0.5s, neonFlicker 8s linear 1.5s infinite;
}

.hero-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin: 1.5rem 0;
  opacity: 0;
  animation: fadeSlideUp 0.8s ease forwards 0.7s;
}

.divider-star {
  color: var(--gold);
  font-size: 0.9rem;
  text-shadow: 0 0 8px rgba(218, 165, 32, 0.6);
}

.divider-line {
  width: 40px;
  height: 1px;
  background: var(--teal);
  box-shadow: 0 0 4px var(--teal);
}

.hero-tagline {
  font-family: var(--font-typewriter);
  font-size: clamp(0.9rem, 2vw, 1.2rem);
  color: var(--teal-light);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 2.5rem;
  text-shadow: 0 0 10px rgba(0, 169, 157, 0.4);
  opacity: 0;
  animation: fadeSlideUp 0.8s ease forwards 0.9s;
}

.hero-btn {
  display: inline-block;
  font-family: var(--font-typewriter);
  font-size: 0.9rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--red);
  border: 2px solid var(--red-light);
  padding: 0.85rem 2.5rem;
  position: relative;
  transition: all 0.3s ease;
  box-shadow: 0 0 15px rgba(196, 30, 58, 0.3), inset 0 0 15px rgba(196, 30, 58, 0.1);
  opacity: 0;
  animation: fadeSlideUp 0.8s ease forwards 1.1s;
}

.hero-btn::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  pointer-events: none;
}

.hero-btn:hover {
  background: var(--red-light);
  transform: translateY(-2px);
  box-shadow: 0 0 30px rgba(196, 30, 58, 0.5), 0 6px 20px rgba(196, 30, 58, 0.3);
}

.hero-neon-glow {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255, 45, 120, 0.1) 0%, rgba(196, 30, 58, 0.05) 40%, transparent 70%);
  pointer-events: none;
  z-index: 1;
  animation: neonPulse 4s ease-in-out infinite;
}

/* ============================================
   MARQUEE TICKER
   ============================================ */
.marquee {
  background: var(--dark-soft);
  border-top: 2px solid var(--teal-dark);
  border-bottom: 2px solid var(--teal-dark);
  overflow: hidden;
  padding: 0.6rem 0;
  position: relative;
}

.marquee::before,
.marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}

.marquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--dark-soft), transparent);
}

.marquee::after {
  right: 0;
  background: linear-gradient(-90deg, var(--dark-soft), transparent);
}

.marquee-border {
  overflow: hidden;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 30s linear infinite;
}

.marquee-track:hover {
  animation-play-state: paused;
}

.marquee-track span {
  font-family: var(--font-typewriter);
  font-size: 0.85rem;
  color: var(--gold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  padding-right: 4rem;
  text-shadow: 0 0 6px rgba(218, 165, 32, 0.4);
}

/* ============================================
   ABOUT
   ============================================ */
.about {
  background: var(--cream);
  position: relative;
}

.about::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: repeating-linear-gradient(
    90deg,
    var(--red) 0px,
    var(--red) 20px,
    var(--teal) 20px,
    var(--teal) 40px
  );
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: center;
}

.about-image-wrap {
  position: relative;
}

.about-image-frame {
  border: 8px solid var(--dark);
  box-shadow:
    8px 8px 0 var(--red),
    12px 12px 0 var(--teal-dark),
    16px 16px 0 rgba(13, 13, 13, 0.08);
  transform: rotate(-2deg);
  transition: transform 0.4s ease;
  position: relative;
  background: var(--cream);
}

/* Polaroid-style label on frame */
.about-image-frame::after {
  content: 'DAVE — 1955';
  font-family: var(--font-typewriter);
  font-size: 0.65rem;
  color: var(--chrome-dark);
  letter-spacing: 0.1em;
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.about-image-frame:hover {
  transform: rotate(0deg) scale(1.02);
}

.about-image {
  width: 100%;
  filter: sepia(30%) contrast(1.1) brightness(0.95);
  transition: filter 0.4s ease;
}

.about-image-frame:hover .about-image {
  filter: sepia(15%) contrast(1.05) brightness(1);
}

.about-badge {
  position: absolute;
  bottom: -10px;
  right: -10px;
  width: 110px;
  height: 110px;
  background: var(--red);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  box-shadow: 4px 4px 0 var(--dark);
  border: 3px solid var(--dark);
  z-index: 2;
}

.about-badge::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px dashed rgba(255, 255, 255, 0.3);
  border-radius: 50%;
}

.about-badge span:first-child {
  font-family: var(--font-typewriter);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.badge-year {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.about-text .section-script {
  text-align: left;
}

.about-text .section-title {
  text-align: left;
}

.about-text .about-divider {
  margin-left: 0;
}

.about-lead {
  font-size: 1.1rem;
  font-style: italic;
  color: var(--red-dark);
  margin-bottom: 1.5rem;
  border-left: 3px solid var(--red);
  padding-left: 1.2rem;
}

.about-text p {
  margin-bottom: 1rem;
  font-size: 1rem;
}

.about-text em {
  color: var(--red);
  font-style: italic;
}

@media (max-width: 768px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .about-image-frame {
    max-width: 350px;
    margin: 0 auto;
  }
}

/* ============================================
   MENU / SAUCES
   ============================================ */
.menu {
  background: var(--dark);
  position: relative;
  overflow: hidden;
}

/* Subtle vinyl record grooves pattern */
.menu::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-radial-gradient(
    circle at 50% 50%,
    transparent 0px,
    transparent 80px,
    rgba(168, 169, 173, 0.03) 81px,
    transparent 82px
  );
  pointer-events: none;
  z-index: 0;
}

.menu-checkerboard-top,
.menu-checkerboard-bottom {
  height: 30px;
  background-image:
    linear-gradient(45deg, var(--chrome-dark) 25%, transparent 25%),
    linear-gradient(-45deg, var(--chrome-dark) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--chrome-dark) 75%),
    linear-gradient(-45deg, transparent 75%, var(--chrome-dark) 75%);
  background-size: 30px 30px;
  background-position: 0 0, 0 15px, 15px -15px, -15px 0px;
  background-color: var(--dark-soft);
  opacity: 0.4;
}

.menu .section-inner {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.menu-header {
  text-align: center;
  margin-bottom: 3rem;
}

.menu .section-script {
  color: var(--gold);
  text-shadow: 0 0 8px rgba(218, 165, 32, 0.3);
}

.menu .section-title {
  color: var(--cream);
  text-shadow: var(--neon-red);
}

.menu-divider {
  margin-left: auto;
  margin-right: auto;
}

.menu-divider::after {
  background: var(--dark);
}

.sauce-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  position: relative;
  z-index: 1;
}

.sauce-card {
  background: var(--dark-soft);
  border: 2px solid var(--chrome-dark);
  padding: 1.5rem;
  text-align: center;
  position: relative;
  transition: all 0.3s ease;
}

/* Vintage double-border frame effect */
.sauce-card::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(168, 169, 173, 0.12);
  pointer-events: none;
}

.sauce-card:hover {
  border-color: var(--teal);
  transform: translateY(-4px) rotate(-0.5deg);
  box-shadow: 0 8px 30px rgba(0, 169, 157, 0.15);
}

.sauce-card.featured {
  border-color: var(--red);
  background: linear-gradient(135deg, var(--dark-soft) 0%, rgba(196, 30, 58, 0.12) 100%);
}

.sauce-card.featured:hover {
  box-shadow: 0 8px 30px rgba(196, 30, 58, 0.2);
}

.sauce-ribbon {
  position: absolute;
  top: -1px;
  right: 20px;
  background: var(--red);
  color: var(--cream);
  font-family: var(--font-typewriter);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  padding: 0.4rem 1rem;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(196, 30, 58, 0.4);
}

.sauce-ribbon::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  border-left: 8px solid var(--red-dark);
  border-bottom: 8px solid transparent;
}

.sauce-bottle {
  margin-bottom: 1.2rem;
}

.sauce-bottle img {
  margin: 0 auto;
  max-height: 200px;
  width: auto;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4)) sepia(10%);
  transition: transform 0.3s ease;
}

.sauce-card:hover .sauce-bottle img {
  transform: scale(1.05) rotate(-3deg);
}

.sauce-name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--cream);
  margin-bottom: 0.6rem;
  letter-spacing: 0.04em;
}

.heat-dots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-bottom: 0.8rem;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--chrome);
  transition: all 0.3s ease;
}

.dot.filled {
  background: var(--orange-hot);
  border-color: var(--orange-hot);
  box-shadow: 0 0 6px rgba(255, 69, 0, 0.5);
}

.sauce-desc {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--chrome-light);
  line-height: 1.6;
  margin-bottom: 1rem;
  font-style: italic;
}

.sauce-price {
  font-family: var(--font-typewriter);
  font-size: 1.4rem;
  color: var(--gold);
  text-shadow: 0 0 8px rgba(218, 165, 32, 0.3);
}

/* ============================================
   HEAT SCALE
   ============================================ */
.heat {
  background:
    radial-gradient(ellipse at center bottom, rgba(255, 69, 0, 0.08) 0%, transparent 60%),
    var(--cream);
  position: relative;
}

.heat::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: repeating-linear-gradient(
    90deg,
    var(--red) 0px,
    var(--red) 20px,
    var(--teal) 20px,
    var(--teal) 40px
  );
}

.heat-header {
  text-align: center;
  margin-bottom: 3rem;
}

.thermometer {
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem 0;
}

.thermo-tube {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

.thermo-fill {
  position: relative;
  width: 100%;
  height: 24px;
  background: linear-gradient(90deg, var(--green-mild), var(--gold), var(--orange), var(--red), var(--pink-neon));
  border-radius: 12px;
  box-shadow:
    0 2px 10px rgba(255, 69, 0, 0.3),
    inset 0 2px 4px rgba(255, 255, 255, 0.2);
}

.thermo-bulb {
  position: absolute;
  right: -18px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  background: var(--pink-neon);
  border-radius: 50%;
  border: 3px solid var(--dark);
  box-shadow:
    0 0 15px rgba(255, 45, 120, 0.6),
    0 0 30px rgba(255, 45, 120, 0.3);
  animation: bulbPulse 2s ease-in-out infinite;
}

.thermo-marks {
  display: flex;
  justify-content: space-between;
  margin-top: 1.5rem;
  padding: 0 0.5rem;
}

.thermo-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.mark-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dark);
  box-shadow: 0 0 4px rgba(0,0,0,0.2);
}

.mark-label {
  font-family: var(--font-typewriter);
  font-size: 0.7rem;
  color: var(--dark);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mark-scu {
  font-family: var(--font-typewriter);
  font-size: 0.7rem;
  color: var(--chrome-dark);
}

/* ============================================
   REVIEWS
   ============================================ */
.reviews {
  background: var(--cream);
  position: relative;
}

.reviews-checkerboard {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image:
    linear-gradient(45deg, var(--dark) 25%, transparent 25%),
    linear-gradient(-45deg, var(--dark) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--dark) 75%),
    linear-gradient(-45deg, transparent 75%, var(--dark) 75%);
  background-size: 30px 30px;
  background-position: 0 0, 0 15px, 15px -15px, -15px 0px;
  background-color: transparent;
  pointer-events: none;
}

.reviews .section-inner {
  position: relative;
  z-index: 1;
}

.reviews-header {
  text-align: center;
  margin-bottom: 3rem;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.review-napkin {
  background: var(--cream);
  border: 1px solid rgba(0,0,0,0.08);
  padding: 2rem 1.8rem;
  position: relative;
  transition: all 0.3s ease;
  box-shadow: 2px 2px 8px var(--shadow);
}

/* Vintage paper texture on napkins */
.review-napkin::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px dashed rgba(196, 30, 58, 0.2);
  pointer-events: none;
}

/* Coffee ring stain effect */
.review-napkin::after {
  content: '';
  position: absolute;
  bottom: 10px;
  left: 20px;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(139, 90, 43, 0.08);
  border-radius: 50%;
  pointer-events: none;
}

.review-napkin:hover {
  transform: rotate(0deg) scale(1.02);
  box-shadow: 4px 4px 16px var(--shadow-heavy);
}

.napkin-1 { transform: rotate(-1.5deg); }
.napkin-2 { transform: rotate(1deg); }
.napkin-3 { transform: rotate(-0.8deg); }
.napkin-4 { transform: rotate(1.3deg); }
.napkin-5 { transform: rotate(-1.2deg); }
.napkin-6 { transform: rotate(0.6deg); }

.napkin-corner {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, transparent 50%, var(--cream-dark) 50%);
}

.napkin-stars {
  color: var(--gold);
  font-size: 1.1rem;
  letter-spacing: 0.15em;
  margin-bottom: 0.8rem;
}

.napkin-text {
  font-family: var(--font-body);
  font-size: 1rem;
  font-style: italic;
  line-height: 1.7;
  color: var(--dark);
  margin-bottom: 1rem;
  border: none;
}

.napkin-author {
  font-family: var(--font-typewriter);
  font-size: 0.8rem;
  color: var(--red);
  font-style: normal;
  letter-spacing: 0.05em;
}

/* ============================================
   CONTACT
   ============================================ */
.contact {
  background: var(--dark);
  position: relative;
}

.contact-header {
  text-align: center;
  margin-bottom: 3rem;
}

.contact .section-script {
  color: var(--gold);
  text-shadow: 0 0 8px rgba(218, 165, 32, 0.3);
}

.contact .section-title {
  color: var(--cream);
  text-shadow: var(--neon-teal);
}

.contact-divider {
  margin-left: auto;
  margin-right: auto;
}

.contact-divider::after {
  background: var(--dark);
}

.contact-placemat {
  background: var(--dark-soft);
  border: 3px double var(--chrome-dark);
  padding: 3rem 2rem;
  position: relative;
  overflow: hidden;
}

.contact-placemat::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(168, 169, 173, 0.15);
  pointer-events: none;
}

/* Checkerboard pattern inside placemat */
.contact-placemat::after {
  content: '';
  position: absolute;
  inset: 12px;
  opacity: 0.03;
  background-image:
    linear-gradient(45deg, var(--chrome) 25%, transparent 25%),
    linear-gradient(-45deg, var(--chrome) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--chrome) 75%),
    linear-gradient(-45deg, transparent 75%, var(--chrome) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  pointer-events: none;
}

.placemat-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  position: relative;
  z-index: 1;
}

.contact-item {
  margin-bottom: 1.5rem;
}

.contact-label {
  display: block;
  font-family: var(--font-typewriter);
  font-size: 0.7rem;
  color: var(--teal-light);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 0.3rem;
}

.contact-value {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--chrome-light);
}

.form-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--cream);
  margin-bottom: 1.5rem;
  letter-spacing: 0.06em;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.contact-form input,
.contact-form textarea {
  font-family: var(--font-typewriter);
  font-size: 0.9rem;
  padding: 0.8rem 1rem;
  background: var(--dark);
  border: 2px solid var(--chrome-dark);
  color: var(--cream);
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  letter-spacing: 0.03em;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--chrome-dark);
  font-style: normal;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 10px rgba(0, 169, 157, 0.2);
}

.contact-form textarea {
  resize: vertical;
  min-height: 100px;
}

.form-btn {
  font-family: var(--font-typewriter);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--red);
  border: 2px solid var(--red-light);
  padding: 0.8rem 2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  align-self: flex-start;
  position: relative;
  box-shadow: 0 0 12px rgba(196, 30, 58, 0.25);
}

.form-btn::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  pointer-events: none;
}

.form-btn:hover {
  background: var(--red-light);
  box-shadow: 0 0 25px rgba(196, 30, 58, 0.4), 0 4px 15px rgba(196, 30, 58, 0.3);
}

@media (max-width: 768px) {
  .placemat-inner {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .contact-placemat {
    padding: 2rem 1rem;
  }
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  background: var(--dark);
  border-top: 5px solid var(--red);
  position: relative;
}

/* Retro striped accent */
.footer::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 5px;
  background: repeating-linear-gradient(
    90deg,
    var(--teal-dark) 0px,
    var(--teal-dark) 10px,
    var(--red-dark) 10px,
    var(--red-dark) 20px
  );
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 1.5rem 2rem;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer-logo {
  display: flex;
  flex-direction: column;
}

.footer-logo-text {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--cream);
  letter-spacing: 0.1em;
  text-shadow: var(--neon-red);
}

.footer-logo-sub {
  font-family: var(--font-script);
  font-size: 1.2rem;
  color: var(--teal-light);
  text-shadow: 0 0 8px rgba(0, 169, 157, 0.3);
}

.footer-links {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.footer-links a {
  font-family: var(--font-typewriter);
  font-size: 0.8rem;
  color: var(--chrome-light);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

.footer-links a:hover {
  color: var(--teal-light);
  text-shadow: 0 0 6px rgba(0, 169, 157, 0.4);
}

.footer-divider-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--chrome-dark), transparent);
  margin-bottom: 1.5rem;
}

.footer-bottom {
  text-align: center;
}

.footer-bottom p {
  font-family: var(--font-typewriter);
  font-size: 0.8rem;
  color: var(--chrome-dark);
  margin-bottom: 0.3rem;
  letter-spacing: 0.05em;
}

.footer-tagline {
  font-family: var(--font-script) !important;
  font-size: 1rem !important;
  color: var(--gold) !important;
  text-shadow: 0 0 6px rgba(218, 165, 32, 0.3);
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes neonPulse {
  0%, 100% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

@keyframes neonFlicker {
  0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
    text-shadow:
      0 0 7px rgba(255, 45, 120, 0.8),
      0 0 10px rgba(255, 45, 120, 0.6),
      0 0 21px rgba(255, 45, 120, 0.4),
      0 0 42px rgba(196, 30, 58, 0.3),
      0 0 82px rgba(196, 30, 58, 0.2),
      0 0 92px rgba(196, 30, 58, 0.15),
      0 4px 8px rgba(0,0,0,0.5);
  }
  20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
    text-shadow:
      0 0 4px rgba(255, 45, 120, 0.4),
      0 0 8px rgba(255, 45, 120, 0.2),
      0 4px 8px rgba(0,0,0,0.5);
    opacity: 0.9;
  }
}

@keyframes navNeonGlow {
  0% {
    text-shadow: 0 0 7px rgba(196,30,58,0.6), 0 0 10px rgba(196,30,58,0.4);
  }
  100% {
    text-shadow: 0 0 10px rgba(196,30,58,0.9), 0 0 20px rgba(196,30,58,0.5), 0 0 40px rgba(196,30,58,0.2);
  }
}

@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes bulbPulse {
  0%, 100% {
    box-shadow:
      0 0 15px rgba(255, 45, 120, 0.6),
      0 0 30px rgba(255, 45, 120, 0.3);
  }
  50% {
    box-shadow:
      0 0 25px rgba(255, 45, 120, 0.8),
      0 0 50px rgba(255, 45, 120, 0.4),
      0 0 80px rgba(255, 45, 120, 0.2);
  }
}

/* Scroll-triggered reveal animation class */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.15s; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.25s; }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.35s; }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.45s; }
.reveal-stagger.visible > *:nth-child(6) { transition-delay: 0.55s; }

.reveal-stagger.visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   RESPONSIVE TWEAKS
   ============================================ */
@media (max-width: 480px) {
  .hero-title {
    font-size: clamp(2.5rem, 12vw, 4rem);
  }

  .reviews-grid {
    grid-template-columns: 1fr;
  }

  .sauce-grid {
    grid-template-columns: 1fr;
    max-width: 360px;
    margin: 0 auto;
  }

  .thermo-marks {
    flex-wrap: wrap;
    gap: 0.8rem;
    justify-content: center;
  }

  .thermo-mark {
    flex: 0 0 auto;
  }

  .marquee-track span {
    font-size: 0.75rem;
  }
}

/* ============================================
   EVEN MORE RETRO ENHANCEMENTS
   ============================================ */

/* --- CRT Boot Screen --- */
.crt-boot {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s ease;
}

.crt-boot.done {
  opacity: 0;
  pointer-events: none;
}

.crt-boot-content {
  width: 90%;
  max-width: 650px;
  padding: 2rem;
  border: 1px solid rgba(0, 255, 136, 0.15);
  background: rgba(0, 255, 136, 0.02);
}

.crt-boot-text {
  font-family: 'Special Elite', monospace;
  font-size: clamp(0.65rem, 1.8vw, 0.85rem);
  color: #00ff88;
  white-space: pre-wrap;
  line-height: 1.8;
  text-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
  margin: 0;
}

/* CRT Turn-On Flash */
.crt-boot::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff;
  animation: crtFlash 0.4s ease-out forwards;
  pointer-events: none;
}

@keyframes crtFlash {
  0% { opacity: 1; transform: scaleY(0.005); }
  30% { opacity: 0.9; transform: scaleY(0.005); }
  40% { opacity: 0.6; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1); }
}

/* --- CRT Vignette --- */
.crt-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.2) 80%, rgba(0, 0, 0, 0.5) 100%);
}

/* --- Enhanced Scanlines (override) --- */
.scanlines {
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 1px,
    rgba(0, 0, 0, 0.05) 1px,
    rgba(0, 0, 0, 0.05) 2px
  );
}

/* --- VHS Tracking Distortion --- */
.vhs-tracking {
  position: fixed;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
  z-index: 9997;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-100%);
}

.vhs-tracking.active {
  animation: vhsSweep 6s linear forwards;
}

@keyframes vhsSweep {
  0% { top: -10px; opacity: 0; }
  1% { opacity: 0.7; }
  3% { opacity: 0; }
  100% { top: 110vh; opacity: 0; }
}

/* --- "OPEN" Neon Sign --- */
.open-sign {
  position: absolute;
  top: 2rem;
  right: 2.5rem;
  z-index: 3;
  opacity: 0;
  animation: fadeSlideUp 0.8s ease forwards 1.3s;
}

.open-text {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  color: var(--teal-light);
  text-shadow:
    0 0 7px rgba(0, 169, 157, 1),
    0 0 12px rgba(0, 169, 157, 0.8),
    0 0 24px rgba(0, 169, 157, 0.6),
    0 0 48px rgba(0, 169, 157, 0.4),
    0 0 80px rgba(0, 169, 157, 0.2);
  animation: openFlicker 5s linear infinite;
  letter-spacing: 0.12em;
}

@keyframes openFlicker {
  0%, 18.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
    text-shadow:
      0 0 7px rgba(0, 169, 157, 1),
      0 0 12px rgba(0, 169, 157, 0.8),
      0 0 24px rgba(0, 169, 157, 0.6),
      0 0 48px rgba(0, 169, 157, 0.4),
      0 0 80px rgba(0, 169, 157, 0.2);
    opacity: 1;
  }
  20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
    text-shadow: 0 0 3px rgba(0, 169, 157, 0.3);
    opacity: 0.8;
  }
}

/* --- Hero Neon Border --- */
.hero-neon-border {
  position: absolute;
  inset: 20px;
  border: 2px solid rgba(196, 30, 58, 0.25);
  pointer-events: none;
  z-index: 1;
  box-shadow:
    inset 0 0 30px rgba(196, 30, 58, 0.04),
    inset 0 0 60px rgba(0, 169, 157, 0.02),
    0 0 15px rgba(196, 30, 58, 0.05);
  animation: neonBorderGlow 3s ease-in-out infinite alternate;
}

@keyframes neonBorderGlow {
  0% {
    border-color: rgba(196, 30, 58, 0.15);
    box-shadow: inset 0 0 20px rgba(196, 30, 58, 0.02);
  }
  100% {
    border-color: rgba(196, 30, 58, 0.4);
    box-shadow:
      inset 0 0 40px rgba(196, 30, 58, 0.06),
      inset 0 0 80px rgba(0, 169, 157, 0.03),
      0 0 20px rgba(196, 30, 58, 0.08);
  }
}

/* --- Typewriter Cursor on Hero Tagline --- */
.hero-tagline::after {
  content: '\258C';
  animation: cursorBlink 1s step-end 2.5s infinite;
  margin-left: 3px;
  color: var(--teal-light);
  text-shadow: 0 0 8px rgba(0, 169, 157, 0.5);
}

@keyframes cursorBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* --- Vinyl Record --- */
.vinyl-record-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.vinyl-record {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 18%, rgba(0,0,0,0.08) 18.5%, transparent 19%, transparent 25%, rgba(0,0,0,0.06) 25.5%, transparent 26%, transparent 35%, rgba(0,0,0,0.05) 35.5%, transparent 36%, transparent 44%, rgba(0,0,0,0.04) 44.5%, transparent 45%),
    repeating-radial-gradient(circle, #181818 0px, #181818 1px, #222 1px, #222 2px);
  box-shadow:
    0 0 0 3px #333,
    0 0 20px rgba(0,0,0,0.6),
    inset 0 0 20px rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: vinylSpin 3s linear infinite;
  position: relative;
}

.vinyl-label {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--red-light), var(--red), var(--red-dark));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 8px rgba(196, 30, 58, 0.4);
  position: relative;
}

.vinyl-label span:first-child {
  font-family: var(--font-display);
  font-size: 0.3rem;
  color: var(--cream);
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.vinyl-sub {
  font-family: var(--font-typewriter);
  font-size: 0.22rem;
  color: rgba(255, 245, 225, 0.6);
  letter-spacing: 0.04em;
}

.vinyl-label::after {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #333;
  box-shadow: inset 0 0 2px rgba(0,0,0,0.5);
}

@keyframes vinylSpin {
  to { transform: rotate(360deg); }
}

/* --- Retro Audio Equalizer --- */
.equalizer {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 24px;
  margin-bottom: 2rem;
  justify-content: center;
}

.eq-bar {
  width: 3px;
  background: linear-gradient(to top, var(--teal-dark), var(--teal-light));
  border-radius: 1px 1px 0 0;
  animation: eqBounce 0.6s ease-in-out infinite alternate;
  box-shadow: 0 0 4px rgba(0, 169, 157, 0.3);
}

.eq-bar:nth-child(1) { height: 6px;  animation-delay: 0s;    animation-duration: 0.45s; }
.eq-bar:nth-child(2) { height: 14px; animation-delay: 0.08s; animation-duration: 0.65s; }
.eq-bar:nth-child(3) { height: 20px; animation-delay: 0.16s; animation-duration: 0.4s;  }
.eq-bar:nth-child(4) { height: 10px; animation-delay: 0.24s; animation-duration: 0.55s; }
.eq-bar:nth-child(5) { height: 18px; animation-delay: 0.12s; animation-duration: 0.5s;  }
.eq-bar:nth-child(6) { height: 24px; animation-delay: 0.2s;  animation-duration: 0.42s; }
.eq-bar:nth-child(7) { height: 12px; animation-delay: 0.04s; animation-duration: 0.6s;  }
.eq-bar:nth-child(8) { height: 16px; animation-delay: 0.28s; animation-duration: 0.48s; }

@keyframes eqBounce {
  from { transform: scaleY(0.2); }
  to   { transform: scaleY(1); }
}

/* --- Starburst "NEW" Badge --- */
.starburst-new {
  position: absolute;
  top: 10px;
  left: -6px;
  width: 48px;
  height: 48px;
  background: var(--gold);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  animation: starburstPulse 2.5s ease-in-out infinite;
}

.starburst-new span {
  font-family: var(--font-display);
  font-size: 0.5rem;
  color: var(--dark);
  letter-spacing: 0.08em;
}

@keyframes starburstPulse {
  0%, 100% { transform: scale(1) rotate(-8deg); }
  50%      { transform: scale(1.12) rotate(3deg); }
}

/* --- Retro Visitor Counter --- */
.retro-counter {
  font-family: var(--font-typewriter);
  font-size: 0.7rem;
  color: var(--chrome-dark);
  margin-top: 0.6rem;
  letter-spacing: 0.06em;
}

.retro-counter span {
  color: var(--teal-light);
  text-shadow: 0 0 6px rgba(0, 169, 157, 0.3);
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
}

/* --- Halftone Dot Pattern --- */
.halftone-pattern::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 6px 6px;
  pointer-events: none;
  z-index: 0;
}

/* --- Enhanced Vintage Image Treatment --- */
.about-image {
  filter: sepia(45%) contrast(1.15) brightness(0.88) saturate(0.75) !important;
}

.about-image-frame:hover .about-image {
  filter: sepia(25%) contrast(1.1) brightness(0.92) saturate(0.85) !important;
}

/* --- Retro Glow on Marquee --- */
.marquee {
  box-shadow:
    0 0 10px rgba(0, 169, 157, 0.15),
    inset 0 0 10px rgba(218, 165, 32, 0.05);
}

/* --- Retro Script Glow Animation --- */
.menu .section-script,
.contact .section-script {
  animation: scriptGlow 3s ease-in-out infinite alternate;
}

@keyframes scriptGlow {
  0%   { text-shadow: 0 0 6px rgba(218, 165, 32, 0.2); }
  100% { text-shadow: 0 0 12px rgba(218, 165, 32, 0.5), 0 0 20px rgba(218, 165, 32, 0.2); }
}

/* --- CRT Chromatic Aberration on Hero Title Hover --- */
.hero-title {
  transition: text-shadow 0.3s ease;
}

.hero-title:hover {
  text-shadow:
    -2px 0 rgba(255, 0, 0, 0.3),
    2px 0 rgba(0, 255, 255, 0.3),
    0 0 7px rgba(255, 45, 120, 0.8),
    0 0 10px rgba(255, 45, 120, 0.6),
    0 0 21px rgba(255, 45, 120, 0.4),
    0 0 42px rgba(196, 30, 58, 0.3),
    0 0 82px rgba(196, 30, 58, 0.2),
    0 4px 8px rgba(0,0,0,0.5);
}

/* --- Enhanced Sauce Card Vintage Feel --- */
.sauce-card {
  box-shadow: 4px 4px 0 rgba(0,0,0,0.3);
}

.sauce-card:hover {
  box-shadow: 6px 8px 0 rgba(0,0,0,0.3), 0 8px 30px rgba(0, 169, 157, 0.15);
}

/* --- Retro Badge Pulse --- */
.about-badge {
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  animation: badgePulse 4s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% { box-shadow: 4px 4px 0 var(--dark), 0 0 0 0 rgba(196, 30, 58, 0.3); }
  50%      { box-shadow: 4px 4px 0 var(--dark), 0 0 15px rgba(196, 30, 58, 0.3); }
}

/* --- Mobile Adjustments for New Retro Elements --- */
@media (max-width: 768px) {
  .open-sign {
    top: 1rem;
    right: 1rem;
  }

  .hero-neon-border {
    inset: 10px;
  }

  .vinyl-record {
    width: 70px;
    height: 70px;
  }

  .vinyl-label {
    width: 26px;
    height: 26px;
  }

  .vinyl-label span:first-child {
    font-size: 0.25rem;
  }

  .vinyl-sub {
    font-size: 0.18rem;
  }
}