/* ==========================================================================
   NATIONAL TRADERS — style.css
   Premium dark theme: black / dark blue / gold / white / neon cyan / purple
   Mobile-first, vanilla CSS, no frameworks.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  --black:  #05060a;
  --navy:   #0a0f1e;
  --navy-2: #0e1530;
  --gold:   #e8b64c;
  --gold-2: #f5d78a;
  --white:  #f5f4ef;
  --muted:  #9aa3b8;
  --cyan:   #35e0e8;
  --purple: #8b5cf6;

  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-brd: rgba(255, 255, 255, 0.12);

  --font-display: "Marcellus", serif;
  --font-body: "Sora", system-ui, sans-serif;

  --radius: 18px;
  --container: 1180px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* While intro is showing, lock scrolling (only when JS is running) */
html.js body.lights-off { overflow: hidden; }
/* Without JS the intro is unreachable — hide it and show the site */
html:not(.js) .intro { display: none; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }

.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }

::selection { background: var(--gold); color: var(--black); }

/* Visible keyboard focus */
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }

/* ==========================================================================
   INTRO OVERLAY — the dark room and the switch
   ========================================================================== */
.intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: radial-gradient(120% 100% at 50% 110%, #0b0d14 0%, var(--black) 60%);
  display: grid;
  place-items: center;
  transition: opacity 1.2s ease 0.2s, visibility 1.2s ease 0.2s;
}
.intro.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

.intro__particles { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Warm golden light that floods the room when switched on */
.intro__room-light {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(245, 215, 138, 0.35), transparent 70%),
    radial-gradient(90% 80% at 50% 45%, rgba(232, 182, 76, 0.18), transparent 75%),
    radial-gradient(100% 100% at 50% 100%, rgba(139, 92, 246, 0.10), transparent 70%);
  transition: opacity 2.4s ease;
  pointer-events: none;
}
.intro.is-on .intro__room-light { opacity: 1; }

