:root {
  --background: #252820;
  --foreground: #fff4e3;
  --muted: #dfd2bf;
  --green: #6aa56e;
  --metal: #f0d8ad;
  --panel: rgba(62, 66, 55, 0.86);
  --cursor-gun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'%3E%3Ccircle cx='18' cy='18' r='15' fill='none' stroke='%23dcc59e' stroke-width='3'/%3E%3Ccircle cx='18' cy='18' r='8' fill='none' stroke='%235ea965' stroke-width='2'/%3E%3Ccircle cx='18' cy='18' r='3' fill='%23c62020'/%3E%3Cpath d='M18 0v9M18 27v15M0 18h9M27 18h15' stroke='%23fff1cc' stroke-width='2'/%3E%3C/svg%3E") 18 18, crosshair;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 80% 18%, rgba(106, 165, 110, 0.48), transparent 28rem),
    radial-gradient(circle at 20% 10%, rgba(240, 216, 173, 0.34), transparent 24rem),
    linear-gradient(135deg, #20241d, #3a3f34 48%, #252820);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
  cursor: var(--cursor-gun);
}

a, button, input, select { font: inherit; }
button, a, select, input { cursor: var(--cursor-gun); }
button, a { transition: transform 180ms ease, border-color 180ms ease, background 180ms ease; }
button:hover, a:hover { transform: translateY(-2px); }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem clamp(1rem, 4vw, 4rem);
  border-bottom: 1px solid rgba(199, 176, 143, 0.16);
  background: rgba(33, 37, 30, 0.86);
  backdrop-filter: blur(18px);
}

.brand-button {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--foreground);
  border: 0;
  background: transparent;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
}

.brand-button img, footer img {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid rgba(199, 176, 143, 0.45);
}

.nav-links { display: flex; gap: clamp(0.7rem, 2vw, 1.4rem); flex-wrap: wrap; }
.nav-links a, footer a { color: var(--muted); text-decoration: none; }

.hero {
  position: relative;
  min-height: calc(100vh - 74px);
  display: grid;
  align-items: center;
  padding: clamp(2rem, 6vw, 6rem);
  overflow: hidden;
}

.hero::before, .section::before, .services::before {
  content: "";
  position: absolute;
  inset: 8%;
  background: url("/dark-star-logo.jpeg") center / contain no-repeat;
  opacity: 0.07;
  pointer-events: none;
  filter: grayscale(0.2);
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  background:
    linear-gradient(92deg, transparent 0 17%, rgba(199, 176, 143, 0.16) 17.2% 17.5%, transparent 17.8% 100%),
    repeating-linear-gradient(90deg, rgba(199, 176, 143, 0.08) 0 1px, transparent 1px 90px);
  transform: perspective(800px) rotateX(62deg);
  transform-origin: bottom;
  opacity: 0.6;
}

.hero-image-panel {
  position: relative;
  z-index: 2;
  min-height: min(760px, calc(100vh - 150px));
  display: grid;
  align-items: center;
  padding: clamp(2rem, 6vw, 6rem);
  overflow: hidden;
  border: 1px solid rgba(220, 197, 158, 0.32);
  background:
    linear-gradient(90deg, rgba(34,38,31,0.88), rgba(42,47,38,0.62) 48%, rgba(42,47,38,0.18)),
    radial-gradient(circle at 72% 48%, rgba(240,216,173,0.32), transparent 22rem),
    linear-gradient(135deg, rgba(66,72,58,0.95), rgba(36,42,34,0.78));
  box-shadow: 0 42px 100px rgba(0,0,0,0.28), inset 0 0 80px rgba(240,216,173,0.12);
}

.hero-image-panel .logo-stage {
  position: absolute;
  right: clamp(-7rem, -7vw, -2rem);
  top: 50%;
  width: min(72vw, 760px);
  opacity: 0.34;
  transform: translateY(-50%);
  pointer-events: none;
}

