/* AssetLens build 2026-05-15-v9 — if you can read this comment in the served CSS, the new stylesheet is active */
/* ============================================================================
   MASTER STYLESHEET
   ----------------------------------------------------------------------------
   Theme variables are injected from PHP config — see /includes/head.php
   This file contains:
     · Reset & base
     · Typography
     · Buttons
     · Layout primitives
     · Navigation (desktop + mobile)
     · Hero
     · Marquee
     · Section header
     · Features grid
     · Steps
     · Use cases
     · Comparison table
     · Metrics (animated counters)
     · Pricing
     · FAQ
     · Final CTA
     · Footer
     · Floating contact pill (Calendly + email)
     · Scroll-reveal animations
     · Mobile breakpoints
     · Accessibility helpers
     · Reduced-motion preference
   ============================================================================ */

:root {
  /* Theme variables get overridden by inline <style> from PHP — these are fallbacks */
  --bg: #ffffff;
  --bg-alt: #f7f7f6;
  --ink: #0a0a0a;
  --ink-soft: #1a1a1a;
  --muted: #6b6b6b;
  --muted-2: #a3a3a3;
  --line: #e8e8e6;
  --line-strong: #d4d4d2;
  --accent: #0a0a0a;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.04);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.06);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.06);

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --container: 1280px;
  --gutter: clamp(20px, 4vw, 48px);

  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ----- RESET ----- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }

/* Subtle fixed grain — premium feel */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1000;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ----- ACCESSIBILITY ----- */
.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 9999;
  padding: 12px 18px;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  border-radius: 6px;
}
.skip-link:focus {
  left: 16px;
  top: 16px;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Visually hidden (for screen readers only) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ----- LAYOUT ----- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* ----- TYPOGRAPHY ----- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow .dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--ink);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

h1, h2, h3, h4 {
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--ink);
}
h1 { font-size: clamp(40px, 5.5vw, 76px); font-weight: 800; letter-spacing: -0.045em; }
h2 { font-size: clamp(32px, 4.5vw, 60px); font-weight: 700; letter-spacing: -0.04em; }
h3 { font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; letter-spacing: -0.02em; }
h4 { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }

p { color: var(--ink-soft); }
.lead {
  font-size: clamp(17px, 1.4vw, 20px);
  color: var(--muted);
  line-height: 1.55;
  max-width: 640px;
  font-weight: 400;
}

/* ----- BUTTONS ----- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: 999px;
  transition: all 0.3s var(--ease-out);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  min-height: 44px; /* tap target */
}
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.22) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.7s var(--ease-out);
}
.btn-primary:hover::after { transform: translateX(100%); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; }
.btn .arrow { transition: transform 0.3s var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }

/* ============================================================================
   01 NAV
   ============================================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 18px 0;
  transition: all 0.3s var(--ease-out);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.7);
}
.nav.scrolled {
  padding: 12px 0;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.03em;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}
.logo-mark {
  width: 28px; height: 28px;
  background: var(--ink);
  border-radius: 8px;
  display: grid; place-items: center;
  position: relative;
  flex-shrink: 0;
}
.logo-mark::before {
  content: '';
  width: 12px; height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(-45deg);
}
.nav-links { display: flex; gap: 32px; align-items: center; }
.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--ink); }
.nav-cta { display: flex; gap: 12px; align-items: center; }
.nav-cta .btn { padding: 10px 20px; font-size: 14px; min-height: 0; }

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  transition: all 0.3s var(--ease-out);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 16px var(--gutter) 24px;
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--line);
}
.nav-mobile a {
  padding: 14px 0;
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.nav-mobile a:last-child { border-bottom: none; margin-top: 12px; }
.nav-mobile .btn { justify-content: center; }

@media (max-width: 820px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .nav-mobile[hidden=""] { display: none; }
  .nav-mobile { display: flex; }
}

/* ============================================================================
   02 HERO
   ============================================================================ */
.hero { padding: 160px 0 100px; position: relative; overflow: hidden; }
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, var(--line-strong) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse 100% 80% at center, black 50%, transparent 95%);
  -webkit-mask-image: radial-gradient(ellipse 100% 80% at center, black 50%, transparent 95%);
  opacity: 0.85;
  pointer-events: none;
}
/* Decorative side markers — fill the wide-screen empty zones with intent */
.hero::after {
  content: '';
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px;
  background-image: linear-gradient(90deg, var(--line-strong) 50%, transparent 50%);
  background-size: 8px 1px;
  mask-image: linear-gradient(90deg, transparent, black 5%, black 20%, transparent 35%, transparent 65%, black 80%, black 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 5%, black 20%, transparent 35%, transparent 65%, black 80%, black 95%, transparent);
  opacity: 0.4;
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; text-align: center; }