/* ---------- The wall switch ---------- */
.switch-wrap {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 2rem;
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.intro.is-on .switch-wrap { opacity: 0; transform: scale(0.92) translateY(-14px); pointer-events: none; }

.wall-switch {
  position: relative;
  width: 108px;
  height: 168px;
  border-radius: 14px;
  transition: filter 0.4s ease, transform 0.3s ease;
  filter: drop-shadow(0 0 0 rgba(53, 224, 232, 0));
}
/* Hover glow around the switch */
.wall-switch:hover,
.wall-switch:focus-visible {
  filter: drop-shadow(0 0 22px rgba(53, 224, 232, 0.55))
          drop-shadow(0 0 60px rgba(139, 92, 246, 0.35));
  transform: scale(1.03);
}

/* Realistic plate: subtle bevels and plastic sheen */
.wall-switch__plate {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: linear-gradient(155deg, #262b38 0%, #171b26 45%, #10131c 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.10),
    inset 0 -3px 6px rgba(0, 0, 0, 0.6),
    0 14px 34px rgba(0, 0, 0, 0.7);
  display: grid;
  place-items: center;
}
.wall-switch__screw {
  position: absolute;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle at 35% 30%, #6b7280, #23272f 70%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.25);
}
.wall-switch__screw::after {
  content: "";
  position: absolute;
  inset: 3px 1px;
  height: 1.5px;
  top: 50%;
  background: #0b0d12;
  transform: rotate(38deg);
}
.wall-switch__screw--top { top: 10px; }
.wall-switch__screw--bottom { bottom: 10px; }

/* Rocker (the part that flips) */
.wall-switch__rocker {
  width: 54px;
  height: 96px;
  border-radius: 8px;
  background: #0c0f16;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.85);
  padding: 4px;
  perspective: 300px;
}
.wall-switch__rocker-face {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(180deg, #3a4152 0%, #232837 55%, #191d29 100%);
  box-shadow: inset 0 2px 2px rgba(255,255,255,0.18), 0 2px 4px rgba(0,0,0,0.6);
  transform-origin: center;
  transform: rotateX(16deg);
  transition: transform 0.22s var(--ease), background 0.3s ease;
}
/* Toggled ON */
.wall-switch.is-on .wall-switch__rocker-face {
  transform: rotateX(-16deg);
  background: linear-gradient(0deg, #4a5268 0%, #2b3145 55%, #1d2232 100%);
}

/* Small indicator LED */
.wall-switch__led {
  position: absolute;
  bottom: 26px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3a1d1d;
  box-shadow: 0 0 4px rgba(0,0,0,0.6);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.wall-switch.is-on .wall-switch__led {
  background: var(--gold-2);
  box-shadow: 0 0 10px var(--gold), 0 0 22px rgba(232, 182, 76, 0.7);
}

/* "Press The Switch" hint */
.switch-hint {
  font-family: var(--font-display);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--muted);
  animation: hint-pulse 2.4s ease-in-out infinite;
}
@keyframes hint-pulse {
  0%, 100% { opacity: 0.45; text-shadow: none; }
  50%      { opacity: 1; text-shadow: 0 0 14px rgba(53, 224, 232, 0.8); color: var(--white); }
}

/* ---------- Welcome text after light turns on ---------- */
.intro__welcome {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 1rem;
  opacity: 0;
  pointer-events: none;
  padding: 1.5rem;
}
.intro.is-on .intro__welcome { animation: welcome-in 1.6s ease 1s forwards; }
@keyframes welcome-in {
  from { opacity: 0; filter: blur(24px); transform: scale(0.96); }
  to   { opacity: 1; filter: blur(0);   transform: scale(1); }
}

.intro__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 7vw, 4.5rem);
  line-height: 1.15;
}
.intro__title span {
  display: block;
  color: var(--gold);
  text-shadow:
    0 0 18px rgba(232, 182, 76, 0.65),
    0 0 60px rgba(232, 182, 76, 0.35),
    0 0 110px rgba(53, 224, 232, 0.25);
  animation: neon-breathe 2.8s ease-in-out infinite;
}
@keyframes neon-breathe {
  0%, 100% { text-shadow: 0 0 18px rgba(232,182,76,0.65), 0 0 60px rgba(232,182,76,0.35); }
  50%      { text-shadow: 0 0 26px rgba(232,182,76,0.95), 0 0 90px rgba(232,182,76,0.55), 0 0 130px rgba(53,224,232,0.35); }
}

.intro__sub {
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: var(--muted);
}

/* Rotating light rays behind the welcome title */
.intro__rays {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 140vmax;
  height: 140vmax;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 0deg,
    transparent 0deg 14deg,  rgba(245, 215, 138, 0.06) 18deg 22deg,
    transparent 26deg 50deg, rgba(53, 224, 232, 0.05) 54deg 58deg,
    transparent 62deg 86deg, rgba(245, 215, 138, 0.06) 90deg 94deg,
    transparent 98deg 122deg, rgba(139, 92, 246, 0.05) 126deg 130deg,
    transparent 134deg 158deg, rgba(245, 215, 138, 0.06) 162deg 166deg,
    transparent 170deg 194deg, rgba(53, 224, 232, 0.05) 198deg 202deg,
    transparent 206deg 230deg, rgba(245, 215, 138, 0.06) 234deg 238deg,
    transparent 242deg 266deg, rgba(139, 92, 246, 0.05) 270deg 274deg,
    transparent 278deg 360deg
  );
  animation: rays-spin 40s linear infinite;
  z-index: -1;
}
@keyframes rays-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* ==========================================================================
   CURSOR EFFECTS
   ========================================================================== */
.cursor-glow {
  position: fixed;
  z-index: 999;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(53, 224, 232, 0.08) 0%,
    rgba(139, 92, 246, 0.05) 35%,
    transparent 70%);
  opacity: 0;
  transition: opacity 0.6s ease;
}
body.lights-on .cursor-glow { opacity: 1; }

