/* Steel River Tactical Design System - Camera + Alarm Offer */
:root {
  --bg-dark: #090a0f;
  --bg-card: #12141c;
  --bg-card-hover: #191c28;
  --bg-panel: #161822;
  --border-color: #272a38;
  --border-highlight: #3b3f54;
  
  --primary-red: #ff3b30;
  --primary-red-hover: #e02d23;
  --accent-amber: #ff9500;
  --accent-green: #30d158;
  --text-main: #f2f2f7;
  --text-muted: #9898a0;
  --text-dim: #636366;
  
  --font-headline: 'Montserrat', 'Outfit', system-ui, sans-serif;
  --font-body: 'Roboto', 'Inter', system-ui, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-family: var(--font-body);
  background-color: var(--bg-dark);
  color: var(--text-main);
  line-height: 1.6;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Background grid pattern */
.bg-grid-overlay {
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Container */
.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
}

.container-narrow {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
}

/* Urgency Top Bar */
.top-ticker {
  background: linear-gradient(90deg, #d70015 0%, #ff3b30 50%, #d70015 100%);
  color: #ffffff;
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 0.85rem;
  padding: 10px 16px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 4px 20px rgba(255, 59, 48, 0.4);
}

.top-ticker .ticker-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.top-ticker .timer-badge {
  background: rgba(0, 0, 0, 0.85);
  color: #ffffff;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: monospace;
  font-weight: 900;
  letter-spacing: 1px;
}

/* Navbar */
.navbar {
  background: rgba(9, 10, 15, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-color);
  padding: 14px 0;
  position: sticky;
  top: 38px;
  z-index: 90;
}

.navbar .nav-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand-logo-img {
  height: 42px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  display: block;
}

@media (max-width: 480px) {
  .brand-logo-img {
    height: 32px;
    max-width: 170px;
  }
}

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  background-color: var(--accent-green);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--accent-green);
  animation: pulse-ring 1.8s infinite;
}

@keyframes pulse-ring {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(48, 209, 88, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(48, 209, 88, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(48, 209, 88, 0); }
}

/* Hero Section */
.hero-section {
  padding: 40px 0 60px;
  position: relative;
}

.badge-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 59, 48, 0.12);
  border: 1px solid rgba(255, 59, 48, 0.4);
  color: var(--primary-red);
  font-family: var(--font-headline);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 6px 14px;
  border-radius: 4px;
  margin-bottom: 16px;
}

/* Three grid items: heading, gallery, offer content. Desktop keeps the original
   look — gallery on the left spanning both rows, heading above the offer box on
   the right. Named areas let the mobile stack reorder to heading -> gallery ->
   offer without touching the markup. */
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "gallery heading"
    "gallery content";
  column-gap: 40px;
  row-gap: 0;
  align-items: start;
}

.hero-heading { grid-area: heading; }
.gallery-card { grid-area: gallery; }
.hero-content { grid-area: content; }

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "heading"
      "gallery"
      "content";
    row-gap: 18px;
  }
}

.hero-heading h1 {
  font-family: var(--font-headline);
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1.15;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

.hero-heading h1 span.highlight {
  color: var(--primary-red);
  background: linear-gradient(180deg, transparent 65%, rgba(255, 59, 48, 0.25) 65%);
}

.hero-heading .subtitle {
  font-size: 1.1rem;
  color: #d1d1d6;
  margin-bottom: 24px;
  line-height: 1.5;
}

/* Product Gallery */
.gallery-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  position: relative;
}

.main-image-wrap {
  width: 100%;
  aspect-ratio: 16 / 10;   /* matches the wide hero artwork; square framing letterboxed it */
  background: #06070a;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.main-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.live-camera-led {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid rgba(255, 59, 48, 0.6);
  padding: 6px 12px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.05em;
  z-index: 10;
}

.blinking-red-dot {
  width: 10px;
  height: 10px;
  background-color: var(--primary-red);
  border-radius: 50%;
  animation: blink-fast 1s infinite alternate;
}

@keyframes blink-fast {
  from { opacity: 1; box-shadow: 0 0 12px var(--primary-red); }
  to { opacity: 0.2; box-shadow: 0 0 2px var(--primary-red); }
}

