/* 
LeadIntelligence Landing CSS v1.2 - Compact & Aligned
Optimized for performance, accessibility, and mobile-first design
File: home-landing.css
*/

/* ============================================
CSS RESET & BASE STYLES
============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-family: var(--mk-font);
  color: var(--mk-text);
  background: var(--mk-bg);
  line-height: 1.5;
  overflow-x: hidden;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Removed padding-top for fixed nav; nav is sticky/in-flow now */
}

/* ============================================
CSS CUSTOM PROPERTIES (Design Tokens)
============================================ */
:root {
  /* Light Theme Tokens */
  --mk-bg: #F9FAFB;
  --mk-bg-2: #FFFFFF;
  --mk-surface: rgba(0,0,0,.03);
  --mk-surface-2: rgba(0,0,0,.06);
  --mk-border: rgba(0,0,0,.12);
  --mk-border-2: rgba(0,0,0,.18);

  /* Text Colors */
  --mk-text: #111827;
  --mk-text-2: #374151;
  --mk-text-3: #6B7280;
  --mk-text-invert: #FFFFFF;

  /* Vibrant primary color palette */
  --mk-primary: #2563EB;
  --mk-primary-light: rgba(37,99,235,.1);
  --mk-accent: #10B981;
  --mk-accent-light: rgba(16,185,129,.1);
  --mk-cyan: #06B6D4;
  --mk-warn: #F59E0B;
  --mk-purple: #8B5CF6;
  --mk-purple-light: rgba(139,92,246,.1);

  /* Gradients */
  --mk-gradient: linear-gradient(135deg, rgba(37,99,235,.95), rgba(139,92,246,.92));
  --mk-gradient-2: linear-gradient(135deg, rgba(16,185,129,.92), rgba(37,99,235,.92));
  --mk-gradient-light: linear-gradient(135deg, rgba(37,99,235,.08), rgba(139,92,246,.06));
  --mk-gradient-invert: linear-gradient(135deg, rgba(37,99,235,.95), rgba(16,185,129,.92));
  --mk-glow: 0 0 0 6px rgba(37,99,235,.12);

  /* Typography */
  --mk-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --mk-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  
  --mk-h1: clamp(1.75rem, 4vw, 3rem);
  --mk-h2: clamp(1.375rem, 3.5vw, 2.25rem);
  --mk-h3: clamp(1.125rem, 2.5vw, 1.5rem);
  --mk-body: clamp(0.9375rem, 1vw, 1.0625rem);
  --mk-small: 0.8125rem;

  /* Layout */
  --mk-container: 1100px;
  --mk-gutter: clamp(1rem, 2vw, 1.5rem);
  --mk-radius: 10px;
  --mk-radius-lg: 16px;
  --mk-radius-xl: 20px;

  /* Spacing */
  --mk-space-xs: 0.25rem;
  --mk-space-sm: 0.5rem;
  --mk-space-md: 0.75rem;
  --mk-space-lg: 1.5rem;
  --mk-space-xl: 2.5rem;

  /* Shadows */
  --mk-shadow-sm: 0 3px 8px rgba(0,0,0,.06);
  --mk-shadow-md: 0 6px 16px rgba(0,0,0,.1);
  --mk-shadow-lg: 0 12px 32px rgba(0,0,0,.12);
  --mk-shadow-xl: 0 18px 48px rgba(0,0,0,.14);

  /* Motion */
  --mk-ease: cubic-bezier(.2,.8,.2,1);
  --mk-fast: 160ms;
  --mk-med: 240ms;
  --mk-slow: 320ms;

  /* Z-index layers */
  --mk-z-navigation: 1000;
  --mk-z-modal: 2000;
  --mk-z-tooltip: 3000;
}

/* ============================================
TYPOGRAPHY
============================================ */
.mk-h1, .mk-h2, .mk-h3 {
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
  line-height: 1.1;
  font-weight: 700;
}