/* Side decorations — visible only on wide screens, makes the empty side zones intentional */
.hero-inner::before,
.hero-inner::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 80px;
  height: 80px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.6;
}
.hero-inner::before {
  left: -120px;
  transform: translateY(-50%);
  background:
    radial-gradient(circle at center, var(--ink) 4px, transparent 5px),
    radial-gradient(circle, var(--line-strong) 1px, transparent 1px);
  background-size: 100% 100%, 12px 12px;
}
.hero-inner::after {
  right: -120px;
  transform: translateY(-50%);
  background:
    radial-gradient(circle, var(--line-strong) 1px, transparent 1px);
  background-size: 12px 12px;
}
@media (max-width: 1400px) {
  .hero-inner::before, .hero-inner::after { display: none; }
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  justify-content: center;
  margin-bottom: 48px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(8px);
  overflow: hidden;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}
.badge {
  flex: 1 1 180px;
  padding: 14px 22px;
  text-align: left;
  border-right: 1px solid var(--line);
  transition: background 0.3s var(--ease-out);
}
.badge:last-child { border-right: none; }
.badge:hover { background: var(--bg-alt); }
.badge strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.badge span {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  font-weight: 400;
}

.hero h1 { margin: 24px auto 24px; max-width: 1200px; }
.hero .lead { margin: 0 auto 40px; max-width: 900px; text-wrap: balance; }
.hero-ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 80px;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 32px 0;
}
.stat { text-align: center; border-right: 1px solid var(--line); padding: 0 16px; }
.stat:last-child { border-right: none; }
.stat-value { font-size: clamp(30px, 4vw, 44px); font-weight: 700; letter-spacing: -0.04em; color: var(--ink); line-height: 1; }
.stat-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-top: 8px; }

/* Hero stagger reveal */
.hero-reveal {
  opacity: 0;
  transform: translateY(24px);
  animation: heroReveal 0.9s var(--ease-out) forwards;
}
.hero-reveal:nth-child(1) { animation-delay: 0.05s; }
.hero-reveal:nth-child(2) { animation-delay: 0.20s; }
.hero-reveal:nth-child(3) { animation-delay: 0.35s; }
.hero-reveal:nth-child(4) { animation-delay: 0.50s; }
.hero-reveal:nth-child(5) { animation-delay: 0.65s; }
.hero-reveal:nth-child(6) { animation-delay: 0.80s; }
@keyframes heroReveal { to { opacity: 1; transform: translateY(0); } }

@media (max-width: 760px) {
  .badge { flex: 1 1 50%; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .badge:nth-child(2n) { border-right: none; }
  .badge:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 460px) {
  .badge { flex: 1 1 100%; border-right: none !important; border-bottom: 1px solid var(--line) !important; }
  .badge:last-child { border-bottom: none !important; }
}
@media (max-width: 640px) {
  .hero { padding: 130px 0 80px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: none; }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--line); padding-bottom: 24px; }
  .stat:nth-child(3), .stat:nth-child(4) { padding-top: 24px; }
}

/* Compact hero variant for inner pages */
.hero-compact { padding: 140px 0 60px; }
.hero-compact .badge-row { display: none; }
.hero-compact h1 { font-size: clamp(40px, 6vw, 76px); max-width: 18ch; }
.hero-compact .hero-ctas { margin-bottom: 0; }
.hero-compact .hero-stats { display: none; }

/* ============================================================================
   03 MARQUEE
   ============================================================================ */
