:root {
  /* Color Palette - Custom User Theme */
  --bg: #ffffff;
  --bg-soft: #f4f6f9;
  --text: #333333;
  --text-light: #666666;
  --muted: #888888;

  /* Brand Gradients & Colors */
  /* User provided color: #604465 */
  --primary-gradient: linear-gradient(135deg, #604465 0%, #4a3350 100%);
  --accent: #604465;
  --accent-light: #8e6d94;
  --accent-soft: rgba(96, 68, 101, 0.08);

  /* UI Elements */
  --border: #eaeaea;
  --border-hover: #dcdcdc;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-full: 50px;

  /* Shadows */
  --shadow-sm: 0 5px 15px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 15px 35px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.15);
  --shadow-hover: 0 20px 40px rgba(96, 68, 101, 0.25);

  /* Typography */
  --font-heading: "Poppins", sans-serif;
  --font-body: "Inter", sans-serif;

  /* Layout */
  --max-width: 1140px;
  --header-height: 90px;
}

/* Reset & Base */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
  /* Force remove underlines */
  transition: all 0.3s ease;
}

a:hover {
  text-decoration: none !important;
}

img {
  max-width: 100%;
  display: block;
}

ul {
  list-style: none;
}

/* Layout Utilities */
.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 60px;
  /* Significantly increased side padding */
}

@media (max-width: 768px) {
  .section-inner {
    padding: 0 20px;
  }
}

section {
  padding: 120px 0;
  position: relative;
}

/* Typography Utilities */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: #111;
}

.section-title {
  font-size: 2.8rem;
  margin-bottom: 20px;
  letter-spacing: -0.5px;
}

.section-lead {
  font-size: 1.2rem;
  color: var(--text-light);
  max-width: 700px;
  margin-bottom: 60px;
  line-height: 1.8;
}

/* Header & Nav */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  height: var(--header-height);
  display: flex;
  align-items: center;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;
}

header.scrolled {
  height: 70px;
  /* Adjusted scrolled height */
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  background: rgba(255, 255, 255, 0.95);
}