.mk-h1 {
  font-size: var(--mk-h1);
  background: linear-gradient(135deg, var(--mk-primary), var(--mk-purple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.05;
}

.mk-h1--invert {
  background: linear-gradient(135deg, #FFFFFF, rgba(255,255,255,.9));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mk-h2 {
  font-size: var(--mk-h2);
  color: var(--mk-text);
}

.mk-h2--invert {
  color: var(--mk-text-invert);
}

.mk-h3 {
  font-size: var(--mk-h3);
  color: var(--mk-text);
}

.mk-sub {
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  color: var(--mk-text-2);
  margin-bottom: 1.25rem;
  line-height: 1.4;
}

.mk-sub--invert {
  color: rgba(255,255,255,.85);
}

.mk-lead {
  font-size: clamp(1rem, 1.15vw, 1.0625rem);
  color: var(--mk-text-2);
  margin: 0.875rem 0;
  line-height: 1.5;
}

.mk-kicker {
  font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
  color: var(--mk-primary);
  font-weight: 600;
  margin-bottom: 0.375rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mk-muted {
  color: var(--mk-text-3);
  opacity: 0.7;
}

p {
  font-size: var(--mk-body);
  color: var(--mk-text-2);
  margin-bottom: 1rem;
  line-height: 1.5;
}

/* ============================================
LAYOUT & CONTAINERS
============================================ */
.mk-container {
  width: 100%;
  max-width: var(--mk-container);
  margin: 0 auto;
  padding: 0 var(--mk-gutter);
}

.mk-section {
  padding: clamp(2rem, 4vw, 3rem) 0;
  position: relative;
}

.mk-section--tight {
  padding: clamp(1.5rem, 3vw, 2rem) 0;
}

.mk-section--dark {
  background: linear-gradient(135deg, var(--mk-primary), var(--mk-purple));
  color: white;
}

.mk-section--cta {
  background: linear-gradient(135deg, #1e293b, #334155);
  color: white;
}

/* ============================================
BUTTONS
============================================ */
.mk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.875rem 1.75rem;
  border-radius: var(--mk-radius);
  font-weight: 600;
  letter-spacing: -0.01em;
  border: 2px solid transparent;
  transition: all var(--mk-fast) var(--mk-ease);
  user-select: none;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  font-size: clamp(0.9rem, 0.95vw, 1rem);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.mk-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.1), transparent);
  opacity: 0;
  transition: opacity var(--mk-fast) var(--mk-ease);
}

.mk-btn:hover::after {
  opacity: 1;
}

.mk-btn--primary {
  background: var(--mk-gradient);
  color: white;
  box-shadow: 0 8px 24px rgba(37,99,235,.2);
  font-weight: 700;
}

.mk-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(37,99,235,.3);
}

.mk-btn--ghost {
  background: transparent;
  border-color: rgba(37,99,235,.2);
  color: var(--mk-primary);
  box-shadow: 0 4px 12px rgba(0,0,0,.04);
}

.mk-btn--ghost:hover {
  transform: translateY(-2px);
  border-color: var(--mk-primary);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  color: var(--mk-primary);
}

.mk-btn--invert {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.25);
  color: white;
  backdrop-filter: blur(8px);
}

.mk-btn--invert:hover {
  background: rgba(255,255,255,.2);
  border-color: white;
  color: white;
}

.mk-btn--block {
  width: 100%;
  display: flex;
}

.mk-btn--nav {
  padding: 0.625rem 1.25rem;
  font-size: 0.9rem;
}

/* ============================================
NAVIGATION - DESKTOP
============================================ */
/* REPLACE THE .mk-nav SECTION */
.mk-nav {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9990;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0,0,0,.06);
  padding: 0.5rem 0; /* REDUCED */
  box-shadow: 0 1px 8px rgba(0,0,0,.02);
  transition: all var(--mk-med) var(--mk-ease);
  height: 56px; /* ADDED */
}

.mk-nav.scrolled {
  padding: 0.375rem 0; /* REDUCED */
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
  height: 52px; /* ADDED */
}

.mk-nav__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%; /* ADDED */
}

.mk-brand__logo {
  height: 26px; /* REDUCED from 28px */
}

.mk-nav.scrolled {
  padding: 0.5rem 0;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
}

/* (If you keep the scroll padding tweak, leave this; otherwise it's harmless.) */
.mk-nav.scrolled ~ .mk-main .mk-hero {
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

.mk-nav__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mk-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  color: var(--mk-text);
  font-weight: 700;
  font-size: 1.125rem;
  z-index: calc(var(--mk-z-navigation) + 2);
}