.thumb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 14px;
  background: var(--bg-panel);
}

.thumb-item {
  aspect-ratio: 16 / 10;   /* matches the wide hero artwork; square framing letterboxed it */
  border-radius: 6px;
  border: 2px solid transparent;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.65;
  transition: all 0.2s ease;
  background: #000;
  padding: 4px;
}

.thumb-item.active, .thumb-item:hover {
  opacity: 1;
  border-color: var(--primary-red);
}

.thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Offer Box Card */
.offer-box {
  background: var(--bg-card);
  border: 2px solid var(--border-highlight);
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
  position: relative;
}

.offer-box::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 30px;
  right: 30px;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-red), var(--accent-amber));
  border-radius: 4px 4px 0 0;
}

.price-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 16px;
  margin-bottom: 20px;
}

.regular-price {
  font-size: 0.9rem;
  color: var(--text-muted);
  text-decoration: line-through;
  font-weight: 600;
}

.today-price {
  font-family: var(--font-headline);
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--accent-green);
  line-height: 1;
}

.today-price span.shipping-note {
  font-size: 0.9rem;
  color: var(--text-muted);
  font-weight: 600;
  display: block;
}

.stock-progress-wrap {
  margin-bottom: 24px;
}

.stock-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: var(--text-muted);
}

.stock-info span.remaining {
  color: var(--primary-red);
}

.progress-bar-bg {
  width: 100%;
  height: 10px;
  background: var(--bg-panel);
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.progress-bar-fill {
  height: 100%;
  width: 95%;
  background: linear-gradient(90deg, var(--accent-amber), var(--primary-red));
  border-radius: 5px;
  transition: width 1s ease-in-out;
}

.cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 18px 24px;
  background: linear-gradient(180deg, #ff4d42 0%, #d70015 100%);
  color: #ffffff;
  font-family: var(--font-headline);
  font-size: 1.15rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 8px 25px rgba(255, 59, 48, 0.45);
  transition: all 0.25s ease;
  margin-bottom: 16px;
  text-align: center;
}

.cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(255, 59, 48, 0.6);
  background: linear-gradient(180deg, #ff5e54 0%, #e60017 100%);
}

.cta-subtext {
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 20px;
}

.guarantee-pills {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--border-color);
  padding-top: 16px;
}

.pill-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: #e5e5ea;
  font-weight: 600;
}

.pill-item svg {
  color: var(--accent-green);
  flex-shrink: 0;
}

/* Sections */
.section {
  padding: 70px 0;
  border-top: 1px solid var(--border-color);
}

.section-dark {
  background-color: var(--bg-panel);
}

.section-header {
  text-align: center;
  max-width: 750px;
  margin: 0 auto 50px;
}

.section-header .tag {
  color: var(--primary-red);
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: block;
}

.section-header h2 {
  font-family: var(--font-headline);
  font-size: 2.2rem;
  font-weight: 900;
  text-transform: uppercase;
  color: #ffffff;
  line-height: 1.2;
  margin-bottom: 14px;
}

.section-header p {
  color: var(--text-muted);
  font-size: 1.05rem;
}

/* Comparison Table */
.comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 30px;
}

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

.comp-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 30px;
  position: relative;
}

.comp-card.highlight-card {
  border: 2px solid var(--primary-red);
  box-shadow: 0 10px 30px rgba(255, 59, 48, 0.2);
}

.comp-card.highlight-card::before {
  content: 'RECOMMENDED DETERRENT';
  position: absolute;
  top: -12px;
  left: 24px;
  background: var(--primary-red);
  color: #fff;
  font-family: var(--font-headline);
  font-size: 0.68rem;
  font-weight: 900;
  padding: 2px 10px;
  border-radius: 4px;
  letter-spacing: 0.08em;
}

.comp-card h3 {
  font-family: var(--font-headline);
  font-size: 1.4rem;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.comp-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.comp-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.95rem;
  color: #d1d1d6;
}

.comp-list li .icon-cross {
  color: var(--primary-red);
  font-weight: bold;
}

.comp-list li .icon-check {
  color: var(--accent-green);
  font-weight: bold;
}

