/* ============================================================
   GLOBAL VARIABLES & SMOOTH SCROLLING SETUP
============================================================= */
:root {
  --navy: #0F172A;
  --deep-blue: #03355B;
  --gold: #E2B654;
  --gold-hover: #D9AA4C;
  --teal: #25869D;
  --light-bg: #F8FAFC;
  --border-color: rgba(15, 23, 42, 0.08);
  --white: #FFFFFF;
  --font-serif: "Georgia", "Times New Roman", serif;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

html {
  scroll-behavior: smooth;
}

/* Compatibility with Lenis smooth scroll */
html.lenis, html.lenis body {
  overflow-x: hidden;
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

body {
  font-family: var(--font-sans);
  color: #475569;
  background-color: #FFFFFF;
  line-height: 1.6;
  overflow-x: hidden;
}

/* ============================================================
   GLOBAL TYPOGRAPHY & BUTTON STYLES
============================================================= */
h1, h2, h3, .section-title {
  font-family: var(--font-serif);
  color: var(--navy);
  letter-spacing: -0.5px;
}

.section-title span {
  color: var(--teal);
}

.text-gold {
  color: var(--gold) !important;
}

.text-navy {
  color: var(--navy) !important;
}

.bg-navy {
  background-color: var(--navy) !important;
}

.border-gold {
  border-color: var(--gold) !important;
}

/* ============================================================
   DUAL CTAs BUTTON STYLES (IMPROVED)
============================================================= */

/* Base Button Setup */
.hero-btn, 
.services-cta, 
.why-button, 
.kdp-button, 
.faq-btn, 
.pricing-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center; /* Centered layout prevents awkward icon gaps */
  gap: 10px;               /* Clean, consistent spacing between text and icon */
  padding: 12px 28px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  border-radius: 6px;
  text-decoration: none;
  line-height: 1.2;
  white-space: nowrap;     /* Prevents button text from breaking onto two lines */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  user-select: none;
}

/* Primary Button */
.hero-btn-primary {
  background-color: var(--navy) !important;
  color: var(--white) !important;
  border: 2px solid var(--navy) !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.15);
}

.hero-btn-primary:hover {
  background-color: var(--white) !important;
  color: var(--deep-blue) !important;
  border-color: var(--white) !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.2);
}

/* Outline / Secondary Button */
.hero-btn-outline {
  background-color: var(--white) !important;
  color: var(--deep-blue) !important;
  border: 2px solid var(--navy) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

.hero-btn-outline:hover {
  background-color: var(--navy) !important;
  color: var(--white) !important;
  border-color: none !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.15);
}

/* Icon Animation on Hover */
.hero-btn-primary:hover i,
.hero-btn-outline:hover i {
  transform: translateX(3px);
  transition: transform 0.2s ease;
}

/* Click & Accessibility States */
.hero-btn-primary:active,
.hero-btn-outline:active {
  transform: translateY(-1px);
}

.hero-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}