.marquee { padding: 60px 0; border-bottom: 1px solid var(--line); overflow: hidden; }
.marquee-label { text-align: center; margin-bottom: 28px; }
.marquee-track { display: flex; gap: 64px; animation: scroll 32s linear infinite; width: max-content; align-items: center; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes scroll { to { transform: translateX(-50%); } }
.marquee-item { font-size: 24px; font-weight: 700; color: var(--muted-2); white-space: nowrap; letter-spacing: -0.03em; transition: color 0.3s; }
.marquee-item:hover { color: var(--ink); }

/* ============================================================================
   SECTION SHARED
   ============================================================================ */
.section { padding: 120px 0; }
.section-head { text-align: center; margin-bottom: 72px; }
.section-head .eyebrow { margin-bottom: 16px; }
.section-head h2 { max-width: 24ch; margin: 0 auto 16px; }
.section-head .lead { margin: 0 auto; }

@media (max-width: 760px) { .section { padding: 80px 0; } }

/* ============================================================================
   04 FEATURES
   ============================================================================ */
.features { background: var(--bg-alt); }
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.feature {
  padding: 40px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background 0.3s var(--ease-out);
  position: relative;
}
.feature:nth-child(3n) { border-right: none; }
.feature:nth-last-child(-n+3) { border-bottom: none; }
.feature:hover { background: var(--bg-alt); }
.feature-icon {
  width: 44px; height: 44px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  transition: transform 0.4s var(--ease-out), background 0.3s, color 0.3s;
  font-size: 20px;
  font-weight: 700;
}
.feature:hover .feature-icon { transform: rotate(-6deg) scale(1.05); background: var(--ink); color: #fff; }
.feature h3 { margin-bottom: 12px; }
.feature p { color: var(--muted); font-size: 15px; }

@media (max-width: 900px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .feature:nth-child(3n) { border-right: 1px solid var(--line); }
  .feature:nth-child(2n) { border-right: none; }
  .feature:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); }
  .feature:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 600px) {
  .feature-grid { grid-template-columns: 1fr; }
  .feature { border-right: none !important; border-bottom: 1px solid var(--line) !important; padding: 32px 24px; }
  .feature:last-child { border-bottom: none !important; }
}

/* ============================================================================
   05 STEPS
   ============================================================================ */
.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.steps::before {
  content: '';
  position: absolute;
  top: 32px; left: 12%; right: 12%;
  height: 1px;
  background-image: linear-gradient(90deg, var(--ink) 50%, transparent 50%);
  background-size: 12px 1px;
}
.step { text-align: center; position: relative; z-index: 1; }
.step-number {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--ink);
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  transition: all 0.4s var(--ease-out);
  position: relative;
}
.step-number::before {
  content: '';
  position: absolute;
  inset: -6px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  opacity: 0;
  transition: all 0.4s var(--ease-out);
}
.step:hover .step-number { background: var(--ink); color: #fff; }
.step:hover .step-number::before { opacity: 1; inset: -10px; }
.step h3 { font-size: 19px; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 14px; }
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; gap: 40px; } .steps::before { display: none; } }

/* ============================================================================
   06 USE CASES
   ============================================================================ */
