:root {
  --primary-color: #0D95FF;
  --dark-text: #121826;
  --light-text: #3D4247;
  --background: #f5f5f5;
  --light-background: #f5f7fa;
  
  /* Global spacing variables */
  --section-spacing: 6rem;
  --section-padding-x: 2rem;
  --section-max-width: 1400px;
}

html {
  scroll-behavior: smooth;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
}

body {
  background-color: var(--background);
  color: var(--dark-text);
}

/* Global section spacing */
main > * {
  padding: var(--section-spacing) var(--section-padding-x);
  max-width: var(--section-max-width);
  margin: 0 auto;
  width: 100%;
}

/* Consistent spacing between sections */
main > * + * {
  margin-top: calc(-1 * var(--section-spacing));
  padding-top: var(--section-spacing);
}

/* Hero section gets extra top padding but consistent bottom spacing */
main > .hero {
  padding-top: 4rem;
  padding-bottom: var(--section-spacing);
}

/* First section after hero maintains consistent spacing */
main > .hero + * {
  margin-top: 0;
  padding-top: var(--section-spacing);
}

/* Override component-specific margins that interfere with global spacing */
.empowering-section {
  margin-top: -6rem !important;
  margin-bottom: 0 !important;
}

.one-click-section,
.testimonials-section,
.ovvy-gallery-section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.happy-section {
  margin-top: 2rem !important;
  margin-bottom: 0 !important;
}

/* Reduce Access component internal padding */
.access-device-section {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}

/* Ensure consistent top spacing for all sections */
main > * {
  margin-top: 0 !important;
}

/* Web-only spacing optimization */
@media (min-width: 1024px) {
  :root {
    --section-spacing: 5rem;
  }
}

/* Mobile responsiveness for section spacing */
@media (max-width: 768px) {
  :root {
    --section-spacing: 6rem;
    --section-padding-x: 1rem;
  }
  
  main > .hero {
    padding-top: 2rem;
  }
}

@media (max-width: 480px) {
  :root {
    --section-spacing: 4rem;
    --section-padding-x: 1rem;
  }
  
  main > .hero {
    padding-top: 1.5rem;
  }
}

.btn {
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  font-size: 0.95rem;
  transition: all 0.2s;
  text-decoration: none;
}

.btn-outline {
  border: 1px solid #e1e4e8;
  background: transparent;
  color: var(--dark-text);
}

.btn-outline:hover {
  background: #f5f7fa;
}

.btn-primary {
  background: var(--primary-color);
  color: white;
  border: none;
}

.btn-primary:hover {
  background: #0055d4;
}

.btn-white {
  background: white;
  color: var(--primary-color);
  border: none;
  font-weight: 600;
}

.btn-white:hover {
  background: #f1f5ff;
}

@media (max-width: 768px) {
  .cta-buttons {
    flex-direction: column;
  }
}