/* ─── ELECTRONIL - Global Styles ──────────────────────────── */
:root {
  --bg-primary:   #0A0708;
  --bg-secondary: #170F12;
  --bg-card:      rgba(23, 15, 18, 0.7);
  --accent-cyan:  #FF4D4D;
  --accent-gold:  #F4AC45;
  --accent-blue:  #B31217;
  /* Button surface. The accent above is tuned to read as TEXT on a dark
     background (6.1:1); as a BACKGROUND under white text it only reaches
     3.3:1, so buttons get their own, deeper red. */
  --accent-btn:   #DC2626;
  --text-primary: #F1F5F9;
  --text-muted:   #94A3B8;
  --border-glass: rgba(255, 255, 255, 0.08);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* ─── Lenis smooth scroll ────────────────────────────────── */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

body {
  font-family: 'Heebo', sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.75;
  direction: rtl;
}

/* ─── Scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--accent-cyan); border-radius: 2px; }

/* ─── Hide scrollbar (mobile sliders) ───────────────────── */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ─── Glassmorphism ─────────────────────────────────────── */
.glass {
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-glass);
}

.glass-strong {
  background: rgba(23, 15, 18, 0.85);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* ─── Site logo ──────────────────────────────────────────── */
/* One red asset for both themes. The logo red (#CC0000) sits at 5.9:1 on
   white but only 3.4:1 on the dark background, so dark mode brightens it
   into the same vivid red used for the UI accent. */
.site-logo {
  height: auto;
  max-width: 100%;
  display: block;
}
[data-theme="dark"] .site-logo {
  filter: brightness(1.28) saturate(1.05);
}

/* ─── Navbar ─────────────────────────────────────────────── */
#navbar {
  background: transparent;
}
#navbar.scrolled {
  background: rgba(10, 7, 8, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 77, 77, 0.1);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}

/* ═══════════════════════════════════════════════════════════
   HERO — pinned scroll storytelling
   ═══════════════════════════════════════════════════════════ */

/* Outer: tall scroll container */
.hero-outer {
  height: 250vh;
  position: relative;
}

/* Sticky inner — pinned by GSAP on BOTH desktop and mobile */
.hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: var(--bg-primary);
}
@media (max-width: 1023px) {
  /* Mobile: no GSAP pin — hero scrolls naturally */
  .hero-outer {
    height: auto;
  }
  .hero-sticky {
    position: relative;
    height: auto;
    min-height: 100vh;
    align-items: center;
    padding-top: 100px;
    padding-bottom: 60px;
  }
}

/* Subtle tech grid background */
.hero-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,77,77,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,77,77,0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
  
  
}

/* Single ambient glow */
.hero-ambient {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,77,77,0.07) 0%, transparent 70%);
  top: 50%;
  left: 35%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Layout grid */
.hero-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  min-height: 100vh;
  padding: 80px 0 40px;
}
/* No image: single centred column */
.hero-layout--no-img {
  grid-template-columns: 1fr;
  max-width: 760px;
  margin-inline: auto;
}
/* No image: text stays in right column (RTL natural position) */
.hero-layout--no-img-right {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 1023px) {
  .hero-layout {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
    min-height: unset;
  }
  .hero-eyebrow    { margin-bottom: 0.6rem; }
  .hero-title      { font-size: clamp(1.7rem, 6.5vw, 2.4rem); margin-bottom: 0.5rem; }
  .hero-sub        {
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 0.85rem;
    /* keep the subtitle short so the advantages + CTA fit one screen */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .hero-advantages { gap: 0.4rem; margin-bottom: 0.85rem; }
}

/* ── Text column ── */
.hero-text-col {
  order: 1;
}
@media (max-width: 1023px) {
  .hero-text-col { order: 2; }
}

/* Eyebrow */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  background: rgba(255,77,77,0.08);
  border: 1px solid rgba(255,77,77,0.2);
  font-size: 0.8rem;
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: 0.05em;
  margin-bottom: 1.25rem;
}
.hero-eyebrow__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #22c55e;
  animation: pulse 2s infinite;
}

/* Title */
.hero-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 1rem;
}

/* Subtitle */
.hero-sub {
  font-size: 1rem;
  color: #FFFFFF;
  line-height: 1.75;
  margin-bottom: 2rem;
  max-width: 460px;
}

/* ── Advantages list ── */
.hero-advantages {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-bottom: 2rem;
}

.hero-adv {
  display: grid;
  grid-template-columns: 28px 36px 1fr;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: 0.875rem;
  background: rgba(23, 15, 18, 0.5);
  border: 1px solid rgba(255,255,255,0.06);
  position: relative;
  overflow: hidden;
  /* hidden by default — shown by GSAP */
  opacity: 0;
  transform: translateX(20px);
}
@media (max-width: 1023px) {
  /* Mobile: no GSAP — advantages shown immediately */
  .hero-adv {
    opacity: 1;
    transform: none;
    padding: 0.75rem 0.875rem;
    /* icon column sized from the icon itself — it was pinned to 28px while the
       icon rendered 36px, so it bled into the gap and sat on top of the text */
    grid-template-columns: 22px auto 1fr;
    gap: 0.7rem;
  }
  .hero-adv__icon  { width: 32px; height: 32px; }
  .hero-adv__title { font-size: 0.76rem; }
  .hero-adv__sub   { font-size: 0.64rem; }
}
.hero-adv::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(var(--adv-color-rgb, 255,77,77), 0.04) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s;
}
.hero-adv:hover::before { opacity: 1; }

.hero-adv__num {
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
  font-family: monospace;
}
.hero-adv__icon {
  width: 36px; height: 36px;
  border-radius: 0.625rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  display: flex; align-items: center; justify-content: center;
  color: var(--adv-color);
  flex-shrink: 0;
}
.hero-adv__body {}
.hero-adv__title {
  font-size: 0.825rem;
  font-weight: 700;
  color: #e2e8f0;
  line-height: 1.3;
}
.hero-adv__sub {
  font-size: 0.7rem;
  color: #FFFFFF;
  margin-top: 0.1rem;
}
/* Active highlight line */
.hero-adv__line {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--adv-color);
  opacity: 0;
  transition: opacity 0.3s;
  border-radius: 0 2px 2px 0;
}
.hero-adv--active .hero-adv__line { opacity: 1; }
.hero-adv--active {
  background: rgba(23, 15, 18, 0.8);
  border-color: rgba(255,255,255,0.1);
}

/* CTA buttons */
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.hero-cta--visible {
  opacity: 1;
  transform: translateY(0);
}
/* Mobile: CTA visible immediately — no GSAP reveal */
@media (max-width: 1023px) {
  .hero-cta {
    opacity: 1 !important;
    transform: none !important;
    gap: 0.75rem;
    flex-wrap: wrap;
  }
  .hero-cta .btn-primary,
  .hero-cta .btn-outline {
    padding: 0.75rem 1.25rem;
    font-size: 0.9rem;
  }
}

/* ── Image column ── */
.hero-img-col {
  order: 2;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 1023px) {
  /* hidden on mobile so the pinned text + advantages fit one screen */
  .hero-img-col { display: none; }
}

/* Glow */
.hero-lock-glow {
  position: absolute;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,77,77,0.18) 0%, transparent 70%);
  pointer-events: none;
  animation: pulse-slow 4s ease-in-out infinite;
}

/* Lock image */
.hero-lock-img {
  position: relative;
  max-height: 520px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 40px 80px rgba(255, 77, 77, 0.2))
          drop-shadow(0 0 40px rgba(255, 77, 77, 0.1));
  z-index: 1;
}
@media (max-width: 1023px) {
  .hero-lock-img { max-height: 300px; }
}

/* Spec chips */
.hero-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  font-size: 1.1rem;
  font-weight: 700;
  background: rgba(23, 15, 18, 0.85);
  border: 1px solid rgba(255,77,77,0.25);
  color: var(--accent-cyan);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  opacity: 0;
  z-index: 2;
}
.hero-chip--1 { top: 15%; right: -1rem; }
.hero-chip--2 { bottom: 30%; right: -2rem; border-color: rgba(244,172,69,0.25); color: var(--accent-gold); }
.hero-chip--3 { bottom: 15%; left: -1rem; border-color: rgba(34,197,94,0.25); color: #22c55e; }
@media (max-width: 1023px) {
  .hero-chip { display: none; }
}

/* Vertical progress bar */
.hero-progress-wrap {
  position: absolute;
  left: -2rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 100px;
  background: rgba(255,255,255,0.07);
  border-radius: 9999px;
  overflow: hidden;
}
.hero-progress-bar {
  width: 100%;
  height: 0%;
  background: linear-gradient(to bottom, var(--accent-cyan), var(--accent-blue));
  border-radius: 9999px;
  transition: height 0.1s linear;
}
@media (max-width: 1023px) {
  .hero-progress-wrap { display: none; }
}

/* Scroll hint */
.hero-scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255,255,255,0.25);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: opacity 0.4s;
}
.hero-scroll-hint__mouse {
  width: 20px; height: 32px;
  border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,0.2);
  display: flex;
  justify-content: center;
  padding-top: 5px;
}
.hero-scroll-hint__dot {
  width: 3px; height: 6px;
  border-radius: 9999px;
  background: rgba(255,255,255,0.35);
  animation: bounce 1.6s ease-in-out infinite;
}

@keyframes pulse-slow {
  0%, 100% { transform: scale(1); opacity: 0.15; }
  50% { transform: scale(1.1); opacity: 0.25; }
}

/* ─── Gradients ──────────────────────────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, var(--accent-btn), var(--accent-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text-gold {
  background: linear-gradient(135deg, var(--accent-gold), #ff8c00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-border {
  position: relative;
}
.gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--accent-btn), var(--accent-blue));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* ─── Glow Effects ───────────────────────────────────────── */
.glow-cyan  { box-shadow: 0 0 30px rgba(255, 77, 77, 0.3); }
.glow-gold  { box-shadow: 0 0 30px rgba(244, 172, 69, 0.3); }
.glow-blue  { box-shadow: 0 0 30px rgba(179, 18, 23, 0.3); }

.text-glow-cyan { text-shadow: 0 0 20px rgba(255, 77, 77, 0.5); }
.text-glow-gold { text-shadow: 0 0 20px rgba(244, 172, 69, 0.5); }

/* ─── Buttons ─────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, var(--accent-btn), var(--accent-blue));
  color: white;
  font-weight: 700;
  border-radius: 9999px;
  box-shadow: 0 8px 30px rgba(255, 77, 77, 0.35);
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
}
.btn-primary:hover {
  box-shadow: 0 12px 40px rgba(255, 77, 77, 0.55);
  transform: translateY(-2px);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 2rem;
  background: transparent;
  color: var(--accent-cyan);
  font-weight: 700;
  border-radius: 9999px;
  border: 1px solid var(--accent-cyan);
  transition: all 0.3s ease;
  cursor: pointer;
}
.btn-outline:hover {
  background: rgba(255, 77, 77, 0.1);
  box-shadow: 0 0 20px rgba(255, 77, 77, 0.2);
}

/* ─── Cards ───────────────────────────────────────────────── */
.product-card {
  perspective: 1000px;
}
.product-card-inner {
  position: relative;
  transition: transform 0.6s ease;
  transform-style: preserve-3d;
}
.product-card:hover .product-card-inner {
  transform: rotateY(180deg);
}
.product-card-front,
.product-card-back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.product-card-back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
}

/* ─── Particle Canvas ────────────────────────────────────── */
#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ─── Section animations (initial states set by GSAP) ─────── */
.fade-up     { opacity: 0; transform: translateY(60px); }
.fade-right  { opacity: 0; transform: translateX(-60px); }
.fade-left   { opacity: 0; transform: translateX(60px); }
.scale-in    { opacity: 0; transform: scale(0.85); }

/* ─── Horizontal scroll section ──────────────────────────── */
.h-scroll-section {
  display: flex;
  gap: 1.5rem;
  width: max-content;
}