.trail-canvas {
  position: fixed;
  inset: 0;
  z-index: 998;
  pointer-events: none;
}

/* Hide cursor effects on touch / small screens */
@media (hover: none), (max-width: 767px) {
  .cursor-glow, .trail-canvas { display: none; }
}

/* Ambient background particles */
.bg-particles {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2s ease;
}
body.lights-on .bg-particles { opacity: 1; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(5, 6, 10, 0.35);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, transform 0.8s var(--ease), opacity 0.8s ease;
}
/* Header only starts hidden when JS is running the intro sequence */
html.js .header { transform: translateY(-100%); opacity: 0; }
html.js body.lights-on .header { transform: translateY(0); opacity: 1; }

/* Glow when scrolled */
.header.is-scrolled {
  background: rgba(8, 10, 20, 0.7);
  border-bottom-color: rgba(232, 182, 76, 0.25);
  box-shadow: 0 8px 40px rgba(53, 224, 232, 0.08), 0 1px 0 rgba(232, 182, 76, 0.15);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.85rem;
}

.logo { display: inline-flex; align-items: center; gap: 0.65rem; }
.logo__mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--black);
  background: linear-gradient(140deg, var(--gold-2), var(--gold) 60%, #b8862e);
  box-shadow: 0 0 18px rgba(232, 182, 76, 0.4);
}
.logo__text { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0.02em; }
.logo__text em { font-style: normal; color: var(--gold); }

/* Nav — mobile first: sliding glass panel */
.nav {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;   /* fallback for older browsers */
  height: 100dvh;
  width: min(78vw, 320px);
  padding: 6rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: rgba(8, 10, 20, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-left: 1px solid var(--glass-brd);
  transform: translateX(100%);
  transition: transform 0.5s var(--ease);
}
.nav.is-open { transform: translateX(0); }

.nav__link {
  position: relative;
  padding: 0.55rem 0.25rem;
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0.25rem;
  bottom: 0.3rem;
  height: 1px;
  width: 0;
  background: linear-gradient(90deg, var(--gold), var(--cyan));
  transition: width 0.35s var(--ease);
}
.nav__link:hover, .nav__link.is-active {
  color: var(--white);
  text-shadow: 0 0 12px rgba(53, 224, 232, 0.6);
}
.nav__link:hover::after, .nav__link.is-active::after { width: calc(100% - 0.5rem); }

/* Hamburger */
.nav-toggle {
  position: relative;
  z-index: 110;
  display: grid;
  gap: 5px;
  padding: 0.6rem 0.5rem;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform 0.35s var(--ease), opacity 0.3s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Desktop nav */
@media (min-width: 900px) {
  .nav {
    position: static;
    height: auto;
    width: auto;
    padding: 0;
    flex-direction: row;
    gap: 1.6rem;
    background: none;
    border: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none;
    transition: none;
  }
  .nav__link { font-size: 0.86rem; }
  .nav-toggle { display: none; }
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-block;
  padding: 0.85rem 1.9rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-align: center;
  transition: transform 0.3s var(--ease), box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.btn--gold {
  color: var(--black);
  background: linear-gradient(140deg, var(--gold-2), var(--gold) 55%, #c9963a);
  box-shadow: 0 0 22px rgba(232, 182, 76, 0.35), 0 8px 24px rgba(0, 0, 0, 0.5);
}
.btn--gold:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 40px rgba(232, 182, 76, 0.6), 0 12px 30px rgba(0, 0, 0, 0.55);
}
.btn--ghost {
  color: var(--white);
  border: 1px solid var(--glass-brd);
  background: var(--glass-bg);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover {
  transform: translateY(-3px);
  border-color: var(--cyan);
  box-shadow: 0 0 26px rgba(53, 224, 232, 0.35);
}
.btn--outline {
  border: 1px solid rgba(232, 182, 76, 0.5);
  color: var(--gold-2);
}
.btn--outline:hover {
  background: rgba(232, 182, 76, 0.12);
  box-shadow: 0 0 20px rgba(232, 182, 76, 0.35);
  transform: translateY(-2px);
}
.btn--small { padding: 0.6rem 1.3rem; font-size: 0.8rem; }
.btn--full { width: 100%; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh;   /* fallback for older browsers */
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  text-align: center;
  padding-block: 7rem 4rem;
}

/* Moving gradient backdrop */
.hero__gradient {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(45% 40% at 20% 25%, rgba(139, 92, 246, 0.16), transparent 70%),
    radial-gradient(50% 45% at 80% 30%, rgba(53, 224, 232, 0.12), transparent 70%),
    radial-gradient(60% 50% at 50% 85%, rgba(232, 182, 76, 0.10), transparent 70%),
    linear-gradient(180deg, var(--black), var(--navy) 60%, var(--black));
  animation: gradient-drift 18s ease-in-out infinite alternate;
}
@keyframes gradient-drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(2%, 2%, 0) scale(1.06); }
}

/* Sweeping light beams */
.hero__beam {
  position: absolute;
  top: -30%;
  width: 30vw;
  height: 160%;
  filter: blur(40px);
  opacity: 0.5;
  pointer-events: none;
}
.hero__beam--1 {
  left: 8%;
  background: linear-gradient(180deg, rgba(232, 182, 76, 0.10), transparent 70%);
  transform: rotate(16deg);
  animation: beam-sway 11s ease-in-out infinite alternate;
}
.hero__beam--2 {
  right: 6%;
  background: linear-gradient(180deg, rgba(53, 224, 232, 0.08), transparent 70%);
  transform: rotate(-14deg);
  animation: beam-sway 14s ease-in-out infinite alternate-reverse;
}
@keyframes beam-sway {
  from { transform: rotate(12deg) translateX(-2vw); }
  to   { transform: rotate(20deg) translateX(3vw); }
}

.hero__content { position: relative; z-index: 2; display: grid; justify-items: center; gap: 1.4rem; }

.hero__eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--cyan);
  text-shadow: 0 0 14px rgba(53, 224, 232, 0.6);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 8vw, 5.4rem);
  line-height: 1.12;
}
.hero__title-line { display: block; }
.hero__title-line--gold {
  color: var(--gold);
  text-shadow: 0 0 24px rgba(232, 182, 76, 0.5), 0 0 80px rgba(232, 182, 76, 0.25);
}