.mk-brand__logo {
  height: 28px;
  width: auto;
}

.mk-brand__name {
  background: var(--mk-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}

/* Desktop Navigation Links */
.mk-nav__links {
  display: none;
  align-items: center;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .mk-nav__links {
    display: flex;
  }
}

.mk-link {
  color: var(--mk-text-2);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--mk-fast) var(--mk-ease);
  position: relative;
  font-size: 0.9375rem;
}

.mk-link:hover {
  color: var(--mk-primary);
}

.mk-link::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--mk-gradient);
  transform: scaleX(0);
  transition: transform var(--mk-med) var(--mk-ease);
}

.mk-link:hover::after {
  transform: scaleX(1);
}

/* ============================================
HAMBURGER MENU BUTTON
============================================ */
.mk-nav__menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: calc(var(--mk-z-navigation) + 1);
  position: relative;
}

@media (min-width: 768px) {
  .mk-nav__menu {
    display: none;
  }
}

.mk-nav__menu span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--mk-text);
  border-radius: 1px;
  transition: all 0.3s var(--mk-ease);
  position: absolute;
  left: 9px;
}

.mk-nav__menu span:nth-child(1) {
  top: 14px;
}

.mk-nav__menu span:nth-child(2) {
  top: 20px;
}

.mk-nav__menu span:nth-child(3) {
  top: 26px;
}

/* Hamburger to Close Animation */
.mk-nav__menu.active span:nth-child(1) {
  transform: rotate(45deg);
  top: 20px;
}

.mk-nav__menu.active span:nth-child(2) {
  opacity: 0;
  transform: translateX(-8px);
}

.mk-nav__menu.active span:nth-child(3) {
  transform: rotate(-45deg);
  top: 20px;
}

/* ============================================
MOBILE MENU OVERLAY
============================================ */
.mk-mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: var(--mk-z-navigation);
  padding: 5rem 1.25rem 1.5rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mk-mobile-menu.active {
  display: block;
  animation: slideIn 0.3s var(--mk-ease);
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile Menu Links */
.mk-mobile-menu__links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.mk-mobile-menu__link {
  display: block;
  padding: 0.875rem 1.25rem;
  background: white;
  border-radius: var(--mk-radius);
  border: 1px solid rgba(0,0,0,.06);
  color: var(--mk-text);
  text-decoration: none;
  font-weight: 500;
  font-size: 1.0625rem;
  transition: all var(--mk-fast) var(--mk-ease);
  box-shadow: var(--mk-shadow-sm);
}

.mk-mobile-menu__link:hover {
  transform: translateX(3px);
  border-color: var(--mk-primary);
  color: var(--mk-primary);
  box-shadow: var(--mk-shadow-md);
}

.mk-mobile-menu__cta {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0,0,0,.06);
}

/* Close Button for Mobile Menu */
.mk-mobile-menu__close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.04);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.25rem;
  color: var(--mk-text);
  transition: all var(--mk-fast) var(--mk-ease);
  z-index: calc(var(--mk-z-navigation) + 1);
}

.mk-mobile-menu__close:hover {
  background: rgba(0,0,0,.08);
  transform: rotate(90deg);
}

/* Prevent body scroll when menu is open */
body.menu-open {
  overflow: hidden;
}

/* ============================================
MOBILE STICKY CTA
============================================ */
.mk-sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: calc(var(--mk-z-navigation) - 1);
  background: white;
  padding: 0.875rem var(--mk-gutter);
  display: flex;
  gap: 0.75rem;
  box-shadow: 0 -2px 12px rgba(0,0,0,.06);
  border-top: 1px solid rgba(0,0,0,.06);
}

@media (min-width: 768px) {
  .mk-sticky-cta {
    display: none;
  }
}

/* ============================================
HERO SECTION
============================================ */
/* REPLACE THE .mk-hero SECTION */
.mk-hero {
  padding-top: clamp(1.5rem, 3vw, 2.5rem); /* REDUCED to pull content closer to nav */
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
  position: relative;
  overflow: hidden;
  background: 
    radial-gradient(circle at 10% 20%, rgba(37,99,235,.04) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(139,92,246,.04) 0%, transparent 40%),
    linear-gradient(180deg, var(--mk-bg), var(--mk-bg-2));
}