/* ─── Animated gradient BG ───────────────────────────────── */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.animated-gradient {
  background: linear-gradient(-45deg, #0A0708, #170F12, #001a33, #020d1a);
  background-size: 400% 400%;
  animation: gradientShift 8s ease infinite;
}

/* ─── Lock 3D ─────────────────────────────────────────────── */
@keyframes lockFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-12px) rotate(1deg); }
  66%       { transform: translateY(-6px) rotate(-1deg); }
}
@keyframes lockPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%       { opacity: 1; transform: scale(1.15); }
}
.lock-float { animation: lockFloat 5s ease-in-out infinite; }
.ring-pulse  { animation: lockPulse 2s ease-in-out infinite; }

/* ─── Scroll progress ────────────────────────────────────── */
#scroll-progress {
  transition: width 0.1s linear;
}

/* ─── Cursor ──────────────────────────────────────────────── */
#cursor-follower {
  transition: transform 0.15s ease, opacity 0.3s ease, width 0.3s ease, height 0.3s ease;
}

/* ─── Magnetic button ────────────────────────────────────── */
.magnetic-btn { display: inline-flex; }

/* ─── Counter ────────────────────────────────────────────── */
.counter { font-variant-numeric: tabular-nums; }

/* ─── Grid masonry-like ──────────────────────────────────── */
.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
/* Heights live here rather than inline on the element, so the mobile layout
   below can actually override them. */
.cat-card { min-height: 180px; }
.category-grid .cat-large {
  grid-row: span 2;
  min-height: 320px;
}

/* ─── Blog card ──────────────────────────────────────────── */
.blog-card img {
  transition: transform 0.5s ease;
}
.blog-card:hover img {
  transform: scale(1.05);
}

/* ─── Split text ─────────────────────────────────────────── */
.split-char {
  display: inline-block;
}

/* ─── Hero badge ─────────────────────────────────────────── */
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.4); }
  70%       { box-shadow: 0 0 0 10px rgba(255, 77, 77, 0); }
}
.badge-pulse { animation: badgePulse 2s infinite; }

/* ─── Mobile hamburger ───────────────────────────────────── */
#mobile-menu-btn.open .mobile-bar:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}
#mobile-menu-btn.open .mobile-bar:nth-child(2) {
  opacity: 0;
}
#mobile-menu-btn.open .mobile-bar:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
  width: 1.5rem;
}
#mobile-menu.open {
  max-height: 400px;
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .category-grid {
    grid-template-columns: 1fr 1fr;
  }
  .category-grid .cat-large {
    grid-column: span 2;
  }
}
@media (max-width: 480px) {
  .category-grid {
    grid-template-columns: 1fr;
  }
  .category-grid .cat-large {
    grid-column: span 1;
    grid-row: span 1;
  }
}

/* ═══════════════════════════════════════════════════════════
   PRODUCT STORY — Apple-style pinned scroll section
   ═══════════════════════════════════════════════════════════ */

/* Outer wrapper — sets total scroll height on desktop */
.product-story-outer {
  position: relative;
  height: 400vh;
  background: var(--bg-primary);
}

/* Sticky inner — pinned by GSAP on BOTH desktop and mobile */
.product-story-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ambient background blobs */
.story-bg-blur {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  transition: background 1s ease;
}
.story-bg-blur--1 {
  width: 500px; height: 500px;
  top: -100px; right: -100px;
  background: rgba(255, 77, 77, 0.06);
}
.story-bg-blur--2 {
  width: 400px; height: 400px;
  bottom: -80px; left: -80px;
  background: rgba(244, 172, 69, 0.05);
}
.story-bg-blur--3 {
  width: 300px; height: 300px;
  top: 50%; left: 40%;
  transform: translateY(-50%);
  background: rgba(179, 18, 23, 0.04);
}

/* Section label (top-left) */
.story-label {
  position: absolute;
  top: 100px;
  right: 2rem;
  text-align: right;
  pointer-events: none;
}
.story-label__tag {
  display: block;
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  margin-bottom: 0.25rem;
}
.story-label__hint {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.3);
}

/* Grid */
.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
@media (max-width: 1023px) {
  .story-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* ── Image column (shared, switches per panel on desktop AND mobile) ── */
.story-image-col {
  position: relative;
}

/* Per-panel inline image is no longer used — shared image column drives it */
.story-panel-mobile-img { display: none !important; }

.story-img-wrap {
  position: relative;
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: lock-float 5s ease-in-out infinite;
}
@media (max-width: 1023px) {
  .story-img-wrap {
    /* scales with the screen instead of a fixed value, so tall phones get a
       properly sized product shot and short ones still leave room for the CTA */
    height: clamp(100px, 22vh, 210px);
    animation: none;
  }
}

/* Glow behind image */
.story-glow {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: var(--accent-cyan);
  opacity: 0.15;
  filter: blur(60px);
  transition: background 0.8s ease, opacity 0.8s ease;
  pointer-events: none;
}

/* Product images */
.story-product-img {
  position: absolute;
  max-height: 460px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 40px 80px rgba(255, 77, 77, 0.25));
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0s, transform 0s;
  pointer-events: none;
}
.story-product-img--active {
  opacity: 1;
  transform: scale(1);
}
@media (max-width: 1023px) {
  .story-product-img {
    max-height: clamp(92px, 20vh, 195px);
    filter: drop-shadow(0 20px 40px rgba(255,77,77,0.2));
    /* GSAP drives the cross-fade (same as desktop) — no CSS transition */
  }
}

/* Progress dots */
.story-dots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 1.5rem;
}
.story-dot {
  display: block;
  height: 4px;
  width: 8px;
  border-radius: 9999px;
  background: rgba(255,255,255,0.15);
  transition: width 0.4s ease, background 0.4s ease;
}
.story-dot--active {
  width: 2rem;
  background: var(--accent-cyan);
}

/* ── Content column ── */
.story-content-col {
  position: relative;
  min-height: 420px;
}
@media (max-width: 1023px) {
  /* Stack the panels in a single grid cell instead of absolutely positioning
     them against a guessed min-height. The row then sizes itself to the
     tallest panel, so nothing can spill out of the pinned viewport — the old
     `min-height: 360px` was smaller than the real content (~447px) and pushed
     the price + CTA past the section's overflow:hidden edge on short phones. */
  .story-content-col {
    display: grid;
    grid-template-areas: 'panel';
    min-height: 0;
  }
  .story-content-col > .story-panel {
    grid-area: panel;
    position: relative;
    inset: auto;
  }
}

/* Panel */
.story-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0s, transform 0s;
  pointer-events: none;
}
.story-panel--active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* Mobile: same absolute-stacked panels as desktop (GSAP switches them).
   Just tighten the text so a panel + image fit one pinned screen. */
