/* LIXA Premium Dark Design System */

/* ============================================
   FOUNDATIONS
   ============================================ */

:root {
  /* Colors - Premium Dark */
  --black: #0a0a0a;
  --black-2: #0f0f0f;
  --black-3: #141414;
  --black-4: #1a1a1a;
  --border: #1f1f1f;
  --border-2: #2a2a2a;
  --card-surface: linear-gradient(180deg, rgba(12,13,14,0.98), rgba(5,5,6,0.98));
  --card-surface-2: linear-gradient(180deg, rgba(15,16,18,0.96), rgba(8,8,9,0.96));
  --white: #ffffff;
  --white-2: #ededed;
  --white-3: #d4d4d4;
  --gray: #a1a1a1;
  --gray-2: #6f6f6f;
  --gray-3: #4a4a4a;
  
  /* Semantic Colors */
  --success: #22c55e;
  --success-glow: rgba(34,197,94,0.15);
  --warning: #fbbf24;
  --warning-glow: rgba(251,191,36,0.15);
  --error: #ef4444;
  --error-glow: rgba(239,68,68,0.15);
  --info: #60a5fa;
  
  /* Typography */
  --font-serif: 'Spectral', serif;
  --font-sans: 'Inter', sans-serif;
  
  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 120px;
  
  /* Layout */
  --max-width: 1280px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 100px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.2);
  
  /* Transitions */
  --transition: 0.2s cubic-bezier(0.4,0,0.2,1);
}

/* ============================================
   RESET & BASE
   ============================================ */

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  background: #000;
  color: var(--white-2);
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.026;
  background-image:
    radial-gradient(rgba(255,255,255,0.10) 0.4px, transparent 0.58px),
    radial-gradient(rgba(255,255,255,0.04) 0.26px, transparent 0.42px);
  background-size: 6px 6px, 11px 11px;
  background-position: 0 0, 1px 1px;
  mix-blend-mode: soft-light;
}

a {
  text-decoration: none;
  color: inherit;
}

button, input, select, textarea {
  font: inherit;
}

::selection {
  background: var(--white);
  color: var(--black);
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--white);
}

h1 {
  font-size: clamp(48px, 8vw, 84px);
  margin-bottom: var(--space-6);
}

h2 {
  font-size: clamp(36px, 6vw, 56px);
  margin-bottom: var(--space-5);
}

h3 {
  font-size: clamp(24px, 4vw, 36px);
  margin-bottom: var(--space-4);
}

h4 {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: var(--space-3);
}

p {
  color: var(--gray);
  line-height: 1.7;
  margin-bottom: var(--space-4);
}

.label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-2);
  margin-bottom: var(--space-3);
  font-weight: 600;
}

/* ============================================
   LAYOUT
   ============================================ */

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-7);
}

.section {
  padding: var(--space-12) 0;
}

.section-dark {
  background: #000;
}

.section-header-center {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--space-10);
}

.section-header-center h2 {
  margin-bottom: var(--space-4);
}

.section-header-center p {
  font-size: 18px;
  color: var(--gray);
}

.section-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-11);
  align-items: center;
}

.section-grid-reverse {
  direction: rtl;
}

.section-grid-reverse > * {
  direction: ltr;
}

.section-content h2 {
  margin-top: var(--space-3);
  margin-bottom: var(--space-4);
}

.section-content p {
  font-size: 17px;
  line-height: 1.7;
}