.mk-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px; /* slightly slimmer gradient bar */
  background: var(--mk-gradient);
}

.mk-hero__grid {
  display: grid;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .mk-hero__grid {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 3rem;
  }
}

.mk-hero__copy {
  max-width: 550px;
}

.mk-badge {
  display: inline-block;
  background: var(--mk-gradient);
  color: white;
  padding: 0.375rem 0.875rem;
  border-radius: 50px;
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
  box-shadow: 0 3px 8px rgba(37,99,235,.15);
}

.mk-hero__ctas {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1.5rem 0;
}

@media (min-width: 480px) {
  .mk-hero__ctas {
    flex-direction: row;
    align-items: center;
  }
}

.mk-hero__flow {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--mk-text-3);
  font-size: 0.8125rem;
  margin: 1.25rem 0;
  flex-wrap: wrap;
}

.mk-dot {
  color: var(--mk-primary);
  font-weight: bold;
}

/* ============================================
STATS
============================================ */
.mk-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-top: 1.5rem;
}

@media (min-width: 640px) {
  .mk-stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

.mk-stat {
  background: white;
  padding: 1.25rem;
  border-radius: var(--mk-radius-lg);
  box-shadow: var(--mk-shadow-sm);
  border: 1px solid rgba(37,99,235,.08);
}

.mk-stat__num {
  font-size: 1.75rem;
  font-weight: 800;
  background: var(--mk-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}

.mk-stat__label {
  font-size: 0.8125rem;
  color: var(--mk-text-3);
  margin-top: 0.375rem;
  line-height: 1.3;
}

/* ============================================
HERO VISUAL COMPONENT
============================================ */
.mk-hero__visual {
  position: relative;
}

.mk-visual {
  background: white;
  border-radius: var(--mk-radius-lg);
  padding: 1.5rem;
  box-shadow: var(--mk-shadow-lg);
  border: 1px solid rgba(37,99,235,.08);
  position: relative;
  transform: perspective(800px) rotateX(5deg);
  transition: transform var(--mk-med) var(--mk-ease);
}

.mk-visual:hover {
  transform: perspective(800px) rotateX(0deg);
}

.mk-visual__frame {
  background: var(--mk-bg);
  border-radius: var(--mk-radius);
  padding: 1.25rem;
}

.mk-visual__topbar {
  display: flex;
  gap: 0.375rem;
  margin-bottom: 1.25rem;
}

.mk-pill {
  padding: 0.375rem 0.75rem;
  background: white;
  border-radius: 50px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--mk-text-3);
  border: 1px solid rgba(0,0,0,.08);
}

.mk-pill--active {
  background: var(--mk-primary);
  color: white;
  border-color: var(--mk-primary);
}

.mk-visual__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.875rem;
}

.mk-metric {
  background: white;
  padding: 0.875rem;
  border-radius: var(--mk-radius);
  border: 1px solid rgba(0,0,0,.06);
}

.mk-metric__title {
  font-size: 0.75rem;
  color: var(--mk-text-3);
  margin-bottom: 0.375rem;
}

.mk-metric__value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--mk-text);
}

.mk-metric__meta {
  font-size: 0.75rem;
  color: var(--mk-text-3);
  margin-top: 0.125rem;
}

.mk-mini-bar {
  height: 3px;
  background: var(--mk-gradient);
  border-radius: 1.5px;
  margin-top: 0.375rem;
}

/* ============================================
FLOATING ELEMENTS
============================================ */
.mk-float {
  position: absolute;
  background: white;
  border-radius: var(--mk-radius);
  padding: 0.75rem;
  box-shadow: var(--mk-shadow-md);
  border: 1px solid rgba(37,99,235,.15);
  width: 160px;
  z-index: 10;
}

.mk-float--a {
  top: 20%;
  left: -15px;
  transform: rotate(-5deg);
  animation: float 6s ease-in-out infinite;
}

.mk-float--b {
  bottom: 20%;
  right: -15px;
  transform: rotate(5deg);
  animation: float 7s ease-in-out infinite 1s;
}

.mk-float--c {
  top: 40%;
  right: 10%;
  transform: rotate(3deg);
  animation: float 8s ease-in-out infinite 0.5s;
}