@media (max-width: 1023px) {
  /* Height budget for a 667px phone (iPhone SE):
     navbar 81 + image 120 + gap 10 + panel + bottom 12 must stay under 100vh,
     so the panel gets ~440px and the type below is tuned to land well inside it. */
  .story-panel__tag   { font-size: 0.72rem; margin-bottom: 0.35rem; }
  .story-panel__title { font-size: clamp(1.25rem, 5.4vw, 1.6rem); line-height: 1.2; margin-bottom: 0.4rem; }
  .story-panel__desc  {
    font-size: 0.8rem;
    line-height: 1.5;
    margin-bottom: 0.6rem;
    /* keep long copy from blowing the budget */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .story-features     { gap: 0.35rem; margin-bottom: 0.6rem; }
  .story-feature      { padding: 0.4rem 0.6rem; gap: 0.5rem; }
  .story-feature__title { font-size: 0.75rem; line-height: 1.25; }
  .story-feature__sub   { font-size: 0.72rem; line-height: 1.25; }
  .story-price        { font-size: 1.35rem; }
  .story-price__old   { font-size: 0.8rem; }
}

.story-panel__tag {
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  margin-bottom: 0.75rem;
}
.story-panel__title {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 1rem;
}
.story-panel__desc {
  font-size: 0.95rem;
  color: #94a3b8;
  line-height: 1.8;
  margin-bottom: 1.5rem;
  max-width: 440px;
}

/* Feature rows */
.story-features {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.story-feature {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 0.75rem 1rem;
  border-radius: 0.875rem;
  background: rgba(23, 15, 18, 0.6);
  border: 1px solid rgba(255,255,255,0.07);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 0.2s, background 0.2s;
}
.story-feature:hover {
  border-color: rgba(255,77,77,0.2);
  background: rgba(255,77,77,0.04);
}
.story-feature__icon {
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid transparent;
}
.story-feature__icon--cyan {
  background: rgba(255,77,77,0.1);
  border-color: rgba(255,77,77,0.2);
  color: var(--accent-cyan);
}
.story-feature__icon--gold {
  background: rgba(244,172,69,0.1);
  border-color: rgba(244,172,69,0.2);
  color: var(--accent-gold);
}
.story-feature__title {
  font-size: 0.8rem;
  font-weight: 700;
  color: #e2e8f0;
}
.story-feature__sub {
  font-size: 0.7rem;
  color: #64748b;
  margin-top: 0.1rem;
}

/* Footer: price + CTA */
.story-panel__footer {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.story-price {
  font-size: 2rem;
  font-weight: 900;
  color: var(--accent-cyan);
  line-height: 1;
}
.story-price__old {
  display: block;
  font-size: 1rem;
  color: #475569;
  text-decoration: line-through;
  margin-bottom: 0.1rem;
}
.story-btn {
  flex-shrink: 0;
}

/* Vertical progress bar (desktop) */
.story-vbar {
  position: absolute;
  left: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 120px;
  background: rgba(255,255,255,0.07);
  border-radius: 9999px;
  overflow: hidden;
}
.story-vbar__fill {
  width: 100%;
  height: 0%;
  background: linear-gradient(to bottom, var(--accent-cyan), var(--accent-blue));
  border-radius: 9999px;
  transition: height 0.05s linear;
}
@media (max-width: 1023px) {
  .story-vbar, .story-label, .story-scroll-hint { display: none; }
}

/* Scroll hint */
.story-scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  color: rgba(255,255,255,0.25);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  transition: opacity 0.5s;
}

/* ─── Product Page Trust Elements ───────────────────────── */

/* Credit card chips */
.cc-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cc-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

/* Trust grid cards */
.trust-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.9rem 1rem;
  border-radius: 1rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.07);
  transition: border-color 0.2s, background 0.2s;
}
.trust-card:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
}
.trust-card__icon {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
  flex-shrink: 0;
}
.trust-card__icon--cyan  { background: rgba(255,77,77,0.12);  color: #FF4D4D; }
.trust-card__icon--gold  { background: rgba(244,172,69,0.12); color: #F4AC45; }
.trust-card__icon--green { background: rgba(34,197,94,0.12);  color: #22c55e; }
.trust-card__icon--blue  { background: rgba(179,18,23,0.12);  color: #FF7A7A; }
.trust-card__title {
  font-size: 0.78rem;
  font-weight: 700;
  color: #e2e8f0;
  line-height: 1.2;
}
.trust-card__sub {
  font-size: 0.68rem;
  color: #64748b;
  line-height: 1.3;
}

/* ─── Blog Post Content (prose-rtl) ─────────────────────── */
.prose-rtl {
  direction: rtl;
  line-height: 1.9;
  color: #cbd5e1;
}
.prose-rtl h2 {
  font-size: 1.6rem;
  font-weight: 900;
  color: #f1f5f9;
  margin: 2rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255,77,77,0.2);
}
.prose-rtl h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #e2e8f0;
  margin: 1.6rem 0 0.6rem;
}
.prose-rtl p {
  margin-bottom: 1rem;
  font-size: 0.97rem;
}
.prose-rtl ul, .prose-rtl ol {
  margin: 0.75rem 0 1rem 0;
  padding-right: 1.5rem;
}
.prose-rtl ul { list-style: none; }
.prose-rtl ul li {
  position: relative;
  padding-right: 1.2rem;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}
.prose-rtl ul li::before {
  content: '';
  position: absolute;
  right: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-cyan);
}
.prose-rtl ol { list-style: decimal; }
.prose-rtl ol li { margin-bottom: 0.5rem; font-size: 0.95rem; }
.prose-rtl strong { color: #f1f5f9; font-weight: 700; }
.prose-rtl a { color: var(--accent-cyan); text-decoration: underline; }
.prose-rtl a:hover { color: #fff; }
.prose-rtl blockquote {
  border-right: 3px solid var(--accent-cyan);
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  background: rgba(255,77,77,0.05);
  border-radius: 0 0.5rem 0.5rem 0;
  color: #94a3b8;
  font-style: italic;
}
.prose-rtl img {
  width: 100%;
  border-radius: 0.75rem;
  margin: 1rem 0;
}
.prose-rtl h2:first-child { margin-top: 0; }

/* ─── Admin (basic reset for admin pages) ────────────────── */
body.admin-body {
  background: #0f172a;
  direction: rtl;
}

/* ─── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ════════════════════════════════════════════════════════════
   LIGHT THEME — overrides all dark defaults via data-theme
   ════════════════════════════════════════════════════════════ */

[data-theme="light"] {
  --bg-primary:   #ffffff;
  --bg-secondary: #f8fafc;
  --bg-card:      rgba(255, 255, 255, 0.92);
  --text-primary: #0F172A;
  --text-muted:   #475569;
  --border-glass: rgba(0, 0, 0, 0.08);
}

/* The bright UI red (#FF4D4D) is tuned for the dark background — on white it
   is only ~3:1, so everything reading `var(--accent-cyan)` directly (outline
   buttons, prose links, story tags) comes out weak. Swap the variable itself
   to the logo red (5.9:1 on white) so every consumer is fixed at once.
   `html[…]` is required: header.php injects `:root{--accent-cyan}` from the
   DB *after* this file, and a bare `[data-theme]` would tie on specificity. */
html[data-theme="light"] {
  --accent-cyan: #CC0000;
  --accent-blue: #8E0E18;
  --accent-btn:  #CC0000;
}

/* Body — override Tailwind's hardcoded bg-primary class */
[data-theme="light"] body { background-color: #ffffff; color: var(--text-primary); }
[data-theme="light"] .bg-primary { background-color: #ffffff; }

/* Hero & Product Story — explicit (belt-and-suspenders over var()) */
[data-theme="light"] .group:hover .group-hover\:text-green-400 {
  color: #15803D;
}
[data-theme="light"] .hero-sticky {
  background-color: #f8fafc;
  background-image: linear-gradient(rgb(255 77 77 / 10%) 1px, #00000000 1px), linear-gradient(90deg, rgb(255 77 77 / 13%) 1px, #00000000 1px);
	background-size: 56px 56px;
}
[data-theme="light"] .product-story-outer { background: #ffffff; }

/* Category card gradients — Tailwind gradient classes are hardcoded */
[data-theme="light"] .from-navy {
  --tw-gradient-from: #e2e8f0;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(226,232,240,0));
}
[data-theme="light"] .to-primary { --tw-gradient-to: #f8fafc; }
[data-theme="light"] .to-navy    { --tw-gradient-to: #e2e8f0; }

/* Section backgrounds */
[data-theme="light"] .bg-navy        { background-color: #f8fafc; }
[data-theme="light"] .bg-navy\/30    { background-color: rgba(248,250,252,0.8); }
[data-theme="light"] .bg-navy\/95    { background-color: rgba(255,255,255,0.97); }

/* Glassmorphism cards — shadow instead of glow-on-dark */
[data-theme="light"] .glass {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .glass-strong {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.10);
  border: 1px solid rgba(0, 0, 0, 0.10);
}

/* Navbar */
[data-theme="light"] #navbar.scrolled {
  background: rgba(240, 244, 248, 0.95);
  border-bottom: 1px solid rgba(255, 77, 77, 0.15);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] #navbar:not(.scrolled) {
  background: transparent;
}
[data-theme="light"] #navbar .text-white,
[data-theme="light"] #navbar .text-gray-300 {
  color: #0F172A;
}
[data-theme="light"] #navbar .text-cyan {
  color: var(--accent-cyan);
}

/* Scrollbar */
[data-theme="light"] ::-webkit-scrollbar-track { background: #E2E8F0; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--accent-cyan); }

/* ─── Tailwind hardcoded class overrides ────────────────── */

/* Main text — text-white becomes dark navy in light mode */
[data-theme="light"] .text-white     { color: var(--text-primary); }
[data-theme="light"] .text-gray-100  { color: #1e293b; }
[data-theme="light"] .text-gray-200  { color: #334155; }
[data-theme="light"] .text-gray-300  { color: #475569; }
[data-theme="light"] .text-gray-400  { color: #64748b; }
[data-theme="light"] .text-gray-500  { color: #64748b; }

/* Keep white text inside gradient/colored buttons and badges */
/* Note: no space = same element; space = descendant */
[data-theme="light"] .bg-gradient-to-r.text-white   { color: #ffffff; } /* CTA buttons */
/* Avatar circles: dark text was a workaround for the missing gradient fill.
   The fill is restored below, so white text is correct again. */
[data-theme="light"] .rounded-full.bg-gradient-to-br.text-white { color: #ffffff; }
[data-theme="light"] .bg-red-500.text-white          { color: #ffffff; } /* product badges */
[data-theme="light"] .bg-cyan-400.text-white         { color: #ffffff; }

/* Borders */
[data-theme="light"] .border-white\/5  { border-color: rgba(0,0,0,0.05); }
[data-theme="light"] .border-white\/8  { border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .border-white\/10 { border-color: rgba(0,0,0,0.10); }
[data-theme="light"] .border-white\/12 { border-color: rgba(0,0,0,0.12); }

/* Backgrounds */
[data-theme="light"] .bg-white\/5   { background: rgba(0,0,0,0.04); }
[data-theme="light"] .bg-white\/8   { background: rgba(0,0,0,0.06); }
[data-theme="light"] .bg-white\/10  { background: rgba(0,0,0,0.07); }

/* Form inputs */
[data-theme="light"] input, [data-theme="light"] textarea {
  color: var(--text-primary);
}
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder { color: #94a3b8; }

/* ─── Theme Orb Toggle Button ────────────────────────────── */
.theme-orb {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-glass);
  cursor: pointer;
  transition: all 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(135deg, #170F12, #1e3a5f);
  padding: 0;
  color: white;
}

[data-theme="dark"]  .theme-orb { background: linear-gradient(135deg, #170F12, #1e3a5f); }
[data-theme="light"] .theme-orb { background: linear-gradient(135deg, #FCD34D, #F97316); color: #7c2d12; }

.theme-orb:hover { transform: scale(1.1); }
.theme-orb:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }

/* ─── Hero light mode ────────────────────────────────────── */

/* Eyebrow badge — white text was invisible on the pale badge */
[data-theme="light"] .hero-eyebrow {
  color: #0F172A;
  background: rgba(255, 77, 77, 0.10);
  border-color: rgba(255, 77, 77, 0.30);
}

/* Title & subtitle — hardcoded #fff → dark on white background */
[data-theme="light"] .hero-title      { color: #0F172A; }
[data-theme="light"] .hero-sub        { color: #334155; }
[data-theme="light"] .hero-sub strong { color: #0F172A; }

[data-theme="light"] .hero-adv {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.10);
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .hero-adv--active {
  background: #ffffff;
  border-color: rgba(255, 77, 77, 0.35);
  box-shadow: 0 2px 16px rgba(255, 77, 77, 0.10);
}
[data-theme="light"] .hero-adv__num   { color: #0F172A; }
[data-theme="light"] .hero-adv__title { color: var(--text-primary); }
[data-theme="light"] .hero-adv__sub   { color: #64748b; }
[data-theme="light"] .hero-adv__icon  {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}

/* ─── Product Story light mode ───────────────────────────── */
[data-theme="light"] .story-panel__title { color: var(--text-primary); }
[data-theme="light"] .story-panel__desc  { color: var(--text-muted); }
[data-theme="light"] .story-label__hint  { color: rgba(0, 0, 0, 0.35); }
[data-theme="light"] .story-dot          { background: rgba(0, 0, 0, 0.15); }
[data-theme="light"] .story-feature {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(0, 0, 0, 0.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
[data-theme="light"] .story-feature__title { color: var(--text-primary); }

/* ─── Product page: trust badges ─────────────────────────── */
/* Titles were #e2e8f0 (a dark-mode near-white) with no light override,
   leaving them at ~1.2:1 on the white page — effectively invisible. */
[data-theme="light"] .trust-card__title { color: var(--text-primary); }
[data-theme="light"] .trust-card__sub   { color: #64748b; }

/* ─── Rich text (product description / blog body) ────────── */
/* Same class of bug: the headings and bold runs inside .prose-rtl are
   near-white for dark mode and had no light-mode counterpart. */
[data-theme="light"] .prose-rtl          { color: #334155; }
[data-theme="light"] .prose-rtl h2,
[data-theme="light"] .prose-rtl h3,
[data-theme="light"] .prose-rtl h4       { color: var(--text-primary); }
[data-theme="light"] .prose-rtl strong   { color: var(--text-primary); }
[data-theme="light"] .prose-rtl a:hover  { color: #8E0E18; }

/* ─── Misc light mode overrides ─────────────────────────── */
/* Cyan text — the brand cyan (#FF4D4D) is only ~2.3:1 on white.
   Darken it to keep the accent identity while passing contrast,
   instead of flattening every accent to near-black. */
[data-theme="light"] .text-cyan           { color: #CC0000; }
[data-theme="light"] .text-gold           { color: #A66A00; }
[data-theme="light"] .gradient-text,
[data-theme="light"] .gradient-text-gold  { filter: saturate(1.15) brightness(0.82); }

/* Tailwind numeric color scales (cyan-500, blue-500, …) are not in the
   compiled build, so these utility classes resolve to nothing. Restore the
   category-card icon tiles explicitly. */
[data-theme="light"] .bg-cyan-500\/10   { background-color: rgba(255,77,77,0.12); }
[data-theme="light"] .bg-blue-500\/10   { background-color: rgba(179,18,23,0.10); }
[data-theme="light"] .bg-yellow-500\/10 { background-color: rgba(244,172,69,0.16); }
[data-theme="light"] .bg-purple-500\/10 { background-color: rgba(168,85,247,0.10); }
[data-theme="light"] .bg-green-500\/10  { background-color: rgba(34,197,94,0.10); }
[data-theme="light"] .bg-pink-500\/10   { background-color: rgba(236,72,153,0.10); }

[data-theme="light"] .border-cyan-500\/20   { border-color: rgba(255,77,77,0.30); }
[data-theme="light"] .border-blue-500\/20   { border-color: rgba(179,18,23,0.25); }
[data-theme="light"] .border-yellow-500\/20 { border-color: rgba(244,172,69,0.35); }
[data-theme="light"] .border-purple-500\/20 { border-color: rgba(168,85,247,0.25); }
[data-theme="light"] .border-green-500\/20  { border-color: rgba(34,197,94,0.25); }
[data-theme="light"] .border-pink-500\/20   { border-color: rgba(236,72,153,0.25); }

/* Category-card icons keep their accent colour (darkened for contrast) */
[data-theme="light"] .category-grid .text-cyan     { color: #CC0000; }
[data-theme="light"] .category-grid .text-yellow-400 { color: #A66A00; }
[data-theme="light"] .category-grid .text-blue-400 { color: #0047B3; }
[data-theme="light"] .category-grid .text-purple-400 { color: #7E22CE; }
[data-theme="light"] .category-grid .text-green-400  { color: #15803D; }
[data-theme="light"] .category-grid .text-pink-400   { color: #BE185D; }

/* Category cards need a visible edge on a white page */
[data-theme="light"] .category-grid > a {
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.06);
}

/* Testimonial avatar circles use from-cyan-500/to-blue-500 etc. — numeric
   Tailwind scales that aren't in the compiled build, so they render with no
   fill at all. Paint them explicitly (both themes). */
.rounded-full.bg-gradient-to-br.from-cyan-500,
.rounded-full.bg-gradient-to-br.from-blue-500 {
  background-image: linear-gradient(to bottom right, #FF4D4D, #B31217);
}
.rounded-full.bg-gradient-to-br.from-yellow-500 {
  background-image: linear-gradient(to bottom right, #F4AC45, #FF4D4D);
}
[data-theme="light"] .rounded-full.bg-gradient-to-br.from-cyan-500,
[data-theme="light"] .rounded-full.bg-gradient-to-br.from-blue-500,
[data-theme="light"] .rounded-full.bg-gradient-to-br.from-yellow-500 {
  color: #ffffff;
}

/* Newsletter submit button — stronger fill so it reads as a button */
/* Solid fill — the tinted version read as a disabled field, not a button. */
[data-theme="light"] #footer-newsletter button {
  background-color: #CC0000;
  border-color: #CC0000;
  color: #ffffff;
  font-weight: 700;
}
[data-theme="light"] #footer-newsletter button:hover {
  background-color: #A80000;
  border-color: #A80000;
}



/* hover:text-white stays readable in light mode */
[data-theme="light"] .hover\:text-white:hover { color: var(--text-primary); }

/* animated-gradient — remove dark background in light mode */
[data-theme="light"] .animated-gradient   { background: none; animation: none; }

/* ─── Status / badge colors ──────────────────────────────── */
/* Darkened so they pass contrast on white but keep their meaning
   (green = success, amber = rating) instead of going grey. */
[data-theme="light"] .text-green-400              { color: #15803D; }
[data-theme="light"] .text-yellow-500,
[data-theme="light"] .text-yellow-400             { color: #A66A00; }
[data-theme="light"] .bg-yellow-500\/10           { background-color: rgba(244,172,69,0.16); }
[data-theme="light"] .border-yellow-500\/20       { border-color: rgba(244,172,69,0.35); }
[data-theme="light"] .bg-green-500\/10            { background-color: rgba(34,197,94,0.12); }
[data-theme="light"] .border-green-500\/20        { border-color: rgba(34,197,94,0.28); }

/* group-hover accents */
[data-theme="light"] .group:hover .group-hover\:text-cyan { color: #CC0000; }
[data-theme="light"] .group:hover .group-hover\:bg-white\/10 { background-color: rgba(0,0,0,0.08); }

/* ═══════════════════════════════════════════════════════════
   SCROLL VIDEO — scroll-driven scrubbing
   ═══════════════════════════════════════════════════════════ */

/* Outer: tall scroll container (drives the scrub distance) */
.scroll-video-outer {
  position: relative;
  height: 300vh;
  background: var(--bg-primary);
}

/* Sticky inner — pinned full-screen by GSAP */
.scroll-video-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Video fills the screen */
.scroll-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: contents;
}

/* Show desktop video by default, mobile hidden */
.scroll-video--desktop { display: block; }
.scroll-video--mobile  { display: none; }
@media (max-width: 767px) {
  .scroll-video--desktop { display: none; }
  .scroll-video--mobile  { display: block; }
}

/* Dark gradient overlay for legibility */
.scroll-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(10,7,8,0.55) 0%,
    rgba(10,7,8,0.15) 35%,
    rgba(10,7,8,0.15) 65%,
    rgba(10,7,8,0.7) 100%);
  pointer-events: none;
}

/* Caption */
.scroll-video-caption {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 1.5rem;
  pointer-events: none;
}
.scroll-video-eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  margin-bottom: 1rem;
}
.scroll-video-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 0.75rem;
  text-shadow: 0 4px 30px rgba(0,0,0,0.5);
}
.scroll-video-sub {
  font-size: clamp(0.9rem, 2vw, 1.1rem);
  color: rgba(255,255,255,0.85);
  text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}

/* Loading spinner */
.scroll-video-loader {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  transition: opacity 0.5s ease;
}
.scroll-video-loader.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.scroll-video-spinner {
  width: 44px;
  height: 44px;
  border: 3px solid rgba(255,77,77,0.2);
  border-top-color: var(--accent-cyan);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════
   PRODUCTS PAGE — MOBILE
   ═══════════════════════════════════════════════════════════ */

/* Mobile category chip bar */
.mobile-cat-bar {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  -webkit-overflow-scrolling: touch;
}
.mobile-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  padding: 0.4rem 0.85rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #94a3b8;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  transition: all 0.2s;
  cursor: pointer;
}
.mobile-cat-chip--active {
  color: #FF4D4D;
  background: rgba(255,77,77,0.1);
  border-color: rgba(255,77,77,0.3);
}
.mobile-cat-count {
  font-size: 0.7rem;
  opacity: 0.65;
}

/* Product card image — responsive height */
.product-card-img {
  height: 256px; /* desktop default */
}
@media (max-width: 639px) {
  .product-card-img {
    height: 140px;
  }
  .product-card-body {
    padding: 0.6rem 0.75rem;
  }
  .product-card-title {
    font-size: 0.78rem;
  }
  .product-card-price {
    font-size: 0.95rem;
  }
}

/* ═══════════════════════════════════════════════════════════
   FOOTER — CONTACT ROW
   ═══════════════════════════════════════════════════════════ */

/* Desktop: stacked list */
.footer-contact-row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* ═══════════════════════════════════════════════════════════
   FOOTER — MOBILE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Less padding/margin on small screens */
  .site-footer {
    padding-top: 2.5rem;
    padding-bottom: 1.5rem;
    margin-top: 3rem;
  }

  /* Grid: brand full width → nav+cat 2-col → contact full width */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 1rem;
    margin-bottom: 1.75rem;
  }

  /* Brand spans full width at top */
  .footer-brand {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .footer-brand p {
    max-width: 330px;
  }
  .footer-brand .flex.gap-3 {
    justify-content: center;
  }

  /* Logo: slightly smaller on mobile */
  .footer-brand img {
    width: 140px !important;
  }

  /* Quick links col — left side */
  .footer-nav-col {
    grid-column: 1 / 2;
  }

  /* Categories col — right side */
  .footer-cat-col {
    grid-column: 2 / 3;
  }

  /* Contact col: full width */
  .footer-grid > div:last-child {
    grid-column: 1 / -1;
  }

  /* Newsletter form stays horizontal */
  #footer-newsletter {
    flex-direction: row;
  }
  #footer-newsletter input {
    min-width: 0;
  }

  /* Section headings: tighter bottom margin */
  .footer-nav-col h4,
  .footer-cat-col h4 {
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
  }

  /* Link list: tighter spacing */
  .footer-nav-col ul,
  .footer-cat-col ul {
    gap: 0;
  }
  .footer-nav-col ul li,
  .footer-cat-col ul li {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
  }
  .footer-nav-col a,
  .footer-cat-col a {
    font-size: 0.8rem;
  }

  /* Contact: phone + email side by side on one row */
  .footer-contact-row {
    flex-direction: row;
    gap: 0.5rem;
  }
  .footer-contact-item {
    flex: 1;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
    padding: 0.6rem 0.4rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 0.75rem;
  }
  .footer-contact-text {
    font-size: 0.72rem;
    word-break: break-all;
  }

  /* Bottom bar: stack + center on mobile */
  .site-footer .border-t.pt-6 {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
  }
}

/* ═══════════════════════════════════════════════════════════
   PRODUCT STORY — photo background
   A background photo makes this section a dark surface no matter which
   theme is active, so the light-theme text colours must not apply inside
   it. Selectors are deliberately 3-class deep to outrank the
   `[data-theme="light"] .story-*` rules regardless of source order.
   ═══════════════════════════════════════════════════════════ */

/* Readability scrim — sits between the photo and the content so the copy
   stays legible over ANY image the admin picks, weighted toward the text
   column (left half on desktop). */
.product-story-sticky--photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to left,
    rgba(6, 4, 5, 0.30) 0%,
    rgba(6, 4, 5, 0.68) 52%,
    rgba(6, 4, 5, 0.80) 100%
  );
}
@media (max-width: 1023px) {
  /* stacked layout — a side-weighted gradient would miss the text */
  .product-story-sticky--photo::before { background: rgba(6, 4, 5, 0.72); }
}
/* Lift the content above the scrim.
   NOTE: do NOT blanket-set `position` on the children here — the ambient
   blurs, the section label and the scroll hint are absolutely positioned,
   and forcing them to `relative` drops them back into flow and collapses
   the grid. Only `.story-main` is in-flow and needs a position; the rest
   just need the stacking order. */
.product-story-sticky--photo > .story-main { position: relative; }
.product-story-sticky--photo > * { z-index: 2; }

/* Dark skin for the copy */
.product-story-outer .product-story-sticky--photo .story-panel__title,
.product-story-outer .product-story-sticky--photo .story-feature__title,
.product-story-outer .product-story-sticky--photo .text-white {
  color: #ffffff;
}
.product-story-outer .product-story-sticky--photo .story-panel__desc {
  color: rgba(255, 255, 255, 0.86);
}
.product-story-outer .product-story-sticky--photo .story-label__hint {
  color: rgba(255, 255, 255, 0.45);
}
.product-story-outer .product-story-sticky--photo .story-dot {
  background: rgba(255, 255, 255, 0.25);
}
/* Glass cards read as frosted-dark over a photo; the light-mode white
   cards fought the image. */
.product-story-outer .product-story-sticky--photo .story-feature {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ─── Product story — mobile fit ─────────────────────────── */
/* The navbar is fixed at 80px and the section pins to top:0, so without this
   the product image sits behind it. Reserve the space and keep the whole
   stack inside one pinned viewport. */
@media (max-width: 1023px) {
  .product-story-sticky {
    padding-top: 88px;
    padding-bottom: 16px;
  }
  .story-grid { gap: 0.625rem; }
}

/* Short phones (≈640px tall and below) need a tighter budget still — without
   this the CTA lands within 4px of the pinned section's clipping edge. */
@media (max-width: 1023px) and (max-height: 700px) {
  .product-story-sticky { padding-top: 84px; padding-bottom: 12px; }
  .story-img-wrap       { height: clamp(88px, 16vh, 130px); }
  .story-product-img    { max-height: clamp(82px, 14vh, 120px); }
  .story-features       { gap: 0.3rem; margin-bottom: 0.45rem; }
  .story-feature        { padding: 0.32rem 0.55rem; }
  .story-panel__desc    { margin-bottom: 0.45rem; }
}
/* Sub-captions were shrinking to ~10px to make the budget — below the
   readable floor. Drop them on short phones instead of showing illegible text. */
@media (max-width: 1023px) and (max-height: 700px) {
  .story-feature__sub   { display: none; }
  .story-feature__title { font-size: 0.78rem; }
}

/* Footer links were 20px tall — well under a comfortable thumb target.
   Pad them out on touch layouts without changing the visual rhythm much. */
@media (max-width: 767px) {
  .footer-nav-col ul li,
  .footer-cat-col ul li {
    padding-top: 0;
    padding-bottom: 0;
  }
  .footer-nav-col ul li a,
  .footer-cat-col ul li a {
    min-height: 40px;
    align-items: center;
  }
}

/* ─── Category cards — mobile ────────────────────────────── */
/* Six full-height cards stacked in one column meant ~1400px of scrolling to
   reach six links, most of it empty space. Collapse each into a compact row:
   icon · name · count · arrow. */
@media (max-width: 640px) {
  .category-grid { grid-template-columns: 1fr; gap: 0.6rem; }
  .cat-card,
  .category-grid .cat-large { min-height: 0; grid-row: auto; }

  .cat-card__body {
    flex-direction: row;
    align-items: center;
    gap: 0.85rem;
    padding: 0.8rem 0.95rem;
  }
  .cat-card__head {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex: 1;
    min-width: 0;
  }
  .cat-card__icon {
    width: 40px;
    height: 40px;
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .cat-card__icon svg { width: 20px; height: 20px; }
  .cat-card__head h3  { font-size: 0.95rem; }
  /* the blurb needs a paragraph of room it doesn't get in a 56px-tall row */
  .cat-card__desc     { display: none; }

  .cat-card__meta {
    margin-top: 0;
    flex-shrink: 0;
    gap: 0.5rem;
  }
  .cat-card__meta > div { width: 28px; height: 28px; }
  /* the big decorative blur reads as a smudge at this size */
  .cat-card > div:nth-of-type(4) { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   LANDING PAGE (lp.php)
   Standalone lead-gen page — own header/footer, no site nav.
   ═══════════════════════════════════════════════════════════ */
.lp-body { overflow-x: hidden; }
.lp-wrap { max-width: 1180px; margin-inline: auto; padding-inline: 1.25rem; }
.lp-wrap--narrow { max-width: 780px; }
.lp-center { text-align: center; }

/* ── Header ── */
.lp-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(10, 7, 8, 0.9);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.lp-header__inner { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.lp-header__logo { width: 150px; }
.lp-header__phone {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1.1rem; border-radius: 9999px;
  background: linear-gradient(135deg, var(--accent-btn), var(--accent-blue));
  color: #fff; font-weight: 700; font-size: 0.9rem; white-space: nowrap;
}
.lp-header__phone svg { width: 16px; height: 16px; }

/* ── Hero ── */
.lp-hero { position: relative; padding: 3.5rem 0 4rem; overflow: hidden; }
.lp-hero__glow {
  position: absolute; top: -180px; left: 50%; transform: translateX(-50%);
  width: 700px; height: 500px; pointer-events: none;
  background: radial-gradient(ellipse, rgba(255, 77, 77, 0.16) 0%, transparent 70%);
}
.lp-hero__grid {
  position: relative; display: grid; grid-template-columns: 1fr 420px;
  gap: 3rem; align-items: center;
}
.lp-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.95rem; border-radius: 9999px;
  background: rgba(255, 77, 77, 0.12); border: 1px solid rgba(255, 77, 77, 0.35);
  font-size: 0.8rem; font-weight: 700; color: #fff; margin-bottom: 1.1rem;
}
.lp-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; animation: pulse 2s infinite; }
.lp-h1 {
  font-size: clamp(2rem, 4.6vw, 3.4rem); font-weight: 900; line-height: 1.12;
  color: #fff; margin-bottom: 1rem;
}
.lp-sub { font-size: 1.02rem; line-height: 1.7; color: #cbd5e1; margin-bottom: 1.4rem; max-width: 520px; }
.lp-ticks { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 0.55rem; }
.lp-ticks li { position: relative; padding-right: 1.75rem; font-size: 0.92rem; color: #e2e8f0; }
.lp-ticks li::before {
  content: "\2713"; position: absolute; right: 0; top: 0;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(34, 197, 94, 0.15); color: #22c55e;
  font-size: 0.7rem; font-weight: 900; display: grid; place-items: center;
}

/* ── Countdown ── */
.lp-timer {
  display: inline-block; padding: 0.9rem 1.35rem 1rem; border-radius: 1.1rem;
  background: linear-gradient(160deg, rgba(255, 77, 77, 0.14), rgba(255, 77, 77, 0.04));
  border: 1px solid rgba(255, 77, 77, 0.4);
  box-shadow: 0 0 0 1px rgba(255, 77, 77, 0.06), 0 12px 34px rgba(0, 0, 0, 0.35);
}
.lp-timer__head {
  display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.6rem;
  font-size: 0.82rem; font-weight: 800; color: var(--accent-cyan); letter-spacing: 0.02em;
}
.lp-timer__head svg { width: 16px; height: 16px; flex-shrink: 0; }

.lp-timer__units { display: flex; align-items: flex-start; gap: 0.3rem; }
.lp-timer__unit  { text-align: center; min-width: 46px; }
.lp-timer__unit b {
  display: block; font-size: 2.1rem; font-weight: 900; line-height: 1;
  color: #fff; font-variant-numeric: tabular-nums;
  /* fixed advance width so the digits don't jitter each second */
  font-feature-settings: "tnum";
}
.lp-timer__unit span {
  display: block; margin-top: 0.3rem;
  font-size: 0.62rem; letter-spacing: 0.06em; color: #94a3b8;
}
.lp-timer__sep {
  font-size: 1.6rem; font-weight: 900; line-height: 1.15; font-style: normal;
  color: rgba(255, 77, 77, 0.5);
}

/* ── Form card ── */
.lp-formcard {
  background: rgba(23, 15, 18, 0.92); border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1.25rem; padding: 1.6rem; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.lp-formcard--wide { max-width: 520px; margin: 1.75rem auto 0; text-align: right; }
.lp-formcard__title { font-size: 1.4rem; font-weight: 900; color: #fff; margin-bottom: 0.3rem; }
.lp-formcard__sub { font-size: 0.85rem; color: #94a3b8; margin-bottom: 1.1rem; }

.lp-form { display: grid; gap: 0.8rem; }
.lp-field { display: grid; gap: 0.3rem; }
.lp-field label { font-size: 0.78rem; font-weight: 600; color: #cbd5e1; }
.lp-field input {
  width: 100%; padding: 0.8rem 0.95rem; border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.13);
  color: #f1f5f9; font-family: inherit;
  font-size: 1rem; /* 16px — anything smaller makes iOS zoom on focus */
  transition: border-color 0.2s, background 0.2s;
}
.lp-field input::placeholder { color: #64748b; }
.lp-field input:focus {
  outline: none; border-color: var(--accent-cyan);
  background: rgba(255, 255, 255, 0.08);
}
.lp-field input.is-invalid { border-color: #ef4444; background: rgba(239, 68, 68, 0.08); }

.lp-form__submit {
  margin-top: 0.2rem; padding: 0.95rem 1rem; border: none; border-radius: 0.7rem;
  background: linear-gradient(135deg, var(--accent-btn), var(--accent-blue));
  color: #fff; font-family: inherit; font-size: 1.02rem; font-weight: 800; cursor: pointer;
  box-shadow: 0 10px 30px rgba(255, 77, 77, 0.32); transition: transform 0.2s, box-shadow 0.2s;
}
.lp-form__submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(255, 77, 77, 0.45); }
.lp-form__submit:disabled { opacity: 0.65; cursor: default; }
.lp-form__note { font-size: 0.7rem; color: #64748b; text-align: center; }
.lp-form__msg { font-size: 0.82rem; text-align: center; margin: 0; }
.lp-form__msg--err { color: #f87171; }

/* Honeypot. Still not display:none (bots skip those), but clipped rather than
   parked at left:-9999px: on an RTL page a large negative offset does not sit
   "off screen", it extends the document width and gives the whole page a
   horizontal scrollbar. */
.lp-hp {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.lp-thanks { text-align: center; padding: 1.5rem 0.5rem; }
.lp-thanks__mark {
  width: 58px; height: 58px; margin: 0 auto 1rem; border-radius: 50%;
  background: rgba(34, 197, 94, 0.15); border: 1px solid rgba(34, 197, 94, 0.4);
  display: grid; place-items: center; color: #22c55e;
}
.lp-thanks__mark svg { width: 28px; height: 28px; }
.lp-thanks h3 { font-size: 1.25rem; font-weight: 900; color: #fff; margin-bottom: 0.4rem; }
.lp-thanks p { font-size: 0.9rem; color: #94a3b8; }

/* ── Proof cards ── */
.lp-proof {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.02);
  padding: 2rem 0;
}
.lp-proof__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.85rem; }
.lp-proof__card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 1.25rem 0.9rem; border-radius: 1rem;
  background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.09);
}
/* the rating card carries the most weight, so it gets the accent edge */
.lp-proof__card--rating { border-color: rgba(244, 172, 69, 0.35); background: rgba(244, 172, 69, 0.06); }

.lp-proof__stars {
  color: var(--accent-gold); font-size: 1.05rem; letter-spacing: 0.12em; margin-bottom: 0.3rem;
}
.lp-proof__icon {
  width: 38px; height: 38px; border-radius: 0.7rem; margin-bottom: 0.55rem;
  background: rgba(255, 77, 77, 0.12); border: 1px solid rgba(255, 77, 77, 0.25);
  color: var(--accent-cyan); display: grid; place-items: center;
}
.lp-proof__icon svg { width: 19px; height: 19px; }
.lp-proof__big {
  font-size: 1.75rem; font-weight: 900; color: #fff; line-height: 1.05;
}
.lp-proof__big span { font-size: 0.95rem; font-weight: 700; color: #94a3b8; }
.lp-proof__lbl {
  margin-top: 0.3rem; font-size: 0.78rem; color: #94a3b8; line-height: 1.4;
}
.lp-proof__lbl i {
  display: block; margin-top: 0.15rem;
  font-size: 0.68rem; font-style: normal; color: #64748b;
}

/* ── Sections ── */
.lp-section { padding: 4rem 0; }
.lp-section--alt { background: rgba(255, 255, 255, 0.02); }
.lp-h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: 900; color: #fff; text-align: center; margin-bottom: 0.6rem; }
.lp-h2sub { text-align: center; color: #94a3b8; font-size: 0.95rem; margin-bottom: 2.2rem; }
.lp-h2 + .lp-benefits, .lp-h2 + .lp-quotes, .lp-h2 + .lp-faq { margin-top: 2.2rem; }

/* ── Benefits ── */
.lp-benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.lp-benefit {
  padding: 1.5rem 1.25rem; border-radius: 1rem;
  background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08);
}
.lp-benefit__icon {
  width: 46px; height: 46px; border-radius: 0.8rem; margin-bottom: 0.9rem;
  background: rgba(255, 77, 77, 0.12); border: 1px solid rgba(255, 77, 77, 0.25);
  color: var(--accent-cyan); display: grid; place-items: center;
}
.lp-benefit__icon svg { width: 22px; height: 22px; }
.lp-benefit h3 { font-size: 1rem; font-weight: 800; color: #fff; margin-bottom: 0.4rem; }
.lp-benefit p { font-size: 0.85rem; line-height: 1.6; color: #94a3b8; }

/* ── Testimonials ── */
.lp-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.lp-quote {
  margin: 0; padding: 1.4rem; border-radius: 1rem;
  background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08);
}
.lp-quote__stars { color: var(--accent-gold); font-size: 0.9rem; letter-spacing: 0.1em; margin-bottom: 0.6rem; }
.lp-quote blockquote { margin: 0 0 1rem; font-size: 0.9rem; line-height: 1.65; color: #cbd5e1; }
.lp-quote figcaption { display: flex; align-items: center; gap: 0.6rem; }
.lp-quote__av {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent-btn), var(--accent-blue));
  color: #fff; font-weight: 900; font-size: 0.85rem; display: grid; place-items: center;
}
.lp-quote figcaption b { display: block; font-size: 0.85rem; color: #fff; }
.lp-quote figcaption i { display: block; font-size: 0.72rem; color: #64748b; font-style: normal; }

/* ── FAQ ── */
.lp-faq { display: grid; gap: 0.7rem; }
.lp-faq__item {
  border-radius: 0.85rem; background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08); overflow: hidden;
}
.lp-faq__item summary {
  padding: 1rem 1.15rem; cursor: pointer; font-weight: 700; font-size: 0.95rem; color: #fff;
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.lp-faq__item summary::-webkit-details-marker { display: none; }
.lp-faq__item summary::after {
  content: "+"; color: var(--accent-cyan); font-size: 1.3rem; font-weight: 400; line-height: 1;
  transition: transform 0.25s;
}
.lp-faq__item[open] summary::after { transform: rotate(45deg); }
.lp-faq__item p { padding: 0 1.15rem 1.1rem; margin: 0; font-size: 0.88rem; line-height: 1.7; color: #94a3b8; }

/* ── Final CTA ── */
.lp-final {
  padding: 4rem 0 5rem;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 77, 77, 0.14) 0%, transparent 60%),
    rgba(255, 255, 255, 0.02);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* ── Footer ── */
.lp-footer { padding: 2rem 0 5.5rem; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.lp-footer__inner { display: flex; flex-direction: column; align-items: center; gap: 0.85rem; text-align: center; }
.lp-footer__logo { width: 130px; }
.lp-footer__links { display: flex; gap: 1.5rem; }
.lp-footer__links a { font-size: 0.85rem; color: #94a3b8; }
.lp-footer__links a:hover { color: var(--accent-cyan); }
.lp-footer__copy { font-size: 0.72rem; color: #64748b; margin: 0; }

/* ── Sticky mobile action bar ── */
.lp-sticky {
  position: fixed; bottom: 0; right: 0; left: 0; z-index: 50;
  display: none; gap: 0.6rem; padding: 0.65rem 0.85rem;
  background: rgba(10, 7, 8, 0.96);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  transition: transform 0.3s ease;
}
.lp-sticky.is-hidden { transform: translateY(110%); }
.lp-sticky a {
  flex: 1; min-height: 46px; border-radius: 0.7rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  font-weight: 800; font-size: 0.92rem;
}
.lp-sticky__call { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); color: #fff; }
.lp-sticky__call svg { width: 17px; height: 17px; }
.lp-sticky__cta { background: linear-gradient(135deg, var(--accent-btn), var(--accent-blue)); color: #fff; }

/* ── Responsive ── */
@media (max-width: 1023px) {
  .lp-hero__grid { grid-template-columns: 1fr; gap: 2rem; }
  .lp-benefits   { grid-template-columns: repeat(2, 1fr); }
  .lp-quotes     { grid-template-columns: repeat(2, 1fr); }
  .lp-quotes .lp-quote:nth-child(3) { display: none; }
}
@media (max-width: 767px) {
  .lp-hero { padding: 2.25rem 0 2.75rem; }
  .lp-header__logo { width: 124px; }
  .lp-header__phone span { display: none; }
  .lp-header__phone { padding: 0.55rem; }
  .lp-header__phone svg { width: 18px; height: 18px; }

  .lp-sub    { font-size: 0.92rem; margin-bottom: 1.1rem; }
  .lp-ticks  { margin-bottom: 1.2rem; }
  .lp-timer  { display: block; }
  .lp-timer__units { justify-content: space-between; }
  .lp-timer__unit  { flex: 1; min-width: 0; }

  .lp-formcard { padding: 1.25rem; }
  .lp-section  { padding: 2.75rem 0; }
  .lp-final    { padding: 2.75rem 0 3.5rem; }

  .lp-benefits { grid-template-columns: 1fr; gap: 0.7rem; }
  .lp-benefit  { display: grid; grid-template-columns: 46px 1fr; gap: 0.9rem; padding: 0.95rem 1rem; }
  .lp-benefit__icon { margin-bottom: 0; }
  .lp-benefit h3 { grid-column: 2; margin-bottom: 0.15rem; }
  .lp-benefit p  { grid-column: 2; font-size: 0.8rem; }

  .lp-quotes { grid-template-columns: 1fr; }
  .lp-quotes .lp-quote:nth-child(3) { display: block; }

  /* the bar owns the bottom of the screen on phones */
  .lp-sticky { display: flex; }
}

/* ── Trust row inside the form card ── */
.lp-trustrow {
  list-style: none; margin: 1rem 0 0; padding: 0.85rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex; justify-content: space-between; gap: 0.5rem;
}
.lp-trustrow li {
  font-size: 0.72rem; color: #94a3b8; display: flex; align-items: center; gap: 0.3rem;
}
.lp-trustrow li::before { content: "\2713"; color: #22c55e; font-weight: 900; }

/* ── WhatsApp in the sticky bar ── */
.lp-sticky__wa {
  flex: 0 0 46px !important; background: #25D366; color: #fff;
}
.lp-sticky__wa svg { width: 22px; height: 22px; }

/* ═══════════════════════════════════════════════════════════
   LIGHT VARIANT (lp-light.php / ?v=light)
   Same structure, light surface. Built as a sibling rather than a
   fork so both variants stay in sync — only colours differ.
   ═══════════════════════════════════════════════════════════ */
.lp-light { background: #ffffff; color: #0F172A; }

.lp-light .lp-header {
  background: rgba(255, 255, 255, 0.92);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
.lp-light .lp-hero__glow {
  background: radial-gradient(ellipse, rgba(204, 0, 0, 0.08) 0%, transparent 70%);
}
.lp-light .lp-badge {
  background: rgba(204, 0, 0, 0.08); border-color: rgba(204, 0, 0, 0.28); color: #0F172A;
}
.lp-light .lp-h1     { color: #0F172A; }
.lp-light .lp-sub    { color: #475569; }
.lp-light .lp-ticks li { color: #334155; }

.lp-light .lp-timer {
  background: #ffffff; border-color: rgba(204, 0, 0, 0.25);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
.lp-light .lp-timer__head  { color: #A80000; }
.lp-light .lp-timer__unit b    { color: #0F172A; }
.lp-light .lp-timer__unit span { color: #64748b; }
.lp-light .lp-timer__sep       { color: rgba(204, 0, 0, 0.45); }

/* Form card — a white card on a light page is the shape people expect a
   form to have, which is most of the reason to test this variant at all. */
.lp-light .lp-formcard {
  background: #ffffff; border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.12);
}
.lp-light .lp-formcard__title { color: #0F172A; }
.lp-light .lp-formcard__sub   { color: #64748b; }
.lp-light .lp-field label     { color: #334155; }
.lp-light .lp-field input {
  background: #f8fafc; border-color: rgba(0, 0, 0, 0.14); color: #0F172A;
}
.lp-light .lp-field input::placeholder { color: #94a3b8; }
.lp-light .lp-field input:focus { background: #fff; border-color: #CC0000; }
.lp-light .lp-form__note { color: #94a3b8; }
.lp-light .lp-trustrow      { border-top-color: rgba(0, 0, 0, 0.08); }
.lp-light .lp-trustrow li   { color: #64748b; }
.lp-light .lp-thanks h3     { color: #0F172A; }
.lp-light .lp-thanks p      { color: #64748b; }

.lp-light .lp-proof {
  background: #f8fafc;
  border-top-color: rgba(0, 0, 0, 0.07); border-bottom-color: rgba(0, 0, 0, 0.07);
}
.lp-light .lp-proof__card {
  background: #ffffff; border-color: rgba(0, 0, 0, 0.09);
  box-shadow: 0 2px 14px rgba(15, 23, 42, 0.05);
}
.lp-light .lp-proof__card--rating {
  background: rgba(244, 172, 69, 0.09); border-color: rgba(203, 132, 22, 0.35);
}
.lp-light .lp-proof__stars { color: #CB8416; }
.lp-light .lp-proof__icon {
  background: rgba(204, 0, 0, 0.08); border-color: rgba(204, 0, 0, 0.2); color: #CC0000;
}
.lp-light .lp-proof__big       { color: #0F172A; }
.lp-light .lp-proof__big span  { color: #64748b; }
.lp-light .lp-proof__lbl       { color: #475569; }
.lp-light .lp-proof__lbl i     { color: #94a3b8; }

.lp-light .lp-section--alt { background: #f8fafc; }
.lp-light .lp-h2      { color: #0F172A; }
.lp-light .lp-h2sub   { color: #64748b; }

.lp-light .lp-benefit {
  background: #ffffff; border-color: rgba(0, 0, 0, 0.09);
  box-shadow: 0 2px 14px rgba(15, 23, 42, 0.05);
}
.lp-light .lp-benefit__icon {
  background: rgba(204, 0, 0, 0.08); border-color: rgba(204, 0, 0, 0.2); color: #CC0000;
}
.lp-light .lp-benefit h3 { color: #0F172A; }
.lp-light .lp-benefit p  { color: #64748b; }

.lp-light .lp-quote {
  background: #ffffff; border-color: rgba(0, 0, 0, 0.09);
  box-shadow: 0 2px 14px rgba(15, 23, 42, 0.05);
}
.lp-light .lp-quote blockquote     { color: #334155; }
.lp-light .lp-quote figcaption b   { color: #0F172A; }
.lp-light .lp-quote figcaption i   { color: #94a3b8; }

.lp-light .lp-faq__item {
  background: #ffffff; border-color: rgba(0, 0, 0, 0.09);
}
.lp-light .lp-faq__item summary { color: #0F172A; }
.lp-light .lp-faq__item p       { color: #64748b; }

.lp-light .lp-final {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(204, 0, 0, 0.07) 0%, transparent 60%),
    #f8fafc;
  border-top-color: rgba(0, 0, 0, 0.07);
}
.lp-light .lp-footer { border-top-color: rgba(0, 0, 0, 0.08); }
.lp-light .lp-footer__links a { color: #64748b; }
.lp-light .lp-footer__copy    { color: #94a3b8; }

.lp-light .lp-sticky {
  background: rgba(255, 255, 255, 0.97);
  border-top-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 -4px 24px rgba(15, 23, 42, 0.1);
}
.lp-light .lp-sticky__call {
  background: #f1f5f9; border-color: rgba(0, 0, 0, 0.12); color: #0F172A;
}

@media (max-width: 767px) {
  .lp-trustrow { gap: 0.35rem; }
  .lp-trustrow li { font-size: 0.66rem; }
}

/* ── Hero lock shots — the only imagery on the page ── */
.lp-locks {
  display: flex; align-items: flex-end; justify-content: flex-start;
  gap: 1.5rem; margin-top: 1.75rem;
}
.lp-locks__img {
  height: clamp(210px, 36vh, 400px);
  width: auto; object-fit: contain;
  filter: drop-shadow(0 22px 40px rgba(0, 0, 0, 0.45));
}
/* Second shot sits slightly lower so the pair reads as a composition
   rather than two images pasted in a row. */
.lp-locks__img:nth-child(2) {
  height: clamp(182px, 31vh, 345px);
}
.lp-light .lp-locks__img {
  filter: drop-shadow(0 18px 34px rgba(15, 23, 42, 0.22));
}

@media (max-width: 1023px) {
  .lp-locks { justify-content: center; margin-top: 1.25rem; gap: 1.1rem; }
}
@media (max-width: 767px) {
  .lp-locks { gap: 0.9rem; margin-top: 1rem; }
  .lp-locks__img            { height: clamp(150px, 24vh, 230px); }
  .lp-locks__img:nth-child(2) { height: clamp(130px, 21vh, 200px); }
}

/* ── Countdown + proof cards: responsive ── */
@media (max-width: 1023px) {
  .lp-proof__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .lp-timer { display: block; padding: 0.8rem 0.9rem 0.9rem; }
  .lp-timer__units { justify-content: space-between; gap: 0.15rem; }
  .lp-timer__unit  { min-width: 0; flex: 1; }
  .lp-timer__unit b { font-size: 1.7rem; }
  .lp-timer__sep    { font-size: 1.3rem; }

  .lp-proof { padding: 1.5rem 0; }
  .lp-proof__grid { gap: 0.6rem; }
  .lp-proof__card { padding: 0.9rem 0.5rem; }
  .lp-proof__big  { font-size: 1.4rem; }
  .lp-proof__lbl  { font-size: 0.7rem; }
  .lp-proof__icon { width: 32px; height: 32px; margin-bottom: 0.4rem; }
  .lp-proof__icon svg { width: 16px; height: 16px; }
  .lp-proof__stars { font-size: 0.9rem; }
}

/* ═══════════════════════════════════════════════════════════
   FLOATING WHATSAPP
   ═══════════════════════════════════════════════════════════ */
.wa-float {
  position: fixed;
  bottom: 22px;
  left: 22px;          /* left in RTL keeps it clear of the reading column */
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  height: 54px;
  padding: 0 1.05rem;
  border-radius: 9999px;
  /* WhatsApp brand green, as used on their own "Chat on WhatsApp" button. */
  background: #25D366;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.92rem;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.3), 0 0 0 6px rgba(37, 211, 102, 0.16);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.wa-float:hover {
  background: #1EBE5A;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.38), 0 0 0 8px rgba(37, 211, 102, 0.22);
}
.wa-float:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}
.wa-float svg { width: 26px; height: 26px; flex-shrink: 0; }

@media (max-width: 767px) {
  /* icon only, and lifted so it clears the thumb zone and any bottom bar */
  .wa-float {
    bottom: 16px;
    left: 16px;
    width: 52px;
    height: 52px;
    padding: 0;
    justify-content: center;
  }
  .wa-float__label { display: none; }
}

/* The landing page owns the bottom of the screen with its own action bar. */
.lp-body .wa-float { display: none; }

@media (prefers-reduced-motion: reduce) {
  .wa-float { transition: none; }
  .wa-float:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════
   ANNOTATED-SPEC LANDING PAGE (lp2.php / lp2-light.php)
   Variant B. The product carries the page: one lock shot with
   callout lines naming each part, form underneath.

   Geometry note: .sp-figure is sized to be EXACTLY the image box,
   so a pin's --x/--y percentages land on the lock itself. The
   labels then hang outside that box on both sides. Do not put
   padding on .sp-figure or every line will point 20px off.
   ═══════════════════════════════════════════════════════════ */
.sp-body { background: var(--bg-primary); }

.sp-hero { position: relative; padding: 3rem 0 3.5rem; overflow: hidden; }
.sp-hero__beam {
  position: absolute; top: -120px; left: 50%; transform: translateX(-50%);
  width: 620px; height: 780px; pointer-events: none;
  background: radial-gradient(ellipse at 50% 30%, rgba(255, 77, 77, 0.14) 0%, transparent 68%);
}
.sp-hero__head { position: relative; text-align: center; }
.sp-h1 {
  font-size: clamp(1.9rem, 4.4vw, 3.2rem); font-weight: 900; line-height: 1.14;
  color: #fff; margin-bottom: 0.9rem;
}
.sp-sub {
  font-size: 1.02rem; line-height: 1.7; color: #cbd5e1;
  max-width: 560px; margin-inline: auto;
}

/* ── The stage: lock + callouts ── */
.sp-stage {
  position: relative; display: grid; justify-items: center;
  padding: 3.25rem 0 2.75rem;
}
.sp-figure {
  position: relative;
  height: clamp(440px, 62vh, 660px);
  aspect-ratio: 315 / 1273;   /* the real proportions of lock-hero.png */
}
.sp-lock {
  display: block; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.55));
}

.sp-pins { list-style: none; margin: 0; padding: 0; }
.sp-pin {
  --arm: 56px;
  --lw: 205px;
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  pointer-events: none;
}

/* The anchor dot sits exactly on the part it names */
.sp-pin__dot {
  position: absolute; left: var(--x); top: var(--y);
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 50%; background: var(--accent-cyan);
  box-shadow: 0 0 0 4px rgba(255, 77, 77, 0.22), 0 0 12px rgba(255, 77, 77, 0.7);
}

/* The line runs from the dot out past the edge of the lock */
.sp-pin__arm {
  position: absolute; top: var(--y); height: 1px;
  background: linear-gradient(to right, rgba(255, 77, 77, 0.85), rgba(255, 77, 77, 0.55));
}
.sp-pin--r .sp-pin__arm { left: var(--x); width: calc(100% - var(--x) + var(--arm)); }
.sp-pin--l .sp-pin__arm { right: calc(100% - var(--x)); width: calc(var(--x) + var(--arm)); }

.sp-pin__label {
  position: absolute; top: var(--y); transform: translateY(-50%);
  width: var(--lw); display: block; pointer-events: auto;
}
.sp-pin--r .sp-pin__label { left: calc(100% + var(--arm) + 12px); text-align: left; }
.sp-pin--l .sp-pin__label { right: calc(100% + var(--arm) + 12px); text-align: right; }

.sp-pin__num {
  display: block; font-size: 0.62rem; font-weight: 900; letter-spacing: 0.16em;
  color: var(--accent-cyan); margin-bottom: 0.15rem;
}
.sp-pin__t {
  display: block; font-size: 1.02rem; font-weight: 800; color: #fff;
  line-height: 1.3; margin-bottom: 0.2rem;
}
.sp-pin__d { display: block; font-size: 0.8rem; line-height: 1.5; color: #94a3b8; }

/* Callouts arrive one after another, top to bottom, as the page settles.
   Note the `backwards` fill and the absence of a base `opacity: 0`: the
   resting state of a callout is VISIBLE, and the animation only borrows the
   hidden state for the length of its delay. With `forwards` over an
   opacity:0 base, anything that keeps the animation from running (a frozen
   document timeline, a stylesheet that half-loads) leaves the labels
   invisible for good. */
.sp-pin__dot, .sp-pin__arm, .sp-pin__label {
  animation: spPin 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(280ms + var(--i) * 150ms);
}
@keyframes spPin { from { opacity: 0; } to { opacity: 1; } }

/* ── Form bar under the drawing ── */
.sp-hero__foot { position: relative; display: grid; justify-items: center; gap: 1.5rem; }
.sp-timer { text-align: center; }
.sp-formbar { width: 100%; max-width: 880px; }
.sp-formbar__head { text-align: center; margin-bottom: 1.15rem; }

@media (min-width: 768px) {
  /* One row: name, phone, city, button. The honeypot is absolutely
     positioned, so it never claims a grid track. */
  .sp-formbar .lp-form {
    grid-template-columns: repeat(3, 1fr) auto;
    align-items: end; column-gap: 0.7rem;
  }
  .sp-formbar .lp-form__submit { margin-top: 0; padding: 0.86rem 1.7rem; white-space: nowrap; }
  .sp-formbar .lp-form__note,
  .sp-formbar .lp-form__msg,
  .sp-formbar .lp-thanks { grid-column: 1 / -1; }
}

.sp-trust {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.6rem;
  font-size: 0.82rem; color: #94a3b8;
}
.sp-trust li { display: flex; align-items: center; gap: 0.35rem; }
.sp-trust b { color: #fff; font-weight: 800; }
.sp-trust li::before {
  content: "\2713"; color: #22c55e; font-weight: 900; font-size: 0.72rem;
}

/* ── Three steps ── */
.sp-steps {
  list-style: none; margin: 2.25rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}
.sp-step {
  position: relative; padding: 1.6rem 1.35rem 1.5rem; border-radius: 1.1rem;
  background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.09);
}
.sp-step__n {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-btn), var(--accent-blue));
  color: #fff; font-weight: 900; font-size: 0.95rem; margin-bottom: 0.85rem;
}
.sp-step h3 { font-size: 1.08rem; font-weight: 800; color: #fff; margin-bottom: 0.45rem; }
.sp-step p  { font-size: 0.88rem; line-height: 1.65; color: #94a3b8; }

/* ── Testimonials ── */
.sp-quotes {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.25rem;
}
.sp-quote {
  margin: 0; padding: 1.5rem 1.35rem; border-radius: 1.1rem;
  background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.09);
  display: flex; flex-direction: column; gap: 0.7rem;
}
.sp-quote__stars { color: var(--accent-gold); letter-spacing: 0.1em; font-size: 0.95rem; }
.sp-quote blockquote {
  margin: 0; font-size: 0.92rem; line-height: 1.7; color: #e2e8f0; flex: 1;
}
.sp-quote figcaption { font-size: 0.8rem; color: #94a3b8; }
.sp-quote figcaption b { display: block; color: #fff; font-weight: 800; font-size: 0.88rem; }

/* ── The seven ways in ── */
.sp-ways-wrap { position: relative; text-align: center; margin-bottom: 2.5rem; }
.sp-ways__lead {
  font-size: 0.72rem; font-weight: 900; letter-spacing: 0.16em;
  color: var(--accent-cyan); margin-bottom: 0.85rem;
}
.sp-ways {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem;
}
.sp-way {
  padding: 0.45rem 0.95rem; border-radius: 9999px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.85rem; font-weight: 600; color: #e2e8f0; white-space: nowrap;
}
.lp-light .sp-ways__lead { color: #CC0000; }
.lp-light .sp-way {
  background: #ffffff; border-color: #e2e8f0; color: #334155;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
}

/* ═══ Narrow screens ══════════════════════════════════════════
   No room for lines beside a 150px-wide lock. The pins stop being
   absolutely positioned and become a plain two-column list under
   the image — same markup, same reading order, no duplicate text.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  .sp-stage { padding: 2.25rem 1.25rem 2rem; }
  .sp-figure {
    display: grid; justify-items: center; gap: 1.5rem;
    height: auto; aspect-ratio: auto; width: 100%;
  }
  .sp-lock { height: clamp(330px, 50vh, 450px); width: auto; }

  .sp-pins {
    position: static; width: 100%;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem;
  }
  .sp-pin {
    position: static; width: auto; height: auto;
    padding: 0.9rem 0.95rem; border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.09);
  }
  .sp-pin__dot, .sp-pin__arm { display: none; }
  .sp-pin__label {
    position: static; transform: none; width: auto; text-align: right;
  }
  .sp-pin__t { font-size: 0.92rem; }
  .sp-pin__d { font-size: 0.76rem; }

  .sp-steps, .sp-quotes { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .sp-pins { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .sp-pin__dot, .sp-pin__arm, .sp-pin__label { animation: none; opacity: 1; }
}

/* ═══ Light variant (lp2-light.php / ?v=light) ════════════════ */
.lp-light.sp-body { background: #ffffff; }
.lp-light .sp-hero__beam {
  background: radial-gradient(ellipse at 50% 30%, rgba(204, 0, 0, 0.07) 0%, transparent 68%);
}
.lp-light .sp-h1  { color: #0F172A; }
.lp-light .sp-sub { color: #475569; }

.lp-light .sp-lock { filter: drop-shadow(0 26px 40px rgba(15, 23, 42, 0.22)); }
.lp-light .sp-pin__dot {
  background: #CC0000;
  box-shadow: 0 0 0 4px rgba(204, 0, 0, 0.14);
}
.lp-light .sp-pin__arm {
  background: linear-gradient(to right, rgba(204, 0, 0, 0.75), rgba(204, 0, 0, 0.4));
}
.lp-light .sp-pin__t { color: #0F172A; }
.lp-light .sp-pin__d { color: #64748b; }

.lp-light .sp-trust    { color: #64748b; }
.lp-light .sp-trust b  { color: #0F172A; }

.lp-light .sp-step,
.lp-light .sp-quote,
.lp-light .sp-pin {
  background: #ffffff; border-color: #e2e8f0;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}
.lp-light .sp-step h3 { color: #0F172A; }
.lp-light .sp-step p  { color: #475569; }
.lp-light .sp-quote__stars     { color: #CB8416; }
.lp-light .sp-quote blockquote { color: #334155; }
.lp-light .sp-quote figcaption   { color: #94a3b8; }
.lp-light .sp-quote figcaption b { color: #0F172A; }

/* On mobile the pins become cards; on desktop they are bare text over the
   page, so the card treatment has to be undone above the breakpoint. */
@media (min-width: 900px) {
  .lp-light .sp-pin { background: none; border: 0; box-shadow: none; }
}

/* ═══════════════════════════════════════════════════════════
   ACCESSIBILITY WIDGET
   Trigger sits opposite the WhatsApp button so the two never
   overlap: WhatsApp is bottom-left, this is bottom-right.
   ═══════════════════════════════════════════════════════════ */
.a11y-trigger {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 70;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.9);
  background: #1D4ED8;
  color: #ffffff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, background 0.2s ease;
}
.a11y-trigger:hover { background: #1E40AF; transform: translateY(-2px); }
.a11y-trigger:focus-visible { outline: 3px solid #FACC15; outline-offset: 3px; }
.a11y-trigger svg { width: 28px; height: 28px; }

.a11y-panel {
  position: fixed;
  bottom: 88px;
  right: 22px;
  z-index: 71;
  width: min(330px, calc(100vw - 32px));
  max-height: min(70vh, 560px);
  overflow-y: auto;
  border-radius: 1rem;
  background: #0F172A;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  color: #E2E8F0;
}
.a11y-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem; padding: 0.9rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  position: sticky; top: 0; background: #0F172A;
}
.a11y-panel__title { font-size: 1rem; font-weight: 800; color: #ffffff; margin: 0; }
.a11y-close {
  background: none; border: 0; color: #94A3B8; font-size: 1.6rem; line-height: 1;
  cursor: pointer; padding: 0 0.25rem;
}
.a11y-close:hover { color: #ffffff; }
.a11y-close:focus-visible { outline: 2px solid #FACC15; outline-offset: 2px; }

.a11y-panel__body { padding: 1rem; }
.a11y-group { margin-bottom: 1.1rem; }
.a11y-group__label {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em;
  color: #94A3B8; margin: 0 0 0.5rem;
}
.a11y-row  { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.a11y-size {
  min-width: 54px; text-align: center; font-weight: 800; font-size: 0.85rem; color: #ffffff;
}

.a11y-btn {
  padding: 0.6rem 0.5rem;
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #E2E8F0;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  flex: 1;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.a11y-btn:hover { background: rgba(255, 255, 255, 0.13); }
.a11y-btn:focus-visible { outline: 3px solid #FACC15; outline-offset: 2px; }
.a11y-btn[aria-pressed="true"] {
  background: #1D4ED8; border-color: #60A5FA; color: #ffffff;
}
/* state is not carried by colour alone */
.a11y-btn[aria-pressed="true"]::before { content: "\2713 "; font-weight: 900; }

.a11y-reset {
  width: 100%; padding: 0.65rem; border-radius: 0.6rem;
  background: rgba(239, 68, 68, 0.14); border: 1px solid rgba(239, 68, 68, 0.4);
  color: #FCA5A5; font-family: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer;
}
.a11y-reset:hover { background: rgba(239, 68, 68, 0.22); }
.a11y-reset:focus-visible { outline: 3px solid #FACC15; outline-offset: 2px; }

.a11y-note { margin: 0.85rem 0 0; font-size: 0.75rem; text-align: center; }
.a11y-note a { color: #93C5FD; text-decoration: underline; }

@media (max-width: 767px) {
  .a11y-trigger { bottom: 16px; right: 16px; width: 50px; height: 50px; }
  .a11y-panel   { bottom: 76px; right: 16px; }
}

/* ═══ The adjustments themselves ═════════════════════════════
   Applied as classes on <html> by a11y.js. Every rule is
   !important on purpose: it has to beat whatever the page,
   Tailwind or an inline style says, or the setting does nothing.
   ═══════════════════════════════════════════════════════════ */
html.a11y-scaled { font-size: calc(16px * var(--a11y-scale, 1)); }

html.a11y-readable body,
html.a11y-readable body * {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
  letter-spacing: normal !important;
}
html.a11y-spacing body * {
  line-height: 1.9 !important;
  letter-spacing: 0.05em !important;
  word-spacing: 0.14em !important;
}

html.a11y-contrast body,
html.a11y-contrast body * {
  background-color: #000000 !important;
  color: #FFFFFF !important;
  border-color: #FFFFFF !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
html.a11y-contrast a, html.a11y-contrast a * { color: #FFFF00 !important; }
html.a11y-contrast img, html.a11y-contrast video, html.a11y-contrast svg { background: transparent !important; }

html.a11y-light body,
html.a11y-light body * {
  background-color: #FFFFFF !important;
  color: #111111 !important;
  border-color: #444444 !important;
  text-shadow: none !important;
}
html.a11y-light a, html.a11y-light a * { color: #0000CC !important; }
html.a11y-light img, html.a11y-light video, html.a11y-light svg { background: transparent !important; }

/* Greyscale and inversion are painted by a fixed overlay, NOT by a filter on
   body or on any content element.

   The reason is a CSS rule that is easy to forget: an element with a `filter`
   becomes the containing block for its position:fixed descendants. Filtering
   body therefore tore every floating control off the viewport and dropped it
   at the foot of the document, roughly 15,000px down. Filtering the content
   wrapper instead moved the problem rather than solving it: GSAP pins the
   story and hero sections with position:fixed, and those broke the same way.

   backdrop-filter on an overlay tints whatever is painted behind it without
   touching layout at all, so pins and floating buttons behave exactly as they
   do with the effect off. pointer-events:none keeps the page clickable. */
html.a11y-grayscale::after,
html.a11y-invert::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
}
html.a11y-grayscale::after {
  -webkit-backdrop-filter: grayscale(100%);
          backdrop-filter: grayscale(100%);
}
html.a11y-invert::after {
  -webkit-backdrop-filter: invert(100%) hue-rotate(180deg);
          backdrop-filter: invert(100%) hue-rotate(180deg);
}
/* Photos are inverted once here and once by the overlay, which lands them back
   at their real colours. Text and interface still flip, which is the point. */
html.a11y-invert img,
html.a11y-invert video {
  filter: invert(100%) hue-rotate(180deg) !important;
}

html.a11y-links a {
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  outline: 1px dashed currentColor !important;
  outline-offset: 2px !important;
}
html.a11y-titles h1, html.a11y-titles h2, html.a11y-titles h3,
html.a11y-titles h4, html.a11y-titles h5, html.a11y-titles h6 {
  outline: 2px solid #FACC15 !important;
  outline-offset: 3px !important;
}

html.a11y-cursor, html.a11y-cursor * {
  /* 32px arrow, drawn inline so it costs no request */
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M6 2l20 12-8 2 5 10-4 2-5-10-6 6z' fill='%23fff' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") 4 2, auto !important;
}

html.a11y-stopmotion *,
html.a11y-stopmotion *::before,
html.a11y-stopmotion *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* Anyone tabbing through needs to see where they are, on every page */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #FACC15;
  outline-offset: 2px;
}

/* Skip link: the first thing a keyboard or screen reader user meets */
.skip-link {
  position: absolute;
  right: 8px;
  top: -60px;
  z-index: 200;
  padding: 0.7rem 1.2rem;
  border-radius: 0 0 0.6rem 0.6rem;
  background: #1D4ED8;
  color: #ffffff;
  font-weight: 700;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0; }

/* ═══════════════════════════════════════════════════════════
   COOKIE CONSENT
   The bar sits above the sticky bits but below the accessibility
   panel, so a visitor can always reach the adjustments.
   ═══════════════════════════════════════════════════════════ */
.ck-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 65;
  background: #0F172A;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.ck-banner.is-open { transform: translateY(0); }
.ck-banner__inner {
  max-width: 1180px; margin-inline: auto;
  padding: 1.1rem 1.25rem;
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
}
.ck-banner__text  { flex: 1 1 340px; min-width: 0; }
.ck-banner__title { font-size: 0.98rem; font-weight: 800; color: #ffffff; margin: 0 0 0.3rem; }
.ck-banner__desc  { font-size: 0.82rem; line-height: 1.65; color: #CBD5E1; margin: 0; }
.ck-banner__desc a { color: #93C5FD; text-decoration: underline; }
.ck-banner__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.ck-btn {
  padding: 0.62rem 1.1rem;
  border-radius: 0.6rem;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
/* Accept and refuse carry the same visual weight on purpose. A greyed-out
   refusal next to a bright accept is the pattern regulators object to. */
.ck-btn--ghost {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.22);
  color: #E2E8F0;
}
.ck-btn--ghost:hover { background: rgba(255, 255, 255, 0.14); }
.ck-btn--primary { background: #1D4ED8; color: #ffffff; }
.ck-btn--primary:hover { background: #1E40AF; }
.ck-btn:focus-visible { outline: 3px solid #FACC15; outline-offset: 2px; }

/* ── Preferences dialog ── */
.ck-prefs {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(0, 0, 0, 0.65);
  display: grid; place-items: center;
  padding: 1rem;
}
/* A class selector beats the browser's own [hidden] { display: none }, so
   setting display above made this dialog permanently visible: the attribute
   was toggling correctly while the overlay never left the screen. Any element
   in this file that gets a display value AND uses the hidden attribute needs
   the pair below. */
.ck-prefs[hidden],
.ck-banner[hidden],
.a11y-panel[hidden] { display: none; }
.ck-prefs__card {
  width: min(560px, 100%);
  max-height: min(82vh, 640px);
  display: flex; flex-direction: column;
  background: #0F172A;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 1rem;
  overflow: hidden;
}
.ck-prefs__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.15rem; border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.ck-prefs__title { font-size: 1.05rem; font-weight: 800; color: #ffffff; margin: 0; }
.ck-prefs__close {
  background: none; border: 0; color: #94A3B8; font-size: 1.7rem; line-height: 1; cursor: pointer;
}
.ck-prefs__close:hover { color: #ffffff; }
.ck-prefs__close:focus-visible { outline: 2px solid #FACC15; outline-offset: 2px; }
.ck-prefs__body { padding: 1.15rem; overflow-y: auto; }
.ck-prefs__foot {
  display: flex; gap: 0.6rem; justify-content: flex-end;
  padding: 1rem 1.15rem; border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.ck-cat { padding: 0.9rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.ck-cat:last-child { border-bottom: 0; }
.ck-cat__top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.35rem;
}
.ck-cat__name   { font-size: 0.92rem; font-weight: 800; color: #ffffff; }
.ck-cat__always { font-size: 0.72rem; font-weight: 700; color: #4ADE80; }
.ck-cat__desc   { font-size: 0.8rem; line-height: 1.6; color: #94A3B8; margin: 0; }
.ck-cat__none   {
  font-size: 0.74rem; color: #64748B; margin: 0.4rem 0 0;
  padding-right: 0.6rem; border-right: 2px solid rgba(255, 255, 255, 0.12);
}

/* ── Switch ── */
.ck-switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.ck-switch input {
  position: absolute; opacity: 0; width: 44px; height: 24px; margin: 0; cursor: pointer;
}
.ck-switch__track {
  width: 44px; height: 24px; border-radius: 9999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.22);
  position: relative; transition: background 0.2s ease;
}
.ck-switch__track::after {
  content: ""; position: absolute; top: 2px; right: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #ffffff; transition: transform 0.2s ease;
}
.ck-switch input:checked + .ck-switch__track { background: #1D4ED8; border-color: #60A5FA; }
.ck-switch input:checked + .ck-switch__track::after { transform: translateX(-20px); }
.ck-switch input:focus-visible + .ck-switch__track { outline: 3px solid #FACC15; outline-offset: 2px; }
/* the label is for screen readers; the track carries the visual */
.ck-switch__label {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@media (max-width: 640px) {
  .ck-banner__inner   { padding: 0.95rem 1rem; gap: 0.85rem; }
  .ck-banner__actions { width: 100%; }
  .ck-banner__actions .ck-btn { flex: 1 1 auto; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ck-banner { transition: none; }
  .ck-switch__track, .ck-switch__track::after { transition: none; }
}

/* ── Legal links in the footer bottom bar ── */
.footer-legal {
  display: flex; flex-wrap: wrap; gap: 0.35rem 1rem;
  font-size: 0.78rem;
}
.footer-legal a, .footer-legal button {
  color: #94A3B8; background: none; border: 0; padding: 0;
  font-family: inherit; font-size: inherit; cursor: pointer;
}
.footer-legal a:hover, .footer-legal button:hover { color: #ffffff; text-decoration: underline; }
.footer-legal a:focus-visible, .footer-legal button:focus-visible { outline: 2px solid #FACC15; outline-offset: 2px; }

/* ── Legal / statement pages ── */
.legal-page { max-width: 820px; margin-inline: auto; padding: 8rem 1.25rem 5rem; }
.legal-page h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 900; color: #fff; margin-bottom: 0.6rem; }
.legal-page .legal-updated { font-size: 0.82rem; color: #94A3B8; margin-bottom: 2.5rem; }
.legal-page h2 {
  font-size: 1.2rem; font-weight: 800; color: #fff;
  margin: 2.2rem 0 0.7rem; padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.legal-page h3 { font-size: 1rem; font-weight: 700; color: #E2E8F0; margin: 1.4rem 0 0.5rem; }
.legal-page p, .legal-page li { font-size: 0.95rem; line-height: 1.85; color: #CBD5E1; }
.legal-page p  { margin-bottom: 1rem; }
.legal-page ul { margin: 0 0 1.2rem; padding-right: 1.3rem; list-style: disc; }
.legal-page li { margin-bottom: 0.5rem; }
.legal-page a  { color: var(--accent-cyan); text-decoration: underline; }
.legal-page table {
  width: 100%; border-collapse: collapse; margin-bottom: 1.4rem; font-size: 0.88rem;
}
.legal-page th, .legal-page td {
  padding: 0.65rem 0.8rem; border: 1px solid rgba(255, 255, 255, 0.12); text-align: right;
}
.legal-page th { background: rgba(255, 255, 255, 0.05); color: #fff; font-weight: 700; }
.legal-page td { color: #CBD5E1; }
.legal-callout {
  padding: 1rem 1.15rem; border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 1.4rem;
}
.legal-callout p:last-child { margin-bottom: 0; }

[data-theme="light"] .legal-page h1,
[data-theme="light"] .legal-page h2 { color: #0F172A; }
[data-theme="light"] .legal-page h3 { color: #1E293B; }
[data-theme="light"] .legal-page p,
[data-theme="light"] .legal-page li,
[data-theme="light"] .legal-page td { color: #334155; }
[data-theme="light"] .legal-page th { background: #F1F5F9; color: #0F172A; }
[data-theme="light"] .legal-page th,
[data-theme="light"] .legal-page td { border-color: #E2E8F0; }
[data-theme="light"] .legal-callout { background: #F8FAFC; border-color: #E2E8F0; }
[data-theme="light"] .legal-page .legal-updated { color: #64748B; }

.legal-inline-btn {
  background: none; border: 0; padding: 0;
  font: inherit; color: var(--accent-cyan);
  text-decoration: underline; cursor: pointer;
}
.legal-inline-btn:focus-visible { outline: 3px solid #FACC15; outline-offset: 2px; }