/* Klikr glass bundle v=20260728perf */


/* --- klikr-focus.css --- */

/* Keyboard focus — audit-visible :focus indicators */
button:focus,
a:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

[tabindex]:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}


/* --- klikr-glass.css --- */

/* Klikr — Purple glass morph background (dark + light) */

:root {
  --glass-neon-violet: #b026ff;
  --glass-neon-fuchsia: #e040fb;
  --glass-neon-purple: #9d4edd;
  --glass-neon-magenta: #ff29e3;
  --glass-neon-indigo: #7b2ff7;
  --glass-neon-plum: #c850ff;
  --glass-text-dark: #f0e8ff;
  --glass-muted-dark: rgba(220, 210, 255, 0.65);
  --glass-text-light: #1e1035;
  --glass-muted-light: rgba(30, 16, 53, 0.65);
}

.glass-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.glass-bg__base {
  position: absolute;
  inset: 0;
  transition: background 0.5s ease;
}

[data-theme="dark"] .glass-bg__base {
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(176, 38, 255, 0.28) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 85% 80%, rgba(224, 64, 251, 0.18) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(255, 41, 227, 0.1) 0%, transparent 60%),
    linear-gradient(165deg, #05020a 0%, #0a0414 35%, #080310 70%, #030108 100%);
}