.hero__sub {
  max-width: 46ch;
  color: var(--muted);
  font-size: clamp(0.95rem, 2.4vw, 1.1rem);
}

.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 0.6rem; }

/* Scroll indicator */
.hero__scroll {
  position: absolute;
  bottom: 1.6rem;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 44px;
  border: 1px solid var(--glass-brd);
  border-radius: 999px;
  display: grid;
  justify-items: center;
  padding-top: 8px;
}
.hero__scroll-dot {
  width: 4px;
  height: 8px;
  border-radius: 4px;
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
  animation: scroll-dot 1.8s ease-in-out infinite;
}
@keyframes scroll-dot {
  0%   { transform: translateY(0); opacity: 1; }
  70%  { transform: translateY(14px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

/* ==========================================================================
   SECTION SHELL
   ========================================================================== */
.section { position: relative; padding-block: 5.5rem; z-index: 1; }

.section__eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 0.6rem;
}
.section__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  margin-bottom: 1.2rem;
}
.section__title span {
  color: var(--gold);
  text-shadow: 0 0 20px rgba(232, 182, 76, 0.4);
}
.section__lead { color: var(--muted); max-width: 56ch; margin-bottom: 2rem; }

/* Alternate section backgrounds */
.about, .why, .contact { background: linear-gradient(180deg, transparent, rgba(14, 21, 48, 0.5), transparent); }

/* ---------- Glass utility ---------- */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ---------- Scroll reveal ----------
   Elements are only hidden when JS is confirmed running (html.js),
   so content always displays even if script.js fails to load. */
html.js .reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--d, 0s);
}
html.js .reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Emergency override set by the inline head failsafe — guarantees the
   site is never blank even if the main script fails completely. */