.nav {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 60px;
  /* Match section-inner padding */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (max-width: 768px) {
  .nav {
    padding: 0 20px;
  }
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-image {
  height: 84px;
  /* Requested size */
  width: auto;
  object-fit: contain;
}

.nav-links {
  display: flex;
  gap: 40px;
  align-items: center;
}

.nav-link {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  /* White text */
  position: relative;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.nav-link:hover {
  color: var(--accent);
  opacity: 1;
}

.nav-cta {
  padding: 12px 30px;
  border-radius: var(--radius-full);
  background: var(--primary-gradient);
  /* White button */
  color: #ffffff;
  /* Purple text */
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: 0 10px 20px rgba(96, 68, 101, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px rgba(96, 68, 101, 0.4);
}

/* Hero Section */
.hero {
  /* Make hero cover the full viewport height */
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 120px;
  /* Account for fixed header */
  padding-bottom: 120px;
  /* User background image */
  background: url('background image.png') right center/cover no-repeat;
  overflow: visible;
  position: relative;
}

/* Overlay removed as requested */

.hero-grid {
  /* Changed to single column left-aligned layout */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Left align */
  text-align: left;
  /* Left align text */
  max-width: 800px;
  /* Constrain width for better readability */
  margin: 0;
  /* Remove auto margin to keep left */
  position: relative;
  z-index: 1;
}

.eyebrow {
  display: none;
  /* Hidden as requested */
}

.eyebrow-dot {
  display: none;
}

.hero h1 {
  font-size: 4.8rem;
  /* Larger hero title */
  line-height: 1.1;
  margin-bottom: var(--space-md);
  color: #ffffff;
  /* Changed to white for better contrast on background */
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  /* Added shadow for readability */
}

.hero h1 span {
  /* Keep gradient but ensure it pops or switch to solid color if needed. 
     Let's try a brighter gradient or keep it if it works, but maybe just white with shadow is safer on unknown bg.
     Actually, user liked the purple. Let's keep the span as is but maybe add a text-shadow. */
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Fallback/Enhancement for visibility on dark bg */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.hero-sub {
  font-size: 1.4rem;
  color: #ffffff;
  /* Changed to white */
  max-width: 680px;
  margin-bottom: var(--space-md);
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
  font-weight: 400;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 0;
  /* Removed bottom margin */
  justify-content: flex-start;
  /* Left align buttons */
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 36px;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-primary {
  background: var(--primary-gradient);
  color: #ffffff;
  box-shadow: 0 10px 25px rgba(96, 68, 101, 0.3);
  border: none;
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(96, 68, 101, 0.4);
}

.btn-secondary {
  background: #ffffff;
  color: var(--text);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.btn-secondary:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  color: var(--accent);
}

.hero-meta {
  display: flex;
  gap: 30px;
  font-size: 0.9rem;
  color: var(--text-light);
  font-weight: 500;
}

.hero-meta-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero-meta-icon {
  color: var(--accent);
  font-weight: bold;
}

/* Hero Card */
.hero-card {
  background: #ffffff;
  border-radius: 30px;
  padding: 40px;
  box-shadow: var(--shadow-lg);
  position: relative;
  z-index: 1;
  border: none;
}

.hero-card::after {
  content: "";
  position: absolute;
  top: -20px;
  right: -20px;
  width: 100px;
  height: 100px;
  background: var(--primary-gradient);
  border-radius: 50%;
  opacity: 0.1;
  z-index: -1;
}

.hero-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 30px;
}

.pill {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent);
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 15px;
  font-size: 1rem;
  font-weight: 500;
}

.stat-value {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 700;
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.progress-wrapper {
  margin: 15px 0 30px;
}

.progress-bg {
  width: 100%;
  height: 8px;
  border-radius: 10px;
  background: #f0f0f0;
}

.progress-bar {
  width: 85%;
  height: 100%;
  border-radius: 10px;
  background: var(--primary-gradient);
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}

.tag {
  font-size: 0.85rem;
  padding: 8px 16px;
  border-radius: 30px;
  background: #f8f9fa;
  color: var(--text-light);
  font-weight: 500;
  transition: all 0.2s ease;
}

.tag:hover {
  background: var(--accent);
  color: #ffffff;
}

/* Logo Strip */
.logo-strip {
  padding: 60px 0;
  background: #ffffff;
  border-bottom: 1px solid var(--border);
}

.logo-strip-inner {
  display: flex;
  align-items: center;
  gap: 40px;
  justify-content: center;
  flex-wrap: wrap;
}

.logo-label {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: #111;
  font-weight: 700;
}

.brand-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.brand-pill {
  padding: 10px 20px;
  border-radius: 8px;
  background: #f8f9fa;
  font-size: 0.9rem;
  color: var(--text);
  font-weight: 600;
  border: none;
}

/* Cards Grid */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 40px;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}

.feature-card {
  background: #ffffff;
  padding: 50px 40px;
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  transition: all 0.4s ease;
  border: none;
}

.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-lg);
}

.card-badge {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 6px 12px;
  border-radius: 6px;
  margin-bottom: 20px;
}

.feature-card h3 {
  font-size: 1.5rem;
  margin-bottom: 15px;
}

.feature-card p {
  color: var(--text-light);
  font-size: 1rem;
  line-height: 1.7;
}

/* List Styles */
.check-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.check-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  font-size: 1.05rem;
  color: var(--text);
}

.check-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary-gradient);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.8rem;
  margin-top: 3px;
  box-shadow: 0 4px 10px rgba(118, 75, 162, 0.3);
}

/* CTA Section */
.cta-section {
  background: var(--primary-gradient);
  text-align: center;
  padding: 140px 0;
  color: #ffffff;
}

.cta-content {
  max-width: 800px;
  margin: 0 auto;
}

.cta-section h2 {
  font-size: 3.5rem;
  margin-bottom: 30px;
  color: #ffffff;
}

.cta-section p {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 40px;
}

.cta-section .btn-primary {
  background: #ffffff;
  color: var(--accent);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.cta-section .btn-primary:hover {
  background: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Footer */
footer {
  background: #1a1a2e;
  padding: 60px 0;
  color: rgba(255, 255, 255, 0.6);
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
  font-size: 0.95rem;
}

/* Mobile Menu */
.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  font-size: 1.8rem;
  color: #111;
  cursor: pointer;
}

/* Responsive */
@media (max-width: 968px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 60px;
    text-align: center;
  }

  .hero h1 {
    font-size: 3rem;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-meta {
    justify-content: center;
  }

  .grid-2 {
    grid-template-columns: 1fr;
    gap: 50px;
  }
}

@media (max-width: 768px) {

  .nav-links,
  .nav-cta {
    display: none;
  }

  .mobile-menu-btn {
    display: block;
  }

  .section-title {
    font-size: 2.2rem;
  }

  .cta-section h2 {
    font-size: 2.5rem;
  }

  .section-inner,
  .nav {
    padding: 0 25px;
    /* Reduce padding on mobile */
  }
}