@keyframes float {
  0%, 100% { 
    transform: translateY(0) rotate(-5deg); 
  }
  50% { 
    transform: translateY(-12px) rotate(-5deg); 
  }
}

.mk-float__title {
  font-weight: 600;
  color: var(--mk-primary);
  font-size: 0.8125rem;
  margin-bottom: 0.375rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.mk-float__body {
  font-size: 0.8125rem;
  color: var(--mk-text-2);
  line-height: 1.3;
}

.mk-visual__badges {
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}

.mk-chip {
  background: rgba(37,99,235,.08);
  color: var(--mk-primary);
  padding: 0.25rem 0.625rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 500;
}

.mk-caption {
  font-size: 0.75rem;
  color: var(--mk-text-3);
  text-align: center;
  margin-top: 0.875rem;
  opacity: .7;
}

/* ============================================
QUOTE COMPONENT
============================================ */
.mk-quote {
  background: white;
  border-radius: var(--mk-radius-lg);
  padding: 1.5rem;
  margin: 1.5rem 0;
  box-shadow: var(--mk-shadow-sm);
  border-left: 4px solid var(--mk-primary);
  font-style: italic;
  color: var(--mk-text-2);
}

.mk-quote__body {
  font-size: 1.0625rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

.mk-quote__meta {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.mk-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--mk-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  flex-shrink: 0;
}

.mk-quote__name {
  font-weight: 600;
  color: var(--mk-text);
}

.mk-quote__title {
  font-size: 0.8125rem;
  color: var(--mk-text-3);
}

/* ============================================
CARDS GRID
============================================ */
.mk-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.5rem 0;
}

@media (min-width: 768px) {
  .mk-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .mk-cards {
    grid-template-columns: repeat(4, 1fr);
  }
}

.mk-card {
  background: white;
  padding: 1.5rem;
  border-radius: var(--mk-radius-lg);
  box-shadow: var(--mk-shadow-sm);
  border: 1px solid rgba(37,99,235,.08);
  transition: all var(--mk-med) var(--mk-ease);
}

.mk-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--mk-shadow-md);
  border-color: rgba(37,99,235,.2);
}

.mk-card__title {
  font-weight: 600;
  color: var(--mk-text);
  margin-bottom: 0.625rem;
  font-size: 1.0625rem;
}

.mk-card__text {
  color: var(--mk-text-2);
  line-height: 1.4;
  font-size: 0.9375rem;
}

/* ============================================
FOR WHO SECTION
============================================ */
.mk-forwho {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  color: var(--mk-text-3);
  font-size: 0.8125rem;
  margin-top: 1.5rem;
}

.mk-forwho__label {
  font-weight: 600;
  color: var(--mk-text-2);
}

.mk-forwho__item {
  background: rgba(37,99,235,.08);
  color: var(--mk-primary);
  padding: 0.1875rem 0.625rem;
  border-radius: 50px;
  font-weight: 500;
}

.mk-forwho__sep {
  opacity: .5;
}

/* ============================================
STEPS COMPONENT
============================================ */
.mk-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 2rem 0;
}

@media (min-width: 768px) {
  .mk-steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.mk-step {
  background: rgba(255,255,255,.1);
  border-radius: var(--mk-radius-lg);
  padding: 1.5rem;
  border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
}

.mk-step__num {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.25rem;
  margin-bottom: 0.875rem;
  background: var(--mk-primary);
  color: white;
}

.mk-step__num--blue {
  background: var(--mk-primary);
}

.mk-step__num--green {
  background: var(--mk-accent);
}

.mk-step__num--amber {
  background: var(--mk-warn);
}

.mk-step__title {
  font-weight: 600;
  color: white;
  margin-bottom: 0.625rem;
  font-size: 1.125rem;
}

.mk-step__text {
  color: rgba(255,255,255,.85);
  line-height: 1.5;
  font-size: 0.9375rem;
}

.mk-center {
  text-align: center;
  margin-top: 1.5rem;
}

/* ============================================
PRICING CTA
============================================ */
.mk-pricing-ctas {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
  margin-top: 1.5rem;
}

@media (min-width: 480px) {
  .mk-pricing-ctas {
    flex-direction: row;
    justify-content: center;
  }
}

/* ============================================
CTA SECTION
============================================ */
.mk-cta {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .mk-cta {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 3rem;
  }
}

.mk-cta__copy {
  max-width: 500px;
}

.mk-checklist {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}

.mk-checklist li {
  padding: 0.625rem 0 0.625rem 1.75rem;
  position: relative;
  color: rgba(255,255,255,.9);
  line-height: 1.4;
  font-size: 0.9375rem;
}

.mk-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.625rem;
  color: var(--mk-accent);
  font-weight: bold;
}