.use-cases { background: var(--bg-alt); }
.usecase-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.usecase {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 32px;
  position: relative;
  transition: all 0.4s var(--ease-out);
  overflow: hidden;
}
.usecase::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 2px;
  background: var(--ink);
  transition: width 0.5s var(--ease-out);
}
.usecase:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.usecase:hover::before { width: 100%; }
.usecase-tag {
  position: absolute;
  top: 24px; right: 24px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  padding: 4px 10px;
  border-radius: 999px;
}
.usecase h3 { font-size: 22px; margin: 64px 0 12px; }
.usecase p { font-size: 14px; color: var(--muted); }
.usecase.featured { grid-column: span 2; background: var(--ink); color: #fff; border-color: var(--ink); }
.usecase.featured h3, .usecase.featured p { color: #fff; }
.usecase.featured p { color: var(--muted-2); }
.usecase.featured .usecase-tag { color: #fff; border-color: rgba(255,255,255,0.3); }
.usecase.featured::before { background: #fff; }
@media (max-width: 900px) { .usecase-grid { grid-template-columns: repeat(2, 1fr); } .usecase.featured { grid-column: span 2; } }
@media (max-width: 560px) { .usecase-grid { grid-template-columns: 1fr; } .usecase.featured { grid-column: span 1; } }

/* ============================================================================
   07 COMPARE
   ============================================================================ */
.compare-wrap { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg); }
.compare-table { width: 100%; border-collapse: collapse; }
.compare-table th, .compare-table td { text-align: left; padding: 18px 24px; border-bottom: 1px solid var(--line); font-size: 15px; }
.compare-table th { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 500; background: var(--bg-alt); }
.compare-table tr:last-child td { border-bottom: none; }
.compare-table .col-self { background: var(--ink); color: #fff; font-weight: 600; }
.compare-table .col-self-head { background: var(--ink) !important; color: #fff; }
.check { font-weight: 600; }
.cross { color: var(--muted-2); }
@media (max-width: 600px) {
  .compare-table th, .compare-table td { padding: 14px 16px; font-size: 13px; }
}

/* ============================================================================
   08 METRICS
   ============================================================================ */
.metrics { background: var(--ink); color: #fff; }
.metrics .section-head h2 { color: #fff; }
.metrics .section-head .lead { color: var(--muted-2); }
.metrics .eyebrow { color: var(--muted-2); }
.metrics .eyebrow .dot { background: #fff; }
.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.metric { background: var(--ink); padding: 48px 32px; text-align: center; transition: background 0.3s; }
.metric:hover { background: #161616; }
.metric-value { font-size: clamp(46px, 6vw, 76px); font-weight: 700; letter-spacing: -0.05em; line-height: 1; }
.metric-suffix { font-size: 0.55em; color: var(--muted-2); margin-left: 4px; font-weight: 600; }
.metric-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); margin-top: 16px; }
@media (max-width: 800px) { .metric-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================================
   09 PRICING
   ============================================================================ */
.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.tier {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  transition: all 0.4s var(--ease-out);
  position: relative;
  display: flex;
  flex-direction: column;
}
.tier:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.tier.featured {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  transform: scale(1.02);
}
.tier.featured:hover { transform: scale(1.02) translateY(-4px); }
.tier.featured h3, .tier.featured .tier-price { color: #fff; }
.tier.featured .tier-features li { color: var(--muted-2); }
.tier.featured .tier-features li::before { background: #fff; }
.tier-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: #fff;
  color: var(--ink);
  padding: 4px 10px;
  border-radius: 999px;
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 600;
}
.tier h3 { font-size: 22px; margin-bottom: 8px; }
.tier-desc { color: var(--muted); font-size: 13px; margin-bottom: 24px; min-height: 36px; }
.tier.featured .tier-desc { color: var(--muted-2); }
.tier-price { font-size: 44px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; margin-bottom: 4px; }
.tier-price-sub { font-size: 13px; color: var(--muted); margin-bottom: 28px; }
.tier.featured .tier-price-sub { color: var(--muted-2); }
.tier-features { margin-bottom: 28px; flex: 1; }
.tier-features li { font-size: 13.5px; padding: 10px 0 10px 22px; position: relative; color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.tier.featured .tier-features li { border-color: rgba(255,255,255,0.1); }
.tier-features li:last-child { border-bottom: none; }
.tier-features li::before { content: ''; position: absolute; left: 0; top: 17px; width: 12px; height: 1px; background: var(--ink); }
.tier .btn { width: 100%; justify-content: center; }
.tier.featured .btn-primary { background: #fff; color: var(--ink); }
@media (max-width: 1000px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } .tier.featured { transform: none; } .tier.featured:hover { transform: translateY(-4px); } }
@media (max-width: 560px) { .pricing-grid { grid-template-columns: 1fr; } }

/* ============================================================================
   10 FAQ
   ============================================================================ */
.faq-wrap { max-width: 760px; margin: 0 auto; }
.faq { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 48px 24px 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  position: relative;
  transition: color 0.2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  font-size: 26px;
  font-weight: 300;
  transition: transform 0.3s var(--ease-out);
}
.faq[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq summary:hover { color: var(--muted); }
.faq-body { padding: 0 48px 24px 0; color: var(--muted); font-size: 15px; line-height: 1.7; }

/* ============================================================================
   11 FINAL CTA
   ============================================================================ */
.final-cta {
  text-align: center;
  padding: 140px 0;
  border-top: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: attr(data-watermark);
  position: absolute;
  bottom: -50px; left: 50%;
  transform: translateX(-50%);
  font-size: clamp(120px, 22vw, 320px);
  font-weight: 800;
  color: var(--bg-alt);
  letter-spacing: -0.05em;
  z-index: 0;
  pointer-events: none;
  line-height: 0.85;
  white-space: nowrap;
}
.final-cta-inner { position: relative; z-index: 1; }
.final-cta h2 { max-width: 1100px; margin: 0 auto 24px; }
.final-cta .lead { margin: 0 auto 40px; }
.final-cta .hero-ctas { margin-bottom: 0; }

/* ============================================================================
   12 FOOTER
   ============================================================================ */
.footer { padding: 80px 0 40px; background: var(--ink); color: #fff; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 64px; }
.footer-brand p { color: var(--muted-2); font-size: 14px; max-width: 320px; margin-top: 16px; line-height: 1.6; }
.footer-brand .logo { color: #fff; }
.footer-brand .logo-mark { background: #fff; }
.footer-brand .logo-mark::before { border-color: var(--ink); border-right-color: transparent; border-bottom-color: transparent; }
.footer-social { display: flex; gap: 16px; margin-top: 20px; }
.footer-social a { font-size: 13px; color: #fff; opacity: 0.7; transition: opacity 0.2s; padding: 6px 12px; border: 1px solid rgba(255,255,255,0.15); border-radius: 999px; }
.footer-social a:hover { opacity: 1; }
.footer-col h4 { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 16px; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { font-size: 14px; color: #fff; opacity: 0.7; transition: opacity 0.2s; }
.footer-col a:hover { opacity: 1; }
.footer-bottom {
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--muted-2);
  flex-wrap: wrap;
  gap: 12px;
}
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; gap: 32px; } }

/* ============================================================================
   FLOATING CONTACT PILL — bottom right, always visible
   ============================================================================ */
.floating-cta {
  position: fixed;
  right: 24px;
  bottom: calc(24px + var(--safe-bottom));
  z-index: 90;
  transition: transform 0.4s var(--ease-out), opacity 0.3s;
}
.floating-cta.is-hidden {
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
}
.fc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  transition: all 0.3s var(--ease-out);
  min-height: 48px;
}
.fc-toggle:hover { transform: translateY(-2px); box-shadow: 0 32px 80px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.06); }
.fc-toggle .fc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s var(--ease-out);
}
.floating-cta.is-open .fc-toggle .fc-icon { transform: rotate(45deg); }
.floating-cta.is-open .fc-toggle .fc-icon svg path { d: path("M12 5v14M5 12h14"); }
.fc-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transform-origin: bottom right;
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.floating-cta.is-open .fc-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.fc-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  border-radius: 8px;
  text-align: left;
  width: 100%;
  cursor: pointer;
  transition: background 0.2s;
  text-decoration: none;
  color: var(--ink);
}
.fc-option:hover { background: var(--bg-alt); }
.fc-option-title { font-weight: 600; font-size: 14px; color: var(--ink); }
.fc-option-sub { font-size: 12px; color: var(--muted); }

@media (max-width: 600px) {
  .floating-cta { right: 16px; bottom: calc(16px + var(--safe-bottom)); }
  .fc-toggle .fc-label { display: none; }
  .fc-toggle { padding: 14px; width: 52px; height: 52px; justify-content: center; }
  .fc-panel { min-width: calc(100vw - 32px); right: 0; }
}

/* ============================================================================
   SCROLL REVEAL
   ============================================================================ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-stagger > * { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.reveal-stagger.visible > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.10s; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.15s; }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.20s; }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.25s; }
.reveal-stagger.visible > *:nth-child(6) { transition-delay: 0.30s; }

/* ============================================================================
   CONTACT PAGE
   ============================================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  max-width: 1000px;
  margin: 0 auto;
}
.contact-info h3 { font-size: 28px; margin-bottom: 16px; }
.contact-info p { color: var(--muted); margin-bottom: 24px; }
.contact-method {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.contact-method:last-child { border-bottom: none; }
.contact-method-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.contact-method strong { font-size: 17px; font-weight: 600; }
.contact-form {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px;
}
.form-group { margin-bottom: 18px; }
.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  transition: border 0.2s;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-color: var(--ink);
}
.form-group textarea { min-height: 120px; resize: vertical; }
.contact-form .btn { width: 100%; justify-content: center; margin-top: 8px; }

@media (max-width: 760px) {
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .contact-form { padding: 24px; }
}

/* ============================================================================
   404
   ============================================================================ */
.error-page {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 24px 80px;
}
.error-page h1 { font-size: clamp(80px, 14vw, 200px); }
.error-page h2 { font-size: clamp(24px, 3vw, 32px); margin: 8px 0 24px; }

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero-reveal { opacity: 1; transform: none; }
  .reveal { opacity: 1; transform: none; }
  .reveal-stagger > * { opacity: 1; transform: none; }
}

/* ============================================================================
   PRINT
   ============================================================================ */
@media print {
  .nav, .footer, .floating-cta, .marquee { display: none !important; }
  .hero { padding: 20px 0; }
  body { color: #000; background: #fff; }
}

/* ============================================================================
   ASSETLENS BRAND OVERLAY
   ----------------------------------------------------------------------------
   Loaded last so it overrides the template defaults. Switches the typeface to
   IBM Plex Sans, uses JetBrains Mono for numbers, removes rounded corners and
   shadows, and uses the same status palette as the AssetLens application.
   ============================================================================ */

:root {
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --status-green: #1b8a2a;
  --status-amber: #c77d00;
  --status-red:   #c62828;
}

html, body { font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; }

/* Numbers, codes, identifiers */
.stat-value, .tier-price, .metric-num, .mono,
.compare-table td:nth-child(2), .compare-table td:nth-child(3),
.tier-price-was {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-feature-settings: 'tnum' on, 'lnum' on;
}

/* Flatten everything — dense ERP feel */
.badge, .btn, .stat, .feature, .step, .usecase,
.tier, .compare-wrap, .marquee, input, textarea, select,
.eyebrow, .tier-tag, .contact-form-wrap, .contact-method,
.faq-item, .nav-cta {
  border-radius: 0 !important;
  box-shadow: none !important;
}

.btn:hover,
.tier:hover,
.usecase:hover,
.feature:hover { transform: none !important; box-shadow: none !important; }

/* Primary button: solid black, square, no transform on hover */
.btn-primary {
  background: #1a1a1a;
  color: #fff;
  border: 1px solid #1a1a1a;
}
.btn-primary:hover {
  background: #000;
  color: #fff;
  border-color: #000;
}

/* Secondary / ghost: white with black border */
.btn-ghost {
  background: #fff;
  color: #1a1a1a;
  border: 1px solid #1a1a1a;
}
.btn-ghost:hover {
  background: #fafafa;
  color: #1a1a1a;
}

/* Hero motion: subtle pulsing dot on the "AssetLens 1.0 — now generally available" eyebrow.
   Hints to visitors that the product is live & shipping, without distracting from copy. */
.hero .eyebrow .dot {
  background: var(--status-amber);
  animation: al-pulse 2.2s ease-in-out infinite;
}
@keyframes al-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(199, 125, 0, 0.6); }
  50%      { box-shadow: 0 0 0 6px rgba(199, 125, 0, 0); }
}

/* Hero h1: subtle entrance — slight fade-up on first paint. */
.hero h1 { animation: al-rise 0.7s cubic-bezier(.16,.84,.44,1) 0.1s both; }
@keyframes al-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero .lead { animation: al-rise 0.7s cubic-bezier(.16,.84,.44,1) 0.25s both; }
.hero-ctas  { animation: al-rise 0.7s cubic-bezier(.16,.84,.44,1) 0.4s both; }
.hero-stats { animation: al-rise 0.7s cubic-bezier(.16,.84,.44,1) 0.55s both; }
@media (prefers-reduced-motion: reduce) {
  .hero .eyebrow .dot { animation: none; }
  .hero h1, .hero .lead, .hero-ctas, .hero-stats { animation: none; }
}
h1 { letter-spacing: -0.02em; font-weight: 600; }
h2 { letter-spacing: -0.01em; font-weight: 600; }
h3, h4 { font-weight: 600; }

/* Eyebrow: amber dot for status feel */
.eyebrow .dot { background: var(--status-amber); }

/* Featured tier: black border, no glow.
   Important: the BASE CSS made featured tier dark-bg/white-text. The brand overlay
   flips this to white-bg, so we must also flip all the text colors back to dark or
   they vanish (white-on-white). */
.tier.featured {
  border: 2px solid #1a1a1a;
  background: #fff;
  color: var(--ink);
}
.tier.featured h3,
.tier.featured .tier-price,
.tier.featured .tier-price-sub,
.tier.featured .tier-desc {
  color: var(--ink) !important;
}
.tier.featured .tier-features li {
  color: var(--ink-soft) !important;
  border-color: var(--line) !important;
}
.tier.featured .tier-features li::before {
  background: var(--ink) !important;
}
.tier.featured .btn-primary {
  background: var(--ink) !important;
  color: #fff !important;
  border-color: var(--ink) !important;
}
.tier-tag {
  background: #1a1a1a;
  color: #fff;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 10px;
}

/* Strikethrough for "was" price */
.tier-price-was {
  text-decoration: line-through;
  color: var(--muted);
  font-size: 0.55em;
  vertical-align: super;
  margin-right: 8px;
  font-weight: 400;
}

/* Comparison table: dense ERP-style with prominent column highlighting */
.compare-wrap {
  border: 1px solid #1a1a1a !important;
  border-radius: 0 !important;
  overflow: hidden;
  box-shadow: none;
}
.compare-table thead th,
.compare-head {
  background: #1a1a1a !important;
  color: #fff !important;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px !important;
  font-weight: 600;
  padding: 14px 20px !important;
  border-bottom: 2px solid #000;
}
.compare-table tbody tr:nth-child(odd)  { background: #ffffff; }
.compare-table tbody tr:nth-child(even) { background: #f7f7f7; }
.compare-table tbody tr:hover           { background: #efefef; }
.compare-table td, .compare-table th {
  border-bottom: 1px solid #e5e5e5 !important;
  font-size: 13px !important;
  padding: 14px 20px !important;
  vertical-align: middle;
}
/* First column: row labels in mono, slightly muted */
.compare-table tbody td:first-child {
  font-weight: 500;
  color: #1a1a1a;
  background: #fafafa;
  border-right: 1px solid #e5e5e5;
}
.compare-table tbody tr:nth-child(even) td:first-child { background: #f0f0f0; }
/* "Self" column: dark with white text, mono font for the value cells */
.compare-table .col-self,
.compare-table tbody td:nth-child(2) {
  background: #1a1a1a !important;
  color: #fff !important;
  font-family: var(--font-mono);
  font-weight: 500;
  border-right: 2px solid #000 !important;
}
.compare-table tbody tr:nth-child(even) td:nth-child(2) { background: #1f1f1f !important; }
/* Competitor columns: greyed out, mono */
.compare-table tbody td:nth-child(3),
.compare-table tbody td:nth-child(4) {
  font-family: var(--font-mono);
  color: var(--muted);
  font-size: 12.5px !important;
}

/* Feature cards: hairline border, no shadow */
.feature, .usecase, .step, .tier, .faq-item {
  border: 1px solid var(--line);
  background: #fff;
}

/* Step cards: padding so the step-number circle and its hover ring have
   breathing room inside the card border (the ring expands to inset:-10px
   on hover, which previously broke through the top edge). */
.step {
  padding: 24px 18px;
}
.step .step-number {
  margin: 4px auto 18px;  /* small top margin so the ring doesn't clip card border */
}
.step:hover .step-number::before { inset: -8px; }  /* slightly smaller ring so it stays inside */

/* Make the feature icon look like an ERP glyph */
.feature-icon, .step-num {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  background: #1a1a1a;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 18px;
  border-radius: 0;
}

/* Nav: thin border, square logo, dense */
.site-nav, header.site-header {
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.nav-logo {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* FAQ: dense list, no fancy chrome */
.faq-item summary { font-weight: 500; }

/* Stats / metrics — monospace digits feel ERP */
.metric-num { color: #1a1a1a; font-weight: 600; }

/* Final CTA / footer */
.final-cta {
  background: #1a1a1a;
  color: #fff;
}
.final-cta h2, .final-cta p { color: #fff; }
.final-cta .btn-ghost {
  background: transparent;
  color: #fff;
  border-color: #fff;
}
.final-cta .btn-ghost:hover { background: rgba(255,255,255,0.08); }
/* Watermark wordmark: subtle near-black tone on the dark CTA background.
   Without this override, the watermark color is var(--bg-alt) (#fafafa) which
   reads as bright white and overpowers the foreground content.
   Position with the whole word inside the section (not clipped at bottom). */
.final-cta::before {
  color: rgba(255, 255, 255, 0.05) !important;
  font-size: clamp(60px, 12vw, 180px) !important;
  bottom: 12px !important;       /* keep the bottom of the letters INSIDE the section */
  opacity: 1 !important;
  line-height: 0.9 !important;
}

/* Marquee: thinner, more workmanlike */
.marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
}
.marquee-item {
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.02em;
  font-size: 13px;
}

/* Footer */
.site-footer {
  background: #fafafa;
  border-top: 1px solid var(--line);
}

/* Floating contact pill: square, branded */
.contact-pill {
  border-radius: 0 !important;
  background: #1a1a1a;
  color: #fff;
  border: 1px solid #1a1a1a;
}