html.reveal-fallback .reveal { opacity: 1 !important; transform: none !important; }
html.reveal-fallback .header { transform: none !important; opacity: 1 !important; }

/* Floating icon animation */
.float { display: inline-block; animation: floaty 4s ease-in-out infinite; }
.float--slow { animation-duration: 6s; }
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about__grid { display: grid; gap: 2.5rem; }

.about__text p { color: var(--muted); margin-bottom: 1rem; max-width: 58ch; }
.about__text p:first-child { color: var(--white); font-size: 1.05rem; }

.about__badges { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.2rem; }
.chip {
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  font-size: 0.78rem;
  border: 1px solid rgba(232, 182, 76, 0.35);
  color: var(--gold-2);
  background: rgba(232, 182, 76, 0.06);
}

.about__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.stat {
  padding: 1.4rem 1rem;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  transition: transform 0.4s var(--ease), box-shadow 0.4s ease, border-color 0.4s ease;
}
.stat:hover {
  transform: translateY(-6px);
  border-color: rgba(53, 224, 232, 0.5);
  box-shadow: 0 0 30px rgba(53, 224, 232, 0.15), 0 16px 32px rgba(0, 0, 0, 0.45);
}
.stat__icon { font-size: 1.6rem; }
.stat__num, .stat__plus {
  display: inline;
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--gold);
  text-shadow: 0 0 16px rgba(232, 182, 76, 0.45);
}
.stat__label { font-size: 0.75rem; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }

@media (min-width: 900px) {
  .about__grid { grid-template-columns: 1.1fr 1fr; align-items: center; }
}

/* ==========================================================================
   PRODUCTS
   ========================================================================== */
.filters { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 2.2rem; }
.filter {
  padding: 0.55rem 1.2rem;
  border-radius: 999px;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  border: 1px solid var(--glass-brd);
  background: var(--glass-bg);
  transition: all 0.3s ease;
}
.filter:hover { color: var(--white); border-color: rgba(53, 224, 232, 0.5); box-shadow: 0 0 16px rgba(53, 224, 232, 0.25); }
.filter.is-active {
  color: var(--black);
  background: linear-gradient(140deg, var(--gold-2), var(--gold));
  border-color: transparent;
  box-shadow: 0 0 20px rgba(232, 182, 76, 0.4);
  font-weight: 600;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.4rem;
}

.product-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.45s var(--ease), box-shadow 0.45s ease, border-color 0.45s ease, opacity 0.4s ease;
}
.product-card:hover {
  transform: translateY(-8px);
  border-color: rgba(232, 182, 76, 0.45);
  box-shadow:
    0 0 0 1px rgba(232, 182, 76, 0.2),
    0 0 36px rgba(232, 182, 76, 0.14),
    0 22px 44px rgba(0, 0, 0, 0.5);
}
/* Card spotlight that follows the cursor (set via JS custom props) */
.product-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%),
    rgba(53, 224, 232, 0.10), transparent 65%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.product-card:hover::before { opacity: 1; }

.product-card.is-hidden { display: none; }
.product-card.is-filtering { opacity: 0; transform: scale(0.96); }

.product-card__media {
  height: 150px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(60% 80% at 50% 100%, rgba(139, 92, 246, 0.16), transparent 70%),
    linear-gradient(180deg, var(--navy-2), var(--navy));
  border-bottom: 1px solid var(--glass-brd);
}
.product-card__emoji { font-size: 3rem; filter: drop-shadow(0 0 16px rgba(53, 224, 232, 0.4)); }

.product-card__body { padding: 1.2rem 1.2rem 1.4rem; display: grid; gap: 0.5rem; flex: 1; align-content: start; }
.product-card__tag { font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cyan); }
.product-card__name { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; }
.product-card__desc { font-size: 0.86rem; color: var(--muted); margin-bottom: 0.4rem; }
.product-card .btn { justify-self: start; margin-top: auto; }