.hero-content { position: relative; z-index: 3; max-width: 780px; text-shadow: 0 2px 26px rgba(0,0,0,0.56); }
.eyebrow {
  margin: 0 0 0.8rem;
  color: var(--metal);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
}

h1, h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  line-height: 1;
  font-weight: 700;
}
h1 { max-width: 780px; font-size: clamp(3rem, 8vw, 7rem); }
h2 { font-size: clamp(2rem, 5vw, 4.4rem); }

.hero p:not(.eyebrow), .section > p, .booking p {
  max-width: 620px;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.7;
  font-family: "Trebuchet MS", Arial, sans-serif;
}

.hero-badges { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.4rem; }
.hero-badges span, .badge-button {
  border: 1px solid rgba(199, 176, 143, 0.28);
  color: var(--metal);
  background: rgba(255, 255, 255, 0.08);
  padding: 0.55rem 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
}
.badge-button {
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 18px rgba(220,197,158,0.12);
}
.badge-button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(110,202,116,0.32), transparent);
  animation: rail-scan 2.4s linear infinite;
}

.actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }
.primary, .secondary {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.15rem;
  border: 1px solid rgba(199, 176, 143, 0.38);
  color: var(--foreground);
  text-decoration: none;
  cursor: pointer;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.primary { background: linear-gradient(135deg, #7a6545, #d2bd94 48%, #536f47); color: #070806; font-weight: 800; }
.secondary { background: rgba(255, 255, 255, 0.1); }

.logo-stage {
  position: relative;
  width: min(84vw, 680px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: visible;
  border: 1px solid rgba(199, 176, 143, 0.15);
  background:
    radial-gradient(circle, rgba(220, 197, 158, 0.2), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,0.14), rgba(0,0,0,0.16));
  box-shadow: inset 0 0 70px rgba(0,0,0,0.24), 0 38px 90px rgba(0,0,0,0.28);
}

.hero-image-panel .animated-logo {
  width: min(70%, 520px);
  opacity: 0.92;
}

.target-halo {
  position: absolute;
  width: 82%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(199, 176, 143, 0.45);
  box-shadow:
    inset 0 0 0 52px rgba(49, 95, 53, 0.055),
    inset 0 0 0 104px rgba(199, 176, 143, 0.045),
    0 0 80px rgba(49, 95, 53, 0.22);
  animation: target-pulse 3.8s ease-in-out infinite;
}

.sight {
  position: absolute;
  background: linear-gradient(90deg, transparent, rgba(199,176,143,0.82), transparent);
  opacity: 0.65;
}
.sight.horizontal { width: 78%; height: 2px; }
.sight.vertical { width: 2px; height: 78%; background: linear-gradient(180deg, transparent, rgba(199,176,143,0.82), transparent); }

.range-lanes {
  position: absolute;
  inset: 58% 7% -14%;
  transform: perspective(620px) rotateX(64deg);
  background:
    repeating-linear-gradient(90deg, transparent 0 76px, rgba(199,176,143,0.2) 77px 79px),
    linear-gradient(rgba(49,95,53,0.08), transparent);
}

.animated-logo {
  width: min(74%, 500px);
  max-height: 74%;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid rgba(236, 218, 180, 0.48);
  background: rgba(255, 255, 255, 0.08);
  padding: clamp(0.35rem, 1.2vw, 0.85rem);
  box-shadow: 0 0 42px rgba(220, 197, 158, 0.42), 0 0 120px rgba(79, 132, 83, 0.32);
  animation: logo-orbit 5.2s ease-in-out infinite;
}

.round {
  position: absolute;
  width: 90px;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(90deg, #5a3c24, #d8bd82 42%, #2f2519 74%, #1b160f);
  box-shadow: 0 0 22px rgba(216,189,130,0.24);
  transform-origin: center;
}
.round::after {
  content: "";
  position: absolute;
  right: -16px;
  top: 2px;
  border-left: 26px solid #806040;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}
.round-one { left: 7%; top: 26%; transform: rotate(-18deg); animation: round-pass 4.8s ease-in-out infinite; }
.round-two { right: 10%; top: 62%; transform: rotate(16deg) scale(0.82); animation: round-pass 5.6s ease-in-out infinite reverse; }
.round-three { left: 18%; bottom: 15%; transform: rotate(8deg) scale(0.64); opacity: 0.7; }

.muzzle-flash {
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239,216,168,0.76), rgba(49,95,53,0.18) 34%, transparent 70%);
  animation: flash 3.6s steps(1) infinite;
}
.smoke {
  position: absolute;
  width: 50%;
  height: 22%;
  border-radius: 50%;
  background: rgba(196, 196, 196, 0.09);
  filter: blur(34px);
  animation: smoke-drift 8s ease-in-out infinite alternate;
}
.smoke-one { left: -8%; bottom: 9%; }
.smoke-two { right: -12%; top: 18%; animation-delay: -3s; }

.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: #151714;
  overflow: hidden;
  animation: intro-exit 5.2s ease forwards;
}
.intro.hidden { display: none; }
.intro-logo-stage { width: min(88vw, 780px); animation: intro-logo-camera 5.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.intro-copy {
  position: absolute;
  bottom: 8vh;
  text-align: center;
  animation: reveal-copy 5.2s ease forwards;
}
.intro-copy p { margin: 0; color: var(--metal); text-transform: uppercase; letter-spacing: 0.16em; }
.skip-intro {
  position: absolute;
  right: 2rem;
  bottom: 2rem;
  padding: 0.7rem 1rem;
  border: 1px solid rgba(199, 176, 143, 0.4);
  color: var(--foreground);
  background: rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.section, .services, .booking {
  position: relative;
  display: grid;
  gap: 2rem;
  padding: clamp(4rem, 8vw, 8rem) clamp(1rem, 6vw, 6rem);
}
.services {
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 42%, rgba(220,197,158,0.18), transparent 18rem),
    radial-gradient(circle at 78% 55%, rgba(79,132,83,0.2), transparent 20rem),
    linear-gradient(135deg, rgba(51,58,47,0.78), rgba(35,41,33,0.86));
}
.services::after {
  content: "";
  position: absolute;
  inset: 1.2rem clamp(0.8rem, 4vw, 4rem);
  z-index: 0;
  pointer-events: none;
  opacity: 0.78;
  background:
    radial-gradient(circle at 16% 50%, transparent 0 3.2rem, rgba(220,197,158,0.5) 3.25rem 3.38rem, transparent 3.45rem 5.7rem, rgba(220,197,158,0.34) 5.75rem 5.88rem, transparent 5.95rem 8.1rem, rgba(110,202,116,0.38) 8.15rem 8.28rem, transparent 8.35rem),
    radial-gradient(circle at 50% 48%, transparent 0 2.4rem, rgba(220,197,158,0.42) 2.45rem 2.56rem, transparent 2.62rem 4.6rem, rgba(110,202,116,0.3) 4.65rem 4.78rem, transparent 4.84rem 6.6rem, rgba(220,197,158,0.24) 6.65rem 6.78rem, transparent 6.84rem),
    radial-gradient(circle at 84% 50%, transparent 0 3rem, rgba(220,197,158,0.46) 3.05rem 3.18rem, transparent 3.25rem 5.35rem, rgba(110,202,116,0.32) 5.4rem 5.52rem, transparent 5.58rem 7.8rem, rgba(220,197,158,0.2) 7.85rem 7.98rem, transparent 8.05rem),
    linear-gradient(90deg, transparent 0 11%, rgba(220,197,158,0.24) 11.1% 11.25%, transparent 11.35% 49.85%, rgba(220,197,158,0.22) 50% 50.15%, transparent 50.25% 88.65%, rgba(220,197,158,0.2) 88.75% 88.9%, transparent 89%),
    repeating-linear-gradient(90deg, rgba(220,197,158,0.06) 0 1px, transparent 1px 72px);
  animation: target-practice-sweep 7s ease-in-out infinite alternate;
}
.services > * {
  position: relative;
  z-index: 1;
}
.section, .booking { grid-template-columns: minmax(0, 0.9fr) minmax(300px, 1.1fr); align-items: start; }
.carousel-shell { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--metal); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; }
.carousel-rail { flex: 1; height: 2px; background: linear-gradient(90deg, transparent, var(--metal), var(--green), transparent); animation: rail-scan 2.8s linear infinite; }
.service-grid {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.45rem 0 1rem;
  scrollbar-color: var(--metal) rgba(255,255,255,0.12);
}
.service-card, .booking-panel {
  position: relative;
  border: 1px solid transparent;
  background: linear-gradient(var(--panel), var(--panel)) padding-box, conic-gradient(from var(--spin-angle), rgba(220,197,158,0.2), rgba(102,178,103,0.95), rgba(255,239,203,0.9), rgba(220,197,158,0.2)) border-box;
  backdrop-filter: blur(16px);
  animation: border-spin 4.8s linear infinite;
}
.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 31%, rgba(198,32,32,0.95) 0 4px, transparent 4.5px),
    linear-gradient(90deg, transparent calc(50% - 20px), rgba(198,32,32,0.78) calc(50% - 20px) calc(50% + 20px), transparent calc(50% + 20px)),
    linear-gradient(0deg, transparent calc(31% - 20px), rgba(198,32,32,0.78) calc(31% - 20px) calc(31% + 20px), transparent calc(31% + 20px)),
    radial-gradient(circle at 50% 31%, transparent 0 36px, rgba(220,197,158,0.5) 37px 39px, transparent 40px 68px, rgba(110,202,116,0.36) 69px 71px, transparent 72px),
    radial-gradient(ellipse at 50% 78%, rgba(10,12,10,0.55) 0 33%, transparent 34%),
    radial-gradient(circle at 50% 38%, rgba(10,12,10,0.62) 0 18%, transparent 19%),
    linear-gradient(135deg, rgba(255,255,255,0.04), rgba(0,0,0,0.2));
  pointer-events: none;
  opacity: 0.82;
  filter: drop-shadow(0 0 14px rgba(220,197,158,0.22));
  animation: target-card-drift 5.2s ease-in-out infinite alternate;
}
.service-card::after {
  content: "";
  position: absolute;
  inset: 0.42rem;
  border: 0;
  background:
    linear-gradient(90deg, transparent 0 10px, #5a3c24 10px 19px, #d8bd82 20px 38px, #302217 39px 49px, transparent 50px 82px) top left / 82px 14px repeat-x,
    linear-gradient(90deg, transparent 0 10px, #5a3c24 10px 19px, #d8bd82 20px 38px, #302217 39px 49px, transparent 50px 82px) bottom left / 82px 14px repeat-x;
  border-left: 14px solid rgba(216,189,130,0.72);
  border-right: 14px solid rgba(216,189,130,0.72);
  pointer-events: none;
  filter: drop-shadow(0 0 9px rgba(216,189,130,0.35));
  animation: cartridge-run 3.4s linear infinite;
}
.service-card {
  flex: 0 0 clamp(260px, 29vw, 390px);
  min-height: 130px;
  padding: 1.8rem 1.4rem;
  color: var(--foreground);
  text-align: center;
  cursor: pointer;
  scroll-snap-align: start;
  box-shadow: 0 18px 44px rgba(0,0,0,0.24);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.service-card.active { background: linear-gradient(135deg, rgba(79, 132, 83, 0.62), rgba(43, 45, 39, 0.9)) padding-box, conic-gradient(from var(--spin-angle), #dcc59e, #6dca74, #fff1cc, #dcc59e) border-box; }
.service-card span { display: block; color: #fff1cc; text-transform: uppercase; font-weight: 900; font-size: 1.02rem; letter-spacing: 0.07em; position: relative; z-index: 2; text-shadow: 0 2px 14px rgba(0,0,0,0.9); background: rgba(12,14,12,0.58); padding: 0.55rem 0.7rem; border: 1px solid rgba(220,197,158,0.28); }
.service-card small { color: var(--muted); line-height: 1.55; }
.booking-panel { display: grid; gap: 1rem; padding: 1rem; }
label { display: grid; gap: 0.45rem; color: var(--metal); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; }
input, select { min-height: 46px; border: 1px solid rgba(240, 216, 173, 0.45); background: #34392f; color: var(--foreground); padding: 0.7rem; }
footer { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; padding: 2rem; border-top: 1px solid rgba(199, 176, 143, 0.14); color: var(--muted); }
.toast {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 130;
  transform: translateY(18px);
  opacity: 0;
  pointer-events: none;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(220,197,158,0.6);
  background: rgba(49, 54, 44, 0.94);
  color: var(--foreground);
  box-shadow: 0 18px 42px rgba(0,0,0,0.35);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  transition: opacity 220ms ease, transform 220ms ease;
}
.toast.show { opacity: 1; transform: translateY(0); }
.detail-window {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(22, 26, 21, 0.62);
  backdrop-filter: blur(14px);
}
.detail-window.hidden { display: none; }
.detail-panel {
  position: relative;
  width: min(760px, 94vw);
  border: 1px solid transparent;
  background:
    linear-gradient(135deg, rgba(61, 68, 55, 0.96), rgba(38, 44, 36, 0.94)) padding-box,
    conic-gradient(from var(--spin-angle), #dcc59e, #6dca74, #fff1cc, #dcc59e) border-box;
  animation: border-spin 4.8s linear infinite;
  box-shadow: 0 36px 90px rgba(0,0,0,0.48);
  padding: clamp(1.3rem, 4vw, 3rem);
}
.detail-panel h2 { font-size: clamp(1.9rem, 5vw, 3.5rem); }
.detail-panel p { color: var(--muted); font-size: 1.05rem; line-height: 1.7; }
.detail-close {
  position: absolute;
  right: 1rem;
  top: 1rem;
  border: 1px solid rgba(220,197,158,0.45);
  background: rgba(0,0,0,0.22);
  color: var(--foreground);
  padding: 0.55rem 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.detail-meta {
  display: grid;
  gap: 0.35rem;
  margin: 1.4rem 0;
  padding: 1rem;
  border-left: 3px solid var(--metal);
  background: rgba(255,255,255,0.04);
}
.detail-meta span {
  color: var(--metal);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
}
.detail-meta strong { color: var(--foreground); font-weight: 600; }
.game-panel { max-height: 92vh; overflow: auto; }
.score-meter {
  height: 14px;
  border: 1px solid rgba(220,197,158,0.45);
  background: rgba(0,0,0,0.24);
  margin: 1rem 0 0.4rem;
  overflow: hidden;
}
.score-meter span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #8fb36d, #dcc59e);
  box-shadow: 0 0 22px rgba(110,202,116,0.45);
  transition: width 260ms ease;
}
.score-copy {
  margin-top: 0;
  color: var(--metal) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.82rem !important;
}
.game-target {
  width: min(220px, 48vw);
  aspect-ratio: 1;
  margin: 1rem auto;
  border-radius: 50%;
  background:
    radial-gradient(circle, #dcc59e 0 8%, transparent 8.5% 18%, rgba(110,202,116,0.55) 18.5% 19.5%, transparent 20% 36%, rgba(220,197,158,0.5) 36.5% 37.5%, transparent 38% 58%, rgba(220,197,158,0.32) 58.5% 59.5%, transparent 60%),
    rgba(255,255,255,0.03);
  border: 1px solid rgba(220,197,158,0.45);
  display: grid;
  place-items: center;
  animation: target-pulse 2.8s ease-in-out infinite;
}
.game-target span {
  width: 2px;
  height: 82%;
  background: linear-gradient(transparent, var(--metal), transparent);
  box-shadow: 0 0 0 999px transparent;
}
.scenario {
  color: var(--foreground) !important;
  font-size: 1.2rem !important;
}
.answer-grid {
  display: grid;
  gap: 0.75rem;
}
.answer-btn {
  border: 1px solid rgba(220,197,158,0.34);
  background: rgba(0,0,0,0.22);
  color: var(--foreground);
  padding: 0.9rem 1rem;
  text-align: left;
}
.answer-btn.correct {
  border-color: rgba(110,202,116,0.9);
  background: rgba(79,132,83,0.42);
}
.answer-btn.wrong {
  border-color: rgba(220,120,96,0.9);
  background: rgba(112,45,35,0.45);
}
.feedback-panel {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid rgba(220,197,158,0.28);
  background: rgba(255,255,255,0.04);
}
.feedback-panel strong {
  color: var(--metal);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

@keyframes logo-orbit {
  0%, 100% { transform: scale(1) rotateY(0deg); filter: brightness(0.95); }
  45% { transform: scale(1.04) rotateY(-10deg); filter: brightness(1.16); }
  70% { transform: scale(0.98) rotateY(8deg); }
}
@keyframes target-pulse { 50% { transform: scale(1.06); opacity: 0.82; } }
@keyframes round-pass { 50% { translate: 32px -12px; filter: brightness(1.28); } }
@keyframes flash { 0%, 82%, 100% { opacity: 0; transform: scale(0.35); } 83% { opacity: 1; transform: scale(1); } }
@keyframes smoke-drift { to { transform: translateX(8%) translateY(-12%); } }
@property --spin-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes border-spin { to { --spin-angle: 360deg; } }
@keyframes bullet-border-run { to { background-position: 54px 0; } }
@keyframes cartridge-run { to { background-position: 82px 0, -82px 100%; } }
@keyframes target-card-drift {
  0% { transform: scale(1); filter: brightness(0.92); }
  100% { transform: scale(1.04); filter: brightness(1.14); }
}
@keyframes rail-scan { 0% { background-position: -40vw 0; } 100% { background-position: 40vw 0; } }
@keyframes target-practice-sweep {
  0% { transform: translateX(-1.5%) scale(1); filter: brightness(0.92); }
  50% { transform: translateX(1.2%) scale(1.025); filter: brightness(1.15); }
  100% { transform: translateX(0.3%) scale(1.01); filter: brightness(1); }
}
@keyframes intro-logo-camera {
  0% { transform: scale(0.72) rotateY(-18deg); opacity: 0; }
  18%, 78% { transform: scale(1) rotateY(0deg); opacity: 1; }
  100% { transform: scale(1.18) rotateY(14deg); opacity: 0; }
}
@keyframes reveal-copy {
  0%, 36% { transform: translateY(24px); opacity: 0; }
  52%, 88% { transform: translateY(0); opacity: 1; }
  100% { opacity: 0; }
}
@keyframes intro-exit {
  0%, 92% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

@media (max-width: 980px) {
  .hero, .section, .booking { grid-template-columns: 1fr; }
  .hero-image-panel { min-height: 680px; }
  .hero-image-panel .logo-stage { right: -12rem; opacity: 0.22; }
  .service-card { flex-basis: min(78vw, 360px); }
}
@media (max-width: 640px) {
  .topbar { align-items: flex-start; flex-direction: column; }
  .hero { padding-top: 2rem; }
  .hero-image-panel { min-height: 650px; padding: 1.35rem; }
  .hero-image-panel .logo-stage { width: 105vw; right: -42vw; opacity: 0.18; }
  .service-card { flex-basis: 84vw; }
  .intro-copy p { max-width: 300px; font-size: 0.72rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
  .intro { display: none; }
}