/* block 1 */
.fh {
          position: fixed;
          top: 1.5rem;
          left: 1rem;
          right: 1rem;
          max-width: 1280px;
          margin-left: auto;
          margin-right: auto;
          border-radius: 0.75rem;
          z-index: 10000;
          overflow: visible;
          transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
        }
        @media (min-width: 640px)  { .fh { left: 1.5rem; right: 1.5rem; } }
        @media (min-width: 1024px) { .fh { left: 2rem;   right: 2rem;   } }
        .fh.hero {
          background: rgba(15,23,42,0.82);
          backdrop-filter: blur(22px) saturate(1.15);
          -webkit-backdrop-filter: blur(22px) saturate(1.15);
          border: 1px solid rgba(255,255,255,0.14);
          box-shadow:
            0 0 0 1px rgba(15,23,42,0.6),
            0 16px 40px -18px rgba(0,0,0,0.9);
        }
        .fh.content {
          background: rgba(255,255,255,0.95);
          backdrop-filter: blur(24px);
          border: 1px solid rgba(229,231,235,0.3);
          box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
        }
        .nav-underline::after {
          content: '';
          position: absolute;
          bottom: -4px;
          left: 0; right: 0;
          height: 2px;
          border-radius: 1px;
        }
        .nav-underline.hero-active::after  { background: white; }
        .nav-underline.light-active::after { background: #2563eb; }

/* block 2 */
:root {
            --bg-main: #FFFFFF;
            --card-bg: #FFFFFF;
            --card-border: #E3E8EF;
            --card-border-hover: #1CA7FF;
            --text-primary: #1A202C;
            --text-secondary: #4A5568;
            --accent-primary: #1CA7FF;
            --accent-glow: rgba(28, 167, 255, 0.3);
            --card-gradient-blue-start: rgb(247, 252, 255);
            --card-gradient-end: var(--card-bg);
        }
        
        .custom-card {
            border: 1px solid var(--card-border);
            border-radius: 12px;
            box-shadow: 0 8px 16px rgba(26, 32, 44, 0.06);
            padding: 2.5rem;
            display: flex;
            flex-direction: column;
            color: var(--text-secondary);
            transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg, var(--card-gradient-blue-start) 0%, var(--card-gradient-end) 70%);
        }

        .custom-card:hover {
            transform: translateY(-10px);
            border-color: var(--card-border-hover);
            box-shadow: 0 12px 24px rgba(26, 32, 44, 0.1), 0 0 20px 0px var(--accent-glow);
        }

/* block 3 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

    /* Define CSS variables for easy theme management */
    :root {
      --footer-bg-main: #FFFFFF;
      --footer-text-primary: #1A202C;
      --footer-text-light: #F7FAFC;
      --footer-node-color1: #1CA7FF;
      --footer-node-color2: #FFDE52;
      --footer-node-color3: #E70A9F;
      --footer-line-color: #E0E0E0;
      --footer-button-cta-bg: var(--footer-node-color1);
      --footer-button-cta-text: #FFFFFF;
      --footer-button-secondary-bg: var(--footer-node-color2);
      --footer-button-secondary-text: #1A202C;
    }

    #ai-footer-section {
      width: 100%;
      text-align: center;
      font-family: 'Inter', sans-serif;
      background-color: #020617;
      padding: 60px 20px;
      border-top: 1px solid #1e293b;
      position: relative;
      overflow: hidden;
    }

    .ai-footer-background-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0; /* Places the background behind the content */
    }

    .ai-footer-content-box {
      background-color: var(--footer-text-primary);
      color: var(--footer-text-light);
      padding: 40px;
      border-radius: 12px;
      max-width: 900px;
      margin: 0 auto;
      position: relative; /* Keeps content in the normal flow but allows z-index */
      z-index: 1; /* Ensures content is on top of the background */
      box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    }

    .ai-footer-headline {
      font-size: 32px;
      font-weight: 700;
      margin-bottom: 20px;
      line-height: 1.3;
      color: #fff;
    }

    .ai-footer-text {
      font-size: 17px;
      line-height: 1.7;
      margin-bottom: 30px;
      max-width: 650px;
      margin-left: auto;
      margin-right: auto;
    }
    
    .ai-footer-cta-buttons-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
      margin-top: 20px;
    }

    .ai-footer-backed-by {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      margin-top: 40px;
      padding-top: 30px;
      border-top: 1px solid rgba(255, 255, 255, 0.2);
      flex-wrap: wrap;
    }

    .ai-footer-backed-by-text {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.8);
      font-weight: 500;
    }

    .ai-footer-logo {
      height: 24px;
      width: auto;
      opacity: 0.9;
    }

    .ai-footer-divider {
      width: 1px;
      height: 20px;
      background-color: rgba(255, 255, 255, 0.3);
    }

    .ai-footer-accelerated-by {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.8);
      font-weight: 500;
    }

    .ai-footer-diu-text {
      font-size: 16px;
      font-weight: 700;
      color: #1CA7FF;
      background: rgba(28, 167, 255, 0.1);
      padding: 4px 8px;
      border-radius: 4px;
      border: 1px solid rgba(28, 167, 255, 0.3);
    }

    .ai-footer-book-demo-button, .ai-footer-careers-button {
      padding: 12px 28px;
      border: none;
      border-radius: 6px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    }

    .ai-footer-book-demo-button {
      background-color: var(--footer-button-cta-bg);
      color: var(--footer-button-cta-text);
    }
    .ai-footer-book-demo-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(28, 167, 255, 0.35);
    }

    .ai-footer-careers-button {
      background-color: var(--footer-button-secondary-bg);
      color: var(--footer-button-secondary-text);
    }
    .ai-footer-careers-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(255, 222, 82, 0.45);
    }

    .ai-footer-book-demo-button .button-icon-svg,
    .ai-footer-careers-button .button-icon-svg {
      width: 1.1em;
      height: 1.1em;
      margin-right: 0.6em;
      fill: currentColor;
    }
    .ai-footer-careers-button .button-icon-svg path {
      stroke: var(--footer-button-secondary-text);
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
      #ai-footer-section {
        padding: 40px 15px;
      }
      .ai-footer-content-box {
        padding: 30px;
      }
      .ai-footer-headline {
        font-size: 26px;
      }
      .ai-footer-text {
        font-size: 16px;
      }
      .ai-footer-book-demo-button, .ai-footer-careers-button {
        font-size: 15px;
        padding: 10px 24px;
      }
    }

    @media (max-width: 480px) {
      #ai-footer-section {
        padding: 30px 10px;
      }
       .ai-footer-headline {
        font-size: 22px;
      }
      .ai-footer-text {
        font-size: 15px;
      }
      .ai-footer-content-box {
        padding: 25px 20px;
      }
      .ai-footer-book-demo-button, .ai-footer-careers-button {
        font-size: 14px;
        padding: 10px 20px;
        width: 100%;
        justify-content: center;
      }
      .ai-footer-cta-buttons-container {
        flex-direction: column;
        gap: 15px;
      }
      .ai-footer-backed-by {
        flex-direction: column;
        gap: 15px;
        text-align: center;
      }
      .ai-footer-accelerated-by {
        flex-direction: column;
        gap: 8px;
        text-align: center;
      }
    }

/* block 4 */
.font-merriweather {
          font-family: 'Merriweather', serif;
        }