/* 2-Layer Breakdown Cards */
.layer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

@media (max-width: 800px) {
  .layer-grid {
    grid-template-columns: 1fr;
  }
}

.layer-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
}

.layer-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-highlight);
}

.layer-img-wrap {
  width: 100%;
  height: 340px;
  background: #06070a;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-bottom: 1px solid var(--border-color);
}

.layer-img-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.layer-card-body {
  padding: 28px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.layer-number {
  color: var(--primary-red);
  font-family: var(--font-headline);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.layer-card-body h3 {
  font-family: var(--font-headline);
  font-size: 1.5rem;
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.layer-card-body p {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 20px;
  line-height: 1.6;
}

.feature-bullets {
  list-style: none;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--border-color);
  padding-top: 16px;
}

.feature-bullets li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: #e5e5ea;
  font-weight: 600;
}

.feature-bullets li svg {
  color: var(--accent-green);
  flex-shrink: 0;
}

/* Use Cases Matrix Grid */
.usecase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 900px) {
  .usecase-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 550px) {
  .usecase-grid {
    grid-template-columns: 1fr;
  }
}

.usecase-item {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  transition: all 0.2s ease;
}

.usecase-item:hover {
  border-color: var(--primary-red);
  transform: translateY(-2px);
}

.usecase-icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 59, 48, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  color: var(--primary-red);
}

.usecase-item h4 {
  font-family: var(--font-headline);
  font-size: 1.1rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.usecase-item p {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Value Stack Callout Section */
.value-box {
  background: linear-gradient(135deg, var(--bg-card) 0%, #171a26 100%);
  border: 2px solid var(--border-highlight);
  border-radius: 16px;
  padding: 40px;
  max-width: 850px;
  margin: 0 auto;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
}

.value-table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
}

.value-table tr {
  border-bottom: 1px solid var(--border-color);
}

.value-table td {
  padding: 14px 0;
  font-size: 1.05rem;
}

.value-table td.item-name {
  font-weight: 700;
  color: #ffffff;
}

.value-table td.item-val {
  text-align: right;
  font-family: monospace;
  font-weight: 800;
  color: var(--text-muted);
  text-decoration: line-through;
}

.value-table tr.total-row {
  border-bottom: none;
  border-top: 2px solid var(--border-highlight);
}

.value-table tr.total-row td {
  font-family: var(--font-headline);
  font-size: 1.3rem;
  font-weight: 900;
  padding-top: 20px;
}

.value-table tr.total-row td.final-price {
  color: var(--accent-green);
  text-decoration: none;
  font-size: 1.8rem;
}

/* Reviews Grid */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 850px) {
  .reviews-grid {
    grid-template-columns: 1fr;
  }
}

.review-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.stars {
  color: var(--accent-amber);
  margin-bottom: 12px;
  font-size: 1rem;
}

.review-card p {
  color: #d1d1d6;
  font-size: 0.95rem;
  font-style: italic;
  margin-bottom: 16px;
  flex-grow: 1;
}

.reviewer-meta {
  border-top: 1px solid var(--border-color);
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.reviewer-name {
  font-weight: 800;
  font-size: 0.88rem;
  color: #ffffff;
}

.verified-tag {
  font-size: 0.72rem;
  color: var(--accent-green);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* FAQ Accordion */
.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
}

.faq-question {
  width: 100%;
  padding: 20px;
  background: none;
  border: none;
  color: #ffffff;
  font-family: var(--font-headline);
  font-size: 1.05rem;
  font-weight: 800;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.faq-question svg {
  transition: transform 0.3s ease;
  color: var(--primary-red);
}

.faq-item.open .faq-question svg {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 0 20px 20px;
  color: var(--text-muted);
  font-size: 0.95rem;
  display: none;
  line-height: 1.6;
}

.faq-item.open .faq-answer {
  display: block;
}

/* Express Claim Checkout Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-box {
  background: var(--bg-card);
  border: 2px solid var(--primary-red);
  border-radius: 16px;
  max-width: 580px;
  width: 100%;
  padding: 32px;
  position: relative;
  box-shadow: 0 25px 70px rgba(255, 59, 48, 0.3);
  max-height: 90vh;
  overflow-y: auto;
}

.close-modal {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.5rem;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s;
}

.close-modal:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.modal-box h3 {
  font-family: var(--font-headline);
  font-size: 1.6rem;
  font-weight: 900;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 8px;
}

.bundle-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 20px 0;
}

.bundle-option {
  border: 2px solid var(--border-color);
  background: var(--bg-panel);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.bundle-option:hover, .bundle-option.selected {
  border-color: var(--primary-red);
  background: rgba(255, 59, 48, 0.05);
}

.bundle-option input[type="radio"] {
  accent-color: var(--primary-red);
  width: 18px;
  height: 18px;
}

.bundle-option .opt-details {
  flex-grow: 1;
}

.bundle-option .opt-title {
  font-weight: 800;
  font-size: 0.95rem;
  color: #ffffff;
}

.bundle-option .opt-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.bundle-option .opt-price {
  font-family: var(--font-headline);
  font-weight: 900;
  font-size: 1.2rem;
  color: var(--accent-green);
  text-align: right;
}

.battery-notice-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-panel);
  border: 1px solid var(--border-highlight);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 20px;
}

.battery-notice-card img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.battery-notice-card .text-title {
  font-weight: 800;
  font-size: 0.85rem;
  color: #fff;
}

.battery-notice-card .text-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.form-group {
  margin-bottom: 14px;
}

.form-group label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.form-control {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: #ffffff;
  font-size: 0.95rem;
  font-family: inherit;
}

.form-control:focus {
  outline: none;
  border-color: var(--primary-red);
}

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

/* Sticky Bottom Mobile Bar */
.sticky-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(9, 10, 15, 0.95);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-highlight);
  padding: 12px 20px;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.8);
}