/* ============================================
FORM COMPONENTS - ALIGNED & COMPACT
============================================ */
.mk-form {
  background: white;
  border-radius: var(--mk-radius-lg);
  padding: 2rem;
  box-shadow: var(--mk-shadow-xl);
}

.mk-form--done {
  text-align: center;
}

.mk-form__grid {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.mk-fieldrow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 480px) {
  .mk-fieldrow {
    grid-template-columns: 1fr 1fr;
  }
}

/* FORM FIELD ALIGNMENT FIXES */
.mk-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.mk-field label {
  font-weight: 500;
  color: var(--mk-text-2);
  font-size: 0.875rem;
  line-height: 1.2;
}

/* Add required asterisk with CSS */
.mk-field label:after {
  content: ' *';
  color: #ef4444;
  font-weight: bold;
}

/* Remove asterisk for non-required fields */
.mk-field:not(:has([required])) label:after {
  content: '';
}

.mk-field input,
.mk-field select {
  padding: 0.75rem 1rem;
  border: 2px solid rgba(0,0,0,.1);
  border-radius: var(--mk-radius);
  font-family: var(--mk-font);
  font-size: 0.95rem;
  transition: all var(--mk-fast) var(--mk-ease);
  background: white;
  width: 100%;
}

.mk-field input:focus,
.mk-field select:focus {
  outline: none;
  border-color: var(--mk-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}

/* Style for select dropdown */
.mk-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px;
  padding-right: 2.5rem;
}

/* Field hint styling */
.mk-field__hint {
  font-size: 0.75rem;
  color: var(--mk-text-3);
  margin-top: 0.25rem;
  line-height: 1.2;
  opacity: 0.8;
}

/* Hide "Required" text from hints since we show asterisk */
.mk-field__hint:contains("Required") {
  display: none;
}

/* Checkbox field specific styling */
.mk-field:has(input[type="checkbox"]) {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.mk-field input[type="checkbox"] {
  width: auto;
  margin-top: 0.1875rem;
  transform: scale(1.1);
}

.mk-field:has(input[type="checkbox"]) label {
  font-weight: normal;
  line-height: 1.4;
}

.mk-field:has(input[type="checkbox"]) label:after {
  content: '';
}

/* Form message styling */
.mk-form__message {
  padding: 0.875rem;
  border-radius: var(--mk-radius);
  margin-top: 0.875rem;
  display: none;
  text-align: center;
}

.mk-form__message.success {
  display: block;
  background: rgba(16,185,129,.1);
  color: var(--mk-accent);
  border: 1px solid rgba(16,185,129,.2);
}

.mk-form__message.error {
  display: block;
  background: rgba(239,68,68,.1);
  color: #ef4444;
  border: 1px solid rgba(239,68,68,.2);
}

.mk-form__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

/* Form fineprint */
.mk-form__fineprint {
  font-size: 0.75rem;
  color: var(--mk-text-3);
  text-align: center;
  margin-top: 1rem;
  line-height: 1.3;
}

/* ============================================
FOOTER
============================================ */
.mk-footer {
  background: white;
  border-top: 1px solid rgba(0,0,0,.06);
  padding: 2rem 0;
  margin-top: 2rem;
}

.mk-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
  text-align: center;
}

@media (min-width: 768px) {
  .mk-footer__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    text-align: left;
  }
}