/* ============================================
   NAVIGATION
   ============================================ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(10,10,12,0.18);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  backdrop-filter: blur(18px) saturate(115%);
  transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease, opacity .25s ease;
}

.home-page .nav {
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.home-page .nav.scrolled {
  background: rgba(10,10,12,0.14);
  border-bottom-color: rgba(255,255,255,0.06);
  -webkit-backdrop-filter: blur(20px) saturate(115%);
  backdrop-filter: blur(20px) saturate(115%);
}


.nav-content {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px 0;
  min-height: 74px;
  gap: 24px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--white);
}

.logo-icon {
  width: 22px;
  height: 22px;
  display: block;
  flex: 0 0 22px;
}

.logo-word {
  font-size: 14px;
  letter-spacing: 0.28em;
  line-height: 1;
}

.nav-links {
  display: flex;
  gap: 28px;
  align-items: center;
  justify-self: center;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-self: end;
}

.nav-link {
  color: rgba(237,237,237,0.82);
  font-size: 14px;
  font-weight: 500;
  transition: color var(--transition), opacity var(--transition);
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.38), transparent);
  opacity: 0;
  transform: scaleX(.35);
  transition: transform .24s ease, opacity .24s ease;
}
.nav-link:hover {
  color: var(--white);
}
.nav-link:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

/* ============================================
   BUTTONS
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px 20px;
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--transition), color var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition);
  border: 1px solid rgba(255,255,255,0.10);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn::before,
.btn::after {
  content: '';
  position: absolute;
  inset: auto;
  width: 160px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(242,245,248,0.05) 16%, rgba(234,238,242,0.92) 50%, rgba(242,245,248,0.05) 84%, transparent 100%);
  box-shadow: 0 0 10px rgba(235,238,242,0.18);
  transition: transform 0.7s cubic-bezier(0.22,1,0.36,1), opacity 0.18s ease;
}
.btn::before {
  top: 11px;
  right: -170px;
  transform: rotate(-11deg);
}
.btn::after {
  bottom: 11px;
  left: -170px;
  transform: rotate(-11deg);
}
.btn:hover::before,
.btn:hover::after { opacity: 1; }
.btn:hover::before { transform: translateX(-178px) rotate(-11deg); }
.btn:hover::after { transform: translateX(178px) rotate(-11deg); }
.btn > * { position: relative; z-index: 1; }
.btn-primary {
  background: linear-gradient(180deg, rgba(248,249,251,0.10), rgba(200,205,212,0.04));
  color: var(--white);
  border-color: rgba(255,255,255,0.14);
}
.btn-primary:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(248,249,251,0.12), rgba(200,205,212,0.06));
}
.btn-secondary {
  background: rgba(255,255,255,0.015);
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.10);
}
.btn-secondary:hover { background: rgba(255,255,255,0.028); }
.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-lg { padding: 14px 28px; font-size: 15px; }
.btn-block { width: 100%; }

/* ============================================
   HERO
   ============================================ */

.hero {
  min-height: 100vh;
  padding: 140px 0 110px;
  text-align: center;
  position: relative;
  overflow: clip;
  display: flex;
  align-items: center;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(82% 125% at 0% 100%, rgba(158,164,172,0.18) 0%, rgba(0,0,0,0) 55%),
    radial-gradient(74% 120% at 100% 0%, rgba(176,182,190,0.16) 0%, rgba(0,0,0,0) 47%),
    radial-gradient(52% 78% at 72% 42%, rgba(255,255,255,0.038) 0%, rgba(0,0,0,0) 62%),
    linear-gradient(180deg, #0f1012 0%, #070708 58%, #000000 100%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.10;
  background-image:
    radial-gradient(rgba(255,255,255,0.22) 0.5px, transparent 0.7px),
    radial-gradient(rgba(255,255,255,0.06) 0.35px, transparent 0.5px);
  background-size: 4px 4px, 8px 8px;
  background-position: 0 0, 1px 1px;
  mix-blend-mode: soft-light;
}

.hero > .container {
  position: relative;
  z-index: 1;
}

.hero-content {
  max-width: 900px;
  margin: 0 auto;
}

.hero-title {
  background: linear-gradient(180deg, var(--white) 0%, var(--gray) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--space-6);
}

.hero-subtitle {
  font-size: 20px;
  color: var(--gray);
  line-height: 1.6;
  margin-bottom: var(--space-6);
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
}

.hero-cta {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  max-width: 620px;
  margin: 0;
}

.stat {
  text-align: center;
}

.stat-value {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 500;
  color: var(--white);
  margin-bottom: var(--space-2);
}

.stat-label {
  font-size: 13px;
  color: var(--gray-2);
}

/* ============================================
   CARDS
   ============================================ */

.card-highlight {
  background: linear-gradient(180deg, rgba(16,17,19,0.96), rgba(8,8,9,0.96));
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  transition: border-color var(--transition);
}

.card-highlight:hover {
  border-color: var(--border-2);
}

.card-highlight-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray);
}

.icon-badge {
  width: 40px;
  height: 40px;
  background: linear-gradient(180deg, rgba(22,22,24,0.96), rgba(10,10,11,0.96));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(244,246,248,0.92);
}