/* ==========================================================================
   WHY CHOOSE US
   ========================================================================== */
.why__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.3rem;
  margin-top: 1rem;
}

.why-card {
  position: relative;
  padding: 1.8rem 1.5rem;
  transition: transform 0.45s var(--ease), box-shadow 0.45s ease;
  overflow: hidden;
}
/* Animated neon border sweep on hover */
.why-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  padding: 1px;
  background: conic-gradient(from var(--angle, 0deg), var(--cyan), var(--purple), var(--gold), var(--cyan));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: border-spin 4s linear infinite paused;
}
.why-card:hover::after { opacity: 1; animation-play-state: running; }
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes border-spin { to { --angle: 360deg; } }

.why-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 0 40px rgba(139, 92, 246, 0.14), 0 20px 40px rgba(0, 0, 0, 0.5);
}

.why-card__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 1rem;
  border-radius: 12px;
  font-size: 1.2rem;
  color: var(--black);
  background: linear-gradient(140deg, var(--gold-2), var(--gold));
  box-shadow: 0 0 18px rgba(232, 182, 76, 0.35);
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.why-card:hover .why-card__icon {
  box-shadow: 0 0 34px rgba(232, 182, 76, 0.7);
  transform: scale(1.08) rotate(-4deg);
}
.why-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; margin-bottom: 0.4rem; }
.why-card p { font-size: 0.86rem; color: var(--muted); }

/* ==========================================================================
   GALLERY
   ========================================================================== */
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.1rem;
  margin-top: 1rem;
}

.gallery__item {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--glass-brd);
  padding: 0;
  transition: transform 0.45s var(--ease), box-shadow 0.45s ease, border-color 0.45s ease;
}
.gallery__item:hover {
  transform: translateY(-5px) scale(1.02);
  border-color: rgba(53, 224, 232, 0.6);
  box-shadow: 0 0 0 1px rgba(53, 224, 232, 0.3), 0 0 34px rgba(53, 224, 232, 0.18), 0 18px 36px rgba(0, 0, 0, 0.5);
}

/* Placeholder tile — owner replaces with real <img> */
.gallery__ph {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  font-size: 2.6rem;
  width: 100%;
  background:
    radial-gradient(70% 90% at 50% 100%, rgba(232, 182, 76, 0.10), transparent 70%),
    linear-gradient(160deg, var(--navy-2), var(--navy) 70%);
  transition: transform 0.6s var(--ease);
}
.gallery__item:hover .gallery__ph { transform: scale(1.08); }
.gallery__ph::after {
  content: attr(data-label);
  position: absolute;
  bottom: 0.8rem;
  left: 1rem;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
/* If owner adds a real image */
.gallery__item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform 0.6s var(--ease); }
.gallery__item:hover img { transform: scale(1.08); }

/* Lightbox */
/* Lightbox — hidden by default; shown only when JS adds .is-open.
   (display must not be set on the base class, or it overrides [hidden]) */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
  place-items: center;
  background: rgba(3, 4, 8, 0.9);
  backdrop-filter: blur(10px);
  padding: 1.5rem;
}
.lightbox.is-open { display: grid; animation: lb-in 0.35s ease; }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }

.lightbox__figure { max-width: min(92vw, 860px); width: 100%; text-align: center; }
.lightbox__content {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(53, 224, 232, 0.4);
  box-shadow: 0 0 60px rgba(53, 224, 232, 0.2), 0 0 120px rgba(139, 92, 246, 0.15);
  animation: lb-zoom 0.45s var(--ease);
}
@keyframes lb-zoom { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.lightbox__content .gallery__ph { aspect-ratio: 16 / 10; font-size: 5rem; }
.lightbox__content img { width: 100%; }
.lightbox__caption { margin-top: 1rem; font-family: var(--font-display); letter-spacing: 0.1em; color: var(--gold-2); }

.lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1.4rem;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--white);
  transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.3s ease;
}
.lightbox__close:hover { color: var(--cyan); text-shadow: 0 0 16px var(--cyan); transform: rotate(90deg); }