.mk-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.mk-footer__logo {
  font-size: 1.25rem;
  font-weight: 800;
  background: var(--mk-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mk-footer__tag {
  color: var(--mk-text-3);
  font-size: 0.8125rem;
}

.mk-footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

@media (min-width: 768px) {
  .mk-footer__links {
    flex-direction: row;
    gap: 1.5rem;
  }
}

.mk-footer__links a {
  color: var(--mk-text-3);
  text-decoration: none;
  transition: color var(--mk-fast) var(--mk-ease);
  font-size: 0.875rem;
}

.mk-footer__links a:hover {
  color: var(--mk-primary);
}

.mk-footer__bottom {
  text-align: center;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0,0,0,.04);
  color: var(--mk-text-3);
  font-size: 0.8125rem;
}

/* ============================================
ANIMATION CLASSES
============================================ */
.mk-fade-in {
  animation: fadeInUp 0.5s var(--mk-ease) forwards;
  opacity: 0;
}

.mk-fade-in-delay-1 {
  animation-delay: 0.2s;
}

.mk-fade-in-delay-2 {
  animation-delay: 0.4s;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
UTILITY CLASSES
============================================ */
.mk-accent {
  color: var(--mk-accent);
}

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

.mk-text-right {
  text-align: right;
}

/* Margin Utilities */
.mk-mt-1 { margin-top: .25rem; }
.mk-mt-2 { margin-top: .5rem; }
.mk-mt-3 { margin-top: .75rem; }
.mk-mt-4 { margin-top: 1rem; }
.mk-mt-6 { margin-top: 1.5rem; }
.mk-mt-8 { margin-top: 2rem; }

.mk-mb-1 { margin-bottom: .25rem; }
.mk-mb-2 { margin-bottom: .5rem; }
.mk-mb-3 { margin-bottom: .75rem; }
.mk-mb-4 { margin-bottom: 1rem; }
.mk-mb-6 { margin-bottom: 1.5rem; }
.mk-mb-8 { margin-bottom: 2rem; }

/* Padding Utilities */
.mk-pt-1 { padding-top: .25rem; }
.mk-pt-2 { padding-top: .5rem; }
.mk-pt-3 { padding-top: .75rem; }
.mk-pt-4 { padding-top: 1rem; }

.mk-pb-1 { padding-bottom: .25rem; }
.mk-pb-2 { padding-bottom: .5rem; }
.mk-pb-3 { padding-bottom: .75rem; }
.mk-pb-4 { padding-bottom: 1rem; }

/* ============================================
PRINT STYLES
============================================ */
@media print {
  .mk-nav,
  .mk-sticky-cta,
  .mk-hero__visual,
  .mk-form,
  .mk-footer__links,
  .mk-nav__menu,
  .mk-mobile-menu {
    display: none;
  }
  
  .mk-hero,
  .mk-section {
    padding: 1rem 0;
  }
  
  .mk-btn {
    border: 1px solid #000;
    color: #000;
    background: none;
  }
  
  a {
    color: #000;
    text-decoration: underline;
  }
}

/* ============================================
REDUCED MOTION PREFERENCES
============================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  html {
    scroll-behavior: auto;
  }
  
  .mk-visual,
  .mk-float,
  .mk-card,
  .mk-btn {
    transition: none;
    animation: none;
  }
}

/* ============================================
HIGH CONTRAST MODE
============================================ */
@media (prefers-contrast: high) {
  :root {
    --mk-primary: #0033cc;
    --mk-accent: #006600;
    --mk-border: rgba(0,0,0,.8);
    --mk-text-3: #4b5563;
  }
  
  .mk-btn {
    border-width: 2px;
  }
  
  .mk-metric,
  .mk-card,
  .mk-stat {
    border-width: 2px;
  }
  
  .mk-field label:after {
    color: #c00;
  }
}

/* ============================================
DARK MODE PREFERENCE
============================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --mk-bg: #111827;
    --mk-bg-2: #1f2937;
    --mk-surface: rgba(255,255,255,.05);
    --mk-surface-2: rgba(255,255,255,.08);
    --mk-border: rgba(255,255,255,.15);
    --mk-border-2: rgba(255,255,255,.25);
    
    --mk-text: #f9fafb;
    --mk-text-2: #e5e7eb;
    --mk-text-3: #9ca3af;
    
    --mk-shadow-sm: 0 3px 8px rgba(0,0,0,.25);
    --mk-shadow-md: 0 6px 16px rgba(0,0,0,.35);
    --mk-shadow-lg: 0 12px 32px rgba(0,0,0,.45);
    --mk-shadow-xl: 0 18px 48px rgba(0,0,0,.55);
  }
  
  .mk-nav {
    background: rgba(17, 24, 39, 0.96);
    border-bottom-color: rgba(255,255,255,.1);
  }
  
  .mk-sticky-cta {
    background: #1f2937;
    border-top-color: rgba(255,255,255,.1);
  }
  
  .mk-mobile-menu {
    background: rgba(17, 24, 39, 0.98);
  }
  
  .mk-mobile-menu__link {
    background: #1f2937;
    border-color: rgba(255,255,255,.1);
    color: var(--mk-text-2);
  }
  
  .mk-mobile-menu__close {
    background: rgba(255,255,255,.1);
    color: var(--mk-text);
  }
  
  .mk-visual,
  .mk-stat,
  .mk-card,
  .mk-quote,
  .mk-form,
  .mk-metric {
    background: #1f2937;
    border-color: rgba(255,255,255,.1);
  }
  
  .mk-hero {
    background: 
      radial-gradient(circle at 10% 20%, rgba(37,99,235,.08) 0%, transparent 40%),
      radial-gradient(circle at 90% 80%, rgba(139,92,246,.08) 0%, transparent 40%),
      linear-gradient(180deg, var(--mk-bg), var(--mk-bg-2));
  }
  
  .mk-footer {
    background: #111827;
    border-top-color: rgba(255,255,255,.1);
  }
  
  .mk-pill {
    background: #374151;
    border-color: rgba(255,255,255,.1);
    color: var(--mk-text-2);
  }
  
  .mk-pill--active {
    background: var(--mk-primary);
    color: white;
  }
  
  .mk-field input,
  .mk-field select {
    background: #374151;
    border-color: rgba(255,255,255,.2);
    color: var(--mk-text);
  }
  
  .mk-field label:after {
    color: #f87171;
  }
}

/* ============================================
IE 11 FALLBACKS
============================================ */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .mk-container {
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
  }
  
  .mk-hero__grid {
    display: block;
  }
  
  .mk-stats,
  .mk-cards,
  .mk-steps {
    display: block;
  }
  
  .mk-stat,
  .mk-card,
  .mk-step {
    display: inline-block;
    vertical-align: top;
    margin: 0 0.75rem 0.75rem 0;
  }
}

/* ============================================
MOBILE MENU Z-INDEX FIX
============================================ */
.mk-nav {
  position: sticky;
  top: 0;
  z-index: 9990;
}

body.menu-open {
  overflow: hidden;
  height: 100vh;
  touch-action: none;
}

.mk-mobile-menu {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  background: rgba(10, 14, 25, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;
}

.mk-mobile-menu.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mk-mobile-menu__links,
.mk-mobile-menu__cta,
.mk-mobile-menu__close {
  position: relative;
  z-index: 1;
}

.mk-main,
.mk-hero,
.mk-section,
.mk-visual,
.mk-sticky-cta {
  position: relative;
  z-index: 1;
}

/* ============================================
ULTRA-COMPACT FOR SMALLEST SCREENS
============================================ */
@media (max-width: 374px) {
  .mk-container {
    padding: 0 0.875rem;
  }
  
  .mk-hero__ctas {
    flex-direction: column;
  }
  
  .mk-btn {
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
  }
  
  .mk-stats {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  
  .mk-visual__grid {
    grid-template-columns: 1fr;
    gap: 0.625rem;
  }
  
  .mk-metric {
    padding: 0.75rem;
  }
  
  .mk-float {
    display: none;
  }
  
  .mk-form {
    padding: 1.5rem;
  }
  
  .mk-fieldrow {
    gap: 0.75rem;
  }
}

/* ============================================
FORM FIELD MOBILE OPTIMIZATIONS
============================================ */
@media (max-width: 479px) {
  .mk-fieldrow {
    grid-template-columns: 1fr !important;
  }
  
  .mk-form {
    padding: 1.5rem;
  }
  
  .mk-field:has(input[type="checkbox"]) {
    padding: 0.375rem 0;
  }
  
  .mk-field input[type="checkbox"] {
    transform: scale(1.2);
    margin-right: 0.625rem;
  }
}