.icon-badge svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.icon-badge.success {
  background: linear-gradient(180deg, rgba(18,30,22,0.95), rgba(9,18,12,0.95));
  border-color: rgba(84,196,125,0.35);
  color: #7be39d;
}

.problem-list,
.solution-list {
  list-style: none;
}

.problem-list li,
.solution-list li {
  padding: var(--space-3) 0;
  color: var(--gray);
  border-bottom: 1px solid var(--border);
}

.problem-list li:last-child,
.solution-list li:last-child {
  border-bottom: none;
}

/* ============================================
   FEATURES
   ============================================ */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-6);
}

.feature-card {
  background: linear-gradient(180deg, rgba(16,17,19,0.96), rgba(8,8,9,0.96));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  transition: all var(--transition);
}

.feature-card:hover {
  border-color: var(--border-2);
  transform: translateY(-2px);
}

.feature-icon {
  width: 48px;
  height: 48px;
  background: var(--black-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: var(--space-5);
}


.feature-icon svg {
  width: 22px;
  height: 22px;
  stroke: rgba(235,238,242,0.92);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.feature-icon svg circle,
.feature-icon svg path,
.feature-icon svg line,
.feature-icon svg polyline,
.feature-icon svg rect {
  vector-effect: non-scaling-stroke;
}

.feature-card h3 {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: var(--space-3);
  color: var(--white);
}

.feature-card p {
  color: var(--gray);
  line-height: 1.7;
  margin: 0;
}

/* ============================================
   PLATFORM PREVIEW
   ============================================ */

.platform-preview {
  max-width: 1000px;
  margin: 0 auto;
}

.browser-mockup {
  background: var(--card-surface);
  background: linear-gradient(180deg, rgba(16,17,19,0.96), rgba(8,8,9,0.96));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.browser-header {
  background: rgba(255,255,255,0.025);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.browser-dots {
  display: flex;
  gap: var(--space-2);
}

.browser-dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--border-2);
}

.browser-url {
  flex: 1;
  background: rgba(7,7,8,0.72);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: 13px;
  color: var(--gray-2);
}

.browser-content {
  padding: clamp(24px, 4vw, 42px);
}

.audit-demo {
  max-width: 720px;
  margin: 0 auto;
}

.audit-input-group {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.audit-input {
  flex: 1;
  padding: 12px 16px;
  background: rgba(7,7,8,0.72);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-md);
  color: var(--white);
  font-size: 14px;
}

.audit-results-preview {
  display: flex;
  gap: var(--space-7);
  align-items: flex-start;
}

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

.score-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: var(--space-3);
}

.score-label {
  font-size: 12px;
  color: var(--gray-2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.audit-issues-preview {
  flex: 1;
}

.issue-item {
  padding: var(--space-3) var(--space-4);
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 13px;
}

.issue-item.critical {
  border-color: var(--error);
  background: var(--error-glow);
}

.issue-item.high {
  border-color: var(--white);
  background: var(--warning-glow);
}

.issue-item.medium {
  border-color: var(--info);
  background: rgba(96,165,250,0.08);
}

.issue-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-2);
}

/* ============================================
   USE CASES
   ============================================ */

.use-case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-6);
}

.use-case-card {
  background: linear-gradient(180deg, rgba(16,17,19,0.96), rgba(8,8,9,0.96));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
}

.use-case-card h3 {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: var(--space-4);
}

.use-case-card p {
  color: var(--gray);
  line-height: 1.7;
  margin-bottom: var(--space-5);
}

.use-case-metric {
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.metric-value {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 500;
  color: var(--white);
}

.metric-label {
  font-size: 13px;
  color: var(--gray-2);
}

/* ============================================
   PRICING PREVIEW
   ============================================ */

.pricing-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
  max-width: 1100px;
  margin: 0 auto;
}

.pricing-preview-card {
  background: linear-gradient(180deg, rgba(16,17,19,0.96), rgba(8,8,9,0.96));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-7);
  position: relative;
  transition: all var(--transition);
}

.pricing-preview-card:hover {
  border-color: var(--border-2);
  transform: translateY(-4px);
}

.pricing-preview-card.featured {
  border-color: var(--white);
  transform: scale(1.02);
}

.pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--white);
  color: var(--black);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 12px;
  border-radius: var(--radius-full);
}

.pricing-tier {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-2);
  margin-bottom: var(--space-3);
}

.pricing-price {
  font-family: var(--font-serif);
  font-size: 48px;
  font-weight: 500;
  color: var(--white);
  margin-bottom: var(--space-5);
}

.pricing-price span {
  font-size: 18px;
  color: var(--gray);
}

.pricing-features-preview {
  list-style: none;
  margin-bottom: var(--space-6);
}

.pricing-features-preview li {
  padding: var(--space-3) 0;
  color: var(--gray);
  font-size: 14px;
}

.pricing-cta-note {
  text-align: center;
  margin-top: var(--space-7);
}

.pricing-cta-note a {
  color: var(--white);
  font-weight: 500;
  transition: color var(--transition);
}

.pricing-cta-note a:hover {
  color: var(--gray);
}

/* ============================================
   CTA SECTION
   ============================================ */

.cta-section {
  padding: var(--space-12) 0;
}

.cta-content {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.cta-content h2 {
  margin-bottom: var(--space-5);
}

.cta-content p {
  font-size: 18px;
  color: var(--gray);
  margin-bottom: var(--space-6);
}

.cta-note {
  margin-top: var(--space-4);
  font-size: 13px;
  color: var(--gray-2);
}

/* ============================================
   FOOTER
   ============================================ */

.footer {
  border-top: 1px solid var(--border);
  padding: var(--space-11) 0 var(--space-7);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: var(--space-10);
  margin-bottom: var(--space-9);
}

.footer-brand p {
  color: var(--gray-2);
  margin-top: var(--space-3);
}

.footer-col h4 {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-4);
  color: var(--white);
}

.footer-col ul {
  list-style: none;
}

.footer-col li {
  margin-bottom: var(--space-3);
}

.footer-col a {
  color: var(--gray);
  font-size: 14px;
  transition: color var(--transition);
}

.footer-col a:hover {
  color: var(--white);
}

.footer-bottom {
  padding-top: var(--space-7);
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--gray-2);
  font-size: 13px;
}

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

@media (max-width: 968px) {
  .section-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  
  .section-grid-reverse {
    direction: ltr;
  }
  
  .hero-cta {
    flex-direction: column;
  }
  
  .hero-stats {
    gap: var(--space-6);
  }
  
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
  
  .pricing-preview-grid {
    grid-template-columns: 1fr;
  }
  
  .audit-results-preview {
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .container {
    padding: 0 var(--space-5);
  }
  
  .nav-links {
    gap: var(--space-4);
  }
  
  .nav-link:not(.btn) {
    display: none;
  }
  
  .hero {
    padding: calc(var(--space-10) + 80px) 0 var(--space-10);
  }
  
  .hero-stats {
    flex-direction: column;
    gap: var(--space-6);
  }
  
  .section {
    padding: var(--space-10) 0;
  }
  
  .footer-grid {
    grid-template-columns: 1fr;
  }
  
  .feature-grid,
  .use-case-grid {
    grid-template-columns: 1fr;
  }
}

.logo{display:flex;align-items:center;gap:0}.logo-icon{display:block;width:28px;height:28px}.logo-word{display:none}


.browser-mockup::before {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
}

.audit-demo {
  display: grid;
  gap: 24px;
}

.audit-input-group {
  align-items: stretch;
}

.audit-input,
.issue-item,
.browser-url {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.issue-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.82);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nav .btn-sm:hover {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 0 12px rgba(255,255,255,0.05);
}

.code-showcase {
  max-width: 1080px;
  margin: 0 auto;
}
.code-shell {
  background: linear-gradient(180deg, rgba(12,13,14,0.98), rgba(5,5,6,0.98));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.code-shell-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.02);
}
.code-tabs { display:flex; flex-wrap:wrap; gap:10px; }
.code-tab {
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.025);
  color: var(--gray);
  font-size: 12px;
  font-weight: 600;
}
.code-tab.active {
  color: var(--white);
  border-color: rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.05);
}
.code-shell-body {
  display:grid;
  grid-template-columns: 1.1fr .9fr;
}
.code-block {
  padding: 26px 24px 28px;
  border-right: 1px solid rgba(255,255,255,0.07);
  min-height: 100%;
}
.code-block pre {
  margin:0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.8;
  color: #d8dee8;
  white-space: pre-wrap;
}
.code-block .kw { color:#ffffff; }
.code-block .fn { color:#dfe7ef; }
.code-block .str { color:#a5b4c7; }
.code-block .cm { color:#798392; }
.code-preview-panel {
  padding: 24px;
  display:grid;
  gap:16px;
}
.preview-mini-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px;
  padding: 16px;
}
.preview-mini-card h4 {
  margin-bottom: 8px;
  font-size: 15px;
}
.preview-mini-stat {
  font-family: var(--font-serif);
  font-size: 34px;
  color: var(--white);
  margin-bottom: 6px;
}
.reviews-marquee {
  overflow: hidden;
  position: relative;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.reviews-track {
  display:flex;
  gap: 22px;
  width: max-content;
  align-items: stretch;
  animation: reviewsMarquee 34s linear infinite;
}
.reviews-marquee:hover .reviews-track { animation-play-state: paused; }
.review-card {
  background: linear-gradient(180deg, rgba(16,17,19,0.96), rgba(8,8,9,0.96));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  border-radius: 22px;
  padding: 22px;
  width: 360px;
  flex: 0 0 360px;
}
.review-proof {
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:14px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: var(--gray);
  font-size:12px;
}
.review-copy {
  color: var(--white-3);
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 20px;
}
.review-person {
  display:flex;
  align-items:center;
  gap: 12px;
}
.review-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.10);
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
}
.review-person strong { display:block; color: var(--white); font-size: 14px; }
.review-person span { color: var(--gray-2); font-size: 13px; }
@keyframes reviewsMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 11px)); }
}
  to { transform: translateX(calc(-50% - 11px)); }
}
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 968px) {
  .code-shell-body { grid-template-columns: 1fr; }
  .code-block { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); }
  .review-card { width: 300px; flex-basis: 300px; }
  .nav-links { gap: 18px; }
}


