/* Base Styles */
    :root {
      --glass: rgba(255, 255, 255, 0.08);
      --primary: #071219;
      --secondary: #0e2331;
      --accent: #38a3a5;
      --text-primary: #dbeafe;
      --text-secondary: #94a3b8;
    }
    
    html, body {
      font-family: 'Jura', 'Quicksand', 'Arial', 'Helvetica', 'sans-serif';
    }
    
    body {
      color: var(--text-primary);
      background: var(--primary);
      line-height: 1.6;
      overflow-x: hidden;
    }
    
    h1, h2, h3, h4 {
      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: linear-gradient(90deg, #38a3a5, #57cc99);
      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: linear-gradient(135deg, #38a3a5, #57cc99);
      background-size: 200% 200%;
      box-shadow: 0 4px 15px rgba(56, 163, 165, 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(56, 163, 165, 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);
    }

    /* Explicit touch target utility (use selectively, not globally) */
    /* Only apply on touch devices to avoid overriding md:hidden on desktop */
    @media (pointer: coarse) {
      .touch-target {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
    }
    
    @media (pointer: coarse) {
      header a, header button,
      nav a, nav button {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center; /* vertically centers content */
      }

      /* For icon-only buttons (hamburger), center horizontally too */
      header button, nav button {
        justify-content: center;
      }
    }

    /* Safety override: hamburger must never show on desktop */
    @media (min-width: 768px) {
      #navHamburger {
        display: none !important;
      }
    }
    
    /* Hero section fade */
    .hero::after {
      content: "";
      position: absolute;
      left: 0; right: 0; bottom: 0;
      height: 150px;
      pointer-events: none;
      background: linear-gradient(
        to bottom,
        rgba(0,0,0,0),
        rgba(7,18,25,0.9)
      );
    }
    
    /* 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 - moved to inline CSS with hover-only media query */
    
    /* 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: 2px solid rgba(56, 163, 165, 0.5);
      outline-offset: 2px;
    }
    
    /* 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: #57cc99;
      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(56, 163, 165, 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 #57cc99;
      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: #57cc99;
    }
    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: linear-gradient(90deg, #38a3a5, #57cc99);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.4s ease;
    }
    .gradient-underline:hover::after {
      transform: scaleX(1);
    }
    
    /* Floating action button */
    .fab {
      position: fixed;
      right: 2rem;
      bottom: 2rem;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: linear-gradient(135deg, #38a3a5, #57cc99);
      box-shadow: 0 4px 20px rgba(56, 163, 165, 0.4);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 1.5rem;
      z-index: 50;
      transition: all 0.3s ease;
      animation: subtle-pulse 3s ease infinite;
    }
    .fab:hover {
      transform: scale(1.1) translateY(-3px);
      box-shadow: 0 8px 25px rgba(56, 163, 165, 0.5);
    }
    
    /* 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 button-glow {
      0% { box-shadow: 0 0 5px rgba(87, 204, 153, 0.3); }
      100% { box-shadow: 0 0 20px rgba(87, 204, 153, 0.6); }
    }
    @keyframes staggerFadeUp {
      from { opacity: 0; transform: translateY(40px); }
      to { opacity: 1; transform: translateY(0); }
    }