[data-theme="light"] .glass-bg__base {
  background:
    radial-gradient(ellipse 80% 60% at 15% 15%, rgba(200, 80, 255, 0.35) 0%, transparent 55%),
    radial-gradient(ellipse 70% 55% at 90% 75%, rgba(224, 130, 255, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse 55% 45% at 50% 40%, rgba(157, 78, 221, 0.15) 0%, transparent 60%),
    linear-gradient(165deg, #fdfaff 0%, #f5ecff 40%, #efe0ff 70%, #faf5ff 100%);
}

.glass-morph {
  position: absolute;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  will-change: transform, border-radius;
  animation: glassMorph var(--morph-dur, 22s) ease-in-out infinite,
             glassFloat var(--float-dur, 18s) ease-in-out infinite;
  animation-delay: var(--morph-delay, 0s), var(--float-delay, 0s);
}

/* Per-blob purple shades (dark) */
[data-theme="dark"] .glass-morph--violet {
  background: linear-gradient(145deg, rgba(176, 38, 255, 0.32), rgba(139, 92, 246, 0.14));
  border-color: rgba(200, 100, 255, 0.35);
  box-shadow: 0 0 50px rgba(176, 38, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .glass-morph--fuchsia {
  background: linear-gradient(145deg, rgba(224, 64, 251, 0.28), rgba(192, 38, 211, 0.12));
  border-color: rgba(232, 121, 249, 0.32);
  box-shadow: 0 0 55px rgba(224, 64, 251, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .glass-morph--purple {
  background: linear-gradient(145deg, rgba(157, 78, 221, 0.3), rgba(124, 58, 237, 0.14));
  border-color: rgba(180, 120, 255, 0.3);
  box-shadow: 0 0 48px rgba(157, 78, 221, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
[data-theme="dark"] .glass-morph--magenta {
  background: linear-gradient(145deg, rgba(255, 41, 227, 0.22), rgba(192, 38, 211, 0.1));
  border-color: rgba(255, 100, 240, 0.28);
  box-shadow: 0 0 60px rgba(255, 41, 227, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .glass-morph--indigo {
  background: linear-gradient(145deg, rgba(123, 47, 247, 0.28), rgba(88, 28, 135, 0.12));
  border-color: rgba(160, 90, 255, 0.3);
  box-shadow: 0 0 52px rgba(123, 47, 247, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
[data-theme="dark"] .glass-morph--plum {
  background: linear-gradient(145deg, rgba(200, 80, 255, 0.26), rgba(168, 85, 247, 0.11));
  border-color: rgba(220, 140, 255, 0.28);
  box-shadow: 0 0 46px rgba(200, 80, 255, 0.23), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .glass-morph {
  border: 1px solid rgba(200, 100, 255, 0.25);
}

/* Per-blob purple shades (light) */
[data-theme="light"] .glass-morph--violet {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.65), rgba(200, 100, 255, 0.35));
  border-color: rgba(200, 100, 255, 0.4);
  box-shadow: 0 0 40px rgba(176, 38, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
[data-theme="light"] .glass-morph--fuchsia {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.6), rgba(224, 130, 255, 0.32));
  border-color: rgba(224, 100, 255, 0.38);
  box-shadow: 0 0 44px rgba(224, 64, 251, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
[data-theme="light"] .glass-morph--purple {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(180, 120, 255, 0.3));
  border-color: rgba(180, 100, 255, 0.35);
  box-shadow: 0 0 38px rgba(157, 78, 221, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}
[data-theme="light"] .glass-morph--magenta {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.58), rgba(255, 150, 250, 0.28));
  border-color: rgba(255, 120, 240, 0.32);
  box-shadow: 0 0 42px rgba(255, 41, 227, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.88);
}
[data-theme="light"] .glass-morph--indigo {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.6), rgba(160, 100, 255, 0.32));
  border-color: rgba(140, 80, 255, 0.36);
  box-shadow: 0 0 36px rgba(123, 47, 247, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
[data-theme="light"] .glass-morph--plum {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.64), rgba(210, 140, 255, 0.3));
  border-color: rgba(200, 130, 255, 0.34);
  box-shadow: 0 0 40px rgba(200, 80, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.93);
}

[data-theme="light"] .glass-morph {
  border: 1px solid rgba(200, 130, 255, 0.3);
}

@keyframes glassMorph {
  0%, 100% { border-radius: 42% 58% 62% 38% / 38% 42% 58% 62%; }
  20%      { border-radius: 62% 38% 42% 58% / 58% 62% 38% 42%; }
  40%      { border-radius: 48% 52% 68% 32% / 42% 58% 52% 48%; }
  60%      { border-radius: 33% 67% 55% 45% / 62% 38% 62% 38%; }
  80%      { border-radius: 58% 42% 38% 62% / 48% 62% 38% 52%; }
}

@keyframes glassFloat {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  25%      { transform: translate(40px, -50px) rotate(6deg) scale(1.04); }
  50%      { transform: translate(-30px, 30px) rotate(-4deg) scale(0.96); }
  75%      { transform: translate(20px, 40px) rotate(3deg) scale(1.02); }
}

.glass-bg__stars {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.glass-star {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.7);
  will-change: auto;
  animation: starDrift var(--star-dur, 18s) ease-in-out infinite;
  animation-delay: var(--star-delay, 0s);
}

[data-theme="light"] .glass-star {
  background: rgba(176, 38, 255, 0.75);
  box-shadow: 0 0 3px rgba(191, 0, 255, 0.45);
}

@keyframes starDrift {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(var(--star-dx, 24px), calc(var(--star-dy, -18px) * 0.55)); }
  50%      { transform: translate(calc(var(--star-dx, 24px) * -0.65), var(--star-dy, 18px)); }
  75%      { transform: translate(calc(var(--star-dx, 24px) * 0.35), calc(var(--star-dy, -18px) * -0.75)); }
}

html[data-theme="dark"] body.glass-page {
  background: transparent !important;
  color: var(--glass-text-dark);
}

html[data-theme="light"] body.glass-page {
  background: transparent !important;
  color: var(--glass-text-light);
}

html.glass-page,
body.glass-page {
  overflow-x: hidden;
  max-width: 100%;
}

body.glass-page {
  overflow-y: auto;
  min-height: 0;
}

body.glass-page > *:not(.glass-bg):not(.video-bg):not(#videoBg):not(#videoBgSide):not(.video-bg-side):not(.modal-overlay):not(.klikr-install-overlay):not(.mobile-menu) {
  position: relative;
  z-index: 1;
}

.modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none;
}

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

/* Hide section tags / badges on page (keep modal labels) */
section > .section-label,
.testimonials-header > .section-label,
.pricing > .section-label,
.pricing > .hero-badge,
.faq > .section-label,
.cta-box > .section-label {
  display: none !important;
}

.testimonial-author {
  display: flex !important;
}

#particleCanvas,
.pulse-wave,
.orb,
.grid,
.noise,
.corp-bg,
.hero-video-bg {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .glass-morph {
    animation: none !important;
  }
  .glass-star {
    animation: none !important;
  }
}


/* --- klikr-polish.css --- */

/* Klikr — extra polish animations */

@keyframes titleShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes ctaGlow {
  0%, 100% { box-shadow: 0 4px 24px rgba(191, 0, 255, 0.35), 0 0 0 0 rgba(191, 0, 255, 0); }
  50% { box-shadow: 0 8px 36px rgba(191, 0, 255, 0.55), 0 0 28px 4px rgba(191, 0, 255, 0.18); }
}

@keyframes borderSweep {
  to { --sweep-angle: 360deg; }
}

.section-title[data-kinetic] {
  background: linear-gradient(
    120deg,
    currentColor 0%,
    #e879f9 35%,
    #c084fc 50%,
    #e879f9 65%,
    currentColor 100%
  );
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: titleShimmer 8s ease-in-out infinite;
}

[data-theme="light"] .section-title[data-kinetic] {
  background: linear-gradient(
    120deg,
    #1e1035 0%,
    #9333ea 35%,
    #c026d3 50%,
    #9333ea 65%,
    #1e1035 100%
  );
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.glass-page .cosmic-hero__cta,
body.glass-page .nav-cta {
  animation: ctaGlow 4s ease-in-out infinite;
}

#features .feature-card {
  isolation: isolate;
}

#features .feature-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 21px;
  padding: 1px;
  background: conic-gradient(
    from var(--sweep-angle, 0deg),
    transparent 0deg,
    rgba(191, 0, 255, 0.55) 60deg,
    transparent 120deg,
    rgba(224, 64, 251, 0.35) 200deg,
    transparent 280deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: -1;
  animation: borderSweep 4s linear infinite;
  animation-play-state: paused;
}

#features .feature-card:hover::after {
  opacity: 1;
  animation-play-state: running;
}

@property --sweep-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes borderSweep {
  to { --sweep-angle: 360deg; }
}

.klikr-icon {
  width: 36px;
  height: 36px;
  color: #fff;
  flex-shrink: 0;
}

/* ── Animation 4: soft glass shadow pulse (no transform — safe with tilt cards) ── */
@keyframes glassShadowPulse {
  0%, 100% { box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18); }
  50% { box-shadow: 0 10px 36px rgba(191, 0, 255, 0.14); }
}

body.glass-page .feature-card,
body.glass-page .pricing-card,
body.glass-page .cta-box,
body.glass-page .stat {
  animation: glassShadowPulse 6s ease-in-out infinite;
}

body.glass-page .feature-card:nth-child(2),
body.glass-page .pricing-card:nth-child(2) { animation-delay: -1s; }
body.glass-page .feature-card:nth-child(3),
body.glass-page .pricing-card:nth-child(3) { animation-delay: -2s; }
body.glass-page .feature-card:nth-child(4) { animation-delay: -1.5s; }
body.glass-page .feature-card:nth-child(5) { animation-delay: -2.5s; }
body.glass-page .feature-card:nth-child(6) { animation-delay: -3s; }

/* Nav pill sweep — klikr-nav.css */

@media (prefers-reduced-motion: reduce) {
  .section-title[data-kinetic],
  body.glass-page .cosmic-hero__cta,
  body.glass-page .nav-cta,
  #features .feature-card::after,
  body.glass-page .feature-card,
  body.glass-page .pricing-card,
  body.glass-page .cta-box,
  body.glass-page .stat,
  body.glass-page .nav-pill::after {
    animation: none !important;
  }

  .section-title[data-kinetic] {
    -webkit-text-fill-color: currentColor;
    background: none;
  }
}


/* --- klikr-perf.css --- */

/* Klikr — performance layer (desktop + mobile) */

.perf-paused *,
.perf-paused *::before,
.perf-paused *::after {
  animation-play-state: paused !important;
}

/* Faster taps — no 300ms delay */
body.glass-page a,
body.glass-page button,
body.glass-page .btn-primary,
body.glass-page .btn-secondary,
body.glass-page .nav-link,
body.glass-page .hamburger {
  touch-action: manipulation;
}

/* Below-fold sections — skip work until scrolled near */
body.glass-page .stats,
body.glass-page .landing-explore,
body.glass-page .testimonials,
body.glass-page .cta,
body.glass-page .page-main,
body.glass-page .luxury-divider,
body.glass-page .features,
body.glass-page .pricing,
body.glass-page .faq {
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}

body.glass-page .landing-instore,
body.glass-page .landing-instore-strip,
body.glass-page .landing-explore,
body.glass-page .lp-phones {
  content-visibility: auto;
  contain-intrinsic-size: auto 360px;
}

body.dashboard-page .card-section:not(.active) {
  content-visibility: hidden;
  contain-intrinsic-size: auto 480px;
}

body.dashboard-page .card-section.active {
  content-visibility: visible;
}

/* Reduce paint cost on scroll */
.perf-mobile body.glass-page.scene-bg .video-bg__media,
.perf-lite body.glass-page.scene-bg .video-bg__media {
  transform: translateZ(0);
}

.perf-lite .hero-logo-spin {
  animation: none !important;
}

body.glass-page .cosmic-hero,
body.glass-page .page-hero {
  content-visibility: visible;
}

/* Decorative layers — skip on lite / save-data */
.perf-lite .glass-bg,
.perf-lite .pulse-wave,
.perf-lite .orb,
.perf-lite .glass-star {
  display: none !important;
}

.perf-lite .glass-morph {
  animation: none !important;
  opacity: 0.35 !important;
}

.perf-lite body.glass-page .feature-card,
.perf-lite body.glass-page .pricing-card,
.perf-lite body.glass-page .cta-box,
.perf-lite body.glass-page .stat,
.perf-lite body.glass-page .cosmic-hero__cta,
.perf-lite body.glass-page .nav-pill::after,
.perf-lite .section-title[data-kinetic],
.perf-lite .pricing-card.featured,
.perf-lite .cta-box::before,
.perf-lite .cta-box::after {
  animation: none !important;
}

/* backdrop-filter is expensive on mobile GPUs */
.perf-lite body.dashboard-page .sidebar,
.perf-lite body.dashboard-page .card,
.perf-lite body.dashboard-page .analytics-stats-shell,
.perf-lite body.dashboard-page .analytics-kpi,
.perf-lite body.dashboard-page .analytics-panel,
.perf-lite body.dashboard-page .analytics-metric,
.perf-lite body.dashboard-page .analytics-insight,
.perf-lite body.dashboard-page .analytics-engage-card,
.perf-lite body.dashboard-page .mobile-topbar,
.perf-lite body.dashboard-page .pricing-card-dash,
.perf-lite body.dashboard-page .plan-stat,
.perf-lite body.dashboard-page .staff-card,
.perf-lite body.dashboard-page .form-input,
.perf-lite body.dashboard-page .analytics-link-bar input,
.perf-lite body.dashboard-page .share-link-box input,
.perf-lite .card,
.perf-lite .mobile-topbar,
.perf-lite .toast,
.perf-lite .join-container,
.perf-lite .modal-box,
.perf-lite nav,
.perf-lite body.glass-page .nav-pill,
.perf-lite body.glass-page .stat,
.perf-lite body.glass-page .landing-card,
.perf-lite body.glass-page .testimonial-card,
.perf-lite body.glass-page .page-hero-card,
.perf-lite body.glass-page .cta-box {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.perf-mobile body.dashboard-page .nav-item,
.perf-mobile body.dashboard-page .btn-sm,
.perf-mobile body.dashboard-page .btn-send,
.perf-mobile body.dashboard-page .btn-upgrade,
.perf-mobile body.dashboard-page .btn-refresh,
.perf-mobile body.dashboard-page .dash-info-btn,
.perf-mobile body.dashboard-page .analytics-kpi-info,
.perf-mobile body.dashboard-page .mobile-menu-btn {
  touch-action: manipulation;
}

.perf-mobile body.dashboard-page .card:hover::before {
  opacity: 0 !important;
}

.perf-save .video-bg-side,
.perf-save #videoBgSide,
.perf-mobile .video-bg-side,
.perf-mobile #videoBgSide,
.perf-lite .video-bg-side,
.perf-lite #videoBgSide {
  display: none !important;
}

.perf-lite .analytics-stats-shell,
.perf-lite .analytics-hero-val,
.perf-lite .status-active .status-dot,
.perf-lite .hero-logo-spin {
  animation: none !important;
}

.perf-touch .tilt-card {
  transform: none !important;
}

/* Desktop: lighter blur on nav only when scrolling is heavy */
.perf-desktop body.glass-page.scene-bg .nav-pill {
  contain: layout style;
}

@media (max-width: 768px) {
  .glass-morph {
    animation-duration: 28s, 24s !important;
  }

  .glass-star:nth-child(n + 16) {
    display: none;
  }

  .card:hover::before {
    opacity: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .perf-lite .glass-morph {
    display: none !important;
  }
}


/* --- klikr-brand.css --- */

/* Klikr brand palette — Black · White · Orange · Purple */

:root {
  --klikr-black: #000000;
  --klikr-white: #ffffff;
  --klikr-orange: #ff6a00;
  --klikr-purple: #bf00ff;

  --klikr-bg: var(--klikr-black);
  --klikr-surface: rgba(255, 255, 255, 0.04);
  --klikr-border: rgba(191, 0, 255, 0.22);
  --klikr-text: var(--klikr-white);
  --klikr-muted: rgba(255, 255, 255, 0.84);
  --klikr-accent: var(--klikr-purple);
  --klikr-accent-alt: var(--klikr-orange);
  --klikr-input-bg: rgba(255, 255, 255, 0.06);

  --klikr-gradient: linear-gradient(135deg, var(--klikr-orange), var(--klikr-purple));
  --klikr-gradient-soft: linear-gradient(135deg, rgba(255, 106, 0, 0.9), rgba(191, 0, 255, 0.95));
  --klikr-glow-orange: rgba(255, 106, 0, 0.45);
  --klikr-glow-purple: rgba(191, 0, 255, 0.45);
}

[data-theme="light"] {
  --klikr-bg: var(--klikr-white);
  --klikr-surface: rgba(0, 0, 0, 0.03);
  --klikr-border: rgba(191, 0, 255, 0.2);
  --klikr-text: var(--klikr-black);
  --klikr-muted: #5b21b6;
  --klikr-accent: var(--klikr-purple);
  --klikr-accent-alt: var(--klikr-orange);
  --klikr-input-bg: #f5f5f5;
}

html,
html.has-video-bg-root {
  background: var(--klikr-black) !important;
}

[data-theme="light"] html {
  background: var(--klikr-white) !important;
}

body.glass-page,
body.scene-bg {
  color: var(--klikr-white);
}

[data-theme="light"] body.glass-page {
  color: var(--klikr-black);
}

/* Glass morph blobs — orange + purple on black */
[data-theme="dark"] .glass-bg__base {
  background:
    radial-gradient(ellipse 70% 55% at 12% 18%, rgba(255, 106, 0, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse 65% 50% at 88% 75%, rgba(191, 0, 255, 0.24) 0%, transparent 52%),
    linear-gradient(180deg, #000000 0%, #050505 50%, #000000 100%) !important;
}

[data-theme="light"] .glass-bg__base {
  background:
    radial-gradient(ellipse 70% 55% at 10% 15%, rgba(255, 106, 0, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse 65% 50% at 90% 80%, rgba(191, 0, 255, 0.14) 0%, transparent 52%),
    linear-gradient(180deg, #ffffff 0%, #fafafa 100%) !important;
}

/* Nav styles — see klikr-nav.css */

body.glass-page .nav-cta,
.cosmic-hero__cta,
.btn-primary,
.btn-form-submit,
.btn-pricing-fill,
body.glass-page .nav-cta span {
  background: var(--klikr-gradient) !important;
  color: var(--klikr-white) !important;
  box-shadow: 0 6px 28px var(--klikr-glow-orange), 0 0 20px var(--klikr-glow-purple) !important;
}

body.glass-page .nav-cta:hover,
.cosmic-hero__cta:hover,
.btn-primary:hover,
.btn-form-submit:hover {
  box-shadow: 0 10px 36px rgba(255, 106, 0, 0.55), 0 0 28px rgba(191, 0, 255, 0.35) !important;
}

body.glass-page .nav-login {
  color: var(--klikr-white) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

body.glass-page .nav-login:hover {
  border-color: var(--klikr-orange) !important;
  color: var(--klikr-orange) !important;
}

/* Hero */
[data-theme="dark"] .cosmic-hero h1 {
  color: var(--klikr-white) !important;
}

.cosmic-hero h1 em {
  background: var(--klikr-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

[data-theme="dark"] .cosmic-hero__subtitle {
  color: var(--klikr-muted) !important;
}

/* Hero secondary — styled in klikr-hero.css (outline button, not neo pill) */

/* Stats, pricing amounts, section titles */
.stat-num,
.pricing-amount,
.landing-explore-title,
.section-title {
  background: var(--klikr-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.stat-label,
.section-desc,
.landing-explore-desc,
.landing-card p,
.feature-card p,
.faq-answer-inner,
.cta-box p {
  color: var(--klikr-muted) !important;
}

.landing-card h3,
.feature-card h3,
.pricing-header,
.cta-box h2,
.page-hero-card h1 {
  color: var(--klikr-white) !important;
}

[data-theme="light"] .landing-card h3,
[data-theme="light"] .feature-card h3,
[data-theme="light"] .page-hero-card h1,
[data-theme="light"] .cta-box h2 {
  color: var(--klikr-black) !important;
}

/* Cards & surfaces */
.stat,
.landing-card,
.feature-card,
.pricing-card,
.faq-item,
.testimonial-card,
.cta-box,
.page-hero-card,
.modal-box {
  background: rgba(0, 0, 0, 0.72) !important;
  border-color: rgba(191, 0, 255, 0.22) !important;
}

.landing-card:hover,
.feature-card:hover,
.pricing-card:hover {
  border-color: rgba(255, 106, 0, 0.45) !important;
  box-shadow: 0 12px 40px rgba(255, 106, 0, 0.12), 0 0 24px rgba(191, 0, 255, 0.15) !important;
}

.landing-card-icon,
.feature-icon--brand,
.page-hero-card__icon,
.price-badge,
.notif-icon,
.testimonial-avatar {
  background: var(--klikr-gradient) !important;
  box-shadow: 0 8px 24px var(--klikr-glow-purple) !important;
}

.landing-card-cta,
.modal-switch a,
.faq-question,
.section-label {
  color: var(--klikr-orange) !important;
}

.landing-card-cta:hover,
.modal-switch a:hover {
  color: var(--klikr-purple) !important;
}

/* Dividers — crest asset (see klikr-luxury.css) */

/* Scene video overlay */
.video-bg__overlay {
  background: rgba(0, 0, 0, 0.52) !important;
}

body.scene-bg .cosmic-hero h1 em,
body.scene-bg .about-page-hero h1 em {
  background: var(--klikr-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page-hero-card--how .page-hero-card__orb {
  background: radial-gradient(circle, var(--klikr-orange), transparent 70%) !important;
}

.page-hero-card--features .page-hero-card__orb {
  background: radial-gradient(circle, var(--klikr-purple), transparent 70%) !important;
}

.page-hero-card--analytics .page-hero-card__orb {
  background: radial-gradient(circle, var(--klikr-orange), var(--klikr-purple), transparent 70%) !important;
}

.page-hero-card--pricing .page-hero-card__orb {
  background: radial-gradient(circle, var(--klikr-purple), transparent 70%) !important;
}

.page-hero-card--faq .page-hero-card__orb {
  background: radial-gradient(circle, var(--klikr-orange), transparent 70%) !important;
}

/* Forms & modals */
.form-label,
.form-input,
.modal-switch,
.forgot-link {
  color: var(--klikr-muted);
}

.form-input:focus {
  border-color: var(--klikr-purple) !important;
  box-shadow: 0 0 0 3px rgba(191, 0, 255, 0.15) !important;
}

.btn-secondary {
  border-color: rgba(255, 106, 0, 0.35) !important;
  color: var(--klikr-orange) !important;
}

.btn-secondary:hover {
  background: rgba(255, 106, 0, 0.12) !important;
}

footer p,
footer a {
  color: var(--klikr-muted) !important;
}

footer a:hover {
  color: var(--klikr-orange) !important;
}

/* Dashboard accent hooks (shared.css consumers) */
.btn-pricing-outline {
  border-color: var(--klikr-purple) !important;
  color: var(--klikr-purple) !important;
}

.btn-pricing-outline:hover {
  background: rgba(191, 0, 255, 0.12) !important;
  border-color: var(--klikr-orange) !important;
  color: var(--klikr-orange) !important;
}


/* --- klikr-seo.css --- */

/* SEO content block — readable copy for crawlers + users */
.seo-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 24px 48px;
}

.seo-content h2 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: 700;
  color: var(--klikr-white, #fff);
  margin-bottom: 16px;
}

.seo-content p {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 14px;
}

.seo-content a {
  color: var(--klikr-orange, #ff6a00);
  text-decoration: underline;
  text-underline-offset: 3px;
}

[data-theme="light"] .seo-content h2 {
  color: #000;
}

[data-theme="light"] .seo-content p {
  color: rgba(0, 0, 0, 0.65);
}

/* Site footer — internal link hub for SEO */
.site-footer {
  position: relative;
  z-index: 2;
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 24px 48px;
  text-align: center;
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  margin-bottom: 16px;
}

.site-footer__nav a {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: color 0.2s;
}

.site-footer__nav a:hover {
  color: var(--klikr-orange, #ff6a00);
}

.site-footer__meta {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  margin-bottom: 10px;
}

.site-footer__meta a {
  color: #e9d5ff;
  text-decoration: none;
}

.site-footer__meta a:hover {
  color: var(--klikr-orange, #ff6a00);
}

.site-footer__copy {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}

body.scene-bg .site-footer__nav a,
body.scene-bg .site-footer__copy {
  color: rgba(255, 255, 255, 0.85);
}

[data-theme="light"] .site-footer__nav a {
  color: rgba(30, 16, 53, 0.72);
}

[data-theme="light"] .site-footer__copy {
  color: rgba(30, 16, 53, 0.45);
}

.seo-inline-link {
  color: var(--klikr-orange, #ff6a00);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Mega footer — multi-column (Mozilla-style), Klikr glass theme */
.mega-footer {
  position: relative;
  z-index: 2;
  margin-top: 8px;
  padding: 48px 24px 32px;
  background: linear-gradient(180deg, rgba(191, 0, 255, 0.14) 0%, rgba(0, 0, 0, 0.55) 40%, rgba(0, 0, 0, 0.72) 100%);
  border-top: 1px solid rgba(191, 0, 255, 0.22);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.mega-footer__inner {
  max-width: 1100px;
  margin: 0 auto;
}

.mega-footer__intro {
  max-width: 680px;
  margin-bottom: 36px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mega-footer__intro h2 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.15rem, 2.5vw, 1.45rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
}

.mega-footer__intro p {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.58);
  margin-bottom: 10px;
}

.mega-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 24px;
  margin-bottom: 36px;
}

.mega-footer__col h3 {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 14px;
}

.mega-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mega-footer__col li {
  margin-bottom: 10px;
}

.mega-footer__col a {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: color 0.2s;
}

.mega-footer__col a:hover {
  color: var(--klikr-orange, #ff6a00);
}

.mega-footer__col a.is-highlight {
  color: #ffb380;
  font-weight: 600;
}

.mega-footer__brand-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.mega-footer__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mega-footer__brand img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}

.mega-footer__brand strong {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

.mega-footer__brand span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.78);
}

.mega-footer__legal {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.42);
  text-align: right;
}

.mega-footer__legal a {
  color: #e9d5ff;
  text-decoration: none;
}

.mega-footer__legal a:hover {
  color: var(--klikr-orange, #ff6a00);
}

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

@media (max-width: 520px) {
  .mega-footer__grid {
    grid-template-columns: 1fr;
  }

  .mega-footer__legal {
    text-align: left;
  }
}

/* Widget guide — how-it-works */
.widget-guide {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px 48px;
}

.widget-guide__card {
  padding: 32px 28px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.38);
  border: 1px solid rgba(191, 0, 255, 0.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.widget-guide h2 {
  font-family: 'Inter', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #f0e8ff;
  margin-bottom: 8px;
}

.widget-guide__lead {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 24px;
  line-height: 1.6;
}

.widget-guide__steps {
  display: grid;
  gap: 16px;
  margin-bottom: 24px;
}

.widget-guide__step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.widget-guide__num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  background: linear-gradient(135deg, #ff6a00, #bf00ff);
}

.widget-guide__step h3 {
  font-size: 15px;
  font-weight: 600;
  color: #f0e8ff;
  margin-bottom: 4px;
}

.widget-guide__step p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.58);
  line-height: 1.55;
  margin: 0;
}

.widget-guide__code {
  position: relative;
  padding: 16px 18px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow-x: auto;
}

.widget-guide__code code {
  font-family: ui-monospace, 'Cascadia Code', monospace;
  font-size: 12px;
  line-height: 1.6;
  color: #c4b5fd;
  white-space: pre-wrap;
  word-break: break-all;
}

.widget-guide__note {
  margin-top: 16px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

.widget-guide__note a {
  color: var(--klikr-orange, #ff6a00);
}


/* --- klikr-fonts.css --- */

/* Klikr typography — Inter · SF Pro · Clash Display */

:root {
  --font-display: 'Clash Display', 'Inter', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-system: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
}

/* Display — heroes, section titles, big numbers */
h1,
h2,
.section-title,
.card-title,
.hero h1,
.cosmic-hero h1,
.stat-num,
.pricing-amount,
.page-hero-card h1,
.cta-box h2,
.landing-instore h2,
.is-hero h1,
.about-page-hero h1,
.about-block h2,
.analytics-greeting h1,
.analytics-panel-title,
.analytics-mock__hero-val,
.funnel-step-val,
.mobile-topbar-title,
#modalTitle,
.pricing-welcome h3,
.no-plan h3,
.onboarding-title {
  font-family: var(--font-display);
}

/* System — nav, labels, buttons, dense UI */
.nav-link,
.nav-cta,
.nav-login,
.nav-logo,
.nav-item,
.sidebar-logo,
.sidebar-section,
.form-label,
.section-label,
.stat-label,
.hero-badge,
.btn-primary,
.btn-secondary,
.btn-pricing,
.btn-form-submit,
.btn-send,
.btn-sm,
.btn-upgrade,
.faq-question,
.pricing-header,
.feature-card h3,
.landing-card h3,
.about-hero-eyebrow,
.about-section-label,
.about-hero-card__eyebrow,
.is-step__eyebrow,
.is-hero__badge,
.toast,
.theme-toggle-sidebar {
  font-family: var(--font-system);
}

/* Body — paragraphs, descriptions, secondary copy */
p,
.section-desc,
.card-subtitle,
.hero p,
.cosmic-hero__subtitle,
.landing-instore__text,
.about-hero-lead,
.about-glass-panel p,
.about-block p,
.banner-text,
.pricing-welcome p,
.no-plan p,
.onboarding-sub,
.analytics-greeting p,
.analytics-panel-sub,
.analytics-hint,
.analytics-empty,
.subscriber-meta,
.notif-preview-msg,
#modalDesc,
footer p {
  font-family: var(--font-body);
}

.font-display { font-family: var(--font-display) !important; }
.font-body { font-family: var(--font-body) !important; }
.font-system { font-family: var(--font-system) !important; }


/* --- klikr-readability.css --- */

/* Klikr — sitewide brighter text (load last) */

:root {
  --text-primary: #ffffff;
  --text-body: #faf5ff;
  --text-secondary: #f5f0ff;
  --text-muted: #ede9fe;
  --text-label: #f3e8ff;
  --text-soft: #e9d5ff;
  --text-dim: #ddd6fe;
  --text-accent: #e9d5ff;
  --klikr-muted: #ede9fe;
}

[data-theme="light"] {
  --text-primary: #0f172a;
  --text-body: #1e293b;
  --text-secondary: #334155;
  --text-muted: #475569;
  --text-label: #5b21b6;
  --text-soft: #64748b;
  --text-dim: #64748b;
  --text-accent: #6d28d9;
  --klikr-muted: #475569;
}

body,
body.glass-page,
body.dashboard-page,
body.scene-bg,
body.legal-page {
  color: var(--text-primary);
}

/* Catch dim hardcoded hex (inline styles + legacy CSS) */
[style*="#7c8db5"],
[style*="#64748b"],
[style*="#94a3b8"] {
  color: var(--text-dim) !important;
}

[style*="#a78bfa"],
[style*="#c084fc"] {
  color: var(--text-accent) !important;
}

/* Legacy class colors in dashboard + marketing */
.nav-item:not(.active),
.card-subtitle,
.plan-stat-label,
.pricing-welcome p,
.no-plan p,
.subscriber-meta,
.notif-preview-origin,
.notif-preview-msg,
.analytics-greeting p,
.analytics-panel-sub,
.analytics-section-sub,
.analytics-hint,
.analytics-metric-note,
.analytics-metric-label,
.analytics-kpi-label,
.analytics-engage-label,
.analytics-engage-sub,
.analytics-engage-empty p,
.analytics-empty,
.analytics-chart-label,
.usage-val,
.funnel-step-label,
.leader-meta,
.analytics-table th,
.analytics-td-muted,
.analytics-funnel-labels,
.analytics-engage-sub,
.analytics-channel-stat small,
.staff-card-meta,
.onboarding-sub,
.scheduled-item-meta,
.delivery-stat,
.share-link-box input,
.pricing-annual,
.mega-footer__intro p,
.mega-footer__col a:not(.is-highlight):not(:hover),
.mega-footer__legal,
.stat-label,
.testimonial-role,
.feature-card p,
.section-desc,
.hero p,
.page-hero-card p,
.landing-card p,
.landing-explore-desc,
.landing-instore__text,
.testimonial-text,
.faq-answer-inner,
.cta-box p,
.pricing-features li,
.modal-box .section-desc,
#modalDesc,
.banner-text,
.last-checked,
.onboarding-step-text,
footer p,
.legal-main p,
.legal-main li,
.legal-updated,
.legal-footer,
.klikr-trust-strip__lead,
.klikr-trust-item span,
.demo-banner,
.pricing-billing-toggle span,
.pricing-compare__lead {
  color: var(--text-secondary) !important;
}

.nav-link,
.nav-login,
.form-label,
.share-link-label,
.modal-switch,
.forgot-link,
.back-to-login,
.verify-status,
.modal-close,
.mobile-menu .mobile-link,
.login-mode-btn,
.sidebar-section,
.btn-secondary,
.btn-resend,
.btn-pricing-outline,
.btn-sm,
.btn-refresh,
.hero-badge,
.page-hero-card__label,
.faq-chevron,
.notif-time,
.btn-refresh,
.theme-toggle-sidebar,
.analytics-link-bar label,
.analytics-kpi-info,
.analytics-badge,
.usage-label,
.funnel-arrow,
.leader-rank,
.leader-stat,
.analytics-loading,
.widget-icon-opt span,
.send-target-bar label,
.analytics-hero-label,
.analytics-channel-label,
.staff-join-label,
.onboarding-step-action,
.delivery-stat strong,
.legal-nav-links a,
.legal-card h3,
.contact-form label,
.help-toc a,
.mega-footer__col h3,
.nav-logo {
  color: var(--text-muted) !important;
}

.section-title,
.card-title,
#modalTitle,
.section-label,
.hero h1,
.feature-card h3,
.landing-card h3,
.testimonial-name,
.stat-num,
.subscriber-name,
.notif-preview-title,
.pricing-header,
.analytics-kpi-val,
.analytics-metric-val,
.analytics-hero-val,
.funnel-step-val,
.analytics-engage-val,
.plan-stat-value,
.legal-main h1,
.legal-main h2,
.klikr-trust-item strong,
.mega-footer__intro h2 {
  color: var(--text-primary) !important;
}

.nav-link:hover,
.nav-login:hover,
.modal-switch a:hover,
.forgot-link:hover,
.back-to-login:hover,
.modal-close:hover,
.mobile-menu .mobile-link:hover,
.mega-footer__col a:hover {
  color: #ffffff !important;
}

.form-input::placeholder {
  color: var(--text-soft) !important;
  opacity: 0.92;
}

.legal-main p,
.legal-main li,
.legal-updated,
.legal-footer {
  opacity: 1 !important;
}

.legal-main h2 {
  color: #f3e8ff !important;
}

[data-theme="light"] .legal-main h2 {
  color: #1e1035 !important;
}

.klikr-trust-strip__lead {
  color: rgba(255, 255, 255, 0.82) !important;
}

.klikr-trust-item span {
  color: rgba(255, 255, 255, 0.78) !important;
}

.pricing-billing-toggle span {
  color: rgba(255, 255, 255, 0.72) !important;
}

.pricing-billing-toggle span.is-active {
  color: #ffffff !important;
}

[data-theme="light"] .klikr-trust-strip__lead,
[data-theme="light"] .klikr-trust-item span {
  color: var(--text-secondary) !important;
}

/* Marketing nav — bump purple nav text */
.nav-link {
  color: #e9d5ff !important;
}

.nav-login {
  color: #f3e8ff !important;
}

.nav-logo {
  color: #f5f0ff !important;
}

.hamburger span {
  background: #e9d5ff !important;
}

/* Neo dashboard tokens */
:root {
  --neo-ink: #ffffff;
  --neo-muted: #ede9fe;
}

[data-theme="light"] {
  --neo-ink: #1a0a2e;
  --neo-muted: #4c1d95;
}


/* --- klikr-shared.css --- */

/* Klikr — shared responsive utilities & layout helpers */

/* inlined: klikr-focus.css?v=20260728a11y */
/* inlined: klikr-glass.css */
/* inlined: klikr-polish.css */
/* inlined: klikr-perf.css */
/* inlined: klikr-brand.css */
/* inlined: klikr-seo.css */
/* inlined: klikr-fonts.css */
/* inlined: klikr-readability.css */

:root {
  --klikr-bg: #000000;
  --klikr-surface: rgba(255, 255, 255, 0.04);
  --klikr-border: rgba(191, 0, 255, 0.22);
  --klikr-purple: #bf00ff;
  --klikr-orange: #ff6a00;
  --klikr-text: #ffffff;
  --klikr-muted: #ede9fe;
  --klikr-accent: #bf00ff;
  --klikr-accent-alt: #ff6a00;
  --klikr-input-bg: rgba(10, 15, 30, 0.5);
  --klikr-pad-x: clamp(16px, 4vw, 48px);
  --klikr-pad-y: clamp(20px, 3vw, 40px);
  --klikr-radius: 20px;
  --klikr-nav-h: 44px;
  --klikr-safe-top: env(safe-area-inset-top, 0px);
  --klikr-safe-bottom: env(safe-area-inset-bottom, 0px);
}

[data-theme="light"] {
  --klikr-bg: #ffffff;
  --klikr-surface: #ffffff;
  --klikr-border: rgba(107, 141, 247, 0.22);
  --klikr-purple: #7c3aed;
  --klikr-text: #0f172a;
  --klikr-muted: #5b21b6;
  --klikr-accent: #6d28d9;
  --klikr-input-bg: #f8faff;
}

[data-theme="light"] body {
  color: #1e293b;
}

.theme-toggle-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--klikr-border);
  background: var(--klikr-surface);
  color: var(--klikr-accent);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

img,
video {
  max-width: 100%;
  height: auto;
}

.hidden {
  display: none !important;
}

.container {
  width: 100%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--klikr-pad-x);
  padding-right: var(--klikr-pad-x);
}

.text-center {
  text-align: center;
}

/* Marketing nav — tablet & mobile (compact; klikr-nav.css wins on glass pages) */
@media (max-width: 900px) {
  body:not(.glass-page):not(.about-page):not(.is-page) nav {
    padding: 10px 16px !important;
  }
}

@media (max-width: 768px) {
  body:not(.glass-page):not(.about-page):not(.is-page) .nav-links,
  body:not(.glass-page):not(.about-page):not(.is-page) .nav-cta,
  body:not(.glass-page):not(.about-page):not(.is-page) .nav-login,
  body:not(.glass-page):not(.about-page):not(.is-page) .nav-right > .klikr-nav-install {
    display: none !important;
  }

  body:not(.glass-page):not(.about-page):not(.is-page) .hamburger {
    display: flex !important;
    min-width: 44px;
    min-height: 44px;
    padding: 10px !important;
  }

  body:not(.glass-page):not(.about-page):not(.is-page) nav {
    padding: calc(8px + var(--klikr-safe-top)) 12px 8px !important;
  }
}

/* Modals — stack forms on tablet/phone */
@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr !important;
  }

  .modal-box {
    padding: 32px 22px !important;
    overflow: visible !important;
    border-radius: 20px !important;
  }

  .modal-overlay {
    padding: 24px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #modalTitle {
    font-size: clamp(28px, 7vw, 36px) !important;
  }
}

@media (max-width: 480px) {
  .modal-box {
    padding: 28px 22px !important;
    border-radius: 20px !important;
    overflow: visible !important;
  }

  .btn-primary,
  .btn-secondary {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* Touch targets */
@media (hover: none) and (pointer: coarse) {
  .nav-link,
  .nav-cta,
  .nav-login,
  .hamburger,
  .btn-primary,
  .btn-secondary,
  .faq-question {
    min-height: 44px;
  }
}

/* Global table overflow on small screens */
.klikr-table-wrap,
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Prevent horizontal scroll on mobile */
body {
  overflow-x: hidden;
}

/* Staff / utility pages using shared styles */
@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  .sidebar {
    position: fixed !important;
    left: -280px;
    top: 0;
    bottom: 0;
    z-index: 100;
    transition: left 0.25s ease;
    width: 260px !important;
  }

  .sidebar.open {
    left: 0;
  }

  .main {
    margin-left: 0 !important;
    padding: 16px !important;
    width: 100% !important;
  }

  .header h1 {
    font-size: 28px !important;
  }

  .stat-card .value {
    font-size: 36px !important;
  }

  .referral-link .link {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .referral-link .link button {
    width: 100%;
    min-height: 44px;
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr !important;
  }

  .card {
    padding: 18px !important;
  }

  .leads-table th,
  .leads-table td {
    padding: 10px 8px !important;
    font-size: 13px !important;
  }
}

/* Safe area padding for notched phones */
@supports (padding: env(safe-area-inset-bottom)) {
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ── PWA install banner ── */
.klikr-install-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9998;
  padding: 12px max(16px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(10, 15, 30, 0.96);
  border-top: 1px solid rgba(191, 0, 255, 0.2);
  backdrop-filter: blur(16px);
  transform: translateY(110%);
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.35);
}
.klikr-install-banner.show {
  transform: translateY(0);
  opacity: 1;
}
.klikr-install-inner {
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.klikr-install-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  flex-shrink: 0;
}
.klikr-install-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.klikr-install-text strong {
  font-size: 14px;
  color: #d8b4fe;
  font-weight: 600;
}
.klikr-install-text span {
  font-size: 12px;
  color: #7c8db5;
}
.klikr-install-btn {
  font-family: inherit;
  padding: 10px 18px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #bf00ff, #7c3aed);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.klikr-install-close {
  background: none;
  border: none;
  color: #7c8db5;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  flex-shrink: 0;
}
.klikr-install-ios {
  max-width: 520px;
  margin: 10px auto 0;
  text-align: center;
  font-size: 12px;
  color: #a78bfa;
}
[data-theme="light"] .klikr-install-banner {
  background: rgba(255, 255, 255, 0.98);
  border-top-color: rgba(124, 58, 237, 0.2);
}
[data-theme="light"] .klikr-install-text strong { color: #5b21b6; }
[data-theme="light"] .klikr-install-text span { color: #64748b; }

/* ── Nav install button (desktop + mobile top) ── */
.klikr-nav-install {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid rgba(191, 0, 255, 0.22);
  background: rgba(191, 0, 255, 0.1);
  color: #d8b4fe;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  flex-shrink: 0;
  line-height: 1;
}
.klikr-nav-install:hover {
  background: rgba(191, 0, 255, 0.18);
  border-color: rgba(191, 0, 255, 0.35);
  color: #f0e0ff;
}
.klikr-nav-install i { font-size: 13px; }
.klikr-nav-install.is-hidden { display: none !important; }
.klikr-nav-install-compact { padding: 10px 12px; }
@media (max-width: 640px) {
  .klikr-nav-install .klikr-install-text-full { display: none; }
  .klikr-nav-install .klikr-install-text-short { display: inline; }
}
@media (min-width: 641px) {
  .klikr-nav-install .klikr-install-text-short { display: none; }
  .klikr-nav-install .klikr-install-text-full { display: inline; }
}
[data-theme="light"] .klikr-nav-install {
  background: rgba(124, 58, 237, 0.08);
  border-color: rgba(124, 58, 237, 0.22);
  color: #6d28d9;
}
[data-theme="light"] .klikr-nav-install:hover {
  background: rgba(124, 58, 237, 0.14);
  color: #5b21b6;
}

/* ── Install hint toast (shown on click when browser has no prompt) ── */
.klikr-install-hint {
  position: fixed;
  bottom: max(20px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  z-index: 9999;
  max-width: min(420px, calc(100vw - 32px));
  padding: 16px 20px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(191, 0, 255, 0.25);
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
}
.klikr-install-hint.show { transform: translateX(-50%) translateY(0); }
.klikr-install-hint strong {
  display: block;
  font-family: var(--font-system), sans-serif;
  font-size: 15px;
  color: #d8b4fe;
  margin-bottom: 4px;
}
.klikr-install-hint span {
  font-size: 13px;
  color: #7c8db5;
  line-height: 1.4;
}
[data-theme="light"] .klikr-install-hint {
  background: #fff;
  border-color: rgba(107, 141, 247, 0.25);
}
[data-theme="light"] .klikr-install-hint strong { color: #5b21b6; }
[data-theme="light"] .klikr-install-hint span { color: #64748b; }

/* ── Install overlay (preparing / success / blocked) ── */
.klikr-install-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(5, 8, 18, 0.72);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.klikr-install-overlay.show {
  opacity: 1;
  pointer-events: auto;
}
.klikr-install-overlay-card {
  width: min(360px, 100%);
  padding: 28px 24px;
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(191, 0, 255, 0.22);
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.klikr-install-overlay-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #bf00ff, #7c3aed);
  color: #fff;
  font-size: 20px;
}
.klikr-install-overlay-card strong {
  display: block;
  font-family: var(--font-system), sans-serif;
  font-size: 20px;
  color: #d8b4fe;
  margin-bottom: 8px;
}
.klikr-install-overlay-card span {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: #7c8db5;
}
[data-theme="light"] .klikr-install-overlay-card {
  background: #fff;
  border-color: rgba(107, 141, 247, 0.25);
}
[data-theme="light"] .klikr-install-overlay-card strong { color: #5b21b6; }
[data-theme="light"] .klikr-install-overlay-card span { color: #64748b; }
.klikr-install-retry-btn {
  display: none;
  align-items: center;
  justify-content: center;
  margin: 18px auto 0;
  padding: 12px 28px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #bf00ff, #7c3aed);
  color: #fff;
  font-family: var(--font-system), sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
}
.klikr-install-retry-btn:hover { opacity: 0.92; transform: translateY(-1px); }
.klikr-nav-install:disabled { opacity: 0.7; cursor: wait; }

.mobile-menu-btns .klikr-nav-install--menu {
  display: flex !important;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 18px 28px;
  min-height: 52px;
  font-size: 17px;
  border-radius: 14px;
  font-family: var(--font-system), sans-serif;
}

/* ── Sitewide: prevent text clipping in glass cards & display headings ── */
.card,
.card-title,
.card h2,
.section-title,
#modalTitle,
.form-label,
.section-label,
.share-link-label {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.card-title,
.card h2,
.section-title,
#modalTitle,
.analytics-greeting h1,
.pricing-welcome h3,
.no-plan h3,
.onboarding-title {
  line-height: 1.22;
}

.form-label,
.section-label,
.share-link-label {
  line-height: 1.4;
}

/* Keyboard focus — visible indicators for links, buttons, and form fields */
button:focus,
a:focus,
input:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

select:focus,
textarea:focus,
[tabindex]:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}


/* --- klikr-hero.css --- */

/* ── Hero ── */
.cosmic-hero {
  position: relative;
  z-index: 2;
  min-height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 110px 24px 56px;
}

.cosmic-hero__grid {
  width: 100%;
}

.cosmic-hero__inner {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}

.cosmic-hero__headline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vw, 40px);
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.hero-logo-spin {
  position: relative;
  flex-shrink: 0;
  width: clamp(140px, 18vw, 220px);
  height: clamp(140px, 18vw, 220px);
  border-radius: 28px;
  transform: none !important;
  overflow: hidden;
  animation: heroLogoGlow 3.2s ease-in-out infinite;
  filter: drop-shadow(0 12px 40px rgba(176, 38, 255, 0.45));
}

.hero-logo-spin::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 28px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 28%,
    rgba(255, 255, 255, 0.12) 40%,
    rgba(255, 255, 255, 0.72) 50%,
    rgba(255, 255, 255, 0.12) 60%,
    transparent 72%
  );
  background-size: 260% 100%;
  background-position: 140% 0;
  mix-blend-mode: soft-light;
  animation: heroLogoShine 3.8s ease-in-out infinite;
}

@keyframes heroLogoShine {
  0%, 52%, 100% {
    background-position: 140% 0;
    opacity: 0;
  }
  18% { opacity: 1; }
  42% {
    background-position: -40% 0;
    opacity: 1;
  }
}

@keyframes heroLogoGlow {
  0%, 100% {
    filter: drop-shadow(0 12px 40px rgba(176, 38, 255, 0.45));
  }
  50% {
    filter:
      drop-shadow(0 14px 48px rgba(255, 122, 0, 0.5))
      drop-shadow(0 0 28px rgba(255, 255, 255, 0.22));
  }
}

.hero-logo-spin img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 28px;
  pointer-events: none;
  user-select: none;
}

.hero-planet {
  display: none;
}

.cosmic-hero h1 {
  font-family: var(--font-system);
  font-size: clamp(2rem, 5.5vw, 3.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 0;
  text-align: left;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
}

[data-theme="dark"] .cosmic-hero h1 { color: #f0e8ff; }
[data-theme="light"] .cosmic-hero h1 { color: #0f172a; }

.cosmic-hero h1 em {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  color: #e040fb;
}

[data-theme="light"] .cosmic-hero h1 em {
  color: #c026d3;
}

.cosmic-hero__subtitle {
  font-family: var(--font-system);
  font-size: clamp(0.9rem, 1.6vw, 1.05rem);
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto 28px;
}

[data-theme="dark"] .cosmic-hero__subtitle { color: #ece6ff; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5); }
[data-theme="light"] .cosmic-hero__subtitle { color: #334155; }

.cosmic-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 20px;
}

.cosmic-hero__cta {
  display: inline-flex;
  align-items: center;
  padding: 14px 32px;
  border-radius: 12px;
  background: linear-gradient(135deg, #b026ff, #e040fb, #c026d3);
  color: #fff;
  font-family: var(--font-system);
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 36px rgba(176, 38, 255, 0.45), 0 0 24px rgba(224, 64, 251, 0.2);
  transition: transform 0.25s, box-shadow 0.25s;
  text-decoration: none;
}

.cosmic-hero__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 44px rgba(176, 38, 255, 0.55), 0 0 32px rgba(224, 64, 251, 0.28);
}

.cosmic-hero__secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-system);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  padding: 14px 28px;
  min-height: 48px;
  border-radius: 12px;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.1);
  color: #faf5ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.cosmic-hero__secondary:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 122, 0, 0.5);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 4px 20px rgba(255, 122, 0, 0.15);
}

[data-theme="dark"] .cosmic-hero__secondary {
  color: #faf5ff;
  text-shadow: none;
}

[data-theme="light"] .cosmic-hero__secondary {
  color: #4c1d95;
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(124, 58, 237, 0.35);
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .cosmic-hero__secondary:hover {
  color: #6d28d9;
  border-color: rgba(255, 122, 0, 0.45);
  background: rgba(255, 255, 255, 0.88);
}

body.glass-page .cosmic-hero__secondary {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  color: #faf5ff !important;
  text-decoration: none !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

body.glass-page .cosmic-hero__secondary:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 122, 0, 0.5) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 4px 20px rgba(255, 122, 0, 0.15) !important;
  transform: translateY(-1px);
}

/* ── Sections below hero ── */
body.glass-page .stats,
body.glass-page .features,
body.glass-page .testimonials,
body.glass-page .pricing,
body.glass-page .faq,
body.glass-page .cta,
body.glass-page .landing-explore,
body.glass-page .page-hero,
body.glass-page .page-main,
body.glass-page .section-divider {
  position: relative;
  z-index: 2;
}

/* Glass surfaces — klikr-neo.css owns card/panel backgrounds */

body.glass-page .section-label {
  color: #05d9e8 !important;
  font-family: var(--font-system) !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}

body.glass-page .section-title {
  font-family: var(--font-display);
}

[data-theme="dark"] body.glass-page .section-title { color: #f0e8ff !important; }
[data-theme="light"] body.glass-page .section-title { color: #1e1035 !important; }

body.glass-page .section-desc,
body.glass-page .hero p {
  font-family: var(--font-system) !important;
}

[data-theme="dark"] body.glass-page .section-desc,
[data-theme="dark"] body.glass-page .hero p { color: #ece6ff !important; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45) !important; }

[data-theme="light"] body.glass-page .section-desc,
[data-theme="light"] body.glass-page .hero p { color: #5b4578 !important; }

body.glass-page .stat-num,
body.glass-page .pricing-amount {
  background: linear-gradient(135deg, #a78bfa, #c026d3) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

[data-theme="dark"] body.glass-page .feature-card h3,
[data-theme="dark"] body.glass-page .stat-label,
[data-theme="dark"] body.glass-page .pricing-card h3 { color: #f0e8ff !important; }

[data-theme="light"] body.glass-page .feature-card h3,
[data-theme="light"] body.glass-page .stat-label,
[data-theme="light"] body.glass-page .pricing-card h3 { color: #1e1035 !important; }

[data-theme="dark"] body.glass-page .feature-card p,
[data-theme="dark"] body.glass-page .testimonial-text,
[data-theme="dark"] body.glass-page .faq-answer,
[data-theme="dark"] body.glass-page .faq-answer-inner,
[data-theme="dark"] body.glass-page .landing-card p,
[data-theme="dark"] body.glass-page .pricing-features li,
[data-theme="dark"] body.glass-page .cta-box p { color: #ece6ff !important; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4) !important; }

[data-theme="light"] body.glass-page .feature-card p,
[data-theme="light"] body.glass-page .testimonial-text,
[data-theme="light"] body.glass-page .faq-answer,
[data-theme="light"] body.glass-page .faq-answer-inner,
[data-theme="light"] body.glass-page .landing-card p,
[data-theme="light"] body.glass-page .pricing-features li,
[data-theme="light"] body.glass-page .cta-box p { color: #5b4578 !important; }

body.glass-page .btn-primary {
  background: linear-gradient(135deg, #8b5cf6, #c026d3) !important;
  color: #fff !important;
}

[data-theme="dark"] body.glass-page .btn-secondary {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #f0e8ff !important;
  border-color: rgba(167, 139, 250, 0.25) !important;
}

[data-theme="light"] body.glass-page .btn-secondary {
  background: rgba(255, 255, 255, 0.7) !important;
  color: #1e1035 !important;
  border-color: rgba(167, 139, 250, 0.3) !important;
}

body.glass-page footer {
  position: relative;
  z-index: 2;
  background: transparent;
  margin-bottom: 0;
  padding-bottom: 24px;
}

body.glass-page .feature-icon--brand {
  width: 88px;
  height: 88px;
  background: linear-gradient(145deg, #bf00ff, #9333ea) !important;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  padding: 0;
  box-shadow: 0 8px 28px rgba(191, 0, 255, 0.35);
}

body.glass-page .feature-icon--brand img {
  display: none;
}

body.glass-page .feature-icon--brand .klikr-icon {
  width: 36px;
  height: 36px;
  color: #fff;
}

body.glass-page #features .feature-card {
  align-items: center;
  text-align: center;
}

[data-theme="dark"] body.glass-page footer {
  border-top: 1px solid rgba(167, 139, 250, 0.12);
}

[data-theme="light"] body.glass-page footer {
  border-top: 1px solid rgba(167, 139, 250, 0.18);
}

body.glass-page footer p {
  font-family: var(--font-system) !important;
}

[data-theme="dark"] body.glass-page footer p { color: rgba(220, 210, 255, 0.45) !important; }
[data-theme="light"] body.glass-page footer p { color: rgba(30, 16, 53, 0.45) !important; }

@media (max-width: 768px) {
  body.glass-page .nav-links { display: none; }
  .cosmic-hero__headline {
    flex-direction: column;
    text-align: center;
  }
  .cosmic-hero h1 { text-align: center; }
  .cosmic-hero__secondary { display: inline-flex; margin: 0; }
}

@media (max-width: 640px) {
  body.glass-page .klikr-install-text-full { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cosmic-hero__cta:hover { transform: none; }
  .hero-logo-spin,
  .hero-logo-spin::before {
    animation: none !important;
  }
  .hero-logo-spin {
    filter: drop-shadow(0 12px 40px rgba(176, 38, 255, 0.45));
  }
}


/* --- klikr-marketing.css --- */

/* Klikr marketing */
.pulse-wave{position:fixed;top:50%;left:50%;width:280vmax;height:200vmax;border-radius:42% 58% 52% 48%/55% 42% 58% 45%;pointer-events:none;z-index:0;transform:translate(-50%,-50%) scale(0);opacity:0;filter:blur(50px)}
.pulse-purple{background:radial-gradient(ellipse at center,rgba(191,0,255,.45) 0%,rgba(168,85,247,.3) 25%,rgba(140,50,255,.12) 50%,transparent 78%);animation:pulseWave 13s ease-out infinite}
.pulse-green{background:radial-gradient(ellipse at center,rgba(57,255,20,.4) 0%,rgba(34,197,94,.25) 25%,rgba(0,255,65,.1) 50%,transparent 78%);animation:pulseWave 13s ease-out infinite 6.5s}
@keyframes pulseWave{0%{transform:translate(-50%,-50%) scale(0) rotate(0deg);opacity:0}3%{opacity:0}10%{opacity:1}100%{transform:translate(-50%,-50%) scale(1) rotate(15deg);opacity:0}}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;background:transparent;color:#ffffff;overflow-x:hidden;font-weight:400}
a{color:inherit;text-decoration:none}

button:focus,a:focus,input:focus,select:focus,textarea:focus,[tabindex]:focus{outline:3px solid #005fcc;outline-offset:2px}

.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;z-index:10001}
.skip-link:focus,.skip-link:focus-visible{position:fixed;left:16px;top:16px;width:auto;height:auto;padding:12px 20px;overflow:visible;background:#fff;color:#0f172a;font-family:var(--font-system),Inter,sans-serif;font-size:14px;font-weight:700;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.2);outline:3px solid #005fcc;outline-offset:2px;text-decoration:none}

.orb{position:fixed;border-radius:50%;filter:blur(90px);opacity:.3;pointer-events:none;will-change:transform}
.orb-1{width:500px;height:500px;background:radial-gradient(circle,#6B8DF7,transparent 70%);top:-15%;left:-10%;animation:drift1 16s ease-in-out infinite}
.orb-2{width:400px;height:400px;background:radial-gradient(circle,#e9d5ff,transparent 70%);bottom:-10%;right:-8%;animation:drift2 18s ease-in-out infinite}
.orb-3{width:300px;height:300px;background:radial-gradient(circle,#38bdf8,transparent 70%);top:40%;left:55%;animation:drift3 13s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(70px,50px) scale(1.1)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-60px,-40px) scale(1.15)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,60px) scale(.9)}}

.grid{position:fixed;inset:0;background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px);background-size:32px 32px;pointer-events:none}
.noise{position:fixed;inset:0;opacity:.025;pointer-events:none;z-index:1;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ── NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:50;padding:16px 32px;display:flex;align-items:center;justify-content:space-between;background:rgba(10,15,30,.6);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(191,0,255,.08);transition:background .4s,border-color .4s}
nav.scrolled{background:rgba(10,15,30,.88);border-bottom-color:rgba(191,0,255,.18)}
.nav-logo{display:flex;align-items:center;gap:10px;font-family:var(--font-system),sans-serif;font-weight:600;font-size:18px;letter-spacing:-.02em;color:#f5f0ff;flex-shrink:0}
.nav-logo img{width:56px;height:56px;border-radius:14px;object-fit:contain;display:block;box-shadow:0 6px 20px rgba(191,0,255,.4);background:transparent}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-link{font-family:var(--font-system),sans-serif;font-size:15px;font-weight:500;color:#e9d5ff;transition:color .2s;padding:10px 20px;border-radius:12px}
.nav-link:hover{color:#ffffff}
.nav-cta{font-family:var(--font-system),sans-serif;font-size:15px;font-weight:600;padding:12px 28px;border-radius:12px;background:linear-gradient(135deg,#bf00ff,#a855f7,#7c3aed);color:#fff;border:none;transition:all .25s;cursor:pointer;flex-shrink:0;box-shadow:0 2px 16px rgba(191,0,255,.3)}
.nav-cta:hover{box-shadow:0 6px 24px rgba(191,0,255,.5);transform:translateY(-1px)}
.nav-login{font-family:var(--font-system),sans-serif;font-size:15px;font-weight:600;padding:12px 22px 12px 14px;border-radius:12px;background:rgba(191,0,255,.1);color:#f3e8ff;border:1px solid rgba(191,0,255,.2);transition:all .25s;cursor:pointer;display:flex;align-items:center;gap:8px;flex-shrink:0}
.nav-login:hover{background:rgba(191,0,255,.2);color:#ffffff;border-color:rgba(191,0,255,.35)}
.nav-login svg{width:16px;height:16px;flex-shrink:0}
.nav-right{display:flex;align-items:center;gap:12px}

.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;z-index:60}
.hamburger span{display:block;width:22px;height:2px;background:#e9d5ff;border-radius:2px;transition:all .3s;transform-origin:center}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* Mobile menu — viewport popup (always centered, never at document top) */
.mobile-menu{
  display:none;
  position:fixed!important;
  inset:0!important;
  top:0!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  width:100vw!important;
  height:100dvh!important;
  height:100vh!important;
  margin:0!important;
  padding:calc(16px + env(safe-area-inset-top,0px)) 16px calc(16px + env(safe-area-inset-bottom,0px));
  z-index:9999!important;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .25s ease,visibility .25s ease;
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.mobile-menu__backdrop{
  position:absolute;
  inset:0;
  background:rgba(8,6,18,.72);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;
  transition:opacity .25s ease;
}
.mobile-menu__panel{
  position:relative;
  z-index:1;
  width:min(92vw,380px);
  max-height:min(85dvh,640px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:28px 22px 24px;
  border-radius:22px;
  background:rgba(14,12,24,.96);
  border:1px solid rgba(167,139,250,.22);
  box-shadow:0 24px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04) inset;
  transform:translateY(16px) scale(.96);
  opacity:0;
  transition:transform .28s cubic-bezier(.16,1,.3,1),opacity .28s ease;
}
.mobile-menu.active{
  display:flex!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
.mobile-menu.active .mobile-menu__backdrop{opacity:1}
.mobile-menu.active .mobile-menu__panel{transform:none;opacity:1}
.mobile-menu__close{
  position:absolute;
  top:12px;
  right:12px;
  width:44px;
  height:44px;
  border:none;
  border-radius:12px;
  background:rgba(255,255,255,.06);
  color:#e9d5ff;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
.mobile-menu .mobile-link{font-family:var(--font-system),sans-serif;font-size:24px;font-weight:600;color:#e9d5ff;padding:16px 24px;border-radius:12px;transition:all .2s;width:100%;text-align:center;max-width:min(340px,90vw);min-height:52px;display:flex;align-items:center;justify-content:center}
.mobile-menu .mobile-link:hover{background:rgba(191,0,255,.1);color:#f0e0ff}
.mobile-menu-btns{display:flex;flex-direction:column;gap:12px;margin-top:20px;width:100%;max-width:280px}
.mobile-menu-btns .btn-primary,.mobile-menu-btns .btn-secondary{width:100%;text-align:center;font-size:17px;padding:18px 28px;min-height:52px;display:flex;align-items:center;justify-content:center}

/* ── HERO ── */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:120px 24px 80px;position:relative;z-index:2}
.hero-inner{text-align:center;max-width:720px}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 16px 6px 8px;border-radius:100px;background:rgba(191,0,255,.1);border:1px solid rgba(191,0,255,.2);font-family:var(--font-system),sans-serif;font-size:13px;font-weight:500;color:#f3e8ff;margin-bottom:28px;opacity:0;transform:translateX(-30px);animation:badgeSlide .6s .1s cubic-bezier(.16,1,.3,1) forwards}
.hero-badge span{background:linear-gradient(135deg,#bf00ff,#a855f7);color:#fff;font-family:var(--font-system),sans-serif;font-size:11px;font-weight:700;padding:2px 8px;border-radius:100px}
@keyframes badgeSlide{to{opacity:1;transform:translateX(0)}}
.hero h1{font-family:var(--font-display),sans-serif;font-size:clamp(48px,8vw,88px);font-weight:400;line-height:.95;letter-spacing:.02em;margin-bottom:20px;opacity:0;transform:translateY(30px);filter:blur(8px);animation:heroTextReveal .9s .2s cubic-bezier(.16,1,.3,1) forwards}
.hero h1 .grad{background:linear-gradient(135deg,#6B8DF7,#e9d5ff,#38bdf8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
@keyframes heroTextReveal{to{opacity:1;transform:translateY(0);filter:blur(0)}}
.hero p{font-family:var(--font-body),cursive;font-size:clamp(15px,2.2vw,18px);letter-spacing:.03em;line-height:1.8;max-width:540px;margin:0 auto 40px;color:#f5f0ff;opacity:0;transform:translateY(20px);filter:blur(6px);animation:blurReveal .8s .4s cubic-bezier(.16,1,.3,1) forwards;text-shadow:0 1px 12px rgba(0,0,0,.35)}
@keyframes blurReveal{to{opacity:1;transform:translateY(0);filter:blur(0)}}
.hero-install{margin:0 auto 18px;display:inline-flex;align-items:center;gap:8px;padding:12px 22px;font-size:14px;opacity:0;animation:fadeUp .7s .35s forwards}
.hero-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;opacity:0;transform:scale(.92);animation:btnPop .7s .5s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes btnPop{to{opacity:1;transform:scale(1)}}

.btn-primary{font-family:var(--font-system),sans-serif;padding:16px 36px;border-radius:14px;background:linear-gradient(135deg,#bf00ff,#a855f7,#7c3aed);background-size:200% 200%;color:#fff;font-size:16px;font-weight:600;border:none;cursor:pointer;transition:all .3s;box-shadow:0 4px 24px rgba(191,0,255,.35);position:relative;overflow:hidden;display:inline-block}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 36px rgba(191,0,255,.5);background-position:100% 0}
.btn-secondary{font-family:var(--font-system),sans-serif;padding:16px 36px;border-radius:14px;background:rgba(191,0,255,.06);color:#e9d5ff;font-size:16px;font-weight:500;border:1px solid rgba(191,0,255,.15);cursor:pointer;transition:all .3s;display:inline-block}
.btn-secondary:hover{background:rgba(191,0,255,.12);color:#f3e8ff;border-color:rgba(191,0,255,.3)}

.notif-demo{margin-top:60px;opacity:0;animation:fadeUp .7s .7s forwards}
.notif-mock{display:inline-flex;align-items:center;gap:12px;background:rgba(30,41,59,.7);backdrop-filter:blur(20px);border:1px solid rgba(191,0,255,.1);border-radius:16px;padding:14px 22px;box-shadow:0 16px 48px rgba(0,0,0,.4);transform-origin:top center;animation:notifIn .8s .9s cubic-bezier(.16,1,.3,1) both}
.notif-icon{width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,#bf00ff,#a855f7);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.notif-icon svg{width:20px;height:20px}
.notif-text{text-align:left;min-width:0;flex:1}
.notif-title{font-family:var(--font-system),sans-serif;font-size:13px;font-weight:600;margin-bottom:2px;color:#f3e8ff}
.notif-body{font-family:var(--font-body),cursive;font-size:13px;color:#ddd6fe;letter-spacing:.02em;min-height:20px}
.notif-time{font-family:var(--font-system),sans-serif;font-size:11px;color:#e9d5ff;margin-left:auto;flex-shrink:0}
.notif-cursor{display:inline-block;width:2px;height:14px;background:#bf00ff;margin-left:2px;vertical-align:middle;animation:cursorBlink .6s step-end infinite}
@keyframes cursorBlink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes notifIn{from{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ── STATS ── */
.stats{position:relative;z-index:2;padding:24px 24px 32px}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;max-width:700px;margin:0 auto;background:rgba(191,0,255,.15);border-radius:20px;overflow:hidden;border:1px solid rgba(191,0,255,.12)}
.stat{background:rgba(15,23,42,.8);backdrop-filter:blur(20px);padding:36px 20px;text-align:center}
.stat-num{font-family:var(--font-display),sans-serif;font-size:clamp(36px,5vw,52px);font-weight:400;letter-spacing:.03em;background:linear-gradient(135deg,#bf00ff,#f3e8ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;transition:transform .3s}
.stat-label{font-family:var(--font-system),sans-serif;font-size:13px;color:#e9d5ff;margin-top:6px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.stat-beta{display:inline-block;margin-left:4px;padding:2px 7px;border-radius:999px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#6ee7b7;background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.25);vertical-align:middle}

/* ── FEATURES ── */
.features{position:relative;z-index:2;padding:16px 24px 32px;max-width:960px;margin:0 auto}
.section-label{font-family:var(--font-system),sans-serif;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:#05d9e8;margin-bottom:12px;text-shadow:0 1px 10px rgba(0,0,0,.35)}
.section-title{font-family:var(--font-display),sans-serif;font-size:clamp(32px,5vw,48px);font-weight:400;letter-spacing:.02em;margin-bottom:16px;line-height:1.15;text-shadow:0 2px 16px rgba(0,0,0,.35)}
.section-desc{font-family:var(--font-body),cursive;font-size:clamp(15px,2.2vw,17px);letter-spacing:.03em;line-height:1.75;color:#f5f0ff;max-width:500px;margin-bottom:48px;text-shadow:0 1px 10px rgba(0,0,0,.3)}
.section-title.center,.section-desc.center{margin-left:auto;margin-right:auto;text-align:center}
.section-desc.center{max-width:560px}
.features-grid{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;overflow:visible}
.feature-card{background:rgba(8,12,28,.78);backdrop-filter:blur(20px);border:1px solid rgba(191,0,255,.22);border-radius:20px;padding:36px 24px 32px;transition:transform .15s ease-out,box-shadow .3s,border-color .3s;position:relative;overflow:visible;flex:1 1 280px;max-width:calc(33.333% - 12px);display:flex;flex-direction:column;align-items:center;text-align:center;will-change:transform;box-shadow:0 10px 32px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.06)}
.feature-card:hover{border-color:rgba(5,217,232,.35);box-shadow:0 14px 44px rgba(0,0,0,.38),0 0 28px rgba(191,0,255,.1)}
.feature-icon{width:88px;height:88px;border-radius:22px;display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.feature-icon--brand{background:linear-gradient(145deg,#bf00ff,#9333ea);box-shadow:0 8px 28px rgba(191,0,255,.35)}
.feature-icon--brand .klikr-icon{width:36px;height:36px;color:#fff}
.feature-icon img.custom-icon{display:none}
.fi-blue{background:rgba(107,141,247,.12)}.fi-purple{background:rgba(191,0,255,.12)}.fi-green{background:rgba(52,211,153,.12)}.fi-amber{background:rgba(251,191,36,.12)}.fi-rose{background:rgba(244,114,182,.12)}.fi-cyan{background:rgba(34,211,238,.12)}
.feature-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#05d9e8,rgba(191,0,255,.8),transparent);opacity:0;transition:opacity .35s}
.feature-card:hover::before{opacity:1}
.feature-card h3{font-family:var(--font-system),sans-serif;font-size:17px;font-weight:600;margin-bottom:10px;color:#ffffff;letter-spacing:.02em;line-height:1.35;text-shadow:0 1px 8px rgba(0,0,0,.3)}
.feature-card p{font-family:'Inter',sans-serif;font-size:14px;font-weight:500;letter-spacing:.01em;color:#ece6ff;line-height:1.65;text-shadow:0 1px 8px rgba(0,0,0,.25);max-width:100%;overflow-wrap:break-word;word-wrap:break-word}

.stagger-parent .stagger-child{opacity:0;transform:translateY(40px) scale(.96);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.34,1.56,.64,1)}
.stagger-parent.visible .stagger-child{opacity:1;transform:translateY(0) scale(1)}
.stagger-parent.visible .stagger-child:nth-child(1){transition-delay:0s}
.stagger-parent.visible .stagger-child:nth-child(2){transition-delay:.08s}
.stagger-parent.visible .stagger-child:nth-child(3){transition-delay:.16s}
.stagger-parent.visible .stagger-child:nth-child(4){transition-delay:.24s}
.stagger-parent.visible .stagger-child:nth-child(5){transition-delay:.32s}
.stagger-parent.visible .stagger-child:nth-child(6){transition-delay:.4s}

/* ── TESTIMONIALS MARQUEE ── */
.testimonials{position:relative;z-index:2;padding:0 0 32px;overflow:hidden}
.testimonials-header{text-align:center;padding:0 24px;margin-bottom:40px}
.testimonials-track{overflow:hidden;mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent)}
.testimonials-marquee{display:flex;gap:20px;width:max-content;animation:marquee 50s linear infinite}
.testimonials-marquee:hover{animation-play-state:paused}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.testimonial-card{width:clamp(280px,30vw,340px);flex-shrink:0;background:rgba(8,12,28,.78);backdrop-filter:blur(20px);border:1px solid rgba(191,0,255,.22);border-radius:20px;padding:28px 24px;display:flex;flex-direction:column;transition:border-color .3s,box-shadow .3s;animation:cardFloat 5s ease-in-out infinite var(--float-delay,0s);box-shadow:0 10px 32px rgba(0,0,0,.28)}
.testimonial-card:hover{border-color:rgba(191,0,255,.35);box-shadow:0 12px 40px rgba(0,0,0,.3)}
@keyframes cardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.testimonial-stars{color:#fbbf24;font-size:14px;margin-bottom:14px;letter-spacing:2px}
.testimonial-text{font-family:'Inter',sans-serif;font-size:14px;font-weight:500;color:#ece6ff;line-height:1.7;flex-grow:1;margin-bottom:18px;text-shadow:0 1px 8px rgba(0,0,0,.25)}
.testimonial-author{display:flex;align-items:center;gap:12px}
.testimonial-avatar{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#bf00ff,#a855f7);display:flex;align-items:center;justify-content:center;font-family:var(--font-system),sans-serif;font-size:13px;font-weight:700;color:#fff;flex-shrink:0}
.testimonial-name{font-family:var(--font-system),sans-serif;font-size:13px;font-weight:600;color:#e9d5ff;text-shadow:0 1px 8px rgba(0,0,0,.3)}
.testimonial-role{font-family:var(--font-system),sans-serif;font-size:11px;color:#c4b5fd;text-shadow:0 1px 6px rgba(0,0,0,.25)}

/* ── PRICING ── */
.pricing{position:relative;z-index:2;padding:24px 24px 32px;max-width:1000px;margin:0 auto;text-align:center;overflow:visible}
.pricing-section{padding-top:28px}
.pricing-grid{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;align-items:stretch;padding-top:18px;overflow:visible}
.pricing-card{background:rgba(8,12,28,.78);backdrop-filter:blur(20px);border:1px solid rgba(191,0,255,.22);border-radius:24px;padding:36px 32px;flex:1 1 280px;max-width:320px;display:flex;flex-direction:column;transition:transform .15s ease-out,box-shadow .3s,border-color .3s;position:relative;will-change:transform;overflow:visible;box-shadow:0 10px 32px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.06)}
.pricing-card:hover{box-shadow:0 16px 48px rgba(0,0,0,.3);border-color:rgba(191,0,255,.25)}
.pricing-card.featured{border-color:rgba(191,0,255,.4);animation:glowPulse 3s ease-in-out infinite;margin-top:4px;padding-top:44px}
.pricing-card.featured:hover{box-shadow:0 16px 48px rgba(191,0,255,.2);animation:none}
@keyframes glowPulse{0%,100%{box-shadow:0 0 30px rgba(191,0,255,.08)}50%{box-shadow:0 0 60px rgba(191,0,255,.2)}}
.price-badge{font-family:var(--font-system),sans-serif;position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#bf00ff,#a855f7);color:#fff;font-size:11px;font-weight:700;padding:5px 16px;border-radius:100px;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;z-index:5;box-shadow:0 4px 16px rgba(191,0,255,.35)}
.pricing-header{font-family:var(--font-system),sans-serif;font-size:17px;font-weight:600;color:#ffffff;margin-bottom:16px;letter-spacing:.02em;line-height:1.35;text-shadow:0 1px 8px rgba(0,0,0,.3)}
.pricing-card.featured .pricing-header{color:#ffffff}
.pricing-amount{font-family:var(--font-display),sans-serif;font-size:56px;font-weight:400;letter-spacing:.02em;margin-bottom:4px;background:linear-gradient(135deg,#bf00ff,#f3e8ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.pricing-annual{font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:#e9d5ff;letter-spacing:.02em;margin-bottom:28px;text-shadow:0 1px 8px rgba(0,0,0,.25)}
.pricing-divider{height:1px;background:rgba(191,0,255,.12);margin-bottom:28px}
.pricing-features{list-style:none;text-align:left;display:flex;flex-direction:column;gap:14px;margin-bottom:36px;flex-grow:1}
.pricing-features li{font-family:var(--font-system),sans-serif;display:flex;align-items:center;gap:12px;font-size:14px;font-weight:600;color:#ece6ff;text-shadow:0 1px 6px rgba(0,0,0,.2)}
.pricing-features li svg{width:18px;height:18px;flex-shrink:0;stroke:#05d9e8}
.btn-pricing{font-family:var(--font-system),sans-serif;display:block;width:100%;padding:14px;border-radius:14px;font-size:15px;font-weight:600;border:none;cursor:pointer;transition:all .3s;text-align:center}
.btn-pricing-outline{background:rgba(191,0,255,.06);color:#e9d5ff;border:1px solid rgba(191,0,255,.15)}
.btn-pricing-outline:hover{background:rgba(191,0,255,.14);color:#f0e0ff;border-color:rgba(191,0,255,.3)}
.btn-pricing-fill{background:linear-gradient(135deg,#bf00ff,#a855f7,#7c3aed);color:#fff;box-shadow:0 4px 20px rgba(191,0,255,.3)}
.btn-pricing-fill:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(191,0,255,.5)}

/* ── FAQ ── */
.faq{position:relative;z-index:2;padding:0 24px 32px;max-width:700px;margin:0 auto;text-align:center}
.faq-list{text-align:left;display:flex;flex-direction:column;gap:12px}
.faq-item{background:rgba(8,12,28,.78);backdrop-filter:blur(20px);border:1px solid rgba(191,0,255,.22);border-radius:16px;overflow:hidden;transition:border-color .3s;box-shadow:0 8px 28px rgba(0,0,0,.25)}
.faq-item.active{border-color:rgba(5,217,232,.35)}
.faq-question{width:100%;padding:20px 24px;background:none;border:none;color:#ffffff;font-family:var(--font-system),sans-serif;font-size:15px;font-weight:700;text-align:left;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;transition:color .2s;text-shadow:0 1px 8px rgba(0,0,0,.3)}
.faq-question:hover{color:#05d9e8}
.faq-chevron{width:20px;height:20px;flex-shrink:0;transition:transform .35s cubic-bezier(.16,1,.3,1);stroke:#e9d5ff}
.faq-item.active .faq-chevron{transform:rotate(180deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.16,1,.3,1)}
.faq-answer-inner{padding:0 24px 20px;font-family:'Inter',sans-serif;font-size:14px;font-weight:500;color:#ece6ff;letter-spacing:.01em;line-height:1.75;text-shadow:0 1px 8px rgba(0,0,0,.25)}

/* ── CTA ── */
.cta{position:relative;z-index:2;padding:0 24px 32px;text-align:center}
.cta-box{max-width:600px;margin:0 auto;background:rgba(8,12,28,.78);backdrop-filter:blur(20px);border:1px solid rgba(191,0,255,.22);border-radius:24px;padding:56px 40px;position:relative;overflow:hidden;box-shadow:0 14px 44px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.06)}
.cta-box::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(191,0,255,.1),transparent 50%);pointer-events:none;animation:ctaFloat 8s ease-in-out infinite}
@keyframes ctaFloat{0%,100%{transform:translate(0,0)}33%{transform:translate(-8%,4%)}66%{transform:translate(8%,-4%)}}
.cta-box h2{font-family:var(--font-display),sans-serif;font-size:clamp(28px,6vw,40px);font-weight:400;letter-spacing:.02em;margin-bottom:12px;position:relative;line-height:1.22;text-shadow:0 2px 16px rgba(0,0,0,.35);overflow-wrap:break-word;word-wrap:break-word}
.cta-box p{font-family:'Inter',sans-serif;font-size:15px;font-weight:500;letter-spacing:.01em;color:#ece6ff;margin-bottom:32px;position:relative;line-height:1.75;text-shadow:0 1px 10px rgba(0,0,0,.3)}

footer{position:relative;z-index:2;padding:24px 24px 20px;border-top:1px solid rgba(191,0,255,.1);text-align:center}
footer p{font-family:var(--font-body),cursive;font-size:12px;color:rgba(240,235,255,.82);letter-spacing:.02em;text-shadow:0 1px 8px rgba(0,0,0,.35)}

.reveal{opacity:0;transform:translateY(30px);transition:all .7s cubic-bezier(.16,1,.3,1)}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ── MODALS ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(8px);z-index:10000;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;overflow-y:auto;pointer-events:none;scrollbar-width:none;-ms-overflow-style:none}
.modal-overlay::-webkit-scrollbar{display:none;width:0;height:0}
.modal-overlay.active{opacity:1;visibility:visible;pointer-events:auto}
.modal-box{background:rgba(30,41,59,.8);backdrop-filter:blur(20px);border:1px solid rgba(191,0,255,.15);border-radius:24px;padding:48px 40px;width:100%;max-width:600px;overflow:visible;transform:translateY(30px) scale(0.95);transition:all .35s cubic-bezier(.16,1,.3,1);position:relative}
.modal-overlay.active .modal-box{transform:translateY(0) scale(1)}
.modal-box .section-title{margin-bottom:12px}
.modal-box .section-desc{margin-bottom:20px;max-width:none}
.modal-box .btn-form-submit{margin-top:24px}
.modal-close{font-family:var(--font-system),sans-serif;position:absolute;top:20px;right:20px;background:rgba(191,0,255,.06);border:none;color:#e9d5ff;width:36px;height:36px;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;font-size:20px}
.modal-close:hover{background:rgba(191,0,255,.15);color:#f0e0ff}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form-group{display:flex;flex-direction:column}
.form-group.full-width{grid-column:1/-1}
.form-label{font-family:var(--font-system),sans-serif;display:block;font-size:13px;font-weight:600;color:#e9d5ff;margin-bottom:8px;line-height:1.4;overflow-wrap:break-word;word-wrap:break-word}
.form-input{font-family:var(--font-system),sans-serif;width:100%;padding:14px 18px;background:rgba(15,23,42,0.6);border:1px solid rgba(191,0,255,.15);border-radius:12px;color:#fff;font-size:15px;font-weight:400;transition:all .3s}
.form-input::placeholder{color:#7c3aed}
.form-input:focus{border-color:rgba(191,0,255,.5);box-shadow:0 0 0 3px rgba(191,0,255,.1);outline:3px solid #005fcc;outline-offset:2px}
.form-input.input-error{border-color:#f87171;box-shadow:0 0 0 3px rgba(248,113,113,.1)}
.form-error{font-family:var(--font-system),sans-serif;font-size:12px;color:#f87171;margin-top:4px;display:none}
.form-error.visible{display:block}
.btn-form-submit{font-family:var(--font-system),sans-serif;margin-top:32px;width:100%;padding:16px;border-radius:14px;background:linear-gradient(135deg,#bf00ff,#a855f7,#7c3aed);color:#fff;font-size:16px;font-weight:700;border:none;cursor:pointer;transition:all .3s;box-shadow:0 4px 24px rgba(191,0,255,.35)}
.btn-form-submit:hover{transform:translateY(-2px);box-shadow:0 8px 36px rgba(191,0,255,.5)}
.btn-form-submit:disabled{opacity:.7;cursor:not-allowed;transform:none}
.btn-resend{font-family:var(--font-system),sans-serif;margin-top:16px;width:100%;padding:14px;border-radius:14px;background:rgba(191,0,255,.06);color:#e9d5ff;font-size:14px;font-weight:600;border:1px solid rgba(191,0,255,.15);cursor:pointer;transition:all .3s}
.btn-resend:hover{background:rgba(191,0,255,.14);color:#f0e0ff;border-color:rgba(191,0,255,.3)}
.btn-resend:disabled{opacity:.5;cursor:not-allowed}
.modal-switch{font-family:var(--font-system),sans-serif;text-align:center;margin-top:20px;font-size:14px;color:#e9d5ff}
.modal-switch a,.modal-switch-btn{color:#f3e8ff;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer;transition:color .2s}
.modal-switch a:hover,.modal-switch-btn:hover{color:#f0e0ff}
.modal-switch-btn{background:none;border:none;padding:0;font:inherit;line-height:inherit}
.modal-form-error{display:none;color:#f87171;font-size:14px;margin-bottom:12px}
.modal-form-error.is-visible{display:block}
.modal-form-stack{display:flex;flex-direction:column;gap:16px}
.is-hidden{display:none!important}
.btn-resend-verify{display:none;margin-top:12px;background:rgba(191,0,255,.15)}
.btn-resend-verify.is-visible{display:block}
.btn-magnetic--rel{position:relative}
.testimonial-card--delay-0{--float-delay:0s}
.testimonial-card--delay-1{--float-delay:1s}
.testimonial-card--delay-2{--float-delay:2s}
.testimonial-card--delay-3{--float-delay:3s}
.forgot-success{text-align:center;padding:20px 0}
.forgot-success__icon{width:56px;height:56px;margin:0 auto 16px;border-radius:16px;background:linear-gradient(145deg,#bf00ff,#9333ea);display:flex;align-items:center;justify-content:center}
.forgot-success__title{font-family:var(--font-display),sans-serif;font-size:28px;letter-spacing:.02em;margin-bottom:8px}
.forgot-success__text{font-family:var(--font-body),cursive;font-size:14px;color:#a78bfa;letter-spacing:.02em;line-height:1.6}
.forgot-success__text strong{color:#d8b4fe}
.forgot-success__back{margin-top:20px}
.forgot-link{font-family:var(--font-system),sans-serif;text-align:center;margin-top:12px;font-size:13px;color:#e9d5ff;cursor:pointer;transition:color .2s}
.forgot-link:hover{color:#f3e8ff}
.back-to-login{font-family:var(--font-system),sans-serif;text-align:center;margin-top:16px;font-size:13px;color:#e9d5ff;cursor:pointer;transition:color .2s}
.back-to-login:hover{color:#f3e8ff}
.login-mode-switch{margin-top:18px;text-align:center}
.login-mode-btn{font-family:var(--font-system),sans-serif;display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px 16px;border-radius:12px;border:1px solid rgba(255,122,0,.32);background:rgba(255,122,0,.08);color:#fdba74;font-size:13px;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.login-mode-btn:hover{background:rgba(255,122,0,.14);border-color:rgba(255,122,0,.48);color:#fff}
.login-mode-btn--admin{border-color:rgba(191,0,255,.28);background:rgba(191,0,255,.08);color:#f3e8ff}
.login-mode-btn--admin:hover{background:rgba(191,0,255,.14);border-color:rgba(191,0,255,.42);color:#f0e0ff}
.btn-form-submit--staff{background:linear-gradient(135deg,#ff7a00,#bf00ff);box-shadow:0 4px 24px rgba(255,122,0,.28)}
.btn-form-submit--staff:hover{box-shadow:0 8px 36px rgba(255,122,0,.42)}
.verify-status{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px;font-family:var(--font-system),sans-serif;font-size:13px;color:#e9d5ff}
.verify-dot{width:8px;height:8px;border-radius:50%;background:#bf00ff;animation:verifyPulse 1.5s ease-in-out infinite}
@keyframes verifyPulse{0%,100%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}
.modal-view-fade{animation:modalViewFade .3s ease forwards}
@keyframes modalViewFade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
#modalTitle{font-family:var(--font-display),sans-serif;font-size:36px;font-weight:400;letter-spacing:.02em;line-height:1.22;overflow-wrap:break-word;word-wrap:break-word}
#modalDesc{font-family:var(--font-body),cursive;font-size:15px;letter-spacing:.03em;color:#e9d5ff}

::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:#0a0f1e}
::-webkit-scrollbar-thumb{background:rgba(191,0,255,.3);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(191,0,255,.5)}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.pulse-wave,.orb{display:none}.hero-badge,.hero h1,.hero p,.hero-btns,.hero-install,.notif-demo,.notif-mock{opacity:1;transform:none;filter:none;animation:none}.reveal{opacity:1;transform:none;transition:none}.stagger-parent .stagger-child{opacity:1;transform:none;transition:none}.testimonials-marquee{animation:none}.testimonial-card{animation:none}.pricing-card.featured{animation:none}.cta-box::before{animation:none}.notif-cursor{display:none}}
@media(max-width:1024px){.features-grid{justify-content:stretch}.feature-card{max-width:calc(50% - 8px);flex:1 1 260px}.pricing-grid{gap:16px}}
@media(max-width:768px){.hero{padding:100px 20px 60px}.stats-grid{grid-template-columns:1fr;max-width:320px}.stat{padding:28px 20px}.feature-card{max-width:100%;flex:1 1 100%}.pricing-card{max-width:100%;flex:1 1 100%}.testimonials-marquee{animation-duration:35s}.testimonial-card{width:clamp(260px,75vw,300px);padding:24px 20px}.cta-box{padding:44px 28px}.features,.pricing,.faq,.cta{padding-left:20px;padding-right:20px}}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}.modal-box{padding:32px 24px}.notif-mock{flex-wrap:wrap;justify-content:center;text-align:center;padding:16px 18px}.notif-text{text-align:center}.notif-time{margin-left:0;width:100%;text-align:center;margin-top:4px}.testimonials-marquee{animation-duration:30s}.testimonial-card{width:clamp(250px,80vw,280px);padding:22px 18px}.testimonial-text{font-size:13px}.hero-btns{flex-direction:column;width:100%;max-width:320px;margin-left:auto;margin-right:auto}.hero-btns .btn-primary,.hero-btns .btn-secondary{width:100%}}
@media(max-width:480px){.hero h1{font-size:clamp(38px,11vw,48px)}.hero p{font-size:14px}.btn-primary,.btn-secondary{padding:14px 24px;font-size:14px}.pricing-card{padding:28px 22px}.pricing-amount{font-size:48px}.stat-num{font-size:36px}.section-title{font-size:clamp(26px,8vw,32px)}}
@media(max-width:380px){.hero h1{font-size:38px}.pricing-card{padding:24px 18px}.pricing-amount{font-size:42px}}

/* ── Page headers (inner pages) ── */
.page-hero{position:relative;z-index:2;padding:120px 24px 8px;text-align:center;max-width:900px;margin:0 auto;perspective:1200px}
.page-main{position:relative;z-index:2;padding-bottom:32px}
.nav-link.active{color:#2dd4bf!important;background:rgba(0,0,0,.38)!important}
body.glass-page .nav-link.active{color:var(--klikr-nav-teal,#2dd4bf)!important;background:rgba(0,0,0,.4)!important}

.page-hero-card{position:relative;max-width:820px;margin:0 auto;padding:48px 40px 44px;border-radius:28px;text-align:center;overflow:hidden;background:rgba(8,12,28,.82);border:1px solid rgba(191,0,255,.28);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 24px 64px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08);animation:heroCardIn .9s cubic-bezier(.16,1,.3,1) both;transform-style:preserve-3d;transition:transform .12s ease-out,box-shadow .2s ease}

.page-hero-card__shine{position:absolute;inset:-50%;background:conic-gradient(from 0deg,transparent,rgba(191,0,255,.12),transparent,rgba(56,189,248,.08),transparent);animation:heroShine 8s linear infinite;pointer-events:none}
.page-hero-card__orb{position:absolute;width:280px;height:280px;border-radius:50%;filter:blur(60px);opacity:.45;pointer-events:none;top:-80px;right:-60px;animation:heroOrbFloat 6s ease-in-out infinite}
.page-hero-card__icon{width:72px;height:72px;margin:0 auto 20px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:28px;color:#fff;position:relative;z-index:1;box-shadow:0 12px 32px rgba(191,0,255,.4);animation:iconPop .7s .25s cubic-bezier(.34,1.56,.64,1) both}
.page-hero-card__label{display:inline-block;font-family:var(--font-system),sans-serif;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:#e9d5ff;margin-bottom:14px;padding:5px 14px;border-radius:100px;background:rgba(191,0,255,.12);border:1px solid rgba(191,0,255,.2);position:relative;z-index:1;animation:fadeUp .6s .15s both}
.page-hero-card h1{font-family:var(--font-display),sans-serif;font-size:clamp(36px,6vw,56px);font-weight:400;letter-spacing:.02em;line-height:1.12;margin-bottom:16px;color:#ffffff;position:relative;z-index:1;animation:fadeUp .7s .2s both;text-shadow:0 2px 20px rgba(0,0,0,.4)}
.page-hero-card p{font-family:'Inter',sans-serif;font-size:clamp(15px,2.2vw,18px);font-weight:500;color:#ece6ff;line-height:1.75;max-width:560px;margin:0 auto;position:relative;z-index:1;animation:fadeUp .7s .3s both;text-shadow:0 1px 12px rgba(0,0,0,.35)}
.page-hero-card__icon--logo {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: 120px !important;
  height: 120px !important;
  border-radius: 0 !important;
}

.page-hero-card__icon--logo img {
  width: 120px !important;
  height: 120px !important;
  object-fit: cover;
  border-radius: 20px;
  filter: drop-shadow(0 14px 36px rgba(191, 0, 255, 0.5));
}

.page-hero-card--how .page-hero-card__icon,
.page-hero-card--features .page-hero-card__icon,
.page-hero-card--analytics .page-hero-card__icon,
.page-hero-card--pricing .page-hero-card__icon,
.page-hero-card--faq .page-hero-card__icon {
  background: linear-gradient(145deg, #bf00ff, #9333ea);
  box-shadow: 0 12px 32px rgba(191, 0, 255, 0.4);
}

.page-hero-card--how .page-hero-card__orb { background: radial-gradient(circle, #bf00ff, transparent 70%); }
.page-hero-card--features .page-hero-card__orb { background: radial-gradient(circle, #a855f7, transparent 70%); }
.page-hero-card--analytics .page-hero-card__orb { background: radial-gradient(circle, #c026d3, transparent 70%); }
.page-hero-card--pricing .page-hero-card__orb { background: radial-gradient(circle, #9333ea, transparent 70%); }
.page-hero-card--faq .page-hero-card__orb { background: radial-gradient(circle, #7c3aed, transparent 70%); }

.page-hero-card--how { border-color: rgba(191, 0, 255, 0.28); }
.page-hero-card--features { border-color: rgba(168, 85, 247, 0.28); }
.page-hero-card--analytics { border-color: rgba(192, 38, 211, 0.28); }
.page-hero-card--pricing { border-color: rgba(147, 51, 234, 0.28); }
.page-hero-card--faq { border-color: rgba(124, 58, 237, 0.28); }
@keyframes heroCardIn{from{opacity:0;transform:translateY(44px) scale(.95);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
@keyframes heroShine{to{transform:rotate(360deg)}}
@keyframes heroOrbFloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-20px,16px) scale(1.08)}}
@keyframes iconPop{from{opacity:0;transform:scale(.5) rotate(-12deg)}to{opacity:1;transform:none}}

/* ── Section dividers ── */
.section-divider{position:relative;z-index:2;max-width:820px;margin:0 auto;padding:32px 24px 40px;display:flex;justify-content:center;align-items:center;clear:both;pointer-events:none}
.section-divider__img{display:block;width:min(100%,720px);height:auto;max-height:52px;object-fit:contain;opacity:.95;filter:drop-shadow(0 0 14px rgba(255,106,0,.22))}
.section-divider::before,.section-divider::after,.section-divider>span:not(.section-divider__img){display:none!important}
.section-divider--wide{max-width:960px}
.section-divider--wide .section-divider__img{width:min(100%,860px);max-height:56px}
@keyframes dividerPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.65}}

/* ── Landing explore grid ── */
.landing-explore{position:relative;z-index:2;padding:8px 24px 40px;max-width:1000px;margin:0 auto}
.landing-explore-title{font-family:var(--font-display),sans-serif;font-size:clamp(28px,4vw,36px);text-align:center;margin-bottom:8px;color:#f0e8ff}
.landing-explore-desc{font-family:'Inter',sans-serif;text-align:center;color:#ece6ff;margin-bottom:28px;font-size:15px;font-weight:500;text-shadow:0 1px 10px rgba(0,0,0,.3)}
.landing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;perspective:1200px;overflow:visible}
.landing-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:28px 24px;border-radius:20px;background:rgba(8,12,28,.78);border:1px solid rgba(191,0,255,.22);transition:border-color .3s,transform .12s ease-out,box-shadow .2s ease;text-decoration:none;color:inherit;min-height:160px;overflow:visible;transform-style:preserve-3d;box-shadow:0 10px 32px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.06)}
.landing-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(191,0,255,.08),transparent 55%);opacity:0;transition:opacity .35s;pointer-events:none}
.landing-card::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);transform:skewX(-20deg);transition:left .55s ease}
@media(min-width:900px){.landing-grid--explore{grid-template-columns:repeat(3,minmax(0,1fr))}.landing-grid--explore .landing-card--featured{grid-column:span 2;min-height:180px}}
.landing-card--featured{border-color:rgba(5,217,232,.32)!important;box-shadow:0 12px 36px rgba(0,0,0,.32),0 0 0 1px rgba(5,217,232,.12),inset 0 1px 0 rgba(255,255,255,.08)!important}
.landing-card--featured .landing-card-icon{background:linear-gradient(145deg,#0891b2,#bf00ff)!important}
.testimonials-note{font-family:var(--font-system),sans-serif;font-size:13px;font-weight:500;color:#e9d5ff;margin:8px auto 0;max-width:42ch;line-height:1.5}
.landing-card:focus-visible,.nav-link:focus-visible,.btn-primary:focus-visible,.btn-secondary:focus-visible,.cosmic-hero__cta:focus-visible,.cosmic-hero__secondary:focus-visible{outline:2px solid #05d9e8;outline-offset:3px}
.landing-card:hover:not(.tilt-active){border-color:rgba(191,0,255,.4);transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.3),0 0 28px rgba(191,0,255,.1)}
.landing-card:hover::before{opacity:1}
.landing-card:hover::after{left:140%}
.landing-card-icon{width:52px;height:52px;border-radius:14px;background:linear-gradient(145deg,#bf00ff,#9333ea);display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s;position:relative;z-index:1}
.landing-card:hover .landing-card-icon{transform:scale(1.1) rotate(-4deg);box-shadow:0 8px 24px rgba(191,0,255,.45)}
.landing-card h3{font-family:var(--font-system),sans-serif;font-size:17px;font-weight:600;color:#ffffff;position:relative;z-index:1;line-height:1.35;text-shadow:0 1px 10px rgba(0,0,0,.35)}
.landing-card p{font-family:'Inter',sans-serif;font-size:14px;font-weight:500;color:#ece6ff;line-height:1.65;flex:1;position:relative;z-index:1;text-shadow:0 1px 8px rgba(0,0,0,.3);max-width:100%;overflow-wrap:break-word;word-wrap:break-word}
.landing-card-cta{font-family:var(--font-system),sans-serif;font-size:13px;font-weight:600;color:#05d9e8;position:relative;z-index:1;transition:transform .25s,color .25s;text-shadow:0 1px 8px rgba(0,0,0,.3)}
.landing-card:hover .landing-card-cta{color:#67e8f9;transform:translateX(4px)}
.landing-grid .landing-card{opacity:0;transform:translateY(24px);animation:cardStaggerIn .65s cubic-bezier(.16,1,.3,1) forwards}
.landing-grid .landing-card:nth-child(1){animation-delay:.05s}
.landing-grid .landing-card:nth-child(2){animation-delay:.12s}
.landing-grid .landing-card:nth-child(3){animation-delay:.19s}
.landing-grid .landing-card:nth-child(4){animation-delay:.26s}
.landing-grid .landing-card:nth-child(5){animation-delay:.33s}
.landing-grid .landing-card:nth-child(6){animation-delay:.4s}
.landing-grid .landing-card:nth-child(7){animation-delay:.47s}
@keyframes cardStaggerIn{to{opacity:1;transform:none}}

/* How-it-works steps — break equal-card monotony */
@media(min-width:900px){
  .features--setup .features-grid{align-items:stretch}
  .features--setup .feature-card:nth-child(2){transform:translateY(-10px);border-color:rgba(5,217,232,.28);box-shadow:0 14px 36px rgba(0,0,0,.32),0 0 24px rgba(5,217,232,.08)}
}
.notif-demo-landing{margin-top:48px}
@media(max-width:768px){.page-hero{padding:110px 20px 4px}.page-hero-card{padding:36px 24px 32px}.landing-explore{padding-left:20px;padding-right:20px}}

/* ═══════════════════════════════════════════════
   LIGHT MODE — marketing pages
   ═══════════════════════════════════════════════ */
[data-theme="light"] body.glass-page{color:#0f172a}
[data-theme="light"] nav{background:rgba(255,255,255,.96)!important;border-bottom-color:rgba(124,58,237,.12)!important;box-shadow:0 1px 0 rgba(124,58,237,.08)!important}
[data-theme="light"] nav.scrolled{background:rgba(255,255,255,.99)!important;border-bottom-color:rgba(124,58,237,.18)!important}
[data-theme="light"] .nav-logo{color:#4c1d95!important}
[data-theme="light"] .nav-link{color:#5b21b6!important;font-weight:600!important}
[data-theme="light"] .nav-link:hover{color:#4c1d95!important;background:rgba(124,58,237,.08)!important}
[data-theme="light"] .nav-link.active{color:#4c1d95!important;background:rgba(124,58,237,.12)!important}
[data-theme="light"] .nav-login{color:#4c1d95!important;background:rgba(255,255,255,.95)!important;border-color:rgba(124,58,237,.22)!important}
[data-theme="light"] .hamburger span{background:#7c3aed!important}
[data-theme="light"] .mobile-menu__panel{
  background:rgba(255,255,255,.99)!important;
  border-color:rgba(124,58,237,.15)!important;
  box-shadow:0 24px 64px rgba(124,58,237,.12)!important;
}
[data-theme="light"] .mobile-menu__close{color:#6d28d9!important;background:rgba(124,58,237,.08)!important}
[data-theme="light"] .mobile-menu{background:transparent!important}
[data-theme="light"] .mobile-menu .mobile-link{color:#4c1d95!important}
[data-theme="light"] .mobile-menu .mobile-link:hover{background:rgba(124,58,237,.08)!important;color:#6d28d9!important}
[data-theme="light"] .stat{background:#fff!important;color:#0f172a}
[data-theme="light"] .stats-grid{background:rgba(255,255,255,.92)!important;border-color:rgba(124,58,237,.14)!important}
[data-theme="light"] .stat-label{color:#5b21b6!important}
[data-theme="light"] .section-title,[data-theme="light"] .landing-explore-title,[data-theme="light"] .page-hero-card h1,[data-theme="light"] .cta-box h2{color:#0f172a!important}
[data-theme="light"] .section-desc,[data-theme="light"] .landing-explore-desc,[data-theme="light"] .page-hero-card p,[data-theme="light"] .cta-box p,[data-theme="light"] .testimonials-note{color:#334155!important}
[data-theme="light"] .feature-card,[data-theme="light"] .pricing-card,[data-theme="light"] .testimonial-card,[data-theme="light"] .faq-item,[data-theme="light"] .cta-box,[data-theme="light"] .landing-card,[data-theme="light"] .page-hero-card{background:#fff!important;border-color:rgba(124,58,237,.16)!important;box-shadow:0 8px 32px rgba(124,58,237,.07)!important}
[data-theme="light"] .feature-card h3,[data-theme="light"] .pricing-header,[data-theme="light"] .faq-question,[data-theme="light"] .landing-card h3{color:#1e293b!important}
[data-theme="light"] .feature-card p,[data-theme="light"] .testimonial-text,[data-theme="light"] .faq-answer-inner,[data-theme="light"] .landing-card p,[data-theme="light"] .pricing-features li{color:#334155!important}
[data-theme="light"] .landing-card-cta,[data-theme="light"] .page-hero-card__label{color:#6d28d9!important}
[data-theme="light"] .page-hero-card__label{background:rgba(124,58,237,.08)!important;border-color:rgba(124,58,237,.18)!important}
[data-theme="light"] .btn-secondary{color:#6d28d9!important;background:#fff!important;border-color:rgba(124,58,237,.28)!important}
[data-theme="light"] .btn-pricing-outline{color:#6d28d9!important;background:rgba(124,58,237,.05)!important;border-color:rgba(124,58,237,.22)!important}
[data-theme="light"] footer p,[data-theme="light"] .mega-footer__intro p,[data-theme="light"] .mega-footer__col a,[data-theme="light"] .mega-footer__legal{color:#475569!important}
[data-theme="light"] .mega-footer__intro h2,[data-theme="light"] .mega-footer__col h3{color:#1e293b!important}
[data-theme="light"] footer{border-top-color:rgba(124,58,237,.12)!important}
[data-theme="light"] .section-divider__img{opacity:.75;filter:drop-shadow(0 0 8px rgba(124,58,237,.12))}
[data-theme="light"] .modal-box{background:#fff!important;border-color:rgba(124,58,237,.16)!important}
[data-theme="light"] .modal-close{color:#6d28d9!important;background:rgba(124,58,237,.08)!important}
[data-theme="light"] .form-label,[data-theme="light"] .form-input{color:#0f172a!important}
[data-theme="light"] .form-input{background:#fff!important;border-color:rgba(124,58,237,.22)!important}
[data-theme="light"] .form-input::placeholder{color:#64748b!important}
[data-theme="light"] #modalDesc,[data-theme="light"] .modal-switch{color:#475569!important}
[data-theme="light"] .modal-switch-btn{color:#6d28d9!important}
[data-theme="light"] #modalTitle{color:#0f172a!important}
[data-theme="light"] .grid{background-image:radial-gradient(rgba(124,58,237,.06) 1px,transparent 1px)!important}
[data-theme="light"] .pricing-annual,[data-theme="light"] .testimonial-role{color:#64748b!important}
[data-theme="light"] .testimonial-name{color:#1e293b!important}
[data-theme="light"] .faq-chevron{stroke:#7c3aed!important}
[data-theme="light"] ::-webkit-scrollbar-track{background:#f1f5f9}
[data-theme="light"] ::-webkit-scrollbar-thumb{background:rgba(124,58,237,.35)}
@media(prefers-reduced-motion:reduce){.page-hero-card,.page-hero-card__icon,.page-hero-card__label,.page-hero-card h1,.page-hero-card p,.landing-grid .landing-card{animation:none!important;opacity:1!important;transform:none!important}.page-hero-card__shine,.section-divider span{animation:none!important}}

/* ── Analytics marketing page ── */
.analytics-showcase{position:relative;z-index:2;padding:8px 24px 16px;max-width:1100px;margin:0 auto;width:100%;box-sizing:border-box}
.landing-analytics{padding:32px 24px 24px}
.landing-analytics__cta{text-align:center;margin:18px 0 0;font-size:14px;font-weight:600}
.landing-analytics__cta a{color:#d8b4fe;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:color .2s}
.landing-analytics__cta a:hover{color:#f5f0ff}
.landing-analytics__cta i{font-size:12px}
.analytics-features{padding-top:8px}
.analytics-stats{padding:8px 24px 32px;max-width:760px;margin:0 auto}
.analytics-mock{position:relative;width:100%;max-width:100%;box-sizing:border-box;background:rgba(10,15,30,.94);border:1px solid rgba(191,0,255,.22);border-radius:28px;overflow:hidden;box-shadow:0 28px 72px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08)}
.analytics-mock__chrome{display:flex;align-items:center;gap:8px;padding:12px 18px;background:rgba(17,24,39,.85);border-bottom:1px solid rgba(191,0,255,.1);border-radius:28px 28px 0 0}
.analytics-mock__dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.analytics-mock__dot--red{background:#ef4444}
.analytics-mock__dot--amber{background:#fbbf24}
.analytics-mock__dot--green{background:#22c55e}
.analytics-mock__url{flex:1;text-align:center;font-family:var(--font-system),sans-serif;font-size:11px;color:#ddd6fe;letter-spacing:.04em}
.analytics-mock__hero{display:flex;align-items:center;justify-content:space-around;gap:12px;padding:20px 22px;background:linear-gradient(135deg,rgba(191,0,255,.14),rgba(107,141,247,.08),rgba(56,189,248,.06));border-bottom:1px solid rgba(191,0,255,.12);flex-wrap:wrap;position:relative}
.analytics-mock__hero::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#bf00ff,#6B8DF7,transparent)}
.analytics-mock__hero-item{text-align:center;flex:1;min-width:90px}
.analytics-mock__hero-val{font-family:var(--font-display),sans-serif;font-size:clamp(26px,4vw,36px);color:#f0e0ff;line-height:1}
.analytics-mock__hero-label{font-size:10px;color:#e9d5ff;text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-top:6px}
.analytics-mock__hero-divider{width:1px;height:44px;background:rgba(191,0,255,.2);flex-shrink:0;border-radius:999px}
.analytics-mock__kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:16px}
.analytics-mock__kpi{background:rgba(15,23,42,.55);border:1px solid rgba(191,0,255,.08);border-radius:18px;padding:16px 14px;text-align:center}
.analytics-mock__kpi-icon{width:34px;height:34px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;background:rgba(191,0,255,.12);color:#f3e8ff;font-size:14px}
.analytics-mock__kpi-icon--blue{background:rgba(107,141,247,.12);color:#8ba8f7}
.analytics-mock__kpi-icon--green{background:rgba(52,211,153,.12);color:#6ee7b7}
.analytics-mock__kpi-icon--amber{background:rgba(251,191,36,.12);color:#fbbf24}
.analytics-mock__kpi-val{display:block;font-family:var(--font-display),sans-serif;font-size:28px;color:#f0e0ff;line-height:1}
.analytics-mock__kpi-label{display:block;font-size:11px;color:#ddd6fe;margin-top:6px}
.analytics-mock__panels{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 16px 18px}
.analytics-mock__panel{background:rgba(15,23,42,.45);border:1px solid rgba(191,0,255,.1);border-radius:20px;padding:16px;min-height:180px}
.analytics-mock__panel-title{font-family:var(--font-system),sans-serif;font-size:13px;font-weight:600;color:#f3e8ff;margin-bottom:14px}
.analytics-mock__funnel{display:flex;flex-direction:column;gap:6px}
.analytics-mock__funnel-step{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:14px;background:rgba(10,15,30,.45);border:1px solid rgba(191,0,255,.08);font-size:12px;color:#e9d5ff}
.analytics-mock__funnel-step strong{font-family:var(--font-display),sans-serif;font-size:18px;color:#f0e0ff;font-weight:400}
.analytics-mock__funnel-step--active{border-color:rgba(191,0,255,.28);background:rgba(191,0,255,.08)}
.analytics-mock__funnel-arrow{text-align:center;color:rgba(191,0,255,.45);font-size:10px;line-height:1}
.analytics-mock__bars{display:flex;align-items:flex-end;justify-content:space-between;gap:4px;height:120px;padding-top:8px}
.analytics-mock__bars span{flex:1;border-radius:999px 999px 6px 6px;background:linear-gradient(180deg,#e9d5ff,#6B8DF7);opacity:.85;min-height:8px}
.analytics-mock__leader{display:flex;flex-direction:column;gap:8px}
.analytics-mock__leader-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(10,15,30,.45);border:1px solid rgba(191,0,255,.08);font-size:12px;color:#e9d5ff}
.analytics-mock__leader-row strong{margin-left:auto;font-family:var(--font-display),sans-serif;font-size:16px;color:#f0e0ff;font-weight:400}
.analytics-mock__rank{width:22px;height:22px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:rgba(191,0,255,.15);color:#f3e8ff;font-size:11px;font-weight:700;flex-shrink:0}
[data-theme="light"] .analytics-mock{background:rgba(255,255,255,.82)!important;border-color:rgba(124,58,237,.2)!important}
[data-theme="light"] .analytics-mock__chrome{background:rgba(245,240,255,.95)!important}
[data-theme="light"] .analytics-mock__kpi,[data-theme="light"] .analytics-mock__panel{background:rgba(250,247,255,.9)!important;border-color:rgba(124,58,237,.15)!important}
[data-theme="light"] .analytics-mock__hero-val,[data-theme="light"] .analytics-mock__kpi-val,[data-theme="light"] .analytics-mock__funnel-step strong,[data-theme="light"] .analytics-mock__leader-row strong{color:#1e1035!important}
@media(max-width:900px){.analytics-mock__kpis{grid-template-columns:repeat(2,1fr)}.analytics-mock__panels{grid-template-columns:1fr}.analytics-mock__hero-divider{display:none}.analytics-mock__hero-item{flex:1 1 40%}}
@media(max-width:768px){.analytics-showcase,.analytics-stats{padding-left:20px;padding-right:20px}.analytics-mock__kpis{grid-template-columns:1fr 1fr}}

/* ── Analytics dashboard carousel ── */
.dash-carousel{
  position:relative;
  margin-top:8px;
  max-width:780px;
  margin-left:auto;
  margin-right:auto;
  padding:18px 18px 16px;
  border-radius:32px;
  background:linear-gradient(145deg,rgba(191,0,255,.12),rgba(255,106,0,.08),rgba(107,141,247,.1));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 28px 64px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  overflow:hidden;
}
.dash-carousel__meta{text-align:center;margin-bottom:14px;padding:10px 16px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
.dash-carousel__label{display:block;font-family:var(--font-display),sans-serif;font-size:clamp(18px,2.8vw,24px);letter-spacing:.04em;color:#f0e8ff;line-height:1.1}
.dash-carousel__count{display:block;font-family:var(--font-system),sans-serif;font-size:11px;color:#e9d5ff;margin-top:4px;letter-spacing:.08em;text-transform:uppercase}
.dash-carousel__stage{display:flex;align-items:stretch;gap:10px}
.dash-carousel__btn{align-self:center}
.dash-carousel__btn{width:42px;height:42px;border-radius:50%;border:1px solid rgba(191,0,255,.32);background:rgba(10,15,30,.75);color:#e9d5ff;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s,transform .2s,opacity .2s,box-shadow .2s;flex-shrink:0;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 4px 20px rgba(0,0,0,.35)}
.dash-carousel__btn:hover:not(:disabled){background:rgba(191,0,255,.22);border-color:rgba(191,0,255,.5);transform:scale(1.06);box-shadow:0 6px 24px rgba(191,0,255,.2)}
.dash-carousel__btn:disabled{opacity:.3;cursor:not-allowed}
.dash-carousel__viewport{position:relative;flex:1;min-width:0;border-radius:28px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.45);outline:1px solid rgba(191,0,255,.12);height:auto;align-self:stretch}
.dash-carousel__viewport::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;background:linear-gradient(105deg,transparent 40%,rgba(191,0,255,.12) 50%,transparent 60%);transform:translateX(-120%);z-index:4}
.dash-carousel.is-animating .dash-carousel__viewport::after{animation:dashCarouselSweep .55s cubic-bezier(.22,1,.36,1) forwards}
.dash-carousel__track{display:flex;align-items:stretch;transition:transform .48s cubic-bezier(.22,1,.36,1);will-change:transform}
.dash-carousel__slide{flex:0 0 100%;min-width:100%;box-sizing:border-box;height:auto}
.dash-carousel__slide .analytics-mock{border-radius:0;border:none;box-shadow:none;font-size:13px;overflow:hidden}
.dash-carousel .analytics-mock__chrome{padding:9px 14px}
.dash-carousel .analytics-mock__url{font-size:10px}
.dash-carousel .analytics-mock__hero{padding:14px 16px;gap:8px}
.dash-carousel .analytics-mock__hero-val{font-size:clamp(20px,2.8vw,28px)}
.dash-carousel .analytics-mock__hero-label{font-size:9px;margin-top:4px}
.dash-carousel .analytics-mock__hero-divider{height:36px}
.dash-carousel .analytics-mock__kpis{padding:10px 12px;gap:8px}
.dash-carousel .analytics-mock__kpi{padding:12px 8px}
.dash-carousel .analytics-mock__kpi-icon{width:28px;height:28px;font-size:12px;margin-bottom:8px}
.dash-carousel .analytics-mock__kpi-val{font-size:22px}
.dash-carousel .analytics-mock__kpi-label{font-size:10px}
.dash-carousel .analytics-mock__panels{padding:0 12px 12px;gap:8px}
.dash-carousel .analytics-mock__panel{min-height:0;padding:12px}
.dash-carousel .analytics-mock__linkbar{margin:0 12px 10px;padding:8px 10px;border-radius:16px;background:rgba(15,23,42,.6);border:1px solid rgba(191,0,255,.12);display:flex;align-items:center;gap:8px;flex-wrap:wrap;position:relative;overflow:visible}
.dash-carousel .analytics-mock__kpi-grid8{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 12px 10px;padding:0;position:relative}
.dash-carousel .analytics-mock__usage-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:10px}
.dash-carousel .analytics-mock__usage-row:last-child{margin-bottom:0}
.dash-carousel .analytics-mock__usage-label{flex:0 0 52px;color:#e9d5ff;font-weight:600}
.dash-carousel .analytics-mock__usage-track{flex:1;height:6px;background:rgba(10,15,30,.6);border-radius:999px;overflow:hidden}
.dash-carousel .analytics-mock__usage-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#bf00ff,#6B8DF7)}
.dash-carousel .analytics-mock__usage-val{color:#ddd6fe;font-size:9px;min-width:48px;text-align:right}
.dash-carousel .analytics-mock__funnel-h{display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap}
.dash-carousel .analytics-mock__funnel-h-step{flex:1;min-width:54px;text-align:center;padding:8px 4px;background:rgba(10,15,30,.4);border-radius:14px;border:1px solid rgba(191,0,255,.08)}
.dash-carousel .analytics-mock__funnel-h-step strong{display:block;font-family:var(--font-display),sans-serif;font-size:16px;color:#f3e8ff;font-weight:400}
.dash-carousel .analytics-mock__funnel-h-step span{font-size:8px;color:#ddd6fe;text-transform:uppercase;letter-spacing:.05em}
.dash-carousel .analytics-mock__funnel-h-arrow{color:#e9d5ff;font-size:10px;flex-shrink:0}
.dash-carousel .analytics-mock__mini-charts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dash-carousel .analytics-mock__mini-chart span{display:block;font-size:9px;color:#ddd6fe;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.dash-carousel .analytics-mock__bars--sm{height:56px;gap:3px}
.dash-carousel .analytics-mock__bars--blue span{background:linear-gradient(180deg,#38bdf8,#6B8DF7)!important;opacity:.85!important}
.dash-carousel .analytics-mock__panels--tall .analytics-mock__panel{align-self:stretch}
.dash-carousel .analytics-mock__panel-title{font-size:12px;margin-bottom:10px}
.dash-carousel .analytics-mock__bars{height:90px}
.dash-carousel .analytics-mock__app{min-height:0}
.dash-carousel .analytics-mock__sidebar{width:88px;padding:10px 7px;gap:4px}
.dash-carousel .analytics-mock__sidebar-logo{width:26px;height:26px;margin-bottom:6px}
.dash-carousel .analytics-mock__nav{font-size:9px;padding:6px 7px;gap:5px}
.dash-carousel .analytics-mock__nav i{font-size:9px;width:12px}
.dash-carousel .analytics-mock__main{padding:10px 12px 12px}
.dash-carousel .analytics-mock__dash-header h3{font-size:clamp(18px,2.5vw,22px)}
.dash-carousel .analytics-mock__dash-header p{font-size:11px}
.dash-carousel .analytics-mock__refresh{font-size:10px;padding:5px 9px}
.dash-carousel .analytics-mock__linkbar{padding:8px 10px;margin-bottom:10px;gap:8px}
.dash-carousel .analytics-mock__linkbar input{font-size:10px;padding:6px 8px;min-width:120px}
.dash-carousel .analytics-mock__copy{font-size:9px;padding:5px 8px}
.dash-carousel .analytics-mock__kpi-grid8{gap:8px;margin-bottom:10px}
.dash-carousel .analytics-mock__kpi-full{padding:10px 8px}
.dash-carousel .analytics-mock__kpi-full-icon{width:26px;height:26px;font-size:11px;margin-bottom:8px}
.dash-carousel .analytics-mock__kpi-full-val{font-size:20px}
.dash-carousel .analytics-mock__kpi-full-label{font-size:10px}
.dash-carousel .analytics-mock__kpi-full-delta{font-size:9px;margin-top:4px}
.dash-carousel .analytics-mock__dash-block{padding:12px;margin-bottom:10px}
.dash-carousel .analytics-mock__dash-block h4{font-size:14px}
.dash-carousel .analytics-mock__dash-block p.sub{font-size:11px;margin-bottom:10px}
.dash-carousel .analytics-mock__funnel-h-step{padding:10px 6px}
.dash-carousel .analytics-mock__funnel-h-step strong{font-size:18px}
.dash-carousel .analytics-mock__funnel-h-step span{font-size:9px}
.dash-carousel .analytics-mock__charts2{gap:8px}
.dash-carousel .analytics-mock__table{font-size:10px}
.dash-carousel .analytics-mock__table th{font-size:8px;padding:6px 8px}
.dash-carousel .analytics-mock__table td{padding:7px 8px}
.dash-carousel .analytics-mock__leader-row{padding:8px 10px;font-size:11px}
.dash-carousel .analytics-mock__leader-meta{font-size:9px}
.dash-carousel__dots{display:flex;justify-content:center;gap:8px;margin-top:14px}
.dash-carousel__dot{width:10px;height:10px;border-radius:999px;border:none;background:rgba(191,0,255,.25);cursor:pointer;padding:0;transition:transform .25s,background .25s,width .25s}
.dash-carousel__dot.is-active{background:#e9d5ff;width:28px;transform:scale(1.05)}
.dash-carousel__hint{text-align:center;font-family:'Inter',sans-serif;font-size:14px;font-weight:500;color:#ece6ff;margin-top:14px;text-shadow:0 1px 10px rgba(0,0,0,.35)}
.dash-carousel__hint i{color:#e9d5ff;font-style:normal}
@keyframes dashCarouselSweep{to{opacity:1;transform:translateX(120%)}}

/* Section info bubbles */
.dash-hotspot-wrap{position:relative;overflow:visible}
.dash-hotspot{position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;border:1px solid rgba(191,0,255,.45);background:rgba(15,23,42,.92);color:#f3e8ff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px;padding:0;z-index:12;pointer-events:auto;transition:background .15s,border-color .15s,box-shadow .15s;-webkit-tap-highlight-color:transparent}
.dash-hotspot:hover,.dash-hotspot.is-open{background:rgba(191,0,255,.28);border-color:rgba(191,0,255,.6);box-shadow:0 0 0 2px rgba(191,0,255,.15)}
.dash-hotspot__bubble{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.dash-hotspot--linkbar{top:50%;right:8px;transform:translateY(-50%)}
.dash-hotspot--kpi{top:6px;right:6px;width:20px;height:20px;font-size:9px}
.analytics-mock__panel.dash-hotspot-wrap,.analytics-mock__linkbar.dash-hotspot-wrap,.analytics-mock__kpi-full.dash-hotspot-wrap{position:relative}
.dash-tip{position:fixed!important;z-index:10050!important;max-width:min(280px,calc(100vw - 24px));padding:12px 36px 12px 14px;border-radius:12px;background:rgba(10,15,30,.98);border:1px solid rgba(191,0,255,.4);color:#e9d5ff;font-size:12px;line-height:1.55;text-align:left;box-shadow:0 16px 40px rgba(0,0,0,.55);pointer-events:auto;opacity:1;transform:none;overflow:visible}
.dash-tip[hidden]{display:none!important}
.dash-tip__title{display:block;font-family:var(--font-system),sans-serif;font-size:13px;color:#f0e0ff;margin:0 0 4px;font-weight:600}
.dash-tip__body{margin:0;color:#e9d5ff;font-size:12px;line-height:1.5}
.dash-tip__close{position:absolute;top:6px;right:6px;width:22px;height:22px;border:none;border-radius:6px;background:rgba(191,0,255,.12);color:#f3e8ff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px;padding:0;transition:background .15s}
.dash-tip__close:hover{background:rgba(191,0,255,.25);color:#fff}

/* Slide 2 & 3 — real dashboard layout */
.analytics-mock__app{display:flex;min-height:420px;border-radius:0 0 28px 28px;overflow:hidden}
.analytics-mock__sidebar{width:118px;flex-shrink:0;background:linear-gradient(180deg,#0f172a,#0a0f1e);border-right:1px solid rgba(191,0,255,.1);padding:14px 10px;display:flex;flex-direction:column;gap:6px;border-radius:0 0 0 28px}
.analytics-mock__sidebar-logo{width:32px;height:32px;border-radius:12px;background:linear-gradient(145deg,#bf00ff,#9333ea);margin-bottom:8px}
.analytics-mock__nav{font-size:10px;color:#ddd6fe;padding:8px 10px;border-radius:12px;display:flex;align-items:center;gap:8px}
.analytics-mock__nav i{width:14px;text-align:center;font-size:11px}
.analytics-mock__nav.is-active{background:rgba(191,0,255,.16);color:#f0e8ff;border:1px solid rgba(191,0,255,.22)}
.analytics-mock__main{flex:1;padding:14px 16px 18px;min-width:0;overflow-x:auto}
.analytics-mock__dash-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.analytics-mock__dash-header h3{font-family:var(--font-display),sans-serif;font-size:clamp(22px,3vw,28px);color:#f3e8ff;margin:0;line-height:1}
.analytics-mock__dash-header p{font-family:var(--font-body),cursive;font-size:13px;color:#ddd6fe;margin:4px 0 0}
.analytics-mock__refresh{font-size:11px;color:#e9d5ff;padding:6px 12px;border-radius:12px;border:1px solid rgba(191,0,255,.2);background:rgba(191,0,255,.08);white-space:nowrap}
.analytics-mock__linkbar{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:rgba(15,23,42,.6);border:1px solid rgba(191,0,255,.12);margin-bottom:12px;flex-wrap:wrap}
.analytics-mock__linkbar label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#e9d5ff;white-space:nowrap}
.analytics-mock__linkbar input{flex:1;min-width:160px;padding:8px 12px;border-radius:12px;border:1px solid rgba(191,0,255,.15);background:rgba(10,15,30,.5);color:#f3e8ff;font-size:11px;font-family:var(--font-system),sans-serif}
.analytics-mock__copy{font-size:10px;padding:6px 10px;border-radius:10px;border:1px solid rgba(191,0,255,.2);color:#e9d5ff;background:rgba(191,0,255,.08)}
.analytics-mock__kpi-grid8{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.analytics-mock__kpi-full{background:rgba(15,23,42,.55);border:1px solid rgba(191,0,255,.08);border-radius:18px;padding:14px 12px;position:relative}
.analytics-mock__kpi-full-icon{width:32px;height:32px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:13px;margin-bottom:10px}
.analytics-mock__kpi-full-val{font-family:var(--font-display),sans-serif;font-size:26px;color:#f0e0ff;line-height:1}
.analytics-mock__kpi-full-label{font-size:11px;color:#ddd6fe;margin-top:4px}
.analytics-mock__kpi-full-delta{font-size:10px;margin-top:6px;font-weight:600;color:#6ee7b7}
.analytics-mock__kpi-full-delta.neutral{color:#e9d5ff}
.analytics-mock__dash-block{background:rgba(15,23,42,.45);border:1px solid rgba(191,0,255,.1);border-radius:20px;padding:14px;margin-bottom:12px;position:relative}
.analytics-mock__dash-block h4{font-family:var(--font-display),sans-serif;font-size:16px;color:#f3e8ff;margin:0 0 4px;letter-spacing:.02em}
.analytics-mock__dash-block p.sub{font-family:var(--font-body),cursive;font-size:12px;color:#ddd6fe;margin:0 0 12px}
.analytics-mock__usage-row{display:flex;align-items:center;gap:12px;margin-bottom:10px;font-size:11px}
.analytics-mock__usage-row:last-child{margin-bottom:0}
.analytics-mock__usage-label{flex:0 0 110px;color:#e9d5ff;font-weight:600}
.analytics-mock__usage-track{flex:1;height:7px;background:rgba(10,15,30,.6);border-radius:999px;overflow:hidden}
.analytics-mock__usage-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#bf00ff,#6B8DF7)}
.analytics-mock__usage-val{color:#ddd6fe;min-width:64px;text-align:right}
.analytics-mock__funnel-h{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.analytics-mock__funnel-h-step{flex:1;min-width:80px;text-align:center;padding:14px 8px;background:rgba(10,15,30,.4);border-radius:12px;border:1px solid rgba(191,0,255,.08)}
.analytics-mock__funnel-h-step strong{display:block;font-family:var(--font-display),sans-serif;font-size:22px;color:#f3e8ff;font-weight:400}
.analytics-mock__funnel-h-step span{font-size:10px;color:#ddd6fe;text-transform:uppercase;letter-spacing:.06em}
.analytics-mock__funnel-h-arrow{color:#e9d5ff;font-size:14px}
.analytics-mock__charts2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.analytics-mock__table{width:100%;border-collapse:collapse;font-size:11px}
.analytics-mock__table th{text-align:left;padding:8px 10px;color:#ddd6fe;font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:9px;border-bottom:1px solid rgba(191,0,255,.1)}
.analytics-mock__table td{padding:9px 10px;color:#e9d5ff;border-bottom:1px solid rgba(191,0,255,.05)}
.analytics-mock__table tr:last-child td{border-bottom:none}
.analytics-mock__table .name{color:#f3e8ff;font-weight:600}
.analytics-mock__table .ok{color:#6ee7b7}
.analytics-mock__table .badge{font-size:9px;padding:2px 6px;border-radius:5px;background:rgba(191,0,255,.12);color:#e9d5ff}
.analytics-mock__table .wa{color:#25d366}
.analytics-mock__leader-full .analytics-mock__leader-row{padding:12px}
.analytics-mock__leader-meta{font-size:10px;color:#ddd6fe;margin-top:2px}
@media(max-width:900px){.analytics-mock__app{flex-direction:column}.analytics-mock__sidebar{width:100%;flex-direction:row;flex-wrap:wrap;padding:10px}.analytics-mock__sidebar-logo{margin:0 8px 0 0}.analytics-mock__kpi-grid8{grid-template-columns:repeat(2,1fr)}.analytics-mock__charts2{grid-template-columns:1fr}.analytics-mock__funnel-h-arrow{display:none}}
@media(max-width:640px){.dash-carousel{max-width:100%}.dash-carousel__stage{position:relative;gap:0}.dash-carousel__btn{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:36px;height:36px;font-size:13px}.dash-carousel__btn--prev{left:4px}.dash-carousel__btn--next{right:4px}.dash-carousel__btn:hover:not(:disabled){transform:translateY(-50%) scale(1.06)}.dash-carousel__viewport{border-radius:18px}.analytics-mock__kpi-grid8{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.dash-carousel__track{transition:none}.dash-carousel__viewport::after,.dash-carousel__slide.is-active .analytics-mock__hero-item,.dash-carousel__slide.is-active .analytics-mock__kpi,.dash-carousel__slide.is-active .analytics-mock__panel,.dash-carousel__slide.is-active .analytics-mock__dash-block{animation:none!important}}

/* ── Sitewide: prevent card text clipping (tilt / display fonts) ── */
.features,.landing-explore,.page-main,.analytics-showcase{overflow:visible}
body.glass-page .feature-card,
body.glass-page .landing-card,
body.glass-page .pricing-card,
body.glass-page .cta-box,
body.glass-page .page-hero-card,
body.glass-page .testimonial-card,
body.glass-page .faq-item,
body.glass-page .stat{overflow:visible!important}
body.glass-page .feature-card h3,
body.glass-page .landing-card h3,
body.glass-page .pricing-header,
body.glass-page .faq-question{line-height:1.35!important;overflow-wrap:break-word!important;word-wrap:break-word!important}
body.glass-page .feature-card p,
body.glass-page .landing-card p,
body.glass-page .section-desc,
body.glass-page .page-hero-card p{overflow-wrap:break-word!important;word-wrap:break-word!important;max-width:100%!important}
body.glass-page .section-title,
body.glass-page .landing-explore-title,
body.glass-page .page-hero-card h1{line-height:1.15!important}
body.glass-page .modal-box{overflow:visible!important}
body.glass-page .modal-box #modalTitle,
body.glass-page .modal-box .section-title,
body.glass-page .cta-box h2{line-height:1.22!important;overflow-wrap:break-word!important;word-wrap:break-word!important}
body.glass-page .form-label,
body.glass-page .section-label{line-height:1.4!important;overflow-wrap:break-word!important;word-wrap:break-word!important}
body.dashboard-page .card,
body.dashboard-page .staff-card,
body.dashboard-page .staff-create-panel{overflow:visible!important}
body.dashboard-page .card-title,
body.dashboard-page .form-label,
body.dashboard-page .share-link-label{overflow-wrap:break-word!important;word-wrap:break-word!important}

.btn-google-oauth{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#f5f0ff;font-weight:600;font-size:14px;text-decoration:none;transition:background .2s,border-color .2s;margin-bottom:4px}
.btn-google-oauth:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22)}
.btn-google-oauth svg{flex-shrink:0}
.oauth-divider{display:flex;align-items:center;gap:12px;margin:16px 0;font-size:12px;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.06em}
.oauth-divider::before,.oauth-divider::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.1)}
[data-theme="light"] .btn-google-oauth{background:#fff;border-color:rgba(15,23,42,.12);color:#0f172a}
[data-theme="light"] .btn-google-oauth:hover{background:#f8fafc;border-color:rgba(15,23,42,.2)}
[data-theme="light"] .oauth-divider{color:rgba(15,23,42,.45)}
[data-theme="light"] .oauth-divider::before,[data-theme="light"] .oauth-divider::after{background:rgba(15,23,42,.12)}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.site-search input[type="search"]{width:100%;padding:10px 12px;border-radius:10px;border:1px solid rgba(191,0,255,.2);background:rgba(15,23,42,.5);color:#fff;font-size:14px}
.site-search input[type="search"]:focus{outline:3px solid #005fcc;outline-offset:2px}
[data-theme="light"] .site-search input[type="search"]{background:#fff;color:#0f172a;border-color:rgba(124,58,237,.22)}

/* --- klikr-luxury.css --- */

/* Klikr — luxury dividers + 10 premium animations */

/* ── Luxury dividers (orange crest — transparent PNG) ── */
.luxury-divider,
.section-divider {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin: 0 auto;
  padding: 32px 24px 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  background: none;
  mix-blend-mode: normal;
  clear: both;
  pointer-events: none;
}

.luxury-divider--wide,
.section-divider--wide {
  max-width: 960px;
}

.section-divider__img,
.luxury-divider__img {
  display: block;
  width: min(100%, 720px);
  height: auto;
  max-height: 52px;
  object-fit: contain;
  opacity: 0.95;
  filter: drop-shadow(0 0 14px rgba(255, 106, 0, 0.22));
}

.section-divider--wide .section-divider__img,
.luxury-divider--wide .section-divider__img {
  width: min(100%, 860px);
  max-height: 56px;
}

.luxury-divider__line,
.luxury-divider__emblem,
.section-divider::before,
.section-divider::after,
.section-divider > span:not(.section-divider__img) {
  display: none !important;
}

[data-theme="light"] .section-divider__img {
  opacity: 0.88;
  filter: drop-shadow(0 0 10px rgba(255, 106, 0, 0.15));
}

[data-theme="light"] .luxury-divider__emblem {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(124, 58, 237, 0.22);
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.1);
}

@keyframes luxuryRingPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.12); opacity: 0.75; }
}

@keyframes luxuryDiamondSpin {
  from { transform: rotate(45deg); }
  to { transform: rotate(405deg); }
}

/* ── Animation 1: Headline gradient shimmer ── */
.anim-shimmer em,
.cosmic-hero h1 em {
  background: linear-gradient(90deg, #e040fb, #bf00ff, #38bdf8, #e040fb);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textShimmer 4s linear infinite;
}

@keyframes textShimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* ── Animation 2: CTA glow pulse ── */
.anim-glow-pulse,
.cosmic-hero__cta,
.btn-primary.open-modal-btn {
  animation: ctaGlowPulse 2.8s ease-in-out infinite;
}

@keyframes ctaGlowPulse {
  0%, 100% { box-shadow: 0 8px 36px rgba(176, 38, 255, 0.45), 0 0 0 0 rgba(191, 0, 255, 0); }
  50% { box-shadow: 0 12px 44px rgba(176, 38, 255, 0.6), 0 0 0 8px rgba(191, 0, 255, 0.08); }
}

/* ── Animation 3: Nav logo shine sweep ── */
.nav-logo img {
  position: relative;
}

.nav-logo {
  position: relative;
  overflow: hidden;
}

/* Nav logo shine disabled — looked glitchy on small mark */
.nav-logo::after {
  display: none;
}

@keyframes logoShine {
  0%, 70%, 100% { left: -120%; }
  85% { left: 140%; }
}

/* ── Animation 4: Stat number aurora ── */
.stat-num.anim-aurora {
  animation: statAurora 3s ease-in-out infinite;
}

@keyframes statAurora {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(191, 0, 255, 0.3)); }
  50% { filter: drop-shadow(0 0 18px rgba(224, 64, 251, 0.55)); }
}

/* ── Animation 5: Landing card border trace ── */
.landing-card {
  position: relative;
}

.landing-card .landing-card-border {
  position: absolute;
  inset: -1px;
  border-radius: 21px;
  padding: 1px;
  background: linear-gradient(var(--border-angle, 0deg), #bf00ff, transparent 40%, #38bdf8, transparent 70%, #e040fb);
  -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;
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
  animation: borderRotate 4s linear infinite;
  animation-play-state: paused;
}

.landing-card:hover .landing-card-border {
  opacity: 1;
  animation-play-state: running;
}

@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes borderRotate {
  to { --border-angle: 360deg; }
}

/* ── Animation 6: Page hero card particles ── */
.page-hero-card__particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.page-hero-card__particles span {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(191, 0, 255, 0.6);
  animation: particleDrift 6s ease-in-out infinite;
}

.page-hero-card__particles span:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; }
.page-hero-card__particles span:nth-child(2) { left: 80%; top: 30%; animation-delay: 1.2s; }
.page-hero-card__particles span:nth-child(3) { left: 60%; top: 70%; animation-delay: 2.4s; }
.page-hero-card__particles span:nth-child(4) { left: 25%; top: 75%; animation-delay: 3.6s; }
.page-hero-card__particles span:nth-child(5) { left: 90%; top: 60%; animation-delay: 4.8s; }

@keyframes particleDrift {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; }
  50% { transform: translate(12px, -20px) scale(1.5); opacity: 1; }
}

/* ── Animation 7: Feature icon orbit ring ── */
.feature-icon.anim-orbit {
  position: relative;
}

.feature-icon.anim-orbit::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 26px;
  border: 1px dashed rgba(191, 0, 255, 0.35);
  animation: orbitSpin 12s linear infinite;
}

@keyframes orbitSpin {
  to { transform: rotate(360deg); }
}

/* ── Animation 8: Testimonial star twinkle ── */
.testimonial-stars.anim-twinkle {
  animation: starTwinkle 2s ease-in-out infinite;
}

@keyframes starTwinkle {
  0%, 100% { opacity: 1; text-shadow: 0 0 8px rgba(251, 191, 36, 0.4); }
  50% { opacity: 0.85; text-shadow: 0 0 16px rgba(251, 191, 36, 0.8); }
}

/* ── Animation 9: CTA box aurora background ── */
.cta-box.anim-aurora-bg::before {
  animation: ctaAurora 10s ease-in-out infinite !important;
}

@keyframes ctaAurora {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.8; }
  33% { transform: translate(-12%, 8%) scale(1.1); opacity: 1; }
  66% { transform: translate(10%, -6%) scale(0.95); opacity: 0.9; }
}

/* ── Animation 10: Scroll reveal scale bounce ── */
.reveal.anim-bounce.visible {
  animation: revealBounce 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes revealBounce {
  from { opacity: 0; transform: translateY(40px) scale(0.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Mobile menu logo ── */
.mobile-menu-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(191, 0, 255, 0.15);
}

.mobile-menu-logo img {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(191, 0, 255, 0.35);
}

.mobile-menu-logo span {
  font-family: var(--font-system);
  font-size: 22px;
  font-weight: 700;
  color: #d8b4fe;
}

[data-theme="light"] .mobile-menu-logo span { color: #4c1d95; }
[data-theme="light"] .mobile-menu-logo { border-bottom-color: rgba(124, 58, 237, 0.15); }

@media (prefers-reduced-motion: reduce) {
  .anim-shimmer em,
  .cosmic-hero h1 em,
  .anim-glow-pulse,
  .cosmic-hero__cta,
  .nav-logo::after,
  .stat-num.anim-aurora,
  .landing-card .landing-card-border,
  .page-hero-card__particles span,
  .feature-icon.anim-orbit::after,
  .testimonial-stars.anim-twinkle,
  .luxury-divider__emblem::after,
  .section-divider span::after {
    animation: none !important;
  }
}


/* --- klikr-subtle.css --- */

/* Klikr — subtle minimal animations */

/* 1. Soft rise on scroll */
.anim-soft-rise {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.anim-soft-rise.visible,
.reveal.anim-soft-rise.visible {
  opacity: 1;
  transform: none;
  animation: none;
}

/* 2. Divider logo gentle breathe */
.luxury-divider__logo {
  animation: logoBreathe 4s ease-in-out infinite;
}

@keyframes logoBreathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.04); opacity: 0.92; }
}

/* 3. Divider line shimmer */
.luxury-divider__line {
  background-size: 200% 100%;
  animation: lineShimmer 6s ease-in-out infinite;
}

@keyframes lineShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* 4. Device screen soft pulse */
.hero-device__screen {
  animation: screenSoftPulse 5s ease-in-out infinite;
}

.hero-device--tablet .hero-device__screen { animation-delay: 0.6s; }
.hero-device--desktop .hero-device__screen { animation-delay: 1.2s; }

@keyframes screenSoftPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.94; }
}

/* 5. About value icon settle */
.about-value-icon {
  animation: iconSettle 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.about-values .about-value:nth-child(1) .about-value-icon { animation-delay: 0.05s; }
.about-values .about-value:nth-child(2) .about-value-icon { animation-delay: 0.12s; }
.about-values .about-value:nth-child(3) .about-value-icon { animation-delay: 0.19s; }
.about-values .about-value:nth-child(4) .about-value-icon { animation-delay: 0.26s; }

@keyframes iconSettle {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

/* Nav link underline — klikr-nav.css */

/* 7. Hero logo micro drift */
.hero-logo-spin img {
  animation: heroMicroDrift 7s ease-in-out infinite;
}

@keyframes heroMicroDrift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* 8. Card rest shadow + 3D tilt support */
.landing-card,
.feature-card,
.about-value,
.about-hero-card,
.page-hero-card {
  transition: box-shadow 0.35s ease, transform 0.12s ease-out, border-color 0.35s ease;
  transform-style: preserve-3d;
  will-change: transform;
}

.page-hero-card.tilt-active,
.landing-card.tilt-active,
.tilt-card.tilt-active {
  opacity: 1 !important;
  filter: none !important;
  z-index: 3;
}

.page-hero-card:hover,
.landing-card.tilt-active {
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.4), 0 0 40px rgba(191, 0, 255, 0.12);
}

/* 9. Page hero logo icon fade */
.page-hero-card__icon--logo img {
  animation: heroIconFade 0.9s ease 0.15s both;
}

@keyframes heroIconFade {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: none; }
}

/* 10. CTA button soft glow (minimal) */
.cosmic-hero__cta,
.btn-primary.open-modal-btn {
  animation: ctaSoftGlow 3.5s ease-in-out infinite;
}

@keyframes ctaSoftGlow {
  0%, 100% { box-shadow: 0 8px 28px rgba(176, 38, 255, 0.35); }
  50% { box-shadow: 0 10px 34px rgba(176, 38, 255, 0.48); }
}

/* 11. Nav pill ambient glow */
body.glass-page.scene-bg .nav-pill {
  animation: navAmbientGlow 5s ease-in-out infinite;
}

@keyframes navAmbientGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(176, 0, 255, 0); }
  50% { box-shadow: 0 0 28px rgba(176, 0, 255, 0.12); }
}

/* 12. Stat cards soft inner pulse */
body.scene-bg .stat {
  animation: statSoftPulse 4.5s ease-in-out infinite;
}

body.scene-bg .stats-grid .stat:nth-child(2) { animation-delay: 0.6s; }
body.scene-bg .stats-grid .stat:nth-child(3) { animation-delay: 1.2s; }

@keyframes statSoftPulse {
  0%, 100% { box-shadow: inset 0 0 0 rgba(191, 0, 255, 0); }
  50% { box-shadow: inset 0 0 24px rgba(191, 0, 255, 0.06); }
}

/* 13. Explore / section titles gradient drift */
.landing-explore-title,
.section-title,
.page-hero-card h1 {
  background-size: 200% auto;
  animation: titleGradientDrift 8s ease-in-out infinite;
}

@keyframes titleGradientDrift {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.08); }
}

/* 14. Testimonial cards gentle hover float */
.testimonial-card {
  animation: testimonialDrift 6s ease-in-out infinite;
}

.testimonials-marquee .testimonial-card:nth-child(even) {
  animation-delay: 1.5s;
}

@keyframes testimonialDrift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* 15. CTA box border trace */
.cta-box {
  position: relative;
}

.cta-box::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(191, 0, 255, 0.35) 45%,
    transparent 70%
  );
  background-size: 220% 220%;
  animation: ctaBorderTrace 7s linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.55;
}

@keyframes ctaBorderTrace {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .anim-soft-rise,
  .luxury-divider__logo,
  .luxury-divider__line,
  .hero-device__screen,
  .about-value-icon,
  .hero-logo-spin img,
  .page-hero-card__icon--logo img,
  .cosmic-hero__cta,
  .btn-primary.open-modal-btn,
  body.glass-page.scene-bg .nav-pill,
  body.scene-bg .stat,
  .landing-explore-title,
  .section-title,
  .page-hero-card h1,
  .testimonial-card,
  .cta-box::after {
    animation: none !important;
    transition: none !important;
  }
}


/* --- klikr-scene-bg.css --- */

/* Klikr — Canva-reference scene background
   Layer 1: full-viewport fluid video (unchanged, always full screen)
   Layer 2: edge mesh overlay (alternates left/right, blends into center) */

html {
  background: #000000;
}

html.has-video-bg-root,
html:has(body.has-video-bg) {
  background: #000000 !important;
}

body.scene-bg,
body.scene-bg.has-video-bg {
  background: transparent !important;
  color: #f4f0ff;
  color-scheme: dark;
  position: relative;
  z-index: 0;
  min-height: 100vh;
  isolation: isolate;
}

body.scene-bg.has-video-bg > :not(#videoBg):not(#videoBgSide):not(.video-bg):not(.video-bg-side):not(.modal-overlay):not(.klikr-install-overlay):not(.mobile-menu):not(#dashTip):not(.dash-tip):not(#dashInfoTip):not(.dash-info-float) {
  position: relative;
  z-index: 2;
}

body.scene-bg.has-video-bg > nav {
  position: fixed !important;
  z-index: 50 !important;
}

body.scene-bg.has-video-bg > .mobile-menu {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
}

/* iOS/Android: negative z-index on fixed video shows frame 0 but won't advance — keep at 0, content stacks above */
#videoBg,
.video-bg {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.video-bg__media {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.video-bg__overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(10, 10, 15, 0.36) !important;
  pointer-events: none !important;
}

/* ── Side mesh overlay (iridescent ribbon on edge) ── */
#videoBgSide,
.video-bg-side {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  width: clamp(260px, 34vw, 440px) !important;
  height: 100dvh !important;
  height: 100vh !important;
  background: transparent !important;
  z-index: 1 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  opacity: 1;
}

.video-bg-side--left::before,
.video-bg-side--right::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.85;
}

.video-bg-side--left::before {
  background: linear-gradient(
    90deg,
    rgba(191, 0, 255, 0.38) 0%,
    rgba(255, 106, 0, 0.18) 42%,
    transparent 100%
  );
}

.video-bg-side--right::before {
  background: linear-gradient(
    270deg,
    rgba(191, 0, 255, 0.38) 0%,
    rgba(255, 106, 0, 0.18) 42%,
    transparent 100%
  );
}

.video-bg-side--left {
  left: 0 !important;
  right: auto !important;
  -webkit-mask-image: linear-gradient(
    to right,
    #000 0%,
    #000 48%,
    rgba(0, 0, 0, 0.5) 72%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    #000 0%,
    #000 48%,
    rgba(0, 0, 0, 0.5) 72%,
    transparent 100%
  );
}

.video-bg-side--right {
  right: 0 !important;
  left: auto !important;
  -webkit-mask-image: linear-gradient(
    to left,
    #000 0%,
    #000 48%,
    rgba(0, 0, 0, 0.5) 72%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to left,
    #000 0%,
    #000 48%,
    rgba(0, 0, 0, 0.5) 72%,
    transparent 100%
  );
}

.video-bg-side__media {
  position: absolute !important;
  top: 0 !important;
  width: 155% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  background: transparent !important;
  mix-blend-mode: lighten;
  z-index: 1;
}

.video-bg-side--left .video-bg-side__media {
  left: 0 !important;
  right: auto !important;
  object-position: left center !important;
}

.video-bg-side--right .video-bg-side__media {
  left: auto !important;
  right: 0 !important;
  object-position: right center !important;
}

/* Transparent sections so video shows through */
body.scene-bg section,
body.scene-bg header,
body.scene-bg main,
body.scene-bg footer,
body.scene-bg .stats,
body.scene-bg .landing-explore,
body.scene-bg .testimonials,
body.scene-bg .page-main,
body.scene-bg .about-page-content,
body.scene-bg .about-page-hero,
body.scene-bg .cosmic-hero,
body.scene-bg .page-hero,
body.scene-bg .cta,
body.scene-bg .luxury-divider,
body.scene-bg nav {
  background: transparent !important;
  background-color: transparent !important;
}

body.scene-bg.video-bg-static {
  background:
    radial-gradient(ellipse 70% 55% at 50% 40%, rgba(176, 0, 255, 0.15) 0%, transparent 60%),
    #000000 !important;
}

/* Glass UI readability on video */
body.scene-bg .nav-pill,
body.scene-bg.about-page .nav-pill {
  width: fit-content !important;
  max-width: min(1160px, calc(100% - 40px)) !important;
}

body.scene-bg .page-hero-card,
body.scene-bg .landing-card,
body.scene-bg .feature-card,
body.scene-bg .pricing-card,
body.scene-bg .stat,
body.scene-bg .testimonial-card,
body.scene-bg .faq-item,
body.scene-bg .cta-box,
body.scene-bg .about-block,
body.scene-bg .about-value,
body.scene-bg .about-hero-card,
body.scene-bg .stats-grid {
  /* Purple glass applied by klikr-neo.css — do not force black panels here */
  border-color: transparent !important;
}

body.scene-bg .cosmic-hero h1,
body.scene-bg .page-hero-card h1,
body.scene-bg .about-page-hero h1,
body.scene-bg .about-page-hero h2,
body.scene-bg .about-hero-subhead,
body.scene-bg .about-block h2,
body.scene-bg .section-title,
body.scene-bg .landing-explore-title,
body.scene-bg .landing-card h3,
body.scene-bg .feature-card h3,
body.scene-bg .pricing-card h3,
body.scene-bg .cta-box h2 {
  color: #f2f2f8 !important;
}

body.scene-bg .cosmic-hero__subtitle,
body.scene-bg .section-desc,
body.scene-bg .page-hero-card p,
body.scene-bg .about-page-hero p,
body.scene-bg .about-page-hero li,
body.scene-bg .about-hero-card p,
body.scene-bg .about-hero-card h3,
body.scene-bg .about-hero-card__kicker,
body.scene-bg .about-hero-card__eyebrow,
body.scene-bg .about-block p,
body.scene-bg .landing-card p,
body.scene-bg .landing-card h3,
body.scene-bg .feature-card p,
body.scene-bg .feature-card h3,
body.scene-bg .pricing-header,
body.scene-bg .pricing-annual,
body.scene-bg .pricing-features li,
body.scene-bg .faq-question,
body.scene-bg .faq-answer-inner,
body.scene-bg .cta-box p,
body.scene-bg .stat-label,
body.scene-bg .testimonial-text,
body.scene-bg .testimonial-name,
body.scene-bg .landing-explore-desc,
body.scene-bg .dash-carousel__hint,
body.scene-bg .dash-carousel__label,
body.scene-bg footer p {
  color: #f0ebff !important;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5) !important;
}

body.scene-bg .section-title,
body.scene-bg .landing-explore-title,
body.scene-bg .pricing-card .pricing-header,
body.scene-bg .about-hero-subhead {
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55) !important;
}

/* Site-wide bright readable text on video bg — panel glass handled by klikr-neo.css */
body.scene-bg.glass-page .feature-card,
body.scene-bg.glass-page .pricing-card,
body.scene-bg.glass-page .testimonial-card,
body.scene-bg.glass-page .faq-item,
body.scene-bg.glass-page .cta-box,
body.scene-bg.glass-page .landing-card,
body.scene-bg.glass-page .page-hero-card,
body.scene-bg.glass-page .stat,
body.scene-bg.glass-page .about-block,
body.scene-bg.glass-page .about-value,
body.scene-bg.glass-page .about-hero-card {
  /* backgrounds: klikr-neo.css purple glass — no black panels here */
  border-color: transparent !important;
}

body.scene-bg.glass-page .feature-card h3,
body.scene-bg.glass-page .landing-card h3,
body.scene-bg.glass-page .pricing-header,
body.scene-bg.glass-page .faq-question,
body.scene-bg.glass-page .section-title,
body.scene-bg.glass-page .page-hero-card h1,
body.scene-bg.glass-page .cosmic-hero h1,
body.scene-bg.glass-page .cta-box h2 {
  color: #ffffff !important;
}

body.scene-bg.glass-page .section-label,
body.scene-bg.glass-page .about-hero-card__eyebrow,
body.scene-bg.glass-page .landing-card-cta {
  color: #05d9e8 !important;
}

body.scene-bg.glass-page footer p,
body.scene-bg.glass-page footer a {
  color: rgba(240, 235, 255, 0.75) !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4) !important;
}

/* Nav on video bg */
body.scene-bg .nav-link {
  color: rgba(240, 240, 248, 0.9) !important;
}

body.scene-bg .nav-link:hover,
body.scene-bg .nav-link.active {
  color: #05d9e8 !important;
  background: rgba(0, 0, 0, 0.4) !important;
}

body.scene-bg .cosmic-hero h1 em,
body.scene-bg .about-page-hero h1 em {
  background: linear-gradient(90deg, #05d9e8, #b000ff, #ff4e3e) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* About page — max readability on video bg */
body.scene-bg.about-page .about-page-hero h1,
body.scene-bg.about-page .about-hero-subhead,
body.scene-bg.about-page .about-hero-card h3,
body.scene-bg.about-page .about-block h2,
body.scene-bg.about-page .about-value h3 {
  color: #ffffff !important;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55) !important;
}

body.scene-bg.about-page .about-hero-lead,
body.scene-bg.about-page .about-hero-close,
body.scene-bg.about-page .about-hero-tagline,
body.scene-bg.about-page .about-hero-card p,
body.scene-bg.about-page .about-block p,
body.scene-bg.about-page .about-value p {
  color: #f0ebff !important;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5) !important;
}

body.scene-bg.about-page .about-hero-card__eyebrow {
  color: #05d9e8 !important;
}

body.scene-bg.about-page .about-hero-card__kicker {
  color: #e9d5ff !important;
}

body.scene-bg.about-page .about-hero-card {
  border-color: transparent !important;
}

body.scene-bg.about-page .about-block,
body.scene-bg.about-page .about-value {
  border-color: transparent !important;
}

/* Beat klikr-hero.css muted glass-page overrides on video bg */
[data-theme="dark"] body.scene-bg.glass-page .cosmic-hero__subtitle,
[data-theme="dark"] body.scene-bg.glass-page .section-desc,
[data-theme="dark"] body.scene-bg.glass-page .hero p,
[data-theme="dark"] body.scene-bg.glass-page .feature-card p,
[data-theme="dark"] body.scene-bg.glass-page .testimonial-text,
[data-theme="dark"] body.scene-bg.glass-page .faq-answer,
[data-theme="dark"] body.scene-bg.glass-page .faq-answer-inner,
[data-theme="dark"] body.scene-bg.glass-page .landing-card p,
[data-theme="dark"] body.scene-bg.glass-page .pricing-features li,
[data-theme="dark"] body.scene-bg.glass-page .cta-box p,
[data-theme="dark"] body.scene-bg.glass-page .landing-explore-desc,
[data-theme="dark"] body.scene-bg.glass-page .page-hero-card p {
  color: #f0ebff !important;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5) !important;
}

@media (prefers-reduced-motion: reduce) {
  .video-bg__media,
  .video-bg-side__media {
    display: none !important;
  }
}

@media (max-width: 768px) {
  #videoBgSide,
  .video-bg-side {
    width: clamp(120px, 22vw, 180px) !important;
  }

  .video-bg__media,
  .video-bg-side__media {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

/* Mobile nav — compact pill on marketing pages */
@media (max-width: 768px) {
  body.glass-page.scene-bg .nav-pill {
    max-width: 100% !important;
    padding: 5px 10px 5px 12px !important;
    min-height: 48px;
    border-radius: 999px !important;
  }

  body.glass-page.scene-bg .nav-logo img {
    width: 44px !important;
    height: 44px !important;
  }

  body.glass-page.scene-bg .mobile-menu .mobile-link {
    font-size: 26px !important;
    padding: 18px 24px !important;
    min-height: 54px !important;
    max-width: min(340px, 90vw) !important;
  }

  body.glass-page.scene-bg .mobile-menu-btns {
    max-width: min(340px, 90vw) !important;
    gap: 14px !important;
    margin-top: 28px !important;
  }

  body.glass-page.scene-bg .mobile-menu-btns .btn-primary,
  body.glass-page.scene-bg .mobile-menu-btns .btn-secondary {
    font-size: 18px !important;
    padding: 18px 28px !important;
    min-height: 54px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.glass-page.scene-bg .cosmic-hero__cta {
    font-size: 17px !important;
    padding: 16px 32px !important;
    min-height: 52px !important;
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }

  body.glass-page.scene-bg .cosmic-hero__secondary {
    font-size: 16px !important;
    padding: 14px 28px !important;
    min-height: 52px !important;
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }

  body.glass-page.scene-bg .cosmic-hero__actions {
    flex-direction: column;
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── Mobile layout (class set in klikr-perf.js — works even in “desktop site” mode) ── */
html.klikr-mobile {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html.klikr-mobile body.glass-page.scene-bg {
  font-size: 16px;
}

html.klikr-mobile body.glass-page.scene-bg nav {
  padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px !important;
}

html.klikr-mobile body.glass-page.scene-bg .nav-pill {
  width: 100% !important;
  max-width: 100% !important;
  padding: 5px 10px 5px 12px !important;
  min-height: 48px !important;
  border-radius: 999px !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

html.klikr-mobile body.glass-page.scene-bg .nav-links {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

html.klikr-mobile body.glass-page.scene-bg .nav-logo {
  flex: 0 1 auto;
  min-width: 0;
}

html.klikr-mobile body.glass-page.scene-bg .nav-logo img {
  width: 44px !important;
  height: 44px !important;
}

html.klikr-mobile body.glass-page.scene-bg .nav-right {
  margin-left: auto !important;
  flex: 0 0 auto;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

html.klikr-mobile body.glass-page.scene-bg .nav-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 14px !important;
  font-size: 12px !important;
  min-height: 36px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

html.klikr-mobile body.glass-page.scene-bg .nav-login {
  display: none !important;
}

html.klikr-mobile body.glass-page.scene-bg .hamburger {
  display: flex !important;
  flex-shrink: 0 !important;
  margin-left: 0 !important;
}

html.klikr-mobile body.glass-page.scene-bg .cosmic-hero {
  padding: calc(72px + env(safe-area-inset-top, 0px)) 18px 20px !important;
  align-items: flex-start !important;
}

html.klikr-mobile body.glass-page.scene-bg .cosmic-hero__grid {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}

html.klikr-mobile body.glass-page.scene-bg .hero-logo-spin {
  display: none !important;
}

html.klikr-mobile body.glass-page.scene-bg .cosmic-hero__headline {
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  margin-bottom: 14px !important;
}

html.klikr-mobile body.glass-page.scene-bg .cosmic-hero h1 {
  font-size: 1.875rem !important;
  line-height: 1.12 !important;
  text-align: center !important;
}

html.klikr-mobile body.glass-page.scene-bg .cosmic-hero__subtitle {
  font-size: 0.9375rem !important;
  line-height: 1.55 !important;
  text-align: center !important;
  max-width: none !important;
  margin-bottom: 18px !important;
}

html.klikr-mobile body.glass-page.scene-bg .cosmic-hero__actions {
  flex-direction: column !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  gap: 10px !important;
}

html.klikr-mobile body.glass-page.scene-bg .cosmic-hero__cta {
  width: 100% !important;
  font-size: 1rem !important;
  padding: 14px 24px !important;
  min-height: 48px !important;
  justify-content: center !important;
}

html.klikr-mobile body.glass-page.scene-bg .cosmic-hero__secondary {
  font-size: 1rem !important;
  padding: 14px 24px !important;
  min-height: 48px !important;
  width: 100% !important;
  max-width: 320px !important;
  justify-content: center !important;
}

/* On mobile show a single hero phone instead of hiding all devices */
html.klikr-mobile body.glass-page.scene-bg .hero-devices {
  display: block !important;
  height: clamp(240px, 58vw, 320px);
  max-width: 300px;
  margin: 8px auto 0;
}

html.klikr-mobile body.glass-page.scene-bg .hero-device--tablet,
html.klikr-mobile body.glass-page.scene-bg .hero-device--desktop,
html.klikr-mobile body.glass-page.scene-bg .hero-devices__glow {
  display: none !important;
}

html.klikr-mobile body.glass-page.scene-bg .hero-device--phone {
  left: 50%;
  right: auto;
  bottom: 0;
  width: clamp(110px, 32vw, 140px);
  height: clamp(220px, 64vw, 280px);
  animation: deviceFloatPhoneMobile 5.5s ease-in-out infinite;
}

@keyframes deviceFloatPhoneMobile {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(-3deg); }
  50% { transform: translateX(-50%) translateY(-10px) rotate(-1deg); }
}

html.klikr-mobile body.glass-page.scene-bg .stats {
  padding: 16px 20px 24px !important;
}

html.klikr-mobile body.glass-page.scene-bg .stats-grid {
  grid-template-columns: 1fr !important;
  max-width: none !important;
}

html.klikr-mobile body.glass-page.scene-bg .stat {
  padding: 22px 16px !important;
}

html.klikr-mobile body.glass-page.scene-bg .stat-num {
  font-size: 2.75rem !important;
}

html.klikr-mobile body.glass-page.scene-bg .stat-label {
  font-size: 1rem !important;
}

html.klikr-mobile body.glass-page.scene-bg .landing-explore {
  padding: 8px 20px 32px !important;
}

html.klikr-mobile body.glass-page.scene-bg .landing-explore-title {
  font-size: 1.75rem !important;
}

html.klikr-mobile body.glass-page.scene-bg .landing-explore-desc {
  font-size: 1rem !important;
}

html.klikr-mobile body.glass-page.scene-bg .landing-grid {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

html.klikr-mobile body.glass-page.scene-bg .landing-card {
  padding: 22px 20px !important;
  min-height: auto !important;
}

html.klikr-mobile body.glass-page.scene-bg .landing-card h3 {
  font-size: 1.25rem !important;
}

html.klikr-mobile body.glass-page.scene-bg .landing-card p {
  font-size: 1rem !important;
  line-height: 1.6 !important;
}

html.klikr-mobile body.glass-page.scene-bg .landing-card-cta {
  font-size: 0.95rem !important;
}

html.klikr-mobile body.glass-page.scene-bg .page-hero {
  padding: calc(96px + env(safe-area-inset-top, 0px)) 20px 8px !important;
}

html.klikr-mobile body.glass-page.scene-bg .page-hero-card h1 {
  font-size: 2rem !important;
}

html.klikr-mobile body.glass-page.scene-bg .page-hero-card p {
  font-size: 1.05rem !important;
}

html.klikr-mobile body.glass-page.scene-bg .mobile-menu .mobile-link {
  font-size: 1.625rem !important;
  min-height: 54px !important;
}

html.klikr-mobile body.glass-page.scene-bg .mobile-menu-btns .btn-primary,
html.klikr-mobile body.glass-page.scene-bg .mobile-menu-btns .btn-secondary {
  font-size: 1.1rem !important;
  min-height: 54px !important;
}

html.klikr-mobile body.glass-page.scene-bg #videoBgSide,
html.klikr-mobile body.glass-page.scene-bg .video-bg-side {
  width: clamp(100px, 18vw, 140px) !important;
}

html.klikr-mobile body.glass-page.scene-bg .testimonials-marquee {
  animation: marquee 32s linear infinite !important;
}

html.klikr-mobile body.glass-page.scene-bg .testimonial-card {
  animation: cardFloat 5s ease-in-out infinite var(--float-delay, 0s) !important;
}

/* ── Light mode — bright surfaces, dark readable text (overrides video-bg white text) ── */
[data-theme="light"] html,
[data-theme="light"] html.has-video-bg-root,
[data-theme="light"] html:has(body.has-video-bg) {
  background: #f4f0ff !important;
}

[data-theme="light"] body.scene-bg,
[data-theme="light"] body.scene-bg.has-video-bg {
  background: linear-gradient(165deg, #ffffff 0%, #f5f0ff 40%, #eef4ff 100%) !important;
  color: #0f172a !important;
  color-scheme: light;
}

[data-theme="light"] body.scene-bg .video-bg__media,
[data-theme="light"] body.scene-bg .video-bg-side__media {
  opacity: 0.14 !important;
  filter: saturate(0.35) brightness(1.35) !important;
}

[data-theme="light"] body.scene-bg .video-bg__overlay {
  background: rgba(255, 255, 255, 0.88) !important;
}

[data-theme="light"] body.scene-bg #videoBgSide,
[data-theme="light"] body.scene-bg .video-bg-side {
  opacity: 0.2 !important;
}

[data-theme="light"] body.scene-bg .nav-link {
  color: #4c1d95 !important;
  text-shadow: none !important;
}

[data-theme="light"] body.scene-bg .nav-link:hover,
[data-theme="light"] body.scene-bg .nav-link.active {
  color: #6d28d9 !important;
  background: rgba(124, 58, 237, 0.1) !important;
}

[data-theme="light"] body.scene-bg.glass-page .cosmic-hero h1,
[data-theme="light"] body.scene-bg.glass-page .page-hero-card h1,
[data-theme="light"] body.scene-bg.glass-page .section-title,
[data-theme="light"] body.scene-bg.glass-page .landing-explore-title,
[data-theme="light"] body.scene-bg.glass-page .cta-box h2,
[data-theme="light"] body.scene-bg.glass-page .feature-card h3,
[data-theme="light"] body.scene-bg.glass-page .landing-card h3,
[data-theme="light"] body.scene-bg.glass-page .pricing-header,
[data-theme="light"] body.scene-bg.glass-page .faq-question,
[data-theme="light"] body.scene-bg .about-page-hero h1,
[data-theme="light"] body.scene-bg .about-block h2,
[data-theme="light"] body.scene-bg .cosmic-hero h1 {
  color: #0f172a !important;
  text-shadow: none !important;
}

[data-theme="light"] body.scene-bg.glass-page .cosmic-hero__subtitle,
[data-theme="light"] body.scene-bg.glass-page .section-desc,
[data-theme="light"] body.scene-bg.glass-page .page-hero-card p,
[data-theme="light"] body.scene-bg.glass-page .feature-card p,
[data-theme="light"] body.scene-bg.glass-page .landing-card p,
[data-theme="light"] body.scene-bg.glass-page .testimonial-text,
[data-theme="light"] body.scene-bg.glass-page .faq-answer-inner,
[data-theme="light"] body.scene-bg.glass-page .cta-box p,
[data-theme="light"] body.scene-bg.glass-page .landing-explore-desc,
[data-theme="light"] body.scene-bg.glass-page .stat-label,
[data-theme="light"] body.scene-bg.glass-page .pricing-features li,
[data-theme="light"] body.scene-bg.glass-page .pricing-annual,
[data-theme="light"] body.scene-bg.glass-page .testimonials-note,
[data-theme="light"] body.scene-bg.glass-page .dash-carousel__hint,
[data-theme="light"] body.scene-bg .about-page-hero p,
[data-theme="light"] body.scene-bg .about-block p,
[data-theme="light"] body.scene-bg .section-desc {
  color: #334155 !important;
  text-shadow: none !important;
}

[data-theme="light"] body.scene-bg.glass-page .section-label,
[data-theme="light"] body.scene-bg.glass-page .landing-card-cta,
[data-theme="light"] body.scene-bg.glass-page .page-hero-card__label {
  color: #6d28d9 !important;
  text-shadow: none !important;
}

[data-theme="light"] body.scene-bg.glass-page footer p,
[data-theme="light"] body.scene-bg.glass-page footer a,
[data-theme="light"] body.scene-bg.glass-page .mega-footer__intro p,
[data-theme="light"] body.scene-bg.glass-page .mega-footer__col a,
[data-theme="light"] body.scene-bg.glass-page .mega-footer__legal {
  color: #475569 !important;
  text-shadow: none !important;
}

[data-theme="light"] body.scene-bg.glass-page .mega-footer__intro h2,
[data-theme="light"] body.scene-bg.glass-page .mega-footer__col h3,
[data-theme="light"] body.scene-bg.glass-page .mega-footer__brand strong {
  color: #1e293b !important;
}

[data-theme="light"] body.scene-bg.about-page .about-page-hero h1,
[data-theme="light"] body.scene-bg.about-page .about-hero-subhead,
[data-theme="light"] body.scene-bg.about-page .about-block h2,
[data-theme="light"] body.scene-bg.about-page .about-value h3 {
  color: #0f172a !important;
  text-shadow: none !important;
}

[data-theme="light"] body.scene-bg.about-page .about-hero-lead,
[data-theme="light"] body.scene-bg.about-page .about-hero-close,
[data-theme="light"] body.scene-bg.about-page .about-hero-tagline,
[data-theme="light"] body.scene-bg.about-page .about-hero-card p,
[data-theme="light"] body.scene-bg.about-page .about-block p,
[data-theme="light"] body.scene-bg.about-page .about-value p {
  color: #334155 !important;
  text-shadow: none !important;
}


/* --- klikr-logo.css --- */

/* Klikr logo — clean marks, no crop hacks */

body.glass-page .nav-logo,
.nav-logo {
  font-size: 0;
  line-height: 0;
  gap: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  background: transparent !important;
}

body.glass-page .nav-logo img,
.nav-logo img {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  object-fit: contain;
  display: block;
  background: transparent;
  box-shadow: 0 6px 20px rgba(191, 0, 255, 0.4);
}

.nav-logo::after {
  display: none !important;
}

.mobile-menu-logo {
  font-size: 0;
  gap: 12px;
}

.mobile-menu-logo img {
  width: 52px;
  height: 52px;
  border-radius: 13px;
  object-fit: contain;
  box-shadow: 0 6px 18px rgba(191, 0, 255, 0.35);
  background: transparent;
}

.mobile-menu-logo span {
  font-size: 22px;
}

.page-hero-card__icon--logo {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: 120px !important;
  height: 120px !important;
  border-radius: 0 !important;
}

.page-hero-card__icon--logo img {
  width: 120px !important;
  height: 120px !important;
  object-fit: contain;
  border-radius: 26px;
  background: transparent;
  filter: drop-shadow(0 16px 40px rgba(191, 0, 255, 0.55));
}

.hero-logo-spin {
  border-radius: 28px;
  overflow: hidden;
  background: transparent !important;
  width: clamp(140px, 18vw, 220px) !important;
  height: clamp(140px, 18vw, 220px) !important;
}

.hero-logo-spin img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 28px;
  background: transparent;
}

.about-hero-logo {
  width: 120px;
  height: 120px;
}

.about-hero-logo img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  border-radius: 26px;
  background: transparent;
}

.mega-footer__brand img {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: contain;
  background: transparent;
  box-shadow: 0 4px 14px rgba(191, 0, 255, 0.25);
}

.luxury-divider__logo {
  width: 36px !important;
  height: 36px !important;
  border-radius: 9px;
  object-fit: contain;
  background: transparent;
}

@media (max-width: 768px) {
  body.glass-page.scene-bg .nav-logo,
  body.glass-page.scene-bg .nav-logo img {
    width: 52px !important;
    height: 52px !important;
  }
}


/* --- klikr-cookies.css --- */

.cookie-consent-notice {
  margin: 0;
  padding: 12px 16px;
  text-align: center;
  font-family: var(--font-system, Inter, sans-serif);
  font-size: 13px;
  color: #ddd6fe;
  background: rgba(18, 10, 28, 0.95);
}

.cookie-consent-notice a {
  color: #e9d5ff;
  text-decoration: underline;
}

#cookie-consent-banner[hidden] {
  display: none !important;
}

.klikr-cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}

.klikr-cookie-banner__inner {
  pointer-events: auto;
  max-width: 920px;
  margin: 0 auto;
  padding: 18px 20px;
  border-radius: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background:
    linear-gradient(145deg, rgba(36, 20, 56, 0.96), rgba(18, 10, 28, 0.98));
  border: 1px solid rgba(191, 0, 255, 0.22);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.klikr-cookie-banner p {
  margin: 0;
  flex: 1 1 280px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(240, 232, 255, 0.82);
}

.klikr-cookie-banner strong {
  color: #f5f0ff;
}

.klikr-cookie-banner a {
  color: #d8b4fe;
}

.klikr-cookie-banner__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.klikr-cookie-btn {
  border: none;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.klikr-cookie-btn--ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #e9d5ff;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.klikr-cookie-btn--primary {
  background: linear-gradient(135deg, #ff7a00, #bf00ff);
  color: #fff;
}

[data-theme="light"] .klikr-cookie-banner__inner {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(124, 58, 237, 0.18);
}

[data-theme="light"] .klikr-cookie-banner p {
  color: #475569;
}

[data-theme="light"] .klikr-cookie-banner strong {
  color: #1e1035;
}

@media (max-width: 640px) {
  .klikr-cookie-banner__actions {
    width: 100%;
  }

  .klikr-cookie-btn {
    flex: 1;
  }
}


/* --- klikr-neo.css --- */

/* Klikr — hybrid UI: glass backgrounds + neo buttons (60% purple · 30% orange · 10% white)
   Video layers untouched — glass panels float over the bg; buttons stay tactile neo. */

button:focus,
a:focus,
input:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

:root {
  /* 60% — purple */
  --k-purple-deep: #241438;
  --k-purple-base: #3d2466;
  --k-purple-mid: #52307a;
  --k-purple-soft: #6b4394;
  --k-purple-glow: rgba(191, 0, 255, 0.18);

  /* 30% — orange */
  --k-orange: #ff7a00;
  --k-orange-soft: #ff9a3d;
  --k-orange-deep: #e06500;
  --k-orange-glow: rgba(255, 122, 0, 0.28);

  /* 10% — white */
  --k-white: #ffffff;
  --k-white-soft: #f8f4ff;

  /* Neo — buttons & tactile controls only */
  --neo-base: var(--k-purple-base);
  --neo-ink: var(--k-white);
  --neo-muted: #f0e8ff;
  --neo-dark: rgba(18, 6, 36, 0.62);
  --neo-light: rgba(255, 255, 255, 0.09);
  --neo-raised: 10px 10px 22px var(--neo-dark), -8px -8px 20px var(--neo-light);
  --neo-raised-sm: 6px 6px 14px var(--neo-dark), -5px -5px 12px var(--neo-light);
  --neo-inset: inset 6px 6px 14px var(--neo-dark), inset -5px -5px 12px var(--neo-light);
  --neo-inset-sm: inset 4px 4px 10px var(--neo-dark), inset -3px -3px 8px var(--neo-light);

  /* Glass — purple-tinted frosted (NOT black) */
  --kg-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
  --kg-fill: rgba(91, 45, 158, 0.28);
  --kg-fill-elevated: rgba(77, 42, 130, 0.36);
  --kg-fill-hero: rgba(61, 36, 102, 0.4);
  --kg-fill-inner: rgba(109, 61, 176, 0.22);
  --kg-rim: linear-gradient(
    145deg,
    rgba(255, 122, 0, 0.55) 0%,
    rgba(255, 255, 255, 0.18) 28%,
    rgba(191, 0, 255, 0.48) 72%,
    rgba(255, 122, 0, 0.28) 100%
  );
  --kg-blur: blur(28px) saturate(210%) brightness(1.12);
  --kg-blur-strong: blur(36px) saturate(220%) brightness(1.14);
  --kg-shadow:
    0 20px 56px rgba(91, 45, 158, 0.28),
    0 0 48px rgba(191, 0, 255, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  --kg-shadow-hover:
    0 28px 72px rgba(91, 45, 158, 0.32),
    0 0 64px rgba(191, 0, 255, 0.14),
    0 0 36px rgba(255, 122, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  --kg-glass: var(--kg-noise) 0 0 / 128px 128px repeat,
    linear-gradient(var(--kg-fill), var(--kg-fill)) padding-box,
    var(--kg-rim) border-box;
}

[data-theme="light"] {
  --k-purple-deep: #ede9fe;
  --k-purple-base: #f5f3ff;
  --neo-base: var(--k-purple-base);
  --neo-ink: #1e1035;
  --neo-muted: #4c1d95;
  --neo-dark: rgba(124, 58, 237, 0.12);
  --neo-light: rgba(255, 255, 255, 1);
  --neo-raised: 0 4px 18px rgba(124, 58, 237, 0.1), 0 1px 3px rgba(15, 23, 42, 0.06);
  --neo-raised-sm: 0 2px 10px rgba(124, 58, 237, 0.08);
  --neo-inset: inset 0 1px 2px rgba(124, 58, 237, 0.08);
  --neo-inset-sm: inset 0 1px 2px rgba(124, 58, 237, 0.06);
  --kg-fill-inner: rgba(255, 255, 255, 0.96);
  --kg-fill: rgba(255, 255, 255, 0.94);
  --kg-fill-elevated: rgba(255, 255, 255, 0.97);
  --kg-fill-hero: rgba(255, 255, 255, 0.98);
  --kg-shadow:
    0 8px 32px rgba(124, 58, 237, 0.08),
    0 1px 0 rgba(255, 255, 255, 1),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  --kg-shadow-hover:
    0 12px 40px rgba(124, 58, 237, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* ── Glass surfaces (backgrounds / panels) ── */
body.glass-page .feature-card,
body.glass-page .landing-card,
body.glass-page .testimonial-card,
body.glass-page .pricing-card,
body.glass-page .faq-item,
body.glass-page .cta-box,
body.glass-page .stat,
body.glass-page .stats-grid,
body.glass-page .page-hero-card,
body.glass-page .landing-instore__inner,
body.glass-page .landing-instore-strip__item,
body.glass-page .lp-phones__nav,
body.about-page .feature-card,
body.about-page .landing-card,
body.about-page .testimonial-card,
body.about-page .pricing-card,
body.about-page .faq-item,
body.about-page .cta-box,
body.about-page .page-hero-card,
body.is-page .feature-card,
body.is-page .landing-card,
body.is-page .is-step-block__glass,
body.is-page .is-glass-intro {
  border: 1px solid transparent !important;
  background: var(--kg-glass) !important;
  backdrop-filter: var(--kg-blur) !important;
  -webkit-backdrop-filter: var(--kg-blur) !important;
  box-shadow: var(--kg-shadow) !important;
}

body.glass-page .page-hero-card,
body.about-page .page-hero-card {
  background:
    var(--kg-noise) 0 0 / 128px 128px repeat,
    linear-gradient(var(--kg-fill-hero), var(--kg-fill-hero)) padding-box,
    var(--kg-rim) border-box !important;
  backdrop-filter: var(--kg-blur-strong) !important;
  -webkit-backdrop-filter: var(--kg-blur-strong) !important;
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.5),
    0 0 80px rgba(191, 0, 255, 0.08),
    0 0 40px rgba(255, 122, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

body.glass-page .stat {
  background:
    var(--kg-noise) 0 0 / 128px 128px repeat,
    linear-gradient(rgba(61, 36, 102, 0.35), rgba(61, 36, 102, 0.35)) padding-box,
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(191, 0, 255, 0.22)) border-box !important;
  backdrop-filter: blur(16px) saturate(175%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(175%) !important;
}

body.glass-page .cta-box {
  background:
    var(--kg-noise) 0 0 / 128px 128px repeat,
    linear-gradient(rgba(91, 45, 158, 0.38), rgba(61, 36, 102, 0.44)) padding-box,
    linear-gradient(145deg, rgba(255, 122, 0, 0.5), rgba(191, 0, 255, 0.45), rgba(255, 122, 0, 0.25)) border-box !important;
}

body.glass-page .landing-card--featured,
body.glass-page .pricing-card.featured {
  background:
    var(--kg-noise) 0 0 / 128px 128px repeat,
    linear-gradient(var(--kg-fill-elevated), var(--kg-fill-elevated)) padding-box,
    var(--kg-rim) border-box !important;
  box-shadow:
    var(--kg-shadow),
    0 0 0 2px rgba(255, 122, 0, 0.22) !important;
}

body.glass-page .feature-card:hover:not(.tilt-active),
body.glass-page .landing-card:hover:not(.tilt-active),
body.glass-page .testimonial-card:hover,
body.glass-page .pricing-card:hover:not(.tilt-active) {
  box-shadow: var(--kg-shadow-hover) !important;
  transform: translateY(-2px);
}

body.is-page .is-step-block.is-inview .is-step-block__glass {
  box-shadow:
    var(--kg-shadow-hover),
    0 0 48px var(--k-purple-glow),
    0 0 24px rgba(255, 122, 0, 0.08) !important;
}

body.glass-page .landing-instore__inner {
  border-radius: 28px !important;
  background:
    var(--kg-noise) 0 0 / 128px 128px repeat,
    linear-gradient(var(--kg-fill-hero), var(--kg-fill-hero)) padding-box,
    var(--kg-rim) border-box !important;
  backdrop-filter: var(--kg-blur-strong) !important;
  -webkit-backdrop-filter: var(--kg-blur-strong) !important;
  box-shadow: var(--kg-shadow) !important;
}

body.glass-page .landing-instore__inner::before {
  opacity: 0 !important;
}

body.glass-page .landing-instore-strip__item {
  border-radius: 16px !important;
  padding: 14px 18px !important;
}

body.glass-page .stats-grid {
  border-radius: 24px !important;
  overflow: hidden !important;
  gap: 1px !important;
  background: var(--kg-glass) !important;
}

body.glass-page .stat {
  border-radius: 0 !important;
  border: none !important;
  background:
    var(--kg-noise) 0 0 / 128px 128px repeat,
    linear-gradient(rgba(10, 8, 22, 0.28), rgba(10, 8, 22, 0.28)) padding-box,
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(191, 0, 255, 0.24)) border-box !important;
}

body.glass-page .lp-phones__nav {
  border: 1px solid transparent !important;
  background:
    linear-gradient(rgba(61, 36, 102, 0.35), rgba(61, 36, 102, 0.35)) padding-box,
    var(--kg-rim) border-box !important;
  backdrop-filter: blur(18px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(190%) !important;
  box-shadow: var(--kg-shadow) !important;
}

body.glass-page .lp-phones__nav:hover {
  box-shadow: var(--kg-shadow-hover) !important;
}

/* Testimonials — quote only, no names */
body.glass-page .testimonial-author,
body.about-page .testimonial-author {
  display: none !important;
}

body.glass-page .testimonial-card {
  padding-bottom: 28px !important;
}

body.glass-page .landing-instore__badge {
  background: rgba(61, 36, 102, 0.55) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  color: var(--k-orange) !important;
  border: 1px solid rgba(255, 122, 0, 0.25) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Nav pill — glass shell */
body.glass-page .nav-pill,
body.about-page .nav-pill,
body.is-page .nav-pill {
  border: 1px solid transparent !important;
  background:
    var(--kg-noise) 0 0 / 128px 128px repeat,
    linear-gradient(var(--kg-fill-elevated), var(--kg-fill-elevated)) padding-box,
    var(--kg-rim) border-box !important;
  backdrop-filter: var(--kg-blur-strong) !important;
  -webkit-backdrop-filter: var(--kg-blur-strong) !important;
  box-shadow: var(--kg-shadow) !important;
}

body.glass-page .nav-logo img {
  box-shadow: var(--neo-raised-sm) !important;
  border-radius: 13px !important;
}

/* Nav links — glass highlight (not neo buttons) */
body.glass-page .nav-link,
body.about-page .nav-link,
body.is-page .nav-link {
  color: var(--neo-muted) !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.glass-page .nav-link:hover,
body.about-page .nav-link:hover,
body.is-page .nav-link:hover {
  color: var(--k-white) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

body.glass-page .nav-link.active,
body.about-page .nav-link.active,
body.is-page .nav-link.active,
.nav-link.active {
  color: var(--k-orange) !important;
  background: rgba(255, 122, 0, 0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* ── Neo buttons (all interactive CTAs) ── */
body.glass-page .nav-cta,
body.about-page .nav-cta,
body.is-page .nav-cta,
body.glass-page .klikr-nav-install,
body.glass-page .nav-login,
body.about-page .nav-login,
body.is-page .nav-login,
body.glass-page .btn-primary,
body.about-page .btn-primary,
body.is-page .btn-primary,
body.glass-page .btn-pricing-fill,
body.glass-page .cosmic-hero__cta,
body.glass-page .price-badge,
body.glass-page .btn-pricing-outline,
body.glass-page .btn-secondary,
body.about-page .btn-primary,
body.about-page .btn-secondary,
body.is-page .btn-primary,
body.is-page .btn-secondary,
body.glass-page .mobile-menu__cta,
.mobile-menu__cta {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.glass-page .nav-cta,
body.about-page .nav-cta,
body.is-page .nav-cta,
body.glass-page .btn-primary,
body.about-page .btn-primary,
body.is-page .btn-primary,
body.glass-page .btn-pricing-fill,
body.glass-page .cosmic-hero__cta,
body.glass-page .price-badge {
  background: linear-gradient(145deg, var(--k-orange), var(--k-orange-deep)) !important;
  border: none !important;
  color: var(--k-white) !important;
  box-shadow: var(--neo-raised-sm), 0 4px 20px var(--k-orange-glow) !important;
}

body.glass-page .nav-cta:hover,
body.glass-page .btn-primary:hover,
body.glass-page .cosmic-hero__cta:hover,
body.glass-page .btn-pricing-fill:hover {
  box-shadow: var(--neo-raised), 0 6px 28px var(--k-orange-glow) !important;
  transform: translateY(-1px) !important;
}

body.glass-page .nav-cta:active,
body.glass-page .btn-primary:active,
body.glass-page .cosmic-hero__cta:active,
body.glass-page .btn-pricing-fill:active {
  box-shadow: var(--neo-inset-sm) !important;
  transform: none !important;
}

body.glass-page .klikr-nav-install,
body.glass-page .nav-login,
body.about-page .nav-login,
body.is-page .nav-login,
body.glass-page .btn-secondary,
body.glass-page .btn-pricing-outline,
body.about-page .btn-secondary,
body.is-page .btn-secondary {
  background: var(--neo-base) !important;
  border: none !important;
  color: var(--neo-ink) !important;
  box-shadow: var(--neo-raised-sm) !important;
}

body.glass-page .klikr-nav-install:hover,
body.glass-page .nav-login:hover,
body.glass-page .btn-secondary:hover,
body.glass-page .btn-pricing-outline:hover {
  box-shadow: var(--neo-inset-sm) !important;
  color: var(--k-orange) !important;
}

/* ── Stats & labels ── */
body.glass-page .stat-num {
  background: linear-gradient(135deg, var(--k-purple-soft), var(--k-orange-soft)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

body.glass-page .section-label,
body.glass-page .landing-card-cta {
  color: var(--k-orange) !important;
}

body.glass-page .landing-card-icon {
  background: linear-gradient(145deg, var(--k-purple-soft), var(--k-purple-mid)) !important;
  box-shadow: var(--neo-inset-sm) !important;
}

body.glass-page .landing-card--featured .landing-card-icon {
  background: linear-gradient(145deg, var(--k-orange), var(--k-purple-soft)) !important;
}

body.glass-page .pricing-amount {
  background: linear-gradient(135deg, var(--k-purple-soft), var(--k-orange-soft)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

body.glass-page .faq-question:hover {
  color: var(--k-orange) !important;
}

/* ── Glass modals & forms ── */
body.glass-page .modal-overlay.active {
  backdrop-filter: blur(12px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
  background: rgba(36, 20, 56, 0.62) !important;
}

body.glass-page .modal-box {
  border: 1px solid transparent !important;
  background:
    var(--kg-noise) 0 0 / 128px 128px repeat,
    linear-gradient(rgba(91, 45, 158, 0.42), rgba(61, 36, 102, 0.48)) padding-box,
    var(--kg-rim) border-box !important;
  backdrop-filter: var(--kg-blur-strong) !important;
  -webkit-backdrop-filter: var(--kg-blur-strong) !important;
  box-shadow:
    0 32px 88px rgba(91, 45, 158, 0.35),
    0 0 64px rgba(191, 0, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

body.glass-page .form-input:focus {
  box-shadow: var(--neo-inset), 0 0 0 2px rgba(255, 122, 0, 0.25) !important;
  outline: 3px solid #005fcc !important;
  outline-offset: 2px !important;
}

/* ── Mobile menu & footer — glass ── */
body.glass-page .mobile-menu__panel,
.mobile-menu__panel {
  border: 1px solid transparent !important;
  background:
    var(--kg-noise) 0 0 / 128px 128px repeat,
    linear-gradient(var(--kg-fill-hero), var(--kg-fill-hero)) padding-box,
    var(--kg-rim) border-box !important;
  backdrop-filter: var(--kg-blur-strong) !important;
  -webkit-backdrop-filter: var(--kg-blur-strong) !important;
  box-shadow: var(--kg-shadow) !important;
}

body.glass-page .mobile-menu .mobile-link:hover {
  background: rgba(255, 122, 0, 0.1) !important;
  color: var(--k-orange) !important;
  box-shadow: none !important;
}

body.glass-page .mega-footer {
  border: 1px solid transparent !important;
  background:
    var(--kg-noise) 0 0 / 128px 128px repeat,
    linear-gradient(var(--kg-fill), var(--kg-fill)) padding-box,
    var(--kg-rim) border-box !important;
  backdrop-filter: var(--kg-blur) !important;
  -webkit-backdrop-filter: var(--kg-blur) !important;
  box-shadow: var(--kg-shadow) !important;
}

body.glass-page .mega-footer__col a.is-highlight {
  color: var(--k-orange) !important;
}

body.glass-page .notif-mock {
  border: 1px solid transparent !important;
  background:
    linear-gradient(rgba(61, 36, 102, 0.55), rgba(61, 36, 102, 0.55)) padding-box,
    linear-gradient(135deg, rgba(255, 122, 0, 0.25), rgba(191, 0, 255, 0.3)) border-box !important;
  backdrop-filter: blur(20px) saturate(185%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(185%) !important;
  box-shadow: var(--kg-shadow) !important;
}

/* Analytics tour + dashboard mock — purple glass (overrides klikr-marketing.css dark panels) */
body.glass-page .analytics-mock,
body.glass-page.scene-bg .analytics-mock,
body.glass-page .analytics-panel,
body.glass-page .dash-carousel__stage {
  border: 1px solid transparent !important;
  background: var(--kg-glass) !important;
  backdrop-filter: var(--kg-blur-strong) !important;
  -webkit-backdrop-filter: var(--kg-blur-strong) !important;
  box-shadow: var(--kg-shadow) !important;
}

body.glass-page .analytics-mock__chrome,
body.glass-page .analytics-mock__panel,
body.glass-page .analytics-mock__kpi,
body.glass-page .analytics-mock__hero,
body.glass-page .analytics-mock__leader-row,
body.glass-page .dash-carousel__meta {
  border: 1px solid transparent !important;
  background:
    var(--kg-noise) 0 0 / 128px 128px repeat,
    linear-gradient(var(--kg-fill-inner), var(--kg-fill-inner)) padding-box,
    var(--kg-rim) border-box !important;
  backdrop-filter: var(--kg-blur) !important;
  -webkit-backdrop-filter: var(--kg-blur) !important;
  box-shadow: var(--kg-shadow) !important;
}

body.glass-page .analytics-mock__hero {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.glass-page .analytics-mock__hero::before {
  opacity: 1 !important;
  background: linear-gradient(90deg, transparent, rgba(255, 122, 0, 0.6), rgba(191, 0, 255, 0.8), transparent) !important;
}

body.glass-page .page-hero-card__label {
  background:
    var(--kg-noise) 0 0 / 128px 128px repeat,
    linear-gradient(var(--kg-fill-inner), var(--kg-fill-inner)) padding-box,
    var(--kg-rim) border-box !important;
  border: 1px solid transparent !important;
  color: var(--k-orange) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: var(--kg-shadow) !important;
}

body.glass-page .analytics-mock__funnel-step,
body.glass-page .analytics-mock__linkbar,
body.glass-page .dash-carousel .analytics-mock__linkbar,
body.glass-page .analytics-mock__funnel-h-step {
  border: 1px solid transparent !important;
  background:
    var(--kg-noise) 0 0 / 128px 128px repeat,
    linear-gradient(var(--kg-fill-inner), var(--kg-fill-inner)) padding-box,
    var(--kg-rim) border-box !important;
  backdrop-filter: var(--kg-blur) !important;
  -webkit-backdrop-filter: var(--kg-blur) !important;
  box-shadow: var(--kg-shadow) !important;
}

body.glass-page.scene-bg .analytics-mock,
body.glass-page.scene-bg .analytics-mock__chrome,
body.glass-page.scene-bg .analytics-mock__panel,
body.glass-page.scene-bg .analytics-mock__kpi,
body.glass-page.scene-bg .analytics-mock__hero {
  border: 1px solid transparent !important;
  background:
    var(--kg-noise) 0 0 / 128px 128px repeat,
    linear-gradient(var(--kg-fill-inner), var(--kg-fill-inner)) padding-box,
    var(--kg-rim) border-box !important;
  backdrop-filter: var(--kg-blur-strong) !important;
  -webkit-backdrop-filter: var(--kg-blur-strong) !important;
  box-shadow: var(--kg-shadow) !important;
}

body.glass-page.scene-bg .analytics-mock {
  background: var(--kg-glass) !important;
}

/* Beat klikr-scene-bg black glass — higher specificity */
body.glass-page.scene-bg .page-hero-card,
body.glass-page.scene-bg .landing-card,
body.glass-page.scene-bg .feature-card,
body.glass-page.scene-bg .pricing-card,
body.glass-page.scene-bg .stat,
body.glass-page.scene-bg .testimonial-card,
body.glass-page.scene-bg .faq-item,
body.glass-page.scene-bg .cta-box,
body.glass-page.scene-bg .about-block,
body.glass-page.scene-bg .about-value,
body.glass-page.scene-bg .about-hero-card,
body.glass-page.scene-bg .stats-grid,
body.glass-page.scene-bg .landing-instore__inner,
body.glass-page.scene-bg .mega-footer,
body.glass-page.scene-bg .modal-box {
  border: 1px solid transparent !important;
  background: var(--kg-glass) !important;
  backdrop-filter: var(--kg-blur) !important;
  -webkit-backdrop-filter: var(--kg-blur) !important;
  box-shadow: var(--kg-shadow) !important;
}

body.glass-page.scene-bg .page-hero-card {
  background:
    var(--kg-noise) 0 0 / 128px 128px repeat,
    linear-gradient(var(--kg-fill-hero), var(--kg-fill-hero)) padding-box,
    var(--kg-rim) border-box !important;
  backdrop-filter: var(--kg-blur-strong) !important;
  -webkit-backdrop-filter: var(--kg-blur-strong) !important;
}

body.glass-page .form-input {
  border: 1px solid transparent !important;
  background:
    var(--kg-noise) 0 0 / 128px 128px repeat,
    linear-gradient(var(--kg-fill-inner), var(--kg-fill-inner)) padding-box,
    var(--kg-rim) border-box !important;
  backdrop-filter: blur(14px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(190%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  color: var(--neo-ink) !important;
}

body.glass-page .dash-carousel__btn {
  background: var(--neo-base) !important;
  border: none !important;
  backdrop-filter: none !important;
  box-shadow: var(--neo-raised-sm) !important;
  color: var(--neo-ink) !important;
}

body.glass-page .dash-carousel__btn:hover {
  box-shadow: var(--neo-inset-sm) !important;
  color: var(--k-orange) !important;
}

/* ── Light mode — opaque white panels, no dark glass tint ── */
[data-theme="light"] body.glass-page .stat {
  background: var(--kg-glass) !important;
}

[data-theme="light"] body.glass-page .cta-box {
  background:
    var(--kg-noise) 0 0 / 128px 128px repeat,
    linear-gradient(#ffffff, #f8f5ff) padding-box,
    var(--kg-rim) border-box !important;
}

[data-theme="light"] body.glass-page .modal-overlay.active {
  background: rgba(15, 23, 42, 0.35) !important;
}

[data-theme="light"] body.glass-page .modal-box {
  background:
    var(--kg-noise) 0 0 / 128px 128px repeat,
    linear-gradient(var(--kg-fill-hero), var(--kg-fill-hero)) padding-box,
    var(--kg-rim) border-box !important;
  box-shadow: 0 24px 64px rgba(124, 58, 237, 0.14) !important;
}

[data-theme="light"] body.glass-page .landing-instore__badge {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #c2410c !important;
  border-color: rgba(255, 122, 0, 0.28) !important;
}

[data-theme="light"] body.glass-page .lp-phones__nav {
  background: var(--kg-glass) !important;
}

[data-theme="light"] body.glass-page .nav-link,
[data-theme="light"] body.glass-page .nav-login {
  color: #4c1d95 !important;
}

[data-theme="light"] body.glass-page .nav-link:hover,
[data-theme="light"] body.glass-page .nav-link.active {
  color: #6d28d9 !important;
}

[data-theme="light"] body.glass-page .landing-card h3,
[data-theme="light"] body.glass-page .feature-card h3,
[data-theme="light"] body.glass-page .faq-question,
[data-theme="light"] body.glass-page .section-title,
[data-theme="light"] body.glass-page .cosmic-hero h1 {
  color: #0f172a !important;
}

[data-theme="light"] body.glass-page .landing-card p,
[data-theme="light"] body.glass-page .feature-card p,
[data-theme="light"] body.glass-page .testimonial-text,
[data-theme="light"] body.glass-page .faq-answer-inner,
[data-theme="light"] body.glass-page .cosmic-hero__subtitle,
[data-theme="light"] body.glass-page .section-desc {
  color: #334155 !important;
}

[data-theme="light"] body.glass-page .stat-num {
  background: linear-gradient(135deg, #6d28d9, #2563eb) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

[data-theme="light"] body.glass-page .stat-label {
  color: #5b21b6 !important;
}

/* ── Focus rings ── */
body.glass-page .landing-card:focus-visible,
body.glass-page .nav-link:focus-visible,
body.glass-page .btn-primary:focus-visible,
body.glass-page .btn-secondary:focus-visible,
body.glass-page .cosmic-hero__cta:focus-visible,
body.glass-page .nav-cta:focus-visible {
  outline: 2px solid var(--k-orange) !important;
  outline-offset: 3px;
}

/* ── Perf / accessibility ── */
html.perf-lite body.glass-page .feature-card,
html.perf-lite body.glass-page .landing-card,
html.perf-lite body.glass-page .nav-pill,
html.perf-mobile body.glass-page .feature-card,
html.perf-mobile body.glass-page .landing-card,
html.perf-mobile body.glass-page .nav-pill {
  backdrop-filter: blur(14px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
}

@media (prefers-reduced-transparency: reduce) {
  body.glass-page .feature-card,
  body.glass-page .landing-card,
  body.glass-page .nav-pill,
  body.glass-page .modal-box,
  body.glass-page .stat,
  body.glass-page .mega-footer {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(36, 20, 56, 0.92) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
  }

  [data-theme="light"] body.glass-page .feature-card,
  [data-theme="light"] body.glass-page .landing-card,
  [data-theme="light"] body.glass-page .nav-pill,
  [data-theme="light"] body.glass-page .modal-box,
  [data-theme="light"] body.glass-page .stat,
  [data-theme="light"] body.glass-page .mega-footer {
    background: #ffffff !important;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.1) !important;
  }

  body.glass-page .btn-primary,
  body.glass-page .nav-cta,
  body.glass-page .btn-secondary {
    box-shadow: var(--neo-raised-sm) !important;
  }
}


/* --- klikr-nav.css --- */

/* Klikr — unified neo pill navigation */
/* inlined: klikr-neo.css?v=20260728light */

:root {
  --klikr-nav-teal: #05d9e8;
  --klikr-nav-cta: linear-gradient(90deg, #ff8a00 0%, #e040fb 55%, #d100d1 100%);
}

/* ── Nav shell — floating pill with side air ── */
body.glass-page nav,
body.about-page nav,
body.is-page nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 12px 20px;
  display: flex;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

/* ── Glass pill ── */
body.glass-page .nav-pill,
body.about-page .nav-pill,
body.is-page .nav-pill {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  width: fit-content;
  max-width: min(1160px, calc(100% - 40px));
  min-height: 56px;
  padding: 4px 8px 4px 10px;
  border-radius: 999px;
  overflow: hidden;
}

[data-theme="light"] body.glass-page .nav-pill,
[data-theme="light"] body.about-page .nav-pill,
[data-theme="light"] body.is-page .nav-pill {
  --kg-fill: rgba(255, 255, 255, 0.78);
  background:
    var(--kg-noise) 0 0 / 128px 128px repeat,
    linear-gradient(var(--kg-fill), var(--kg-fill)) padding-box,
    linear-gradient(145deg, rgba(255, 122, 0, 0.35), rgba(255, 255, 255, 0.9), rgba(191, 0, 255, 0.28)) border-box !important;
  box-shadow: var(--kg-shadow) !important;
}

/* ── Logo (image only — no duplicate text) ── */
body.glass-page .nav-logo,
body.about-page .nav-logo,
body.is-page .nav-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0 !important;
  line-height: 0 !important;
  gap: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 0;
  margin-right: 4px;
  text-decoration: none;
  color: transparent !important;
}

body.glass-page .nav-logo img,
body.about-page .nav-logo img,
body.is-page .nav-logo img {
  width: 52px !important;
  height: 52px !important;
  border-radius: 13px;
  object-fit: cover;
  display: block;
  box-shadow: 0 4px 16px rgba(191, 0, 255, 0.35);
}

/* ── Nav links — tight cluster ── */
body.glass-page .nav-links,
body.about-page .nav-links,
body.is-page .nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex: 0 1 auto;
  min-width: 0;
  margin: 0 4px;
}

body.glass-page .nav-link,
body.about-page .nav-link,
body.is-page .nav-link {
  position: relative;
  font-family: var(--font-system);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 9px !important;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.92) !important;
  background: transparent;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1.2;
  flex-shrink: 0;
}

[data-theme="light"] body.glass-page .nav-link,
[data-theme="light"] body.about-page .nav-link,
[data-theme="light"] body.is-page .nav-link {
  color: rgba(30, 16, 53, 0.78) !important;
}

body.glass-page .nav-link::after,
body.about-page .nav-link::after,
body.is-page .nav-link::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 6px;
  height: 2px;
  border-radius: 1px;
  background: var(--klikr-nav-teal);
  opacity: 0;
  transform: scaleX(0.6);
  transition: opacity 0.15s, transform 0.15s;
}

body.glass-page .nav-link:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

body.glass-page .nav-link.active,
body.about-page .nav-link.active,
body.is-page .nav-link.active {
  color: var(--klikr-nav-teal) !important;
  background: rgba(0, 0, 0, 0.38) !important;
}

body.glass-page .nav-link.active::after,
body.glass-page .nav-link:hover::after,
body.about-page .nav-link.active::after,
body.about-page .nav-link:hover::after,
body.is-page .nav-link.active::after,
body.is-page .nav-link:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

/* ── Right actions ── */
body.glass-page .nav-right {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  margin-left: 4px;
}

body.glass-page .klikr-nav-install,
body.about-page .klikr-nav-install,
body.is-page .klikr-nav-install {
  font-family: var(--font-system);
  font-size: 13px !important;
  font-weight: 600;
  padding: 7px 12px !important;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
}

body.glass-page .nav-cta,
body.about-page .nav-cta,
body.is-page .nav-cta {
  font-family: var(--font-system);
  font-size: 13px !important;
  font-weight: 700;
  padding: 7px 14px !important;
  border-radius: 999px;
  background: var(--klikr-nav-cta) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 3px 18px rgba(209, 0, 209, 0.3), 0 1px 6px rgba(255, 138, 0, 0.22) !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
}

body.glass-page .nav-cta span,
body.about-page .nav-cta span {
  background: none !important;
  box-shadow: none !important;
}

body.glass-page .nav-login,
body.about-page .nav-login,
body.is-page .nav-login {
  font-family: var(--font-system);
  font-size: 13px !important;
  font-weight: 600;
  padding: 7px 12px 7px 10px !important;
  border-radius: 999px;
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  line-height: 1;
  text-decoration: none;
}

body.glass-page .nav-login svg,
body.about-page .nav-login svg {
  width: 15px;
  height: 15px;
}

body.glass-page .klikr-nav-install:hover,
body.glass-page .nav-login:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
}

body.glass-page .nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 22px rgba(209, 0, 209, 0.38), 0 2px 8px rgba(255, 138, 0, 0.25) !important;
}

body.glass-page .hamburger {
  display: none;
  flex-shrink: 0;
}

body.glass-page .mobile-menu:not(.active) {
  pointer-events: none !important;
  visibility: hidden !important;
}

body.glass-page .mobile-menu.active {
  pointer-events: auto !important;
  visibility: visible !important;
}

/* Pill light sweep */
@keyframes navLightSweep {
  0% { transform: translateX(-130%) skewX(-18deg); opacity: 0; }
  12% { opacity: 0.35; }
  28% { opacity: 0; }
  100% { transform: translateX(230%) skewX(-18deg); opacity: 0; }
}

body.glass-page .nav-pill::after,
body.about-page .nav-pill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 45%,
    rgba(5, 217, 232, 0.1) 50%,
    rgba(255, 255, 255, 0.05) 55%,
    transparent 100%
  );
  transform: translateX(-130%) skewX(-18deg);
  animation: navLightSweep 9s ease-in-out infinite;
  pointer-events: none;
}

/* ── Tablet: trim links only when needed ── */
@media (max-width: 1080px) {
  body.glass-page .nav-links a[href="/faq"],
  body.glass-page .nav-links a[href="/about"] {
    display: none;
  }
}

@media (max-width: 960px) {
  body.glass-page .nav-link--instore,
  body.glass-page .nav-links a[href="/analytics"] {
    display: none;
  }
}

@media (max-width: 768px) {
  body.glass-page nav,
  body.about-page nav,
  body.is-page nav {
    padding: 10px 14px !important;
  }

  body.glass-page .nav-links,
  body.glass-page .nav-cta,
  body.glass-page .nav-login,
  body.glass-page .nav-right > .klikr-nav-install {
    display: none !important;
  }

  body.glass-page .nav-pill {
    width: 100%;
    max-width: 100%;
    padding: 5px 10px 5px 12px;
    min-height: 48px;
  }

  body.glass-page .nav-logo img {
    width: 44px !important;
    height: 44px !important;
  }

  body.glass-page .hamburger {
    display: flex !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 10px !important;
  }

  body.glass-page .hamburger span {
    width: 20px !important;
    height: 2px !important;
  }
}

@media (max-width: 640px) {
  body.glass-page .klikr-install-text-full {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.glass-page .nav-pill::after {
    animation: none !important;
  }

  body.glass-page .nav-cta:hover {
    transform: none;
  }
}