/* ==========================================================================
   LOCATION
   ========================================================================== */
.location__grid { display: grid; gap: 1.5rem; margin-top: 1rem; }

.location__info { padding: 2rem 1.6rem; display: grid; gap: 0.8rem; align-content: start; }
.location__name { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; color: var(--gold); }
.location__coords { font-size: 0.9rem; color: var(--cyan); letter-spacing: 0.05em; }
.location__note { color: var(--muted); font-size: 0.92rem; }
.location__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 0.6rem; }

.location__map { overflow: hidden; min-height: 320px; padding: 0; }
.location__map iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; filter: saturate(0.85) contrast(1.05); }

@media (min-width: 900px) {
  .location__grid { grid-template-columns: 0.9fr 1.4fr; }
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact__grid { display: grid; gap: 1.5rem; margin-top: 1rem; }

.contact__info { display: grid; gap: 1rem; align-content: start; }
.contact-line {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  transition: transform 0.35s var(--ease), border-color 0.35s ease, box-shadow 0.35s ease;
}
.contact-line:hover {
  transform: translateX(6px);
  border-color: rgba(232, 182, 76, 0.5);
  box-shadow: 0 0 24px rgba(232, 182, 76, 0.15);
}
.contact-line__icon { font-size: 1.4rem; }
.contact-line strong { display: block; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.contact-line em { font-style: normal; font-size: 0.98rem; }

.contact__form { padding: 1.8rem 1.5rem; display: grid; gap: 1.1rem; }

.field { display: grid; gap: 0.4rem; }
.field label { font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.field input, .field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--glass-brd);
  background: rgba(5, 6, 10, 0.5);
  color: var(--white);
  font: inherit;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  resize: vertical;
}
.field input::placeholder, .field textarea::placeholder { color: #5b6478; }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(53, 224, 232, 0.15), 0 0 20px rgba(53, 224, 232, 0.15);
}

.form-note { font-size: 0.85rem; color: var(--gold-2); min-height: 1.2em; text-align: center; }

@media (min-width: 900px) {
  .contact__grid { grid-template-columns: 0.9fr 1.3fr; align-items: start; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { position: relative; padding: 3.5rem 0 2rem; background: linear-gradient(180deg, transparent, rgba(8, 10, 20, 0.9)); }

/* Animated glow line across the top of the footer */
.footer__glowline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--cyan), var(--purple), transparent);
  background-size: 200% 100%;
  animation: glowline 6s linear infinite;
  box-shadow: 0 0 14px rgba(53, 224, 232, 0.5);
}
@keyframes glowline { to { background-position: -200% 0; } }

.footer__inner { display: grid; justify-items: center; gap: 1.4rem; text-align: center; }
.footer__brand { display: inline-flex; align-items: center; gap: 0.65rem; }

.footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; }
.footer__nav a { font-size: 0.82rem; color: var(--muted); transition: color 0.3s ease, text-shadow 0.3s ease; }
.footer__nav a:hover { color: var(--white); text-shadow: 0 0 12px rgba(53, 224, 232, 0.6); }

.footer__social { display: flex; gap: 0.8rem; }
.social {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--glass-brd);
  font-size: 1rem;
  transition: all 0.35s var(--ease);
}
.social:hover {
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 0 20px rgba(232, 182, 76, 0.4);
  transform: translateY(-4px);
}

.footer__thanks {
  font-family: var(--font-display);
  letter-spacing: 0.15em;
  color: var(--gold-2);
  text-shadow: 0 0 16px rgba(232, 182, 76, 0.35);
}
.footer__copy { font-size: 0.75rem; color: #5b6478; }

/* ==========================================================================
   ACCESSIBILITY — reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   BRAND ADDITIONS — logo image, about video, owner card, location details
   ========================================================================== */
.logo__img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 0 18px rgba(232, 182, 76, 0.35);
}

