:root {
  /* Colors */
  --primary-blue: #3174F9;
  --bg-white: #FFFFFF;
  --bg-light: #F8FAFC;
  --text-black: #0F172A;
  --text-grey: #475569;
  --text-light-grey: #94A3B8;
  --primary-red: #EF4444;
  /* New Red Accent */
  --border-color: #E2E8F0;

  /* Spacing */
  --spacing-xs: 0.5rem;
  /* 8px */
  --spacing-sm: 1rem;
  /* 16px */
  --spacing-md: 1.5rem;
  /* 24px */
  --spacing-lg: 2rem;
  /* 32px */
  --spacing-xl: 3rem;
  /* 48px */
  --spacing-2xl: 5rem;
  /* 80px */

  /* Container */
  --container-width: 1200px;
  --container-padding: 1.5rem;

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-primary: 0 4px 14px 0 rgba(49, 116, 249, 0.39);
}

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-white);
  color: var(--text-black);
  line-height: 1.6;
  font-size: 16px;
}

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

a {
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
}

ul {
  list-style: none;
}

/* Utility Classes */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

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

.text-red {
  color: var(--primary-red);
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.section {
  padding: var(--spacing-2xl) 0;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.2;
  font-weight: 700;
  color: var(--text-black);
}

h1 {
  font-size: 3.5rem;
  letter-spacing: -0.02em;
}

h2 {
  font-size: 2.5rem;
  letter-spacing: -0.01em;
  margin-bottom: var(--spacing-lg);
}

h3 {
  font-size: 1.5rem;
  margin-bottom: var(--spacing-sm);
}

p {
  color: var(--text-grey);
  margin-bottom: var(--spacing-sm);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 1rem;
}

.btn-primary {
  background-color: var(--primary-blue);
  color: white;
  border: 1px solid var(--primary-blue);
  box-shadow: var(--shadow-primary);
}

.btn-primary:hover {
  background-color: #2563EB;
  transform: translateY(-1px);
}

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

.btn-outline:hover {
  border-color: var(--text-black);
  background-color: var(--bg-light);
}

/* Header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-color);
  z-index: 1000;
  height: 80px;
  display: flex;
  align-items: center;
}

.nav-links {
  display: flex;
  gap: var(--spacing-lg);
}

.nav-link {
  font-weight: 600;
  color: var(--text-black);
}

.nav-link:hover,
.nav-link.active {
  color: var(--primary-blue);
}

.logo {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text-black);
  letter-spacing: -0.03em;
}

.text-blue {
  color: var(--primary-blue);
}

.text-red {
  color: var(--primary-red);
}

.bg-red {
  background-color: var(--primary-red);
}

.logo span {
  color: var(--primary-blue);
}

/* Hamburger Menu */
.hamburger {
  display: none;
  cursor: pointer;
  z-index: 1001;
  width: 40px;
  height: 40px;
  position: relative;
  align-items: center;
  justify-content: center;
}

.hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--text-black);
  position: absolute;
  transition: all 0.3s ease-in-out;
}

.hamburger-line:nth-child(1) {
  transform: translateY(-8px);
}

.hamburger-line:nth-child(3) {
  transform: translateY(8px);
}

.hamburger.active .hamburger-line:nth-child(1) {
  transform: translateY(0) rotate(45deg);
}

.hamburger.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.hamburger.active .hamburger-line:nth-child(3) {
  transform: translateY(0) rotate(-45deg);
}

/* Footer */
.footer {
  background-color: var(--bg-light);
  padding: var(--spacing-2xl) 0 var(--spacing-lg);
  border-top: 1px solid var(--border-color);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

.footer-bottom {
  text-align: center;
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border-color);
  color: var(--text-light-grey);
}

/* Page Specific Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.8s ease forwards;
}

/* Cards */
.card {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary-blue);
}

/* Process Steps */
.process-steps {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.step {
  flex: 1;
  min-width: 250px;
  text-align: center;
  position: relative;
}

.step-number {
  width: 50px;
  height: 50px;
  background-color: var(--primary-blue);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 auto 1.5rem;
}

.step h3 {
  margin-bottom: 0.5rem;
}

.step p {
  color: var(--text-grey);
}

/* Responsive Design */
@media (max-width: 768px) {
  h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 2rem;
  }

  .header {
    height: auto;
    min-height: 70px;
    position: relative;
    /* Push content down */
  }

  .header .container {
    position: relative;
    display: block;
    /* Remove flex constraints for absolute children + flow content */
    height: 100%;
    min-height: 70px;
  }

  /* Align Logo to Left on Mobile */
  .logo {
    position: absolute;
    left: var(--container-padding);
    transform: none;
    z-index: 1002;
    margin: 0;
    top: 18px;
    /* Approximate centering vertically for 70px height */
  }

  /* Hamburger Positioning */
  .hamburger {
    display: flex;
    position: absolute;
    right: var(--container-padding);
    top: 15px;
    /* Adjust to match logo alignment roughly */
    z-index: 1001;
  }

  /* Reset Nav */
  nav {
    position: static;
    width: 100%;
  }

  .nav-links {
    position: static;
    /* Flow in document */
    height: auto;
    width: 100%;
    background-color: white;
    flex-direction: column;
    padding: 1rem 0 2rem;
    gap: 1.5rem;
    align-items: center;
    justify-content: flex-start;
    border-top: 1px solid var(--border-color);
    /* Separator from top bar */
    box-shadow: none;
    transform: none;
    /* Disable slide transform */
    display: none;
    /* Hidden by default */
    margin-top: 70px;
    /* Push below the logo/hamburger area */
  }

  .nav-links.active {
    display: flex;
    /* Show when active */
    transform: none;
  }

  .nav-links.hidden-mobile {
    display: none;
    /* Ensure hidden initially via class logic if JS didn't catch it, though same as above */
  }

  /* Show flex when active override */
  .nav-links.hidden-mobile.active {
    display: flex;
  }

  .header .btn-primary {
    display: none;
  }

  .hero {
    padding-top: 40px;
    /* Reduced padding since header is relative now */
    text-align: center;
  }

  .hero-content {
    margin: 0 auto;
  }

  .grid,
  .footer-grid,
  .process-steps {
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .process-steps {
    gap: 3rem;
  }

  /* Reset flex alignment for container content except header specific */
  .flex.justify-between {
    /* Only apply column flex to non-header elements if needed, 
       but header itself is handled by absolute positioning above */
  }

  /* Specific fix for other flex containers that shouldn't be vertical if not intended,
     but assuming the previous block targeted general layout. 
     Let's be specific about not breaking the header logic if it relies on flex.
     Our header logic above overrules the flex flow with absolute positioning.
  */

  .section .flex.justify-between {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  .section .flex.justify-between .btn {
    width: 100%;
  }

  .footer-grid {
    gap: 2rem;
  }
}