/* ========================================
                                     TaxReclaim Pro - Main Stylesheet
                                     ======================================== */

                                  /* CSS Variables - Design System */
                                  :root {
                                      /* Colors */
                                      --primary: #6366f1;
                                      --primary-dark: #4f46e5;
                                      --primary-light: #818cf8;
                                      --secondary: #22d3ee;
                                      --success: #10b981;
                                      --danger: #ef4444;
                                      --warning: #f59e0b;
                                      --info: #3b82f6;

                                      /* Neutrals */
                                      --dark: #1f2937;
                                      --gray-dark: #4b5563;
                                      --gray: #6b7280;
                                      --gray-light: #9ca3af;
                                      --light: #f3f4f6;
                                      --white: #ffffff;

                                      /* Spacing */
                                      --spacing-xs: 0.25rem;
                                      --spacing-sm: 0.5rem;
                                      --spacing-md: 1rem;
                                      --spacing-lg: 1.5rem;
                                      --spacing-xl: 2rem;
                                      --spacing-2xl: 3rem;
                                      --spacing-3xl: 4rem;

                                      /* Typography */
                                      --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
                                      --font-size-sm: 0.875rem;
                                      --font-size-base: 1rem;
                                      --font-size-lg: 1.125rem;
                                      --font-size-xl: 1.25rem;
                                      --font-size-2xl: 1.5rem;
                                      --font-size-3xl: 2rem;
                                      --font-size-4xl: 2.5rem;
                                      --font-size-5xl: 3rem;

                                      /* Borders & Shadows */
                                      --border-radius: 0.5rem;
                                      --border-radius-lg: 1rem;
                                      --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
                                      --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
                                      --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
                                      --shadow-xl: 0 20px 40px -10px rgba(0, 0, 0, 0.15);

                                      /* Transitions */
                                      --transition-fast: 150ms ease;
                                      --transition-base: 300ms ease;
                                      --transition-slow: 500ms ease;

                                      /* Z-index */
                                      --z-dropdown: 1000;
                                      --z-sticky: 1020;
                                      --z-fixed: 1030;
                                      --z-modal-backdrop: 1040;
                                      --z-modal: 1050;
                                      --z-tooltip: 1060;
                                  }

                                  /* ========================================
                                     Reset & Base Styles
                                     ======================================== */

                                  * {
                                      margin: 0;
                                      padding: 0;
                                      box-sizing: border-box;
                                  }

                                  html {
                                      font-size: 16px;
                                      scroll-behavior: smooth;
                                  }

                                  body {
                                      font-family: var(--font-primary);
                                      font-size: var(--font-size-base);
                                      line-height: 1.6;
                                      color: var(--dark);
                                      background-color: var(--white);
                                      overflow-x: hidden;
                                  }

                                  h1, h2, h3, h4, h5, h6 {
                                      font-weight: 700;
                                      line-height: 1.2;
                                      margin-bottom: var(--spacing-md);
                                  }

                                  h1 { font-size: var(--font-size-5xl); }
                                  h2 { font-size: var(--font-size-4xl); }
                                  h3 { font-size: var(--font-size-3xl); }
                                  h4 { font-size: var(--font-size-2xl); }
                                  h5 { font-size: var(--font-size-xl); }
                                  h6 { font-size: var(--font-size-lg); }

                                  p {
                                      margin-bottom: var(--spacing-md);
                                  }

                                  a {
                                      color: var(--primary);
                                      text-decoration: none;
                                      transition: color var(--transition-base);
                                  }

                                  a:hover {
                                      color: var(--primary-dark);
                                  }

                                  img {
                                      max-width: 100%;
                                      height: auto;
                                  }

                                  /* ========================================
                                     Layout Components
                                     ======================================== */

                                  .container {
                                      width: 100%;
                                      max-width: 1200px;
                                      margin: 0 auto;
                                      padding: 0 var(--spacing-xl);
                                  }

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

                                  /* ========================================
                                     Navigation
                                     ======================================== */

                                  .navbar {
                                      background: rgba(255, 255, 255, 0.95);
                                      backdrop-filter: blur(10px);
                                      border-bottom: 1px solid #e5e7eb;
                                      padding: 16px 0;
                                      position: fixed;
                                      width: 100%;
                                      top: 0;
                                      z-index: var(--z-sticky);
                                      transition: all var(--transition-base);
                                  }

                                  .nav-container {
                                      display: flex;
                                      justify-content: space-between;
                                      align-items: center;
                                  }

                                  .logo {
                                      display: flex;
                                      align-items: center;
                                      gap: 12px;
                                      font-weight: 600;
                                      font-size: 20px;
                                      color: var(--dark);
                                      text-decoration: none;
                                  }

                                  .logo-icon {
                                      width: 32px;
                                      height: 32px;
                                      background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
                                      border-radius: var(--border-radius);
                                      display: flex;
                                      align-items: center;
                                      justify-content: center;
                                      color: #0f172a;
                                      font-weight: 700;
                                  }

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

                                  .nav-links a {
                                      text-decoration: none;
                                      color: var(--dark);
                                      font-weight: 500;
                                      transition: color var(--transition-base);
                                  }

                                  .nav-links a:hover,
                                  .nav-links a.active {
                                      color: var(--primary);
                                  }

                                  .mobile-menu-toggle {
                                      display: none;
                                      background: none;
                                      border: none;
                                      font-size: 24px;
                                      color: var(--dark);
                                      cursor: pointer;
                                  }

                                  .mobile-menu {
                                      display: none;
                                      position: absolute;
                                      top: 100%;
                                      left: 0;
                                      right: 0;
                                      background: var(--white);
                                      border-top: 1px solid #e5e7eb;
                                      box-shadow: var(--shadow);
                                      z-index: 999;
                                  }

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

                                  .mobile-menu a {
                                      display: block;
                                      padding: 16px 24px;
                                      color: var(--dark);
                                      text-decoration: none;
                                      border-bottom: 1px solid #e5e7eb;
                                      font-weight: 500;
                                  }

                                  .mobile-menu a:hover {
                                      background: var(--light);
                                      color: var(--primary);
                                  }

                                  .mobile-menu .btn {
                                      margin: 16px 24px;
                                      display: block;
                                      text-align: center;
                                  }

                                  /* ========================================
                                     Hero Sections
                                     ======================================== */

                                  .hero {
                                      background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
                                      color: var(--white);
                                      padding: 120px 0 80px;
                                      position: relative;
                                      overflow: hidden;
                                  }

                                  .hero::before {
                                      content: '';
                                      position: absolute;
                                      top: 0;
                                      left: 0;
                                      right: 0;
                                      bottom: 0;
                                      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="20" cy="20" r="1" fill="%23ffffff" opacity="0.05"/><circle cx="80" cy="40" r="1" fill="%23ffffff" opacity="0.05"/><circle cx="40" cy="80" r="1" fill="%23ffffff" opacity="0.05"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
                                      opacity: 0.3;
                                  }

                                  .hero-content {
                                      position: relative;
                                      z-index: 2;
                                      text-align: center;
                                      max-width: 800px;
                                      margin: 0 auto;
                                  }

                                  .hero h1 {
                                      font-size: clamp(3rem, 6vw, 4.5rem);
                                      font-weight: 700;
                                      margin-bottom: 24px;
                                      line-height: 1.1;
                                      letter-spacing: -0.02em;
                                  }

                                  .hero p {
                                      font-size: 20px;
                                      margin-bottom: 40px;
                                      opacity: 0.9;
                                      font-weight: 400;
                                      line-height: 1.6;
                                  }

                                  .hero-cta {
                                      display: flex;
                                      gap: 16px;
                                      justify-content: center;
                                      flex-wrap: wrap;
                                      margin-bottom: 60px;
                                  }

                                  .hero-stats {
                                      display: grid;
                                      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                                      gap: 40px;
                                      max-width: 600px;
                                      margin: 0 auto;
                                  }

                                  .stat {
                                      text-align: center;
                                  }

                                  .stat-number {
                                      font-size: 2.5rem;
                                      font-weight: 700;
                                      margin-bottom: 8px;
                                      background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
                                      -webkit-background-clip: text;
                                      -webkit-text-fill-color: transparent;
                                      background-clip: text;
                                  }

                                  .stat-label {
                                      font-size: 14px;
                                      opacity: 0.8;
                                      text-transform: uppercase;
                                      letter-spacing: 1px;
                                      font-weight: 500;
                                  }

                                  /* ========================================
                                     Buttons
                                     ======================================== */

                                  .btn {
                                      padding: 16px 32px;
                                      border: none;
                                      border-radius: var(--border-radius);
                                      font-size: 16px;
                                      font-weight: 600;
                                      cursor: pointer;
                                      transition: all var(--transition-base);
                                      text-decoration: none;
                                      display: inline-flex;
                                      align-items: center;
                                      gap: 8px;
                                      border: 2px solid transparent;
                                      font-family: inherit;
                                  }

                                  .btn-primary {
                                      background: var(--primary);
                                      color: var(--white);
                                      border-color: var(--primary);
                                      box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3);
                                  }

                                  .btn-primary:hover {
                                      background: var(--primary-dark);
                                      border-color: var(--primary-dark);
                                      color: var(--white);
                                      transform: translateY(-2px);
                                      box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
                                  }

                                  .btn-secondary {
                                      background: rgba(255, 255, 255, 0.1);
                                      color: var(--white);
                                      border: 2px solid rgba(255, 255, 255, 0.2);
                                      backdrop-filter: blur(10px);
                                  }

                                  .btn-secondary:hover {
                                      background: rgba(255, 255, 255, 0.2);
                                      color: var(--white);
                                      transform: translateY(-2px);
                                  }

                                  .btn-lg {
                                      padding: var(--spacing-md) var(--spacing-xl);
                                      font-size: var(--font-size-lg);
                                  }

                                  .btn-block {
                                      display: block;
                                      width: 100%;
                                      justify-content: center;
                                  }

                                  /* ========================================
                                     Cards & Panels
                                     ======================================== */

                                  .card {
                                      background: var(--white);
                                      border-radius: var(--border-radius-lg);
                                      padding: var(--spacing-xl);
                                      box-shadow: var(--shadow-lg);
                                      border: 1px solid #e5e7eb;
                                  }

                                  .feature-card {
                                      background: var(--white);
                                      padding: 40px 32px;
                                      border-radius: 16px;
                                      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
                                      border: 1px solid #e5e7eb;
                                      transition: all 0.3s ease;
                                      text-align: center;
                                  }

                                  .feature-card:hover {
                                      transform: translateY(-4px);
                                      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
                                      border-color: var(--primary);
                                  }

                                  .feature-icon {
                                      width: 64px;
                                      height: 64px;
                                      background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
                                      border-radius: 12px;
                                      display: flex;
                                      align-items: center;
                                      justify-content: center;
                                      font-size: 24px;
                                      margin: 0 auto 24px;
                                      color: #0f172a;
                                  }

                                  .feature-card h3 {
                                      font-size: 20px;
                                      font-weight: 600;
                                      margin-bottom: 12px;
                                      color: var(--dark);
                                  }

                                  .feature-card p {
                                      color: var(--gray);
                                      line-height: 1.6;
                                  }

                                  /* ========================================
                                     Grid Systems
                                     ======================================== */

                                  .features-grid {
                                      display: grid;
                                      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
                                      gap: 40px;
                                  }

                                  .calculator-grid {
                                      display: grid;
                                      grid-template-columns: 1fr 1fr;
                                      gap: 40px;
                                      align-items: start;
                                  }

                                  /* ========================================
                                     Section Headers
                                     ======================================== */

                                  .section-header {
                                      text-align: center;
                                      max-width: 600px;
                                      margin: 0 auto 80px;
                                  }

                                  .section-header h2 {
                                      font-size: 2.5rem;
                                      font-weight: 700;
                                      margin-bottom: 16px;
                                      color: var(--dark);
                                  }

                                  .section-header p {
                                      font-size: 18px;
                                      color: var(--gray);
                                      line-height: 1.6;
                                  }

                                  /* ========================================
                                     Problem/Solution Split
                                     ======================================== */

                                  .problem-solution {
                                      padding: 100px 0;
                                      background: var(--white);
                                  }

                                  .split-content {
                                      display: grid;
                                      grid-template-columns: 1fr 1fr;
                                      gap: 80px;
                                      align-items: center;
                                  }

                                  .problem-side h2 {
                                      color: var(--danger);
                                      font-size: 2rem;
                                      margin-bottom: 24px;
                                      font-weight: 700;
                                  }

                                  .solution-side h2 {
                                      color: var(--success);
                                      font-size: 2rem;
                                      margin-bottom: 24px;
                                      font-weight: 700;
                                  }

                                  .pain-point, .benefit {
                                      display: flex;
                                      align-items: flex-start;
                                      gap: 16px;
                                      margin-bottom: 24px;
                                      padding: 20px;
                                      border-radius: 12px;
                                  }

                                  .pain-point {
                                      background: #fef2f2;
                                      border-left: 4px solid var(--danger);
                                  }

                                  .benefit {
                                      background: #f0fdf4;
                                      border-left: 4px solid var(--success);
                                  }

                                  .pain-point .icon {
                                      color: var(--danger);
                                      font-size: 20px;
                                      margin-top: 4px;
                                  }

                                  .benefit .icon {
                                      color: var(--success);
                                      font-size: 20px;
                                      margin-top: 4px;
                                  }

                                  /* ========================================
                                     Forms
                                     ======================================== */

                                  .form-group {
                                      margin-bottom: var(--spacing-lg);
                                  }

                                  label {
                                      display: block;
                                      margin-bottom: var(--spacing-sm);
                                      font-weight: 600;
                                      color: var(--dark);
                                  }

                                  .form-control {
                                      width: 100%;
                                      padding: 12px 16px;
                                      border: 2px solid #e5e7eb;
                                      border-radius: var(--border-radius);
                                      font-size: var(--font-size-base);
                                      transition: border-color var(--transition-base);
                                      font-family: inherit;
                                  }

                                  .form-control:focus {
                                      outline: none;
                                      border-color: var(--primary);
                                  }

                                  /* ========================================
                                     Calculator Specific
                                     ======================================== */

                                  .calculator-section {
                                      background: var(--light);
                                      padding: var(--spacing-3xl) 0;
                                  }

                                  .calculator-input h2,
                                  .calculator-results h2 {
                                      margin-bottom: var(--spacing-xl);
                                      color: var(--dark);
                                      font-size: var(--font-size-2xl);
                                  }

                                  .result-item {
                                      display: flex;
                                      justify-content: space-between;
                                      align-items: center;
                                      padding: 16px 0;
                                      border-bottom: 1px solid #e5e7eb;
                                  }

                                  .result-item:last-child {
                                      border-bottom: none;
                                  }

                                  .result-label {
                                      color: var(--gray-dark);
                                      font-weight: 500;
                                  }

                                  .result-value {
                                      font-weight: 600;
                                      color: var(--dark);
                                  }

                                  .savings-highlight {
                                      background: linear-gradient(135deg, var(--success) 0%, #059669 100%);
                                      color: var(--white);
                                      padding: var(--spacing-xl);
                                      border-radius: var(--border-radius-lg);
                                      text-align: center;
                                      margin: var(--spacing-xl) 0;
                                  }

                                  .savings-amount {
                                      font-size: var(--font-size-4xl);
                                      font-weight: 700;
                                      margin-bottom: 8px;
                                  }

                                  .savings-label {
                                      font-size: var(--font-size-lg);
                                      opacity: 0.9;
                                  }

                                  /* ========================================
                                     Alerts & Notifications
                                     ======================================== */

                                  .alert {
                                      padding: var(--spacing-md);
                                      border-radius: var(--border-radius);
                                      margin: var(--spacing-lg) 0;
                                  }

                                  .alert h3 {
                                      font-size: var(--font-size-base);
                                      margin-bottom: var(--spacing-sm);
                                  }

                                  .alert p {
                                      margin-bottom: 0;
                                      font-size: var(--font-size-sm);
                                  }

                                  .alert-info {
                                      background: #eff6ff;
                                      border: 2px solid var(--info);
                                      color: #1e3a8a;
                                  }

                                  .alert-success {
                                      background: #dcfce7;
                                      border: 2px solid var(--success);
                                      color: #166534;
                                  }

                                  .alert-warning {
                                      background: #fef3c7;
                                      border: 2px solid var(--warning);
                                      color: #78350f;
                                  }

                                  /* ========================================
                                     Pricing
                                     ======================================== */

                                  .pricing-cards {
                                      display: grid;
                                      grid-template-columns: repeat(2, 1fr);
                                      gap: 32px;
                                      max-width: 800px;
                                      margin: 0 auto;
                                  }

                                  @media (max-width: 768px) {
                                      .pricing-cards {
                                          grid-template-columns: 1fr;
                                          max-width: 400px;
                                      }
                                  }

                                  .pricing-card {
                                      background: var(--white);
                                      border: 2px solid #e5e7eb;
                                      border-radius: 16px;
                                      padding: 40px 32px;
                                      text-align: center;
                                      position: relative;
                                      transition: all 0.3s ease;
                                  }

                                  .pricing-card:hover {
                                      border-color: var(--primary);
                                      transform: translateY(-4px);
                                      box-shadow: 0 20px 40px rgba(99, 102, 241, 0.1);
                                  }

                                  .pricing-card.popular {
                                      border-color: var(--primary);
                                      background: linear-gradient(135deg, #f8faff 0%, #f1f5f9 100%);
                                      transform: scale(1.05);
                                  }

                                  .popular-badge {
                                      position: absolute;
                                      top: -12px;
                                      left: 50%;
                                      transform: translateX(-50%);
                                      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
                                      color: var(--white);
                                      padding: 8px 24px;
                                      border-radius: 20px;
                                      font-size: 14px;
                                      font-weight: 600;
                                  }

                                  .pricing-card h3 {
                                      font-size: 24px;
                                      font-weight: 600;
                                      margin-bottom: 8px;
                                      color: var(--dark);
                                  }

                                  .pricing-card .description {
                                      color: var(--gray);
                                      margin-bottom: 32px;
                                      font-size: 14px;
                                  }

                                  .price {
                                      font-size: 48px;
                                      font-weight: 700;
                                      color: var(--dark);
                                      margin-bottom: 8px;
                                  }

                                  .price-period {
                                      color: var(--gray);
                                      margin-bottom: 32px;
                                  }

                                  .features-list {
                                      list-style: none;
                                      margin-bottom: 32px;
                                      text-align: left;
                                  }

                                  .features-list li {
                                      display: flex;
                                      align-items: center;
                                      gap: 12px;
                                      margin-bottom: 12px;
                                      color: var(--dark);
                                  }

                                  .features-list .check {
                                      color: var(--success);
                                      font-weight: 600;
                                  }

                                  /* Pricing specific styles */
                                  .pricing-hero {
                                      background: var(--gradient-1);
                                      padding: 5rem 0;
                                      text-align: center;
                                  }

                                  .pricing-hero h1 {
                                      color: var(--white);
                                      margin-bottom: 1rem;
                                  }

                                  .pricing-hero p {
                                      color: rgba(255, 255, 255, 0.9);
                                      font-size: 1.25rem;
                                  }

                                  /* Trial plan specific styling */
                                  .pricing-card.trial-plan {
                                      position: relative;
                                      border: 2px solid var(--warning);
                                  }

                                  .pricing-card.trial-plan::before {
                                      content: "FREE TRIAL";
                                      position: absolute;
                                      top: -10px;
                                      left: 50%;
                                      transform: translateX(-50%);
                                      background: var(--warning);
                                      color: var(--white);
                                      padding: 0.25rem 0.75rem;
                                      border-radius: var(--border-radius);
                                      font-size: 0.75rem;
                                      font-weight: 600;
                                  }

                                  .trial-plan .plan-price .amount {
                                      color: var(--warning);
                                  }

                                  .notification.warning {
                                      background-color: var(--warning);
                                      color: var(--white);
                                  }

                                  /* ========================================
                                     CTA Section
                                     ======================================== */

                                  .cta-section {
                                      padding: 100px 0;
                                      background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
                                      color: var(--white);
                                      text-align: center;
                                  }

                                  .cta-section h2 {
                                      font-size: 3rem;
                                      font-weight: 700;
                                      margin-bottom: 16px;
                                  }

                                  .cta-section p {
                                      font-size: 20px;
                                      margin-bottom: 40px;
                                      opacity: 0.9;
                                  }

                                  .cta-buttons {
                                      display: flex;
                                      gap: 16px;
                                      justify-content: center;
                                      flex-wrap: wrap;
                                  }

                                  .email-signup {
                                      max-width: 500px;
                                      margin: 0 auto 40px;
                                      display: flex;
                                      gap: 16px;
                                  }

                                  .email-signup input {
                                      flex: 1;
                                      padding: 16px 20px;
                                      border: none;
                                      border-radius: var(--border-radius);
                                      font-size: 16px;
                                      background: rgba(255, 255, 255, 0.95);
                                  }

                                  /* ========================================
                                     Footer
                                     ======================================== */

                                  .footer {
                                      background: #0f172a;
                                      color: #94a3b8;
                                      padding: 60px 0 30px;
                                  }

                                  .footer-content {
                                      display: grid;
                                      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                                      gap: 40px;
                                      margin-bottom: 40px;
                                  }

                                  .footer-section h4 {
                                      color: var(--white);
                                      font-weight: 600;
                                      margin-bottom: 16px;
                                  }

                                  .footer-section ul {
                                      list-style: none;
                                  }

                                  .footer-section li {
                                      margin-bottom: 8px;
                                  }

                                  .footer-section a {
                                      color: #94a3b8;
                                      text-decoration: none;
                                      transition: color var(--transition-base);
                                  }

                                  .footer-section a:hover {
                                      color: var(--primary);
                                  }

                                  .footer-bottom {
                                      border-top: 1px solid #1e293b;
                                      padding-top: 30px;
                                      display: flex;
                                      justify-content: space-between;
                                      align-items: center;
                                      flex-wrap: wrap;
                                      gap: 20px;
                                  }

                                  .social-links {
                                      display: flex;
                                      gap: 16px;
                                  }

                                  .social-links a {
                                      width: 40px;
                                      height: 40px;
                                      background: #1e293b;
                                      border-radius: var(--border-radius);
                                      display: flex;
                                      align-items: center;
                                      justify-content: center;
                                      color: #94a3b8;
                                      transition: all var(--transition-base);
                                  }

                                  .social-links a:hover {
                                      background: var(--primary);
                                      color: var(--white);
                                  }

                                  /* ========================================
                                     Utility Classes
                                     ======================================== */

                                  .text-center { text-align: center; }
                                  .text-left { text-align: left; }
                                  .text-right { text-align: right; }

                                  .mt-1 { margin-top: var(--spacing-sm); }
                                  .mt-2 { margin-top: var(--spacing-md); }
                                  .mt-3 { margin-top: var(--spacing-lg); }
                                  .mt-4 { margin-top: var(--spacing-xl); }

                                  .mb-1 { margin-bottom: var(--spacing-sm); }
                                  .mb-2 { margin-bottom: var(--spacing-md); }
                                  .mb-3 { margin-bottom: var(--spacing-lg); }
                                  .mb-4 { margin-bottom: var(--spacing-xl); }

                                  .lead {
                                      font-size: var(--font-size-lg);
                                      font-weight: 400;
                                  }

                                  /* ========================================
                                     Responsive Design
                                     ======================================== */

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

                                      .nav-links {
                                          display: none;
                                      }

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

                                      .hero {
                                          padding: 100px 0 60px;
                                      }

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

                                      .hero-cta {
                                          flex-direction: column;
                                          align-items: center;
                                      }

                                      .split-content {
                                          grid-template-columns: 1fr;
                                          gap: 60px;
                                      }

                                      .calculator-grid {
                                          grid-template-columns: 1fr;
                                          gap: 30px;
                                      }

                                      .pricing-card.popular {
                                          transform: none;
                                      }

                                      .email-signup {
                                          flex-direction: column;
                                      }

                                      .cta-buttons {
                                          flex-direction: column;
                                          align-items: center;
                                      }

                                      .footer-bottom {
                                          flex-direction: column;
                                          text-align: center;
                                      }

                                      .features-grid {
                                          grid-template-columns: 1fr;
                                      }

                                      h1 { font-size: var(--font-size-3xl); }
                                      h2 { font-size: var(--font-size-2xl); }
                                      h3 { font-size: var(--font-size-xl); }
                                  }

                                  /* ========================================
                                     Animations
                                     ======================================== */

                                  @keyframes fadeInUp {
                                      from {
                                          opacity: 0;
                                          transform: translateY(30px);
                                      }
                                      to {
                                          opacity: 1;
                                          transform: translateY(0);
                                      }
                                  }

                                  .fade-in-up {
                                      animation: fadeInUp 0.8s ease-out;
                                  }