/* About intro video */
.about__video {
  overflow: hidden;
  padding: 0;
  margin-bottom: 1.4rem;
  border-color: rgba(232, 182, 76, 0.3);
  box-shadow: 0 0 34px rgba(232, 182, 76, 0.12), 0 18px 40px rgba(0, 0, 0, 0.5);
}
.about__video video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* Owner / proprietor card */
.owner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  margin: 1.2rem 0 0.4rem;
  max-width: 420px;
}
.owner__photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(232, 182, 76, 0.55);
  box-shadow: 0 0 18px rgba(232, 182, 76, 0.3);
}
.owner__name { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; color: var(--gold-2); }
.owner__role { font-size: 0.78rem; color: var(--muted); letter-spacing: 0.06em; }

/* Location extras */
.location__address { color: var(--white); font-size: 0.95rem; line-height: 1.6; }
.location__hours { color: var(--gold-2); font-size: 0.92rem; }
.hours-badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  border: 1px solid rgba(53, 224, 232, 0.5);
  color: var(--cyan);
  box-shadow: 0 0 12px rgba(53, 224, 232, 0.2);
}

/* Social icons hold SVGs now */
.social svg { display: block; }

/* ==========================================================================
   PRODUCT MEDIA — animated SVG illustrations (hover-reactive)
   Replace any SVG with <img src="assets/your-photo.jpg"> for real photos.
   ========================================================================== */
.pmedia { position: relative; overflow: hidden; }
.pm-svg {
  width: 100%;
  height: 100%;
  max-height: 150px;
  transition: transform 0.6s var(--ease);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
}
.product-card:hover .pm-svg { transform: scale(1.12) translateY(-3px); }

/* If the owner swaps in a real photo */
.pmedia img { width: 100%; height: 150px; object-fit: cover; transition: transform 0.6s var(--ease); }
.product-card:hover .pmedia img { transform: scale(1.1); }

/* Shine sweep across the media on hover */
.pmedia::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 55%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  transform: skewX(-18deg);
  transition: left 0.7s var(--ease);
  pointer-events: none;
}
.product-card:hover .pmedia::after { left: 130%; }

/* Element-level animations inside the SVGs */
.pm-pulse { animation: pm-pulse 2.4s ease-in-out infinite; }
@keyframes pm-pulse { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }

.pm-rays { opacity: 0.6; transition: opacity 0.4s ease; }
.product-card:hover .pm-rays { opacity: 1; }

.pm-wire { stroke-dasharray: 6 6; animation: pm-dash 2.5s linear infinite; }
@keyframes pm-dash { to { stroke-dashoffset: -24; } }

.pm-drip { transition: transform 0.5s var(--ease); transform-origin: center top; }
.product-card:hover .pm-drip { transform: scaleY(1.15); }

.pm-lever { transition: transform 0.35s var(--ease); }
.product-card:hover .pm-lever { transform: translateY(-6px); }

.pm-tilt { transition: transform 0.5s var(--ease); transform-origin: center; }
.product-card:hover .pm-tilt { transform: rotate(-4deg) translateY(-3px); }

.pm-glowfill { transition: filter 0.4s ease; }
.product-card:hover .pm-glowfill { filter: drop-shadow(0 0 8px #e8b64c); }

.pm-spark { opacity: 0; transition: opacity 0.3s ease; }
.product-card:hover .pm-spark { opacity: 1; }

/* Fan blades spin on hover */
.pm-fan { animation: pm-spin 6s linear infinite; }
.product-card:hover .pm-fan { animation-duration: 0.7s; }
.pm-spin-slow { animation: pm-spin 10s linear infinite; }
@keyframes pm-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .pm-fan, .pm-spin-slow, .pm-wire, .pm-pulse { animation: none !important; }
}