/* Base Styles */
    :root {
      --glass: rgba(255, 255, 255, 0.08);
      --primary: #071219;
      --secondary: #0e2331;
      --accent: #FFF7B1;
      --text-primary: #dbeafe;
      --text-secondary: #94a3b8;
      --font-primary: 'Gill Sans', 'Jura', 'Quicksand', Arial, Helvetica, sans-serif;
    }
    
    body {
      font-family: var(--font-primary);
      color: var(--text-primary);
      background: var(--primary);
      line-height: 1.6;
      overflow-x: hidden;
    }
    
    h1, h2, h3, h4 {
      font-family: var(--font-primary);
      font-weight: 400;
      letter-spacing: 0.025em;
    }
    
    /* Glass Effect */
    .glass {
      background: var(--glass);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
    }
    
    /* Custom Elements */
    .pillar-highlight {
      position: relative;
    }
    .pillar-highlight::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 100%;
      height: 2px;
      background: #FFF7B1;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.4s ease;
    }
    .pillar-highlight:hover::after {
      transform: scaleX(1);
    }
    
    /* Buttons */
    .btn-primary {
      position: relative;
      overflow: hidden;
      background: #FFF7B1;
      background-size: 200% 200%;
      box-shadow: 0 4px 15px rgba(255, 247, 177, 0.3);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      animation: gradient-shift 6s ease infinite;
    }
    .btn-primary:hover {
      transform: translateY(-2px) scale(1.02);
      box-shadow: 0 8px 25px rgba(255, 247, 177, 0.35);
    }
    .btn-primary::after {
      content: '';
      position: absolute;
      top: -50%;
      left: -60%;
      width: 200%;
      height: 200%;
      background: linear-gradient(
        to right,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.1) 50%,
        rgba(255,255,255,0) 100%
      );
      transform: rotate(30deg);
      transition: all 0.3s;
    }
    .btn-primary:hover::after {
      left: 100%;
    }
    
    .btn-secondary {
      background: rgba(255, 255, 255, 0.9);
      color: #22577a;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .btn-secondary:hover {
      background: white;
      transform: translateY(-2px) scale(1.02);
      box-shadow: 0 6px 20px rgba(87, 204, 153, 0.25);
    }
    
    /* Hero section fade */
    
    /* Navigation */
    .nav-link {
      position: relative;
      color: #dbeafe;
      font-weight: 500;
      transition: color .2s;
    }
    .nav-link::after {
      content: '';
      position: absolute;
      bottom: -2px; left: 0;
      width: 100%; height: 2px;
      background: linear-gradient(90deg, #7c3aed, #3b82f6);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .3s;
    }
    .nav-link:hover,
    .nav-link.active {
      color: #bfdbfe;
    }
    .nav-link:hover::after,
    .nav-link.active::after {
      transform: scaleX(1);
    }
    
    /* Nav menu animation */
    .menu-icon div {
      transition: all 0.3s ease;
    }
    .menu-open .line1 {
      transform: rotate(45deg) translate(5px, 5px);
    }
    .menu-open .line2 {
      opacity: 0;
    }
    .menu-open .line3 {
      transform: rotate(-45deg) translate(5px, -5px);
    }
    
    /* Pillar card hover effect */
    .pillar-card {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .pillar-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }
    
    /* Step card hover effect */
    .step-card {
      transition: transform 0.3s ease;
    }
    .step-card:hover {
      transform: translateY(-5px);
    }
    
    /* Enhanced glass card effect */
    .glass-card {
      background: rgba(255, 255, 255, 0.03);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.08);
      transition: all 0.3s ease;
    }
    
    /* Improved focus states */
    *:focus {
      outline: none !important;
    }
    
    /* Remove focus outline for all interactive elements */
    button:focus,
    a:focus,
    input:focus,
    textarea:focus,
    select:focus {
      outline: none !important;
    }
    
    /* Better form input styling */
    input, textarea {
      transition: all 0.2s ease;
    }
    
    /* Improved footer link transitions */
    .footer-link {
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .footer-link:hover {
      color: #FFF7B1;
      transform: translateX(3px);
    }
    
    /* Better section spacing */
    section {
      scroll-margin-top: 100px;
    }
    
    /* Text gradient animation */
    .text-gradient {
      background-size: 200% auto;
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      animation: text-gradient 6s ease infinite;
    }
    
    /* Responsive adjustments */
    @media (max-width: 768px) {
      .hero {
        background-position: 65% center;
      }
      h1 {
        font-size: 2.5rem;
      }
      h2 {
        font-size: 2rem;
      }
    }
    
    /* Typography hierarchy */
    h1 {
      font-size: 3.5rem;
      line-height: 1.1;
      text-shadow: 0 2px 10px rgba(0,0,0,0.2);
    }
    h2 {
      font-size: 2.5rem;
      line-height: 1.2;
      margin-bottom: 1.5rem;
    }
    p {
      font-size: 1.125rem;
      line-height: 1.7;
      max-width: 65ch;
    }
    
    /* Custom scrollbar */
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    ::-webkit-scrollbar-track {
      background: rgba(7, 18, 25, 0.5);
    }
    ::-webkit-scrollbar-thumb {
      background: rgba(56, 163, 165, 0.5);
      border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: rgba(87, 204, 153, 0.7);
    }
    
    /* Floating particles */
    .particle {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      z-index: -1;
    }
    
    /* Logo pulse animation */
    @keyframes logo-pulse {
      0%   { transform: scale(0.8); opacity: 0; }
      70%  { transform: scale(1.05); opacity: 1; }
      100% { transform: scale(1); }
    }
    .hover-pulse {
      animation: logo-pulse 0.8s ease-out forwards;
    }
    
    /* Section divider */
    .section-divider {
      position: relative;
      height: 150px;
      overflow: hidden;
    }
    .section-divider::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 100%;
      background: linear-gradient(
        to bottom right,
        transparent 49%,
        rgba(255, 247, 177, 0.15) 50%,
        transparent 51%
      );
      background-size: 20px 20px;
    }
    
    /* Custom checkbox */
    .custom-checkbox {
      position: relative;
      width: 18px;
      height: 18px;
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 3px;
      transition: all 0.2s;
    }
    .custom-checkbox::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 6px;
      height: 10px;
      border: solid #FFF7B1;
      border-width: 0 2px 2px 0;
      transform: translate(-50%, -60%) rotate(45deg) scale(0);
      opacity: 0;
      transition: all 0.2s;
    }
    input:checked + .custom-checkbox {
      border-color: #FFF7B1;
    }
    input:checked + .custom-checkbox::after {
      transform: translate(-50%, -60%) rotate(45deg) scale(1);
      opacity: 1;
    }
    
    /* Gradient underline */
    .gradient-underline {
      position: relative;
    }
    .gradient-underline::after {
      content: "";
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 100%;
      height: 2px;
      background: #FFF7B1;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.4s ease;
    }
    .gradient-underline:hover::after {
      transform: scaleX(1);
    }
    
    /* FAQ hover/active color */
    .faq-question:hover, .faq-question:focus {
      color: #FFF7B1 !important;
    }
    
    #chatbot-fab {
      box-shadow: none !important;
    }
    
    @media (min-width: 1024px) {
      .text-76px {
        font-size: 76px !important;
        line-height: 1.05;
      }
    } 
    
    /* Tailwind animation keyframes */
    @keyframes float {
      0%, 100% { transform: translate(0, 0); }
      50% { transform: translate(20px, 20px); }
    }
    @keyframes float-delay {
      0%, 100% { transform: translate(0, 0); }
      50% { transform: translate(-20px, -20px); }
    }
    @keyframes subtle-pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.03); }
    }
    @keyframes gradient-shift {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    @keyframes text-gradient {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(32px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes ping-slow {
      75%, 100% { transform: scale(1.5); opacity: 0; }
    }
    @keyframes glow {
      0% { box-shadow: 0 0 20px rgba(16, 185, 129, 0.3); }
      100% { box-shadow: 0 0 30px rgba(16, 185, 129, 0.6); }
    }
    @keyframes slideUp {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes bounceGentle {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-5px); }
    }