/* Premium pass overrides */
.premium-hero{padding:148px 0 112px;position:relative;overflow:hidden;background:#000}
.premium-hero::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(72% 132% at 82% 18%, rgba(118,126,142,.20) 0%, rgba(118,126,142,0) 50%),radial-gradient(54% 102% at 16% 88%, rgba(70,76,88,.13) 0%, rgba(70,76,88,0) 46%),linear-gradient(180deg,#05060a 0%, #040405 58%, #000 100%);}
.premium-hero::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.038;background-image:radial-gradient(rgba(255,255,255,.12) .42px,transparent .6px),radial-gradient(rgba(255,255,255,.04) .26px,transparent .42px);background-size:8px 8px,12px 12px;background-position:0 0,2px 2px;mix-blend-mode:soft-light}
.hero-shell{display:grid;grid-template-columns:minmax(620px,700px) minmax(520px,620px);justify-content:space-between;gap:88px;align-items:center;min-height:calc(100vh - 148px)}
.hero-copy{max-width:680px;justify-self:start;padding-top:10px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid rgba(255,255,255,.09);border-radius:999px;background:rgba(255,255,255,.03);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--white-3);margin-bottom:24px}
.hero-title{max-width:11.8ch;margin-bottom:18px;font-size:clamp(62px,6.2vw,88px);line-height:.94;letter-spacing:-.04em;text-wrap:balance}
.hero-subtitle{max-width:520px;font-size:17px;color:#b8bcc4;margin-bottom:24px}
.hero-trustline{margin-top:18px;color:#9ca3af;font-size:13px}
.hero-visual{display:flex;justify-content:flex-end;justify-self:end;align-self:center;padding-top:0;transform:translate(18px,-6px)}
.premium-card{background:linear-gradient(180deg, rgba(15,16,18,.96) 0%, rgba(8,9,10,.96) 100%);border:1px solid rgba(255,255,255,.08);border-radius:22px;position:relative;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.premium-card::before{content:'';position:absolute;left:20px;right:20px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent)}
.hero-panel{padding:22px;max-width:560px;width:100%;margin-top:0}
.hero-panel-top,.hero-panel-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.panel-pill,.metric-chip,.card-topline{display:inline-flex;align-items:center;padding:7px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#d7dbe2}
.panel-meta{font-size:12px;color:#9ca3af}
.hero-terminal{margin:18px 0 16px;border:1px solid rgba(255,255,255,.07);border-radius:18px;background:#08090b;overflow:hidden}
.hero-terminal pre,.code-block pre{margin:0;padding:20px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.7;color:#d7dbe2;white-space:pre-wrap}
.cm{color:#6f7685}.kw{color:#efefef}.fn{color:#c8d2e5}.str{color:#d7bea0}.num{color:#d8e5b2}
.trust-strip{border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05);background:#000}
.trust-strip-inner{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;padding:18px 0;text-align:center;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#8e939d}
.split-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,.95fr);gap:28px;align-items:center}.split-grid-reverse{grid-template-columns:minmax(380px,.95fr) minmax(0,1fr)}
.icon-list-card{padding:28px}.modern-list{list-style:none;display:grid;gap:18px}.modern-list li{display:grid;grid-template-columns:42px 1fr;gap:14px;align-items:flex-start}.modern-list li p{margin-top:4px;color:#9ca3af;font-size:14px}
.inline-icon{width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08)}
.showcase-grid{display:grid;grid-template-columns:minmax(300px,.85fr) minmax(0,1.15fr);gap:24px;align-items:stretch}.showcase-copy{padding:28px;display:flex;flex-direction:column;justify-content:space-between}.showcase-list{list-style:none;display:grid;gap:14px;margin:18px 0 24px}.showcase-list li{padding-left:18px;position:relative;color:#cfd3db}.showcase-list li::before{content:'';position:absolute;left:0;top:10px;width:7px;height:7px;border-radius:50%;background:#adb5c4;box-shadow:0 0 0 6px rgba(173,181,196,.08)}
.metrics-band{padding-top:0}.metrics-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.metric-panel{padding:24px;display:flex;flex-direction:column;gap:6px;min-height:140px;justify-content:flex-end}.big-metric{font-family:var(--font-serif);font-size:48px;line-height:1;color:#fff;letter-spacing:-.03em}.metric-panel span:last-child{color:#9ca3af;font-size:14px}
.feature-card,.pricing-preview-card,.use-case-card,.review-card,.stat-card-lite{background:linear-gradient(180deg, rgba(15,16,18,.96) 0%, rgba(8,9,10,.96) 100%) !important;border:1px solid rgba(255,255,255,.08) !important;border-radius:22px !important}
.use-case-card{padding:28px}.use-case-card p{margin:14px 0 20px;color:#a8aeb8}.use-case-metric{display:flex;flex-direction:column;gap:4px}.metric-value{font-family:var(--font-serif);font-size:40px;line-height:1;color:#fff}.metric-label{font-size:13px;color:#9298a2}
.reviews-section{overflow:hidden}.full-bleed-marquee{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;overflow:hidden;padding:6px 0 0}.reviews-track-fixed{display:flex;gap:20px;width:max-content;animation:marqueeX 44s linear infinite}.full-bleed-marquee:hover .reviews-track-fixed{animation-play-state:paused}.review-card{width:360px;padding:24px}.review-copy{font-size:15px;color:#d5d9e1;margin-bottom:18px}.review-person span{display:block;font-size:12px;color:#9096a1}.review-proof{margin-top:14px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#b9c0cb}
@keyframes marqueeX{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.docs-cta{padding:32px;display:flex;justify-content:space-between;gap:20px;align-items:center}.docs-cta p{max-width:720px}.docs-cta-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{border-radius:999px}
.btn-primary{background:linear-gradient(180deg,#f4f5f6 0%,#dfe2e6 100%);color:#0a0a0b;border:1px solid rgba(255,255,255,.08)}
.btn-primary:hover{background:#fff}
.btn-secondary{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.11);color:#f3f4f6}
.btn-secondary:hover{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.18)}
.section-header-center .label,.section-content .label{margin-bottom:14px}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease}.reveal.is-visible{opacity:1;transform:none}

@media (max-width: 1100px){.hero-shell,.split-grid,.split-grid-reverse,.showcase-grid{grid-template-columns:1fr}.hero-visual{justify-content:flex-start;justify-self:start;transform:none;padding-top:0}.metrics-grid,.trust-strip-inner{grid-template-columns:repeat(3,minmax(0,1fr))}.docs-cta{flex-direction:column;align-items:flex-start}}
@media (max-width: 720px){.premium-hero{padding:132px 0 88px}.trust-strip-inner,.metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-title{max-width:none}.review-card{width:300px}.docs-cta{padding:24px}}
@media (max-width: 560px){.trust-strip-inner,.metrics-grid{grid-template-columns:1fr}.hero-stats{grid-template-columns:1fr}.hero-panel{padding:18px}.use-case-card,.showcase-copy,.icon-list-card,.docs-cta{padding:22px}}

.stat-card-lite{padding:18px 20px;min-height:108px;text-align:left}.stat-card-lite .stat-value{font-size:34px;margin-bottom:8px}.stat-card-lite .stat-label{color:#9ca3af}
.nav-actions .btn{min-width:132px}
@media (max-width: 1100px){.hero-copy{max-width:none;padding-top:0}.hero-shell{min-height:auto;gap:36px;grid-template-columns:1fr}}
@media (max-width: 720px){.hero-title{font-size:clamp(50px,14vw,72px);max-width:9.6ch}.hero-subtitle{max-width:100%;font-size:16px}.hero-shell{gap:28px}.nav-actions .btn{min-width:auto}}


/* Hero/header refinement patch */
.nav-content{grid-template-columns:120px auto 220px;gap:44px;padding:14px 10px;min-height:78px}
.logo{justify-self:start;margin-left:8px}
.nav-links{gap:34px}
.nav-actions{gap:14px;margin-right:8px}
.home-page .nav.scrolled{background:rgba(10,10,12,0.05);border-bottom-color:rgba(255,255,255,0.05);-webkit-backdrop-filter:blur(18px) saturate(120%);backdrop-filter:blur(18px) saturate(120%)}

.premium-hero{padding:164px 0 132px}
.premium-hero::before{background:radial-gradient(70% 130% at 84% 16%, rgba(118,126,142,.18) 0%, rgba(118,126,142,0) 48%),radial-gradient(52% 100% at 14% 86%, rgba(70,76,88,.12) 0%, rgba(70,76,88,0) 44%),linear-gradient(180deg,#030409 0%, #010102 56%, #000 100%)}
.hero-shell{grid-template-columns:minmax(620px,1.08fr) minmax(460px,.92fr);gap:92px;align-items:center;min-height:calc(100vh - 164px)}
.hero-copy{max-width:680px;padding-top:10px}
.eyebrow,.hero-trustline,.premium-stats,.hero-panel-top,.hero-panel-footer{display:none !important}
.hero-title{max-width:8.2ch;margin-bottom:16px;font-size:clamp(54px,6vw,86px);line-height:.98;letter-spacing:-.038em}
.hero-subtitle{max-width:540px;font-size:16px;line-height:1.65;color:#aeb4be;margin-bottom:22px}
.hero-cta{gap:14px;align-items:center;margin-top:0}
.hero-cta .btn{min-width:0;padding:14px 24px;font-size:15px}
.hero-cta .btn-secondary{padding-inline:22px}
.hero-visual{justify-content:flex-end;padding-top:0;padding-right:4px}
.hero-panel{max-width:560px;padding:18px 18px 16px;margin-top:-18px}
.hero-terminal{margin:0;border-radius:20px}
.hero-terminal pre{padding:22px;font-size:12.5px;line-height:1.72}

.btn{transition:transform var(--transition), color var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition)}
.btn::before,.btn::after{width:120px;height:1px;opacity:0;background:linear-gradient(90deg,transparent 0%, rgba(236,240,245,0.18) 18%, rgba(236,240,245,0.95) 50%, rgba(236,240,245,0.18) 82%, transparent 100%);box-shadow:none;transition:transform .55s cubic-bezier(.22,1,.36,1), opacity .18s ease}
.btn::before{top:13px;right:-126px;transform:rotate(-10deg)}
.btn::after{bottom:13px;left:-126px;transform:rotate(-10deg)}
.btn:hover::before{opacity:1;transform:translateX(-132px) rotate(-10deg)}
.btn:hover::after{opacity:1;transform:translateX(132px) rotate(-10deg)}

@media (max-width: 1180px){.nav-content{grid-template-columns:90px auto 180px;gap:26px}.hero-shell{grid-template-columns:minmax(0,1fr) minmax(420px,.9fr);gap:48px}.hero-title{max-width:9ch;font-size:clamp(48px,5.8vw,72px)}.hero-subtitle{max-width:500px}}
@media (max-width: 1100px){.premium-hero{padding:148px 0 110px}.hero-shell{grid-template-columns:1fr;gap:34px;min-height:auto}.hero-copy{max-width:none}.hero-visual{justify-content:flex-start;padding-right:0}.hero-panel{max-width:100%;margin-top:0}.nav-content{grid-template-columns:1fr auto 1fr;gap:18px;padding-inline:0}.logo{margin-left:0}.nav-actions{margin-right:0}}
@media (max-width: 720px){.premium-hero{padding:136px 0 90px}.hero-title{max-width:8.8ch;font-size:clamp(42px,13vw,62px)}.hero-subtitle{font-size:15px;max-width:none}.hero-cta{flex-wrap:wrap}.hero-cta .btn{width:auto;min-width:0;padding:13px 20px}.hero-terminal pre{padding:18px;font-size:12px}}


/* hero card alignment patch */
.hero-shell{grid-template-columns:minmax(520px,640px) minmax(560px,650px);gap:64px;align-items:center}
.hero-copy{max-width:560px;padding-top:0}
.hero-title{max-width:7.2ch;font-size:clamp(52px,5.4vw,82px);line-height:.96;margin-bottom:14px}
.hero-subtitle{max-width:470px;font-size:15px;line-height:1.55;margin-bottom:22px}
.hero-visual{justify-content:flex-end;align-self:flex-start;padding-top:8px;transform:none}
.hero-panel{max-width:640px;padding:18px 20px 16px;border-radius:24px;background:linear-gradient(180deg,rgba(13,14,18,.92),rgba(7,8,10,.96));border:1px solid rgba(255,255,255,.08);box-shadow:0 20px 60px rgba(0,0,0,.28)}
.hero-panel .hero-panel-top,.hero-panel .hero-panel-footer{display:flex !important;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.hero-flow{font-size:13px;color:#b7bcc6;letter-spacing:-.01em}
.pill{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.025);font-size:12px;font-weight:700;letter-spacing:.08em;color:#eef1f6}
.pill.subtle{padding:9px 13px;font-weight:600;letter-spacing:.03em;color:#d7dbe2;background:rgba(255,255,255,.02)}
.hero-terminal{margin:18px 0 18px;border:1px solid rgba(255,255,255,.08);border-radius:22px;background:#050608;overflow:hidden}
.hero-terminal pre{padding:24px 24px 20px;font-size:12.8px;line-height:1.72;color:#d7dbe2}
@media (max-width: 1180px){.hero-shell{grid-template-columns:minmax(0,1fr) minmax(480px,560px);gap:42px}.hero-title{max-width:7.8ch;font-size:clamp(46px,5.4vw,70px)}.hero-panel{max-width:580px}}
@media (max-width: 1100px){.hero-shell{grid-template-columns:1fr;gap:30px}.hero-copy{max-width:none}.hero-title,.hero-subtitle{max-width:none}.hero-visual{justify-content:flex-start;padding-top:0}.hero-panel{max-width:100%}}

/* ===== MINIMAL FIXES - DO NOT REMOVE ===== */

/* Fix 1: Hero card wider horizontally */
.hero-panel {
  max-width: 680px !important;
}

/* Fix 2: Hero text alignment and word breaks */
.hero-copy {
  text-align: left !important;
}

.hero-title {
  word-break: keep-all !important;
  hyphens: none !important;
  max-width: 500px !important;
  line-height: 1.1 !important;
}

.hero-subtitle {
  text-align: left !important;
  margin-left: 0 !important;
  word-break: keep-all !important;
  hyphens: none !important;
  max-width: 480px !important;
}

/* Fix 3: Help page buttons centered */
.help-page .hero-cta {
  justify-content: center !important;
}

/* Fix 4: Better typography for Company and Resources pages */
.hero-subtitle {
  font-size: 18px !important;
  line-height: 1.6 !important;
  color: #bfc5d0 !important;
}

.feature-card p {
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: #b0b7c3 !important;
}