/* ============================================
   RESET & BASE STYLES
   ============================================ */

   *,
   *::before,
   *::after {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }
   
   :root {
       /* Color System */
       --color-primary: #0EA5E9;
       --color-primary-dark: #0284C7;
       --color-primary-light: #38BDF8;
       --color-accent: #F59E0B;
       --color-accent-dark: #D97706;
       --color-success: #10B981;
       --color-dark: #0F172A;
       --color-gray-900: #1E293B;
       --color-gray-800: #334155;
       --color-gray-700: #475569;
       --color-gray-300: #CBD5E1;
       --color-gray-200: #E2E8F0;
       --color-gray-100: #F1F5F9;
       --color-light: #F8FAFC;
       --color-white: #FFFFFF;
       
       /* Typography */
       --font-display: 'Bricolage Grotesque', sans-serif;
       --font-body: 'Inter', sans-serif;
       
       /* Spacing Scale */
       --space-xs: 0.5rem;
       --space-sm: 1rem;
       --space-md: 1.5rem;
       --space-lg: 2rem;
       --space-xl: 3rem;
       --space-2xl: 4rem;
       --space-3xl: 6rem;
       
       /* Layout */
       --container-width: 1200px;
       --border-radius: 12px;
       --border-radius-lg: 16px;
       
       /* Transitions */
       --transition-fast: 150ms ease;
       --transition-base: 250ms ease;
       --transition-slow: 400ms ease;
       
       /* 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);
       --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
       --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
   }
   
   html {
       scroll-behavior: smooth;
       font-size: 16px;
   }
   
   body {
       font-family: var(--font-body);
       color: var(--color-gray-900);
       background-color: var(--color-white);
       line-height: 1.6;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
   }
   
   /* Reduced motion support */
   @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;
       }
   }
   
   /* ============================================
      TYPOGRAPHY
      ============================================ */
   
   h1, h2, h3, h4, h5, h6 {
       font-family: var(--font-display);
       font-weight: 700;
       line-height: 1.2;
       color: var(--color-dark);
   }
   
   h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
   h2 { font-size: clamp(2rem, 4vw, 3rem); }
   h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
   h4 { font-size: 1.5rem; }
   
   p {
       font-size: 1.125rem;
       line-height: 1.7;
       color: var(--color-gray-700);
   }
   
   strong {
       font-weight: 700;
       color: var(--color-primary);
   }
   
   /* ============================================
      LAYOUT UTILITIES
      ============================================ */
   
   .container {
       width: 100%;
       max-width: var(--container-width);
       margin: 0 auto;
       padding: 0 var(--space-md);
   }
   
   @media (min-width: 768px) {
       .container {
           padding: 0 var(--space-xl);
       }
   }
   
   /* ============================================
      BUTTONS
      ============================================ */
   
   .btn {
       display: inline-flex;
       align-items: center;
       gap: var(--space-xs);
       padding: 0.875rem 1.75rem;
       font-family: var(--font-display);
       font-size: 1rem;
       font-weight: 600;
       text-decoration: none;
       border-radius: var(--border-radius);
       border: 2px solid transparent;
       cursor: pointer;
       transition: all var(--transition-base);
       position: relative;
       overflow: hidden;
   }
   
   .btn::before {
       content: '';
       position: absolute;
       top: 50%;
       left: 50%;
       width: 0;
       height: 0;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.2);
       transform: translate(-50%, -50%);
       transition: width var(--transition-slow), height var(--transition-slow);
   }
   
   .btn:hover::before {
       width: 300px;
       height: 300px;
   }
   
   .btn-primary {
       background: var(--color-success);
       color: var(--color-white);
       box-shadow: 0 4px 14px 0 rgba(16, 185, 129, 0.3);
   }
   
   .btn-primary:hover {
       background: #059669;
       transform: translateY(-2px);
       box-shadow: 0 6px 20px 0 rgba(16, 185, 129, 0.4);
   }
   
   .btn-ghost {
       background: transparent;
       color: var(--color-gray-800);
       border-color: var(--color-gray-300);
   }
   
   .btn-ghost:hover {
       background: var(--color-gray-100);
       border-color: var(--color-gray-400);
   }
   
   .btn-outline {
       background: transparent;
       color: var(--color-primary);
       border-color: var(--color-primary);
   }
   
   .btn-outline:hover {
       background: var(--color-primary);
       color: var(--color-white);
   }
   
   .btn-lg {
       padding: 1.125rem 2.25rem;
       font-size: 1.125rem;
   }
   
   .btn-icon {
       transition: transform var(--transition-base);
   }
   
   .btn:hover .btn-icon {
       transform: translateX(4px);
   }
   
   /* ============================================
      NAVIGATION
      ============================================ */
   
   .nav {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       z-index: 1000;
       background: rgba(255, 255, 255, 0.95);
       backdrop-filter: blur(10px);
       border-bottom: 1px solid var(--color-gray-200);
       transition: all var(--transition-base);
   }
   
   .nav.scrolled {
       box-shadow: var(--shadow-md);
   }
   
   .nav-container {
       display: flex;
       align-items: center;
       justify-content: space-between;
       height: 72px;
   }
   
   .nav-logo {
       font-family: var(--font-display);
       font-size: 1.25rem;
       font-weight: 600;
       color: var(--color-dark);
       text-decoration: none;
       transition: color var(--transition-fast);
   }
   
   .nav-logo:hover {
       color: var(--color-primary);
   }
   
   .logo-text strong {
       color: var(--color-primary);
   }
   
   .nav-links {
       display: none;
       align-items: center;
       gap: var(--space-lg);
   }
   
   @media (min-width: 768px) {
       .nav-links {
           display: flex;
       }
   }
   
   .nav-link {
       font-family: var(--font-display);
       font-size: 0.9375rem;
       font-weight: 500;
       color: var(--color-gray-700);
       text-decoration: none;
       transition: color var(--transition-fast);
       position: relative;
   }
   
   .nav-link::after {
       content: '';
       position: absolute;
       bottom: -4px;
       left: 0;
       width: 0;
       height: 2px;
       background: var(--color-primary);
       transition: width var(--transition-base);
   }
   
   .nav-link:hover {
       color: var(--color-primary);
   }
   
   .nav-link:hover::after {
       width: 100%;
   }
   
   .nav-link--login {
       color: var(--color-primary);
       font-weight: 600;
   }
   
   .nav-toggle {
       display: block;
       background: none;
       border: none;
       cursor: pointer;
       padding: var(--space-xs);
   }
   
   @media (min-width: 768px) {
       .nav-toggle {
           display: none;
       }
   }
   
   .nav-toggle span {
       display: block;
       width: 24px;
       height: 2px;
       background: var(--color-gray-800);
       margin: 5px 0;
       transition: all var(--transition-base);
   }
   
   /* ============================================
      HERO SECTION
      ============================================ */
   
   .hero {
       min-height: 100vh;
       display: flex;
       align-items: center;
       padding: calc(72px + var(--space-xl)) 0 var(--space-3xl);
       background: linear-gradient(135deg, var(--color-light) 0%, #E0F2FE 100%);
       position: relative;
       overflow: hidden;
   }
   
   .hero::before {
       content: '';
       position: absolute;
       top: 0;
       right: 0;
       width: 600px;
       height: 600px;
       background: radial-gradient(circle, rgba(14, 165, 233, 0.1) 0%, transparent 70%);
       pointer-events: none;
   }
   
   .hero-container {
       display: grid;
       grid-template-columns: 1fr;
       gap: var(--space-xl);
       align-items: center;
   }
   
   @media (min-width: 1024px) {
       .hero-container {
           grid-template-columns: 1.2fr 1fr;
           gap: var(--space-3xl);
       }
   }
   
   .hero-content {
       z-index: 1;
   }
   
   .hero-title {
       margin-bottom: var(--space-md);
       animation: fadeInUp 0.8s ease-out;
   }
   
   .hero-title .highlight {
       background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
   }
   
   .hero-subtitle {
       font-size: 1.25rem;
       color: var(--color-gray-700);
       margin-bottom: var(--space-xl);
       max-width: 600px;
       animation: fadeInUp 0.8s ease-out 0.2s both;
   }
   
   .hero-ctas {
       display: flex;
       flex-wrap: wrap;
       gap: var(--space-md);
       margin-bottom: var(--space-xl);
       animation: fadeInUp 0.8s ease-out 0.4s both;
   }
   
   .hero-stats {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
       gap: var(--space-lg);
       animation: fadeInUp 0.8s ease-out 0.6s both;
   }
   
   .hero-trust {
       font-size: 0.875rem;
       color: var(--color-gray-600);
       text-align: center;
       margin-top: var(--space-lg);
       animation: fadeInUp 0.8s ease-out 0.8s both;
   }
   
   .stat {
       text-align: left;
   }
   
   .stat-number {
       font-family: var(--font-display);
       font-size: 2.5rem;
       font-weight: 800;
       color: var(--color-primary);
       line-height: 1;
   }
   
   .stat-label {
       font-size: 0.875rem;
       color: var(--color-gray-600);
       margin-top: var(--space-xs);
   }
   
   .hero-visual {
       position: relative;
       height: 500px;
       display: flex;
       align-items: center;
       justify-content: center;
       animation: fadeIn 1s ease-out 0.4s both;
   }
   
   .hero-graphic {
       width: 100%;
       max-width: 400px;
       animation: float 6s ease-in-out infinite;
   }
   
   .hero-shape {
       position: absolute;
       border-radius: 50%;
       opacity: 0.1;
       animation: pulse 4s ease-in-out infinite;
   }
   
   .hero-shape-1 {
       width: 300px;
       height: 300px;
       background: var(--color-primary);
       top: 10%;
       left: 10%;
       animation-delay: 0s;
   }
   
   .hero-shape-2 {
       width: 200px;
       height: 200px;
       background: var(--color-accent);
       bottom: 20%;
       right: 15%;
       animation-delay: 1s;
   }
   
   .hero-shape-3 {
       width: 150px;
       height: 150px;
       background: var(--color-success);
       top: 50%;
       right: 10%;
       animation-delay: 2s;
   }
   
   .scroll-indicator {
       position: absolute;
       bottom: var(--space-lg);
       left: 50%;
       transform: translateX(-50%);
       animation: bounce 2s ease-in-out infinite;
   }
   
   .scroll-mouse {
       width: 24px;
       height: 40px;
       border: 2px solid var(--color-gray-400);
       border-radius: 12px;
       position: relative;
   }
   
   .scroll-wheel {
       width: 4px;
       height: 8px;
       background: var(--color-gray-400);
       border-radius: 2px;
       position: absolute;
       top: 8px;
       left: 50%;
       transform: translateX(-50%);
       animation: scrollWheel 2s ease-in-out infinite;
   }
   
   /* ============================================
      TRUST BAR
      ============================================ */
   
   .trust-bar {
       padding: var(--space-xl) 0;
       background: var(--color-white);
       border-bottom: 1px solid var(--color-gray-200);
   }
   
   .trust-label {
       text-align: center;
       font-size: 0.875rem;
       color: var(--color-gray-600);
       text-transform: uppercase;
       letter-spacing: 0.05em;
       margin-bottom: var(--space-md);
   }
   
   .trust-logos {
       display: flex;
       justify-content: center;
       align-items: center;
       gap: var(--space-xl);
       flex-wrap: wrap;
   }
   
   .trust-logo {
       font-family: var(--font-display);
       font-size: 1.25rem;
       font-weight: 600;
       color: var(--color-gray-400);
       transition: color var(--transition-base);
   }
   
   .trust-logo:hover {
       color: var(--color-gray-700);
   }
   
   /* ============================================
      SECTIONS
      ============================================ */
   
   section {
       padding: var(--space-3xl) 0;
   }
   
   .section-header {
       text-align: center;
       margin-bottom: var(--space-3xl);
   }
   
   .section-title {
       margin-bottom: var(--space-md);
   }
   
   .section-subtitle {
       font-size: 1.25rem;
       color: var(--color-gray-600);
       max-width: 600px;
       margin: 0 auto;
   }
   
   /* ============================================
      HOW IT WORKS
      ============================================ */
   
   .how-it-works {
       background: var(--color-white);
   }
   
   .steps {
       display: grid;
       grid-template-columns: 1fr;
       gap: var(--space-2xl);
       max-width: 900px;
       margin: 0 auto;
   }
   
   @media (min-width: 768px) {
       .steps {
           gap: var(--space-3xl);
       }
   }
   
   .step {
       display: grid;
       grid-template-columns: auto 1fr auto;
       gap: var(--space-lg);
       align-items: start;
       opacity: 0;
       transform: translateY(30px);
       transition: all var(--transition-slow);
   }
   
   .step.visible {
       opacity: 1;
       transform: translateY(0);
   }
   
   .step-number {
       font-family: var(--font-display);
       font-size: 3rem;
       font-weight: 800;
       color: var(--color-gray-200);
       line-height: 1;
   }
   
   .step-content {
       padding-top: 0.5rem;
   }
   
   .step-title {
       font-size: 1.5rem;
       margin-bottom: var(--space-sm);
       color: var(--color-dark);
   }
   
   .step-description {
       font-size: 1rem;
       color: var(--color-gray-700);
       line-height: 1.7;
   }
   
   .step-visual {
       width: 80px;
       height: 80px;
       display: flex;
       align-items: center;
       justify-content: center;
   }
   
   .step-icon {
       color: var(--color-primary);
       transition: transform var(--transition-base);
   }
   
   .step:hover .step-icon {
       transform: scale(1.1) rotate(5deg);
   }
   
   /* ============================================
      VALUE PROPS
      ============================================ */
   
   .value-props {
       background: var(--color-gray-100);
   }
   
   .value-grid {
       display: grid;
       grid-template-columns: 1fr;
       gap: var(--space-lg);
       margin-bottom: var(--space-xl);
   }
   
   @media (min-width: 768px) {
       .value-grid {
           grid-template-columns: repeat(3, 1fr);
       }
   }
   
   .value-card {
       background: var(--color-white);
       border-radius: var(--border-radius-lg);
       padding: var(--space-xl);
       box-shadow: var(--shadow-sm);
       transition: all var(--transition-base);
       cursor: pointer;
       opacity: 0;
       transform: translateY(30px);
   }
   
   .value-card.visible {
       opacity: 1;
       transform: translateY(0);
   }
   
   .value-card:hover {
       transform: translateY(-8px);
       box-shadow: var(--shadow-xl);
   }
   
   .value-card-header {
       display: flex;
       align-items: center;
       gap: var(--space-md);
       margin-bottom: var(--space-md);
   }
   
   .value-icon {
       width: 48px;
       height: 48px;
       display: flex;
       align-items: center;
       justify-content: center;
       background: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, rgba(245, 158, 11, 0.1) 100%);
       border-radius: var(--border-radius);
       color: var(--color-primary);
   }
   
   .value-title {
       font-size: 1.25rem;
       color: var(--color-dark);
   }
   
   .value-description {
       font-size: 1rem;
       color: var(--color-gray-700);
       line-height: 1.7;
       margin-bottom: var(--space-md);
   }
   
   .value-expand {
       background: var(--color-gray-100);
       border: none;
       width: 40px;
       height: 40px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       transition: all var(--transition-base);
       margin: var(--space-md) auto 0;
   }
   
   .value-expand:hover {
       background: var(--color-primary);
       color: var(--color-white);
   }
   
   .value-expand svg {
       transition: transform var(--transition-base);
   }
   
   .value-card.expanded .value-expand svg {
       transform: rotate(180deg);
   }
   
   .value-details {
       max-height: 0;
       overflow: hidden;
       transition: max-height var(--transition-slow);
   }
   
   .value-card.expanded .value-details {
       max-height: 500px;
       margin-top: var(--space-md);
   }
   
   .value-details ul {
       list-style: none;
       padding-left: 0;
   }
   
   .value-details li {
       padding: var(--space-xs) 0;
       padding-left: var(--space-lg);
       position: relative;
       color: var(--color-gray-700);
   }
   
   .value-details li::before {
       content: '✓';
       position: absolute;
       left: 0;
       color: var(--color-success);
       font-weight: bold;
   }
   
   .value-cta {
       text-align: center;
       margin-top: var(--space-2xl);
   }
   
   /* ============================================
      TRANSITION SECTION
      ============================================ */
   
   .transition-section {
       background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-gray-900) 100%);
       color: var(--color-white);
       padding: var(--space-3xl) 0;
       text-align: center;
   }
   
   .transition-content {
       opacity: 0;
       transform: translateY(30px);
       transition: all var(--transition-slow);
   }
   
   .transition-content.visible {
       opacity: 1;
       transform: translateY(0);
   }
   
   .transition-title {
       font-size: clamp(2rem, 4vw, 3rem);
       margin-bottom: var(--space-md);
       color: var(--color-white);
   }
   
   .transition-title .highlight {
       background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-accent) 100%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
   }
   
   .transition-text {
       font-size: 1.25rem;
       color: var(--color-gray-300);
       max-width: 700px;
       margin: 0 auto;
   }
   
   /* ============================================
      BRAND SECTION
      ============================================ */
   
   .brand-section {
       background: var(--color-white);
   }
   
   .brand-header {
       display: grid;
       grid-template-columns: 1fr;
       gap: var(--space-xl);
       margin-bottom: var(--space-3xl);
       padding: var(--space-xl);
       background: linear-gradient(135deg, var(--color-gray-100) 0%, var(--color-light) 100%);
       border-radius: var(--border-radius-lg);
   }
   
   @media (min-width: 768px) {
       .brand-header {
           grid-template-columns: 1.5fr 1fr;
           align-items: center;
       }
   }
   
   .brand-label {
       display: inline-block;
       font-size: 0.875rem;
       font-weight: 600;
       color: var(--color-primary);
       text-transform: uppercase;
       letter-spacing: 0.05em;
       margin-bottom: var(--space-sm);
   }
   
   .brand-title {
       margin-bottom: var(--space-md);
   }
   
   .brand-subtitle {
       font-size: 1.125rem;
       color: var(--color-gray-700);
   }
   
   .brand-header-stats {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: var(--space-lg);
   }
   
   .brand-stat {
       text-align: center;
       padding: var(--space-lg);
       background: var(--color-white);
       border-radius: var(--border-radius);
   }
   
   .brand-stat-number {
       font-family: var(--font-display);
       font-size: 2.5rem;
       font-weight: 800;
       color: var(--color-primary);
       line-height: 1;
   }
   
   .brand-stat-label {
       font-size: 0.875rem;
       color: var(--color-gray-600);
       margin-top: var(--space-xs);
   }
   
   .brand-features {
       display: grid;
       grid-template-columns: 1fr;
       gap: var(--space-xl);
       margin-bottom: var(--space-3xl);
   }
   
   @media (min-width: 768px) {
       .brand-features {
           gap: var(--space-2xl);
       }
   }
   
   .brand-feature {
       display: grid;
       grid-template-columns: auto 1fr;
       gap: var(--space-lg);
       align-items: start;
       padding: var(--space-xl);
       background: var(--color-light);
       border-radius: var(--border-radius-lg);
       border-left: 4px solid var(--color-primary);
       transition: all var(--transition-base);
       opacity: 0;
       transform: translateX(-30px);
   }
   
   .brand-feature.visible {
       opacity: 1;
       transform: translateX(0);
   }
   
   .brand-feature:hover {
       background: var(--color-white);
       box-shadow: var(--shadow-lg);
       transform: translateX(8px);
   }
   
   .brand-feature-number {
       font-family: var(--font-display);
       font-size: 2rem;
       font-weight: 800;
       color: var(--color-primary);
       line-height: 1;
   }
   
   .brand-feature-title {
       font-size: 1.5rem;
       margin-bottom: var(--space-sm);
       color: var(--color-dark);
   }
   
   .brand-feature-description {
       font-size: 1rem;
       color: var(--color-gray-700);
       line-height: 1.7;
   }
   
   .brand-cta-block {
       display: flex;
       flex-direction: column;
       gap: var(--space-lg);
       align-items: center;
       justify-content: space-between;
       padding: var(--space-2xl);
       background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
       border-radius: var(--border-radius-lg);
       color: var(--color-white);
   }
   
   @media (min-width: 768px) {
       .brand-cta-block {
           flex-direction: row;
       }
   }
   
   .brand-cta-title {
       font-size: 1.75rem;
       margin-bottom: var(--space-sm);
       color: var(--color-white);
   }
   
   .brand-cta-text {
       font-size: 1rem;
       color: rgba(255, 255, 255, 0.9);
   }
   
   /* ============================================
      TESTIMONIALS
      ============================================ */
   
   .testimonials {
       background: var(--color-light);
   }
   
   .testimonial-grid {
       display: grid;
       grid-template-columns: 1fr;
       gap: var(--space-lg);
   }
   
   @media (min-width: 768px) {
       .testimonial-grid {
           grid-template-columns: repeat(3, 1fr);
       }
   }
   
   .testimonial {
       background: var(--color-white);
       padding: var(--space-xl);
       border-radius: var(--border-radius-lg);
       box-shadow: var(--shadow-sm);
       transition: all var(--transition-base);
       opacity: 0;
       transform: translateY(30px);
   }
   
   .testimonial.visible {
       opacity: 1;
       transform: translateY(0);
   }
   
   .testimonial:hover {
       transform: translateY(-4px);
       box-shadow: var(--shadow-lg);
   }
   
   .testimonial-content {
       margin-bottom: var(--space-lg);
   }
   
   .testimonial-text {
       font-size: 1rem;
       line-height: 1.7;
       color: var(--color-gray-800);
       font-style: italic;
   }
   
   .testimonial-author {
       display: flex;
       align-items: center;
       gap: var(--space-md);
   }
   
   .testimonial-avatar {
       width: 48px;
       height: 48px;
       border-radius: 50%;
       background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
       display: flex;
       align-items: center;
       justify-content: center;
       color: var(--color-white);
       font-weight: 700;
       font-family: var(--font-display);
   }
   
   .testimonial-name {
       font-weight: 600;
       color: var(--color-dark);
   }
   
   .testimonial-role {
       font-size: 0.875rem;
       color: var(--color-gray-600);
   }
   
   /* ============================================
      FINAL CTA
      ============================================ */
   
   .final-cta {
       background: var(--color-white);
       padding: var(--space-3xl) 0;
   }
   
   .final-cta-content {
       text-align: center;
       margin-bottom: var(--space-3xl);
       opacity: 0;
       transform: translateY(30px);
       transition: all var(--transition-slow);
   }
   
   .final-cta-content.visible {
       opacity: 1;
       transform: translateY(0);
   }
   
   .final-cta-title {
       margin-bottom: var(--space-md);
   }
   
   .final-cta-text {
       font-size: 1.25rem;
       color: var(--color-gray-600);
       max-width: 600px;
       margin: 0 auto;
   }
   
   .final-cta-actions {
       display: grid;
       grid-template-columns: 1fr;
       gap: var(--space-xl);
       max-width: 900px;
       margin: 0 auto;
       opacity: 0;
       transform: translateY(30px);
       transition: all var(--transition-slow) 0.2s;
   }
   
   .final-cta-actions.visible {
       opacity: 1;
       transform: translateY(0);
   }
   
   @media (min-width: 768px) {
       .final-cta-actions {
           grid-template-columns: 1fr auto 1fr;
       }
   }
   
   .final-cta-option {
       padding: var(--space-xl);
       border-radius: var(--border-radius-lg);
       background: var(--color-gray-100);
       text-align: center;
   }
   
   .final-cta-option-title {
       font-size: 1.5rem;
       margin-bottom: var(--space-sm);
   }
   
   .final-cta-option-text {
       font-size: 1rem;
       color: var(--color-gray-700);
       margin-bottom: var(--space-lg);
   }
   
   .final-cta-divider {
       width: 1px;
       background: var(--color-gray-300);
       display: none;
   }
   
   @media (min-width: 768px) {
       .final-cta-divider {
           display: block;
       }
   }
   
   /* ============================================
      FOOTER
      ============================================ */
   
   .footer {
       background: var(--color-dark);
       color: var(--color-gray-300);
       padding: var(--space-3xl) 0 var(--space-lg);
   }
   
   .footer-main {
       display: grid;
       grid-template-columns: 1fr;
       gap: var(--space-2xl);
       margin-bottom: var(--space-2xl);
       padding-bottom: var(--space-2xl);
       border-bottom: 1px solid var(--color-gray-800);
   }
   
   @media (min-width: 768px) {
       .footer-main {
           grid-template-columns: 1.5fr 2fr;
       }
   }
   
   .footer-logo {
       font-family: var(--font-display);
       font-size: 1.25rem;
       font-weight: 600;
       color: var(--color-white);
       margin-bottom: var(--space-md);
   }
   
   .footer-tagline {
       font-size: 0.9375rem;
       color: var(--color-gray-400);
       margin-bottom: var(--space-lg);
       max-width: 300px;
   }
   
   .footer-social {
       display: flex;
       gap: var(--space-md);
   }
   
   .social-link {
       width: 40px;
       height: 40px;
       display: flex;
       align-items: center;
       justify-content: center;
       background: var(--color-gray-800);
       border-radius: 50%;
       color: var(--color-gray-400);
       transition: all var(--transition-base);
   }
   
   .social-link:hover {
       background: var(--color-primary);
       color: var(--color-white);
       transform: translateY(-2px);
   }
   
   .footer-links {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: var(--space-xl);
   }
   
   @media (min-width: 768px) {
       .footer-links {
           grid-template-columns: repeat(4, 1fr);
       }
   }
   
   .footer-column-title {
       font-size: 0.875rem;
       font-weight: 600;
       color: var(--color-white);
       text-transform: uppercase;
       letter-spacing: 0.05em;
       margin-bottom: var(--space-md);
   }
   
   .footer-list {
       list-style: none;
   }
   
   .footer-list li {
       margin-bottom: var(--space-sm);
   }
   
   .footer-list a {
       color: var(--color-gray-400);
       text-decoration: none;
       font-size: 0.9375rem;
       transition: color var(--transition-fast);
   }
   
   .footer-list a:hover {
       color: var(--color-white);
   }
   
   .footer-bottom {
       display: flex;
       flex-direction: column;
       gap: var(--space-md);
       align-items: center;
       justify-content: space-between;
       padding-top: var(--space-lg);
   }
   
   @media (min-width: 768px) {
       .footer-bottom {
           flex-direction: row;
       }
   }
   
   .footer-certifications {
       display: flex;
       gap: var(--space-md);
       flex-wrap: wrap;
   }
   
   .certification-badge {
       padding: var(--space-xs) var(--space-md);
       background: var(--color-gray-800);
       border-radius: 20px;
       font-size: 0.75rem;
       font-weight: 600;
       color: var(--color-gray-400);
   }
   
   .footer-copyright {
       font-size: 0.875rem;
       color: var(--color-gray-500);
   }
   
   /* ============================================
      ANIMATIONS
      ============================================ */
   
   @keyframes fadeInUp {
       from {
           opacity: 0;
           transform: translateY(30px);
       }
       to {
           opacity: 1;
           transform: translateY(0);
       }
   }
   
   @keyframes fadeIn {
       from {
           opacity: 0;
       }
       to {
           opacity: 1;
       }
   }
   
   @keyframes float {
       0%, 100% {
           transform: translateY(0);
       }
       50% {
           transform: translateY(-20px);
       }
   }
   
   @keyframes pulse {
       0%, 100% {
           transform: scale(1);
           opacity: 0.1;
       }
       50% {
           transform: scale(1.05);
           opacity: 0.15;
       }
   }
   
   @keyframes bounce {
       0%, 100% {
           transform: translateX(-50%) translateY(0);
       }
       50% {
           transform: translateX(-50%) translateY(-10px);
       }
   }
   
   @keyframes scrollWheel {
       0% {
           opacity: 1;
           transform: translateX(-50%) translateY(0);
       }
       100% {
           opacity: 0;
           transform: translateX(-50%) translateY(16px);
       }
   }
   
   /* Utility for staggered fade-ups */
   .fade-up {
       animation: fadeInUp 0.8s ease-out both;
   }
   
   .fade-up:nth-child(1) { animation-delay: 0.1s; }
   .fade-up:nth-child(2) { animation-delay: 0.2s; }
   .fade-up:nth-child(3) { animation-delay: 0.3s; }
   .fade-up:nth-child(4) { animation-delay: 0.4s; }
   
   /* Scroll reveal utility */
   .reveal-on-scroll {
       opacity: 0;
       transform: translateY(30px);
       transition: all 0.6s ease-out;
   }
   
   .reveal-on-scroll.visible {
       opacity: 1;
       transform: translateY(0);
   }
   
   /* Stagger delays for reveal-on-scroll elements */
   .reveal-on-scroll:nth-child(1) { transition-delay: 0s; }
   .reveal-on-scroll:nth-child(2) { transition-delay: 0.1s; }
   .reveal-on-scroll:nth-child(3) { transition-delay: 0.2s; }
   .reveal-on-scroll:nth-child(4) { transition-delay: 0.3s; }
   .reveal-on-scroll:nth-child(5) { transition-delay: 0.4s; }
   
   /* ============================================
      ACCESSIBILITY & FOCUS STATES
      ============================================ */
   
   a:focus,
   button:focus {
       outline: 2px solid var(--color-primary);
       outline-offset: 2px;
   }
   
   a:focus:not(:focus-visible),
   button:focus:not(:focus-visible) {
       outline: none;
   }
   
   /* Screen reader only */
   .sr-only {
       position: absolute;
       width: 1px;
       height: 1px;
       padding: 0;
       margin: -1px;
       overflow: hidden;
       clip: rect(0, 0, 0, 0);
       white-space: nowrap;
       border-width: 0;
   }