/* Page-specific styles for the LeapstaQ company site */

html { scroll-behavior: smooth; }
body { background: var(--paper); }

/* Dark-theme nav variant */
.lq-nav-dark {
  background: rgba(4, 21, 42, 0.72);
  border-bottom-color: rgba(159, 180, 219, .12);
}
.lq-nav-dark .lq-nav-links a { color: #fff; }
.lq-nav-dark .lq-nav-links a:hover { color: var(--signal-400); }
.lq-nav-dark .lq-btn-ghost { color: #fff; }
.lq-nav-dark .lq-btn-ghost:hover { background: rgba(255,255,255,.08); }
.lq-nav-dark .lq-btn-primary { background: var(--signal-500); color: var(--navy-950); }
.lq-nav-dark .lq-btn-primary:hover { background: var(--signal-400); }

/* Variation switcher (bottom-center floating bar) */
.v-switcher {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  gap: 4px;
  padding: 5px;
  background: rgba(255,255,255,.95);
  border: 1px solid var(--border-1);
  border-radius: 999px;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(8, 42, 77, 0.12);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.v-switcher-dark {
  background: rgba(8, 42, 77, .92);
  border-color: rgba(159,180,219,.18);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.v-switcher .v-label {
  padding: 6px 14px 6px 16px;
  color: var(--fg-3);
  letter-spacing: .12em;
  border-right: 1px solid var(--border-1);
  margin-right: 4px;
}
.v-switcher-dark .v-label { color: var(--navy-300); border-right-color: rgba(159,180,219,.15); }
.v-switcher button {
  all: unset;
  cursor: pointer;
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--fg-2);
  transition: all var(--dur-fast) var(--ease-out);
}
.v-switcher-dark button { color: var(--navy-200); }
.v-switcher button:hover { color: var(--fg-1); }
.v-switcher-dark button:hover { color: #fff; }
.v-switcher button.active {
  background: var(--navy-900);
  color: #fff;
}
.v-switcher-dark button.active {
  background: var(--signal-400);
  color: var(--navy-950);
}

/* Tweaks panel */
.tweaks-panel {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 300px;
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: 12px;
  box-shadow: var(--shadow-3);
  z-index: 70;
  font-family: var(--font-body);
  overflow: hidden;
}
.tweaks-header {
  padding: 14px 18px;
  background: var(--navy-900);
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.tweaks-header .close {
  all: unset;
  cursor: pointer;
  color: var(--navy-300);
  font-size: 16px;
}
.tweaks-header .close:hover { color: #fff; }
.tweaks-body { padding: 18px; display: flex; flex-direction: column; gap: 16px; }
.tweaks-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--signal-600);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.tweaks-options { display: flex; gap: 4px; flex-wrap: wrap; }
.tweaks-opt {
  all: unset;
  cursor: pointer;
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-2);
  border: 1px solid var(--border-1);
  border-radius: 6px;
  transition: all var(--dur-fast);
}
.tweaks-opt:hover { border-color: var(--ink-700); color: var(--fg-1); }
.tweaks-opt.active { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }
.tweaks-swatch {
  all: unset;
  cursor: pointer;
  width: 28px; height: 28px;
  border-radius: 999px;
  border: 2px solid var(--border-1);
  transition: all var(--dur-fast);
}
.tweaks-swatch.active { border-color: var(--fg-1); transform: scale(1.1); }

.tweaks-handle {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 70;
  padding: 10px 16px;
  background: var(--navy-900);
  color: #fff;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: var(--shadow-2);
  display: flex; align-items: center; gap: 8px;
}
.tweaks-handle:hover { background: var(--navy-800); }

/* Blinking cursor in terminal */
@keyframes lq-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* Accent override (via data-accent root attr) */
:root[data-accent="amber"] { --signal-400: #F4B942; --signal-500: #E8A317; --signal-600: #C48210; }
:root[data-accent="lime"]  { --signal-400: #A3D93C; --signal-500: #7FB82A; --signal-600: #5A961A; }
:root[data-accent="coral"] { --signal-400: #FF7D5C; --signal-500: #F05A3B; --signal-600: #C8412A; }

/* Mesh intensity */
:root[data-mesh="subtle"] .lq-mesh { opacity: .15 !important; }
:root[data-mesh="strong"] .lq-mesh { opacity: .55 !important; }

/* Marquee for V4 client + tech strips */
.v4-marquee { overflow: hidden; width: 100%; mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.v4-marquee-track { display: flex; gap: 64px; animation: v4-scroll 50s linear infinite; white-space: nowrap; width: max-content; }
.v4-marquee-reverse .v4-marquee-track { animation-direction: reverse; }
.v4-marquee-item { display: inline-flex; align-items: center; gap: 14px; flex-shrink: 0; }
.v4-marquee:hover .v4-marquee-track { animation-play-state: paused; }
@keyframes v4-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .v4-marquee-track { animation: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet (≤ 960px) */
@media (max-width: 960px) {
  .lq-section { padding: 72px 24px; }
  .lq-footer  { padding: 56px 24px 28px; }

  /* Section intro headers stack */
  .lq-section-header {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    margin-bottom: 40px !important;
  }

  /* Service rows → flex, hide number + body */
  .lq-service-row {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding-left: 0 !important;
  }
  .lq-service-row h3    { flex: 1 !important; min-width: 0 !important; }
  .lq-service-row > div:last-child { flex-shrink: 0 !important; }
  .lq-service-num,
  .lq-service-body { display: none !important; }

  /* Grids */
  .lq-hubs-grid         { grid-template-columns: repeat(2, 1fr) !important; }
  .lq-team-grid         { grid-template-columns: repeat(3, 1fr) !important; }
  .lq-v1-pillars-grid   { grid-template-columns: repeat(2, 1fr) !important; }
  .lq-v1-services-grid  { grid-template-columns: repeat(2, 1fr) !important; }
  .lq-v2-services-grid  { grid-template-columns: repeat(2, 1fr) !important; }

  /* Footer */
  .lq-footer-cols {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 28px !important;
    margin-bottom: 40px !important;
  }
  .lq-footer-cols > div:first-child { grid-column: 1 / -1; }
}

/* Mobile (≤ 640px) */
@media (max-width: 640px) {
  /* Nav: hide links, keep logo + CTA */
  .lq-nav { padding: 0 16px; }
  .lq-nav-links { display: none !important; }
  .lq-nav-cta .lq-btn-ghost { display: none !important; }

  /* Sections */
  .lq-section  { padding: 56px 16px !important; }
  .lq-footer   { padding: 44px 16px 20px !important; }
  .lq-v4-hero  { padding: 48px 16px 0 !important; }

  /* Hero layouts */
  .lq-hero-content {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .lq-hero-btns  { justify-content: flex-start !important; }
  .lq-hero-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }

  /* Grids */
  .lq-pillars-grid      { grid-template-columns: 1fr !important; }
  .lq-products-grid     { grid-template-columns: 1fr !important; }
  .lq-hubs-grid         { grid-template-columns: 1fr 1fr !important; }
  .lq-team-grid         { grid-template-columns: repeat(2, 1fr) !important; }
  .lq-v1-services-grid  { grid-template-columns: 1fr !important; }
  .lq-v2-services-grid  { grid-template-columns: 1fr !important; }
  .lq-v1-pillars-grid   { grid-template-columns: 1fr !important; }

  /* Logo strip */
  .lq-logo-strip-grid  { grid-template-columns: 1fr !important; gap: 16px !important; }
  .lq-logo-strip-marks { gap: 16px !important; justify-content: flex-start !important; }

  /* Footer */
  .lq-footer-cols { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }

  /* Variation switcher */
  .v-switcher .v-label { display: none; }
  .v-switcher { gap: 2px; padding: 4px; bottom: 16px; }
  .v-switcher button { padding: 5px 10px; font-size: 10px; }
  .tweaks-handle { bottom: 16px; right: 16px; padding: 8px 12px; font-size: 10px; }
}

/* Small (≤ 400px) */
@media (max-width: 400px) {
  .lq-hubs-grid   { grid-template-columns: 1fr !important; }
  .lq-footer-cols { grid-template-columns: 1fr !important; }
}