.sticky-bottom-bar.visible {
  transform: translateY(0);
}

.sticky-bar-info .title {
  font-family: var(--font-headline);
  font-weight: 900;
  font-size: 0.9rem;
  color: #ffffff;
  text-transform: uppercase;
}

.sticky-bar-info .price {
  font-size: 0.8rem;
  color: var(--accent-green);
  font-weight: 800;
}

.sticky-bar-btn {
  padding: 10px 20px;
  font-size: 0.9rem;
  margin-bottom: 0;
  width: auto;
}

/* Footer */
footer {
  background: #000000;
  border-top: 1px solid var(--border-color);
  padding: 50px 0 30px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
}

footer .footer-links {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 20px 0;
  flex-wrap: wrap;
}

footer .footer-links a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}

footer .footer-links a:hover {
  color: #ffffff;
}

.disclaimer-text {
  max-width: 750px;
  margin: 20px auto 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-dim);
}

@media (max-width: 768px) {
  .burglar-duo-container {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   MOBILE RESPONSIVE ADDITIONS
   Appended block — nothing above this line was modified. Layout/sizing only:
   no colour, copy or structural changes. Safe to delete to revert.
   ========================================================================== */

/* The markup uses .hidden-mobile on the ticker's "|" separator but the class was
   never defined, so the pipe rendered on phones. */
.hidden-mobile { display: inline; }

/* CTA label line-breaking. The button is a flex container, so a bare text node
   wraps wherever it likes and stranded the trailing arrow on its own line at
   ~360px. .cta-label is a single flex child holding normal inline content, and
   each .cta-part is unbreakable — so the label breaks only between the parts:
   "CLAIM MY FREE" / "SECURITY BUNDLE →", and stays on one line where it fits. */
.cta-btn .cta-label { display: inline; }
.cta-btn .cta-part { white-space: nowrap; }

/* Tablet portrait (iPad ~768px) still wrapped the ticker onto two lines. */
@media (max-width: 820px) {
  .top-ticker {
    font-size: 0.72rem;
    padding: 8px 12px;
    letter-spacing: 0.03em;
  }
  .top-ticker .ticker-wrap { gap: 6px 10px; }
}

@media (max-width: 600px) {
  .hidden-mobile { display: none !important; }

  /* Sticky ticker was 97px tall (3 wrapped lines) and permanently covered ~12%
     of the viewport. Tighten type and spacing so it sits on one or two lines. */
  .top-ticker {
    font-size: 0.62rem;
    letter-spacing: 0.02em;
    padding: 7px 10px;
    line-height: 1.35;
  }
  .top-ticker .ticker-wrap { gap: 4px 8px; }
  .top-ticker .timer-badge {
    font-size: 0.62rem;
    padding: 2px 6px;
  }

  /* Keep the logo and the live badge on one row instead of letting the badge
     wrap onto two lines. */
  .navbar { padding: 10px 0; }
  .navbar .nav-content { gap: 10px; }
  .live-badge {
    font-size: 0.6rem;
    padding: 5px 10px;
    gap: 6px;
    line-height: 1.25;
    white-space: nowrap;
  }
  .brand-logo-img { height: 28px; max-width: 150px; }

  /* CTAs: give the label more room and stop the trailing arrow orphaning onto
     its own line. */
  .offer-box { padding: 20px 16px; }
  .cta-btn {
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    padding: 16px 14px;
    gap: 6px;
    line-height: 1.25;
    min-height: 56px;
  }

  /* Sticky bar was 112px tall with the price wrapping and the arrow orphaned.
     min-width:0 lets the text column shrink instead of forcing the bar wider
     than the viewport on narrow phones. */
  .sticky-bottom-bar { padding: 10px 12px; gap: 10px; max-width: 100%; }
  .sticky-bar-info { min-width: 0; flex: 1 1 auto; }
  .sticky-bar-info .title { font-size: 0.72rem; line-height: 1.2; }
  .sticky-bar-info .price { font-size: 0.7rem; line-height: 1.2; }
  .sticky-bottom-bar .cta-btn.sticky-bar-btn {
    width: auto;
    flex: 0 0 auto;
    margin-bottom: 0;
    padding: 12px 16px;
    font-size: 0.8rem;
    min-height: 44px;
    white-space: nowrap;
  }
}

@media (max-width: 380px) {
  .top-ticker { font-size: 0.56rem; }
  .cta-btn { font-size: 0.85rem; padding: 15px 10px; }
  .live-badge { font-size: 0.55rem; padding: 4px 8px; }
}

/* Very narrow phones (iPhone SE, 320px). The nowrap badge and the sticky bar
   both pushed past the viewport here, so let them shrink again. */
@media (max-width: 360px) {
  .brand-logo-img { height: 24px; max-width: 120px; }
  .live-badge {
    white-space: normal;
    flex-shrink: 1;
    min-width: 0;
    text-align: left;
  }
  .sticky-bottom-bar { padding: 8px 10px; gap: 8px; }
  .sticky-bottom-bar .cta-btn.sticky-bar-btn {
    padding: 11px 12px;
    font-size: 0.72rem;
  }
}

/* --------------------------------------------------------------------------
   HERO — MOBILE DENSITY
   The hero art is a wide 16:9 banner but .main-image-wrap / .thumb-item are
   square with object-fit: contain, so on phones the image floated in a large
   letterbox and the card ate most of the first screen. Match the frames to the
   artwork and tighten the padding so the headline, image, carousel and offer
   box read as one block.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .hero-section { padding: 14px 0 32px; }

  /* Heading sits directly above the gallery — its own bottom margin is enough. */
  .hero-heading .subtitle { margin-bottom: 0; }
  .badge-tag { margin-bottom: 10px; }

  /* Frame follows the banner's shape instead of letterboxing it. */
  .main-image-wrap {
    aspect-ratio: 16 / 10;
    padding: 6px;
  }

  .live-camera-led {
    top: 10px;
    right: 10px;
    padding: 4px 9px;
    font-size: 0.62rem;
  }

  .thumb-grid {
    padding: 8px;
    gap: 8px;
  }

  .thumb-item {
    aspect-ratio: 16 / 10;
    padding: 2px;
  }
}

@media (max-width: 600px) {
  .hero-section { padding: 10px 0 26px; }
  .hero-heading h1 { font-size: 1.9rem; margin-bottom: 10px; }
  .hero-heading .subtitle { font-size: 0.98rem; }
  .main-image-wrap { padding: 4px; }
  .thumb-grid { padding: 6px; gap: 6px; }
}