<!DOCTYPE html>
<html lang="en"> 
<head>
  <meta charset="UTF-8" />
  <title>Shift</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta
    name="description"
    content="SHIFT works anywhere on your laptop, instantly editing text or code on the spot. Just highlight what you need, double-tap Shift, and let AI handle the rest. Powered by six advanced models, including GPT, Claude, and Gemini—all for just $5 a month."
  >
  <meta
    name="keywords"
    content="Shift AI, AI solutions, artificial intelligence, AI tools, AI app, Shift"
  >
  <meta name="author" content="Shift AI">
  <link rel="icon" type="image/png" href="shift.png">
  <link rel="shortcut icon" type="image/png" href="shift.png">

  <style>
    /* --------------------------------------
       RESET & BASE
    -------------------------------------- */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      scroll-behavior: smooth;
    }
    body {
      margin: 0;
      padding: 0;
      background-color: black;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      overflow-x: hidden;
      font-family: 'Arial', sans-serif;
    }

    /* --------------------------------------
       LOGO & ANIMATION
    -------------------------------------- */
    .logo-container {
      width: min(200px, 40vw);
      height: min(200px, 40vw);
      margin: 4rem auto 2rem;
      opacity: 0;
      animation: fadeIn 0.5s ease-out forwards;
      will-change: opacity;
      transform: translateZ(0);
    }
    .logo {
      width: 100%;
      height: 100%;
      transform: translateZ(0);
      backface-visibility: hidden;
    }
    .logo path {
      stroke: white;
      stroke-width: 0.5;
      fill: transparent;
      will-change: stroke-dashoffset, fill;
      transform: translateZ(0);
    }
    .draw-path {
      animation:
        drawPath 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards,
        fillIn 0.5s ease-out forwards 1.2s;
    }
    @keyframes drawPath {
      to { stroke-dashoffset: 0; }
    }
    @keyframes fillIn {
      from { fill: transparent; }
      to { fill: white; }
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }

    /* --------------------------------------
       NAV
    -------------------------------------- */
    .nav {
      position: fixed;
      top: 0;
      width: 100%;
      background-color: rgba(0, 0, 0, 0.9);
      padding: 0.8rem 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(5px);
      z-index: 1000;
      opacity: 0;
      animation: fadeIn 1s ease-out forwards 1s;
    }
    .nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: clamp(1rem, 2vw, 2rem);
      flex-wrap: wrap;
      position: relative;
    }
    .nav a {
      color: white;
      text-decoration: none;
      font-size: clamp(12px, 1.5vw, 14px);
      text-transform: uppercase;
      letter-spacing: 2px;
      padding: 0.5rem 0.8rem;
      transition: all 0.3s ease;
      position: relative;
      white-space: nowrap;
    }
    .nav a:not(.nav-download-btn)::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 1px;
      background-color: white;
      transition: width 0.3s ease;
    }
    .nav a:not(.nav-download-btn):hover::after {
      width: 100%;
    }
    .nav-download-btn {
      background: linear-gradient(135deg, #6e8efb, #4a6cf7);
      border: none;
      border-radius: 20px;
      color: white;
      padding: 0.5rem 1.2rem;
      font-size: clamp(12px, 1.5vw, 14px);
      text-transform: uppercase;
      letter-spacing: 2px;
      cursor: pointer;
      transition: all 0.3s ease;
      text-decoration: none;
      display: inline-block;
      box-shadow: 0 2px 10px rgba(74, 108, 247, 0.2);
    }
    .nav-download-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(74, 108, 247, 0.4);
    }

    /* --------------------------------------
       MAIN CONTENT
    -------------------------------------- */
    .main-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: max(2rem, 4vh) 1rem;
      position: relative;
      min-height: 100vh;
    }
    .text-section {
      text-align: center;
      color: white;
      max-width: min(800px, 90vw);
      margin: 0 auto;
      padding: 0 clamp(1rem, 3vw, 2rem);
      opacity: 0;
      animation: fadeInUp 1s ease-out forwards 1.2s;
      transform: translateZ(0);
    }
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    .headline {
      font-size: clamp(1.5rem, 4vw, 2rem);
      margin-bottom: clamp(0.8rem, 2vw, 1.2rem);
      line-height: 1.2;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 2px;
    }
    .description {
      font-size: clamp(0.9rem, 2vw, 1rem);
      line-height: 1.6;
      margin-bottom: 0.75rem;
    }
    .cta-buttons {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
    }
    .download-btn {
      padding: clamp(0.8rem, 2vw, 1rem) clamp(1.5rem, 4vw, 2rem);
      background: linear-gradient(135deg, #6e8efb, #4a6cf7);
      border: none;
      border-radius: 30px;
      color: white;
      font-size: clamp(0.9rem, 2vw, 1.1rem);
      cursor: pointer;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      text-decoration: none;
    }
    .download-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(74, 108, 247, 0.4);
    }
    .platform-note {
      margin-top: 0.5rem;
      font-size: clamp(0.75rem, 1.5vw, 0.85rem);
      color: rgba(255, 255, 255, 0.7);
    }

    /* --------------------------------------
       VIDEOS
    -------------------------------------- */
    .videos-section {
      display: flex;
      justify-content: center;
      gap: clamp(1rem, 3vw, 2rem);
      width: 100%;
      max-width: min(2400px, 95vw);
      padding: clamp(0.5rem, 2vw, 1rem);
      margin-top: 0.5rem;
      opacity: 0;
      animation: fadeInUp 1s ease-out forwards 1.5s;
      flex-wrap: wrap;
    }
    .video-container {
      flex: 1 1 450px;
      max-width: 1000px;
      min-width: min(450px, 90vw);
      border-radius: 15px;
      overflow: hidden;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
      aspect-ratio: 16 / 9;
      height: 500px;
    }
    .video-container video {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    /* RESPONSIVE */
    @media (max-width: 768px) {
      .logo-container {
        margin-top: 5rem;
        padding-top: 1rem;
      }
      .main-content {
        padding-top: max(4rem, 8vh);
      }
      .videos-section {
        flex-direction: column;
        align-items: center;
      }
      .video-container {
        width: 100%;
      }
    }
    @media (max-width: 480px) {
      .logo-container {
        margin-top: 6rem;
      }
      .nav {
        padding: 0.5rem 0;
      }
      .nav ul {
        gap: 0.5rem;
      }
    }
    @media (max-height: 700px) {
      .main-content {
        padding-top: 1rem;
      }
    }

    /* --------------------------------------
       AI MODELS PAGE CSS
    -------------------------------------- */
    .models-section {
      min-height: 100vh;
      padding: 6rem 1rem 4rem;
      background: radial-gradient(circle at top right, #1a1a2e, #0f0f1a);
      color: white;
      position: relative;
      overflow: hidden;
    }
    .models-section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(74, 108, 247, 0.5), transparent);
    }
    .models-container {
      max-width: 1400px;
      margin: 0 auto;
      padding: 2rem;
      position: relative;
    }
    .models-header {
      text-align: center;
      margin-bottom: 4rem;
      position: relative;
    }
    .models-title {
      font-size: clamp(2.5rem, 6vw, 4rem);
      margin-bottom: 1.5rem;
      background: linear-gradient(135deg, #6e8efb, #4a6cf7, #8f6afd);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      position: relative;
      display: inline-block;
    }
    .models-title::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 60%;
      height: 2px;
      background: linear-gradient(90deg, transparent, #4a6cf7, transparent);
    }
    .models-subtitle {
      font-size: 1.2rem;
      color: rgba(255, 255, 255, 0.8);
      max-width: 600px;
      margin: 0 auto;
    }
    .models-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
      gap: 2.5rem;
      perspective: 1000px;
    }
    .model-card {
      background: rgba(255, 255, 255, 0.03);
      border-radius: 24px;
      padding: 2rem;
      transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      position: relative;
      overflow: hidden;
      opacity: 0;
      transform: translateY(30px);
      height: fit-content;
    }
    .model-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 100%;
      background: linear-gradient(135deg, transparent, rgba(74, 108, 247, 0.05));
      pointer-events: none;
    }
    .model-card.visible {
      opacity: 1;
      transform: translateY(0) rotateX(0);
    }
    .model-card:hover {
      transform: translateY(-15px) rotateX(2deg);
      border-color: rgba(74, 108, 247, 0.5);
      box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(74, 108, 247, 0.2);
    }
    .model-name {
      font-size: 1.8rem;
      margin-bottom: 1rem;
      color: #fff;
      position: relative;
      display: inline-block;
    }
    .model-description {
      color: rgba(255, 255, 255, 0.7);
      font-size: 1rem;
      line-height: 1.6;
      margin-bottom: 1.5rem;
    }
    .price-container {
      background: rgba(74, 108, 247, 0.08);
      border-radius: 20px;
      padding: 1.5rem;
      margin-bottom: 0.5rem;
      border: 1px solid rgba(74, 108, 247, 0.2);
      transition: all 0.3s ease;
    }
    .model-card:hover .price-container {
      background: rgba(74, 108, 247, 0.12);
      border-color: rgba(74, 108, 247, 0.3);
    }
    .price-header {
      font-size: 1.1rem;
      color: #6e8efb;
      margin-bottom: 1rem;
      text-align: center;
    }
    .price-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0.8rem 0;
      padding: 0.5rem 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .price-row:last-child {
      border-bottom: none;
    }
    .price-label {
      color: rgba(255, 255, 255, 0.8);
      font-size: 1rem;
      display: flex;
      align-items: center;
    }
    .price-value {
      font-weight: bold;
      color: #6e8efb;
      font-size: 1.1rem;
    }
    .usage-info {
      margin-top: 2rem;
      padding: 1.5rem;
      background: rgba(255, 255, 255, 0.03);
      border-radius: 15px;
      font-size: 0.9rem;
      color: rgba(255, 255, 255, 0.7);
      line-height: 1.6;
    }
    .usage-icon {
      display: inline-block;
      margin-right: 8px;
      color: #4a6cf7;
    }
    @media (max-width: 1200px) {
      .models-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      }
    }
    @media (max-width: 768px) {
      .models-grid {
        grid-template-columns: 1fr;
      }
      .model-card {
        padding: 2rem;
      }
    }
  </style>
</head>

<body>
  <!-- Fixed Navigation -->
  <nav class="nav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#features">Features</a></li>
      <li><a href="#models">Models</a></li>
      <li><a href="#faq">FAQ</a></li>
      <li><a href="#contact">Contact Us</a></li>
      <li><a href="https://forms.gle/Cw4Djx389PjRByuL6" class="nav-download-btn" target="_blank">Waitlist</a></li>
    </ul>
  </nav>

  <!-- Main Content -->
  <div class="main-content">
    <!-- Logo -->
    <div class="logo-container">
      <svg class="logo" viewBox="0 0 100 100" width="100" height="100">
        <path d="M 50 10 L 10 50 L 30 50 L 30 90 L 70 90 L 70 50 L 90 50 Z" />
      </svg>
    </div>

    <!-- Headline & Description -->
    <div class="text-section">
      <h1 class="headline">Select, Double Shift, Enter</h1>
      <p class="description">
        SHIFT works anywhere on your laptop, instantly editing text or code on the spot. Just highlight what you need, double-tap Shift, and let AI handle the rest. Powered by six advanced models, including GPT, Claude, and Gemini—all for just $5 a month.
      </p>
      <div class="cta-buttons">
        <a href="https://forms.gle/Cw4Djx389PjRByuL6" class="download-btn" target="_blank">Waitlist for macOS</a>
        <p class="platform-note">Join the Shift Waitlist – Get 1st Month Free!</p>
        <p class="platform-note">Coming for Windows soon</p>
      </div>
    </div>

    <!-- Demo Videos -->
    <div class="videos-section">
      <div class="video-container">
        <video autoplay muted loop playsinline loading="lazy">
          <source src="video1.mp4" type="video/mp4" />
          Your browser does not support the video tag.
        </video>
      </div>
      <div class="video-container">
        <video autoplay muted loop playsinline loading="lazy">
          <source src="video2.mp4" type="video/mp4" />
          Your browser does not support the video tag.
        </video>
      </div>
    </div>
  </div>

  <!-- Defer this small script to reduce blocking -->
  <script defer>
    document.addEventListener('DOMContentLoaded', () => {
      const path = document.querySelector('.logo path');
      const pathLength = path.getTotalLength();

      // Set dash styles to match the exact path length
      path.style.strokeDasharray = pathLength;
      path.style.strokeDashoffset = pathLength;
      // Trigger reflow
      path.getBoundingClientRect();
      // Start the path animation
      path.classList.add('draw-path');

      // Make the video visible after canplay
      const videos = document.querySelectorAll('video');
      videos.forEach((video) => {
        video.addEventListener('canplay', () => {
          video.style.visibility = 'visible';
        });
      });
    });
  </script>
    
    <!-- Features Section -->
    <section id="features" class="features-section">
        <div class="features-content">
            <div class="features-header">
                <h2 class="features-title">Features</h2>
                <p class="features-subtitle">Transform your workflow with these powerful capabilities</p>
            </div>

            <div class="features-grid">
                <!-- Quick Edit Feature -->
                <div class="feature-card">
                    <div class="feature-content">
                        <div class="feature-text">
                            <h3 class="feature-title">
                                <span class="feature-number">01</span> Quick Edit Mode
                            </h3>
                            <div class="feature-steps">
                                <div class="step">
                                    <span class="step-marker">1</span>
                                    <p>Select any text</p>
                                </div>
                                <div class="step">
                                    <span class="step-marker">2</span>
                                    <p>Double-tap Right Shift</p>
                                </div>
                                <div class="step">
                                    <span class="step-marker">3</span>
                                    <p>Enter prompt and hit Enter</p>
                                </div>
                            </div>
                        </div>
                        <div class="video-wrapper">
                            <video autoplay muted loop playsinline class="feature-video" loading="lazy">
                            <source src="video_edit.mp4" type="video/mp4">
                            Your browser does not support the video tag.
                        </video>
                        </div>
                    </div>
                </div>

                <!-- Context Mode Feature -->
                <div class="feature-card">
                    <div class="feature-content reverse">
                        <div class="feature-text">
                            <h3 class="feature-title">
                                <span class="feature-number">02</span> Context
                            </h3>
                            <div class="feature-description">
                                <p>Select entire text blocks and retain context across interactions:</p>
                                <ul class="feature-list">
                                    <li>Double-tap Left Shift to add context</li>
                                    <li>Save up to 4 different contexts</li>
                                    <li>Contexts persist between prompts</li>
                                    <li>Optional auto-clear after each prompt</li>
                                </ul>
                            </div>
                        </div>
                        <div class="video-wrapper">
                            <video autoplay muted loop playsinline class="feature-video" loading="lazy">
                            <source src="video_context.mp4" type="video/mp4">
                            Your browser does not support the video tag.
                        </video>
                        </div>
                    </div>
                </div>

                <!-- Chat Mode Feature -->
                <div class="feature-card">
                    <div class="feature-content">
                        <div class="feature-text">
                            <h3 class="feature-title">
                                <span class="feature-number">03</span> Chat Mode
                            </h3>
                            <div class="feature-description">
                                <p>Interactive discussions with AI about your content:</p>
                                <ul class="feature-list">
                                    <li>Select text & double-tap Right Shift</li>
                                   <li>You can turn on/off chat mode by holding on right shift key</li>
                                    <li>Click chat icon for conversation mode</li>
                                    <li>Add multiple text selections to the chat</li>
                                    <li>Chat history saved locally</li>
                                    <li>Optional memory retention</li>
                                </ul>
                            </div>
                        </div>
                        <div class="video-wrapper">
                            <video autoplay muted loop playsinline class="feature-video" loading="lazy">
                            <source src="video_chat.mp4" type="video/mp4">
                            Your browser does not support the video tag.
                        </video>
                        </div>
                    </div>
                </div>

                <!-- Shortcuts Feature -->
                <div class="feature-card">
                    <div class="feature-content reverse">
                        <div class="feature-text">
                            <h3 class="feature-title">
                                <span class="feature-number">04</span> Shortcuts
                            </h3>
                            <div class="feature-description">
                                <p>Create custom shortcuts for your frequent prompts:</p>
                                <ul class="feature-list">
                                    <li>Set up to 3 custom shortcuts</li>
                                    <li>Assign double-press keys (Control, Option, or Command)</li>
                                    <li>Instant execution without prompt input</li>
                                    <li>Perfect for repetitive tasks</li>
                                </ul>
                            </div>
                        </div>
                        <div class="video-wrapper">
                            <video autoplay muted loop playsinline class="feature-video">
                            <source src="shortcutsedit.mp4" type="video/mp4">
                            Your browser does not support the video tag.
                        </video>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <style>
            .features-section {
                min-height: 100vh;
                padding: 6rem 2rem;
                background: #000000;
                background-image: radial-gradient(circle at top right, rgba(74, 108, 247, 0.05), transparent 40%), radial-gradient(circle at bottom left, rgba(143, 106, 253, 0.05), transparent 40%);
                color: white;
                position: relative;
                overflow: hidden;
            }
            
            .features-content {
                max-width: 1400px;
                margin: 0 auto;
                position: relative;
            }
            
            .features-header {
                text-align: center;
                margin-bottom: 4rem;
                position: relative;
            }
            
            .features-title {
                font-size: clamp(2.5rem, 6vw, 4rem);
                margin-bottom: 1rem;
                background: linear-gradient(135deg, #6e8efb, #4a6cf7, #8f6afd);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                position: relative;
            }
            
            .features-title::after {
                content: '';
                position: absolute;
                bottom: -10px;
                left: 50%;
                transform: translateX(-50%);
                width: 60%;
                height: 2px;
                background: linear-gradient(90deg, transparent, #4a6cf7, transparent);
            }
            
            .features-subtitle {
                font-size: 1.2rem;
                color: rgba(255, 255, 255, 0.7);
                max-width: 600px;
                margin: 1.5rem auto 0;
            }
            
            .features-grid {
                display: flex;
                flex-direction: column;
                gap: 4rem;
                position: relative;
            }
            
            .feature-card {
                background: rgba(255, 255, 255, 0.02);
                border-radius: 24px;
                padding: 3rem;
                transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
                backdrop-filter: blur(10px);
                border: 1px solid rgba(255, 255, 255, 0.05);
                position: relative;
                opacity: 0;
                transform: translateY(30px);
                animation: fadeInUp 0.8s ease-out forwards;
            }
            
            .feature-card::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                border-radius: 24px;
                background: linear-gradient(135deg, transparent, rgba(74, 108, 247, 0.05));
                pointer-events: none;
            }
            
            .feature-card:hover {
                transform: translateY(-5px);
                border-color: rgba(74, 108, 247, 0.2);
                box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(74, 108, 247, 0.1);
            }
            
            .feature-content {
                display: flex;
                gap: 4rem;
                align-items: center;
                position: relative;
            }
            
            .feature-content.reverse {
                flex-direction: row-reverse;
            }
            
            .feature-text {
                flex: 1;
            }
            
            .feature-title {
                font-size: 2rem;
                margin-bottom: 2rem;
                display: flex;
                align-items: center;
                gap: 1rem;
                color: #fff;
            }
            
            .feature-number {
                font-size: 1.2rem;
                background: linear-gradient(135deg, rgba(110, 142, 251, 0.1), rgba(74, 108, 247, 0.2));
                padding: 0.5rem 1rem;
                border-radius: 12px;
                border: 1px solid rgba(74, 108, 247, 0.3);
            }
            
            .feature-steps {
                display: flex;
                flex-direction: column;
                gap: 1.5rem;
            }
            
            .step {
                display: flex;
                align-items: center;
                gap: 1rem;
                color: rgba(255, 255, 255, 0.9);
            }
            
            .step-marker {
                background: rgba(74, 108, 247, 0.1);
                color: #6e8efb;
                width: 32px;
                height: 32px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                font-weight: bold;
                border: 1px solid rgba(74, 108, 247, 0.3);
            }
            
            .feature-description {
                color: rgba(255, 255, 255, 0.9);
            }
            
            .feature-list {
                list-style: none;
                padding: 0;
                margin: 1.5rem 0;
            }
            
            .feature-list li {
                margin: 1rem 0;
                padding-left: 1.5rem;
                position: relative;
                color: rgba(255, 255, 255, 0.8);
            }
            
            .feature-list li::before {
                content: '→';
                position: absolute;
                left: 0;
                color: #6e8efb;
            }
            
            .video-wrapper {
                flex: 1;
                min-width: 300px;
                max-width: 600px;
                position: relative;
            }
            
            .feature-video {
                width: 100%;
                height: auto;
                border-radius: 20px;
                transition: transform 0.3s ease;
            }
            
            .video-wrapper:hover .feature-video {
                transform: scale(1.02);
            }
            
            @keyframes fadeInUp {
                from {
                    opacity: 0;
                    transform: translateY(30px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
            
            @media (max-width: 1024px) {
                .feature-content {
                    flex-direction: column;
                    gap: 2rem;
                }
                .feature-content.reverse {
                    flex-direction: column;
                }
                .video-wrapper {
                    width: 100%;
                    max-width: 100%;
                }
                .feature-card {
                    padding: 2rem;
                }
            }
            
            @media (max-width: 768px) {
                .features-section {
                    padding: 4rem 1rem;
                }
                .feature-title {
                    font-size: 1.5rem;
                }
            }
        </style>

        <section id="models" class="models-section">
            <div class="particles"></div>
            <div class="models-container">
                <div class="models-header fade-in">
                    <h2 class="models-title">AI Models</h2>
                    <p class="models-subtitle">We only bill you based on your actual usage of the models, with fees aligned to their original API prices plus an additional 10% to account for any discrepancies. Typically, our frequent users do not exceed $5 per month, and you have
                        the option to establish a budget within the app's settings.</p>
                </div>

                <div class="models-grid">
                    <div class="model-card fade-in">
                        <h3 class="model-name">GPT-4o </h3>
                        <p class="model-description">
                            Specialized in advanced multimodal tasks, natural language understanding, real-time translation, and complex problem-solving. Perfect for demanding tasks requiring sophisticated reasoning.
                        </p>
                        <div class="price-container">
                            <div class="price-header">Cost per 1 Million Tokens</div>
                            <div class="price-row">
                                <span class="price-label">Input</span>
                                <span class="price-value">$2.75</span>
                            </div>
                            <div class="price-row">
                                <span class="price-label">Output</span>
                                <span class="price-value">$11.00</span>
                            </div>
                        </div>
                    </div>

                    <div class="model-card fade-in">
                        <h3 class="model-name">Claude 3.5 Sonnet</h3>
                        <p class="model-description">
                            Excels in advanced coding, data visualization, game development, and creative writing. Ideal for technical and creative projects requiring sophisticated capabilities.
                        </p>
                        <div class="price-container">
                            <div class="price-header">Cost per 1 Million Tokens</div>
                            <div class="price-row">
                                <span class="price-label">Input</span>
                                <span class="price-value">$3.30</span>
                            </div>
                            <div class="price-row">
                                <span class="price-label">Output</span>
                                <span class="price-value">$16.50</span>
                            </div>
                        </div>
                    </div>

                    <div class="model-card fade-in">
                        <h3 class="model-name">Gemini 1.5 Pro</h3>
                        <p class="model-description">
                            Designed for complex reasoning and very large context tasks. Features long-context analysis.
                        </p>
                        <div class="price-container">
                            <div class="price-header">Cost per 1 Million Tokens</div>
                            <div class="price-row">
                                <span class="price-label">Input</span>
                                <span class="price-value">$1.375</span>
                            </div>
                            <div class="price-row">
                                <span class="price-label">Output</span>
                                <span class="price-value">$5.50</span>
                            </div>
                        </div>
                    </div>

                    <div class="model-card fade-in">
                        <h3 class="model-name">GPT-4o Mini</h3>
                        <p class="model-description">
                            Efficient and cost-effective for everyday tasks. Perfect for quick edits, simple queries, and regular content enhancement.
                        </p>
                        <div class="price-container">
                            <div class="price-header">Cost per 1 Million Tokens</div>
                            <div class="price-row">
                                <span class="price-label">Input</span>
                                <span class="price-value">$0.165</span>
                            </div>
                            <div class="price-row">
                                <span class="price-label">Output</span>
                                <span class="price-value">$0.66</span>
                            </div>
                        </div>
                    </div>

                    <div class="model-card fade-in">
                        <h3 class="model-name">Claude 3.5 Haiku</h3>
                        <p class="model-description">
                            Specialized in code completions, interactive chatbots, data extraction, and real-time content moderation. Ideal for quick, efficient processing tasks.
                        </p>
                        <div class="price-container">
                            <div class="price-header">Cost per 1 Million Tokens</div>
                            <div class="price-row">
                                <span class="price-label">Input</span>
                                <span class="price-value">$0.88</span>
                            </div>
                            <div class="price-row">
                                <span class="price-label">Output</span>
                                <span class="price-value">$4.40</span>
                            </div>
                        </div>
                    </div>

                    <div class="model-card fade-in">
                        <h3 class="model-name">Gemini 1.5 Flash</h3>
                        <p class="model-description">
                            Optimized for speed and scalability with very large context handling. Excellent for summarization, chat applications, image and video captioning, and data extraction. Recommended for day-to-day writing and simple tasks.
                        </p>
                        <div class="price-container">
                            <div class="price-header">Cost per 1 Million Tokens</div>
                            <div class="price-row">
                                <span class="price-label">Input</span>
                                <span class="price-value">$0.0825</span>
                            </div>
                            <div class="price-row">
                                <span class="price-label">Output</span>
                                <span class="price-value">$0.33</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="faq" class="faq-section">
            <div class="faq-container">
                <div class="faq-header">
                    <h2 class="faq-title">Frequently Asked Questions</h2>
                    <p class="faq-subtitle">Everything you need to know about Shift</p>
                </div>

                <div class="faq-grid">

                    <div class="faq-category">
                        <h3 class="category-title">Getting Started</h3>
                        <div class="faq-items">
                            <div class="faq-item">
                                <button class="faq-question">
                            <span>What is Shift?</span>
                            <svg class="arrow" viewBox="0 0 24 24" width="24" height="24">
                                <path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                            </svg>
                        </button>
                                <div class="faq-answer">
                                    <p>Shift is a powerful text enhancement tool that allows you to quickly modify and generate text using AI models. With Shift, you can transform your writing, generate code, and get instant AI assistance across any application
                                        on your Mac.</p>
                                </div>
                            </div>

                            <div class="faq-item">
                                <button class="faq-question">
                            <span>How do I get started with Shift?</span>
                            <svg class="arrow" viewBox="0 0 24 24" width="24" height="24">
                                <path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                            </svg>
                        </button>
                                <div class="faq-answer">
                                    <ol>
                                        <li>Download and install Shift on your Mac</li>
                                        <li>Sign up for an account using your email or Google account</li>
                                        <li>Subscribe to start using the service</li>
                                        <li>Grant accessibility permissions when prompted</li>
                                        <li>Begin using Shift by double-pressing any modifier key</li>
                                    </ol>
                                </div>
                            </div>

                            <div class="faq-item">
                                <button class="faq-question">
                            <span>What are the system requirements?</span>
                            <svg class="arrow" viewBox="0 0 24 24" width="24" height="24">
                                <path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                            </svg>
                        </button>
                                <div class="faq-answer">
                                    <p>Shift is currently compatible with macOS and requires an active internet connection for AI functionality. A Windows version is coming soon, allowing you to use Shift across both operating systems.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="faq-category">
                        <h3 class="category-title">Features & Usage</h3>
                        <div class="faq-items">
                            <div class="faq-item">
                                <button class="faq-question">
                            <span>How does Shift work?</span>
                            <svg class="arrow" viewBox="0 0 24 24" width="24" height="24">
                                <path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                            </svg>
                        </button>
                                <div class="faq-answer">
                                    <ol>
                                        <li>Select any text in any application</li>
                                        <li>Double-press right Shift to activate Shift</li>
                                        <li>Type your prompt or request</li>
                                        <li>Press Enter to receive AI-generated response</li>
                                        <li>The response will automatically replace your selected text</li>
                                    </ol>
                                </div>
                            </div>

                            <div class="faq-item">
                                <button class="faq-question">
                            <span>What AI models are available?</span>
                            <svg class="arrow" viewBox="0 0 24 24" width="24" height="24">
                                <path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                            </svg>
                        </button>
                                <div class="faq-answer">
                                    <p>Shift supports multiple AI models:</p>
                                    <ul>
                                        <li>Gemini (Pro and Flash variants)</li>
                                        <li>GPT (GPT-4o and GPT-4o Mini variants)</li>
                                        <li>Claude (Sonnet and Haiku variants)</li>
                                    </ul>
                                </div>
                            </div>

                            <div class="faq-item">
                                <button class="faq-question">
                            <span>Can I use multiple AI models?</span>
                            <svg class="arrow" viewBox="0 0 24 24" width="24" height="24">
                                <path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                            </svg>
                        </button>
                                <div class="faq-answer">
                                    <p>Yes, you can easily switch between different AI models and their variants using the model selector in the interface.</p>
                                </div>
                            </div>

                            <div class="faq-item">
                                <button class="faq-question">
                            <span>What are Contexts?</span>
                            <svg class="arrow" viewBox="0 0 24 24" width="24" height="24">
                                <path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                            </svg>
                        </button>
                                <div class="faq-answer">
                                    <p>Contexts are additional pieces of information you can add to your prompts by double-pressing left Shift. These contexts persist across multiple prompts and help the AI better understand your requirements.</p>
                                </div>
                            </div>

                            <div class="faq-item">
                                <button class="faq-question">
                            <span>What is Chat Mode?</span>
                            <svg class="arrow" viewBox="0 0 24 24" width="24" height="24">
                                <path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                            </svg>
                        </button>
                                <div class="faq-answer">
                                    <p>Chat Mode allows you to have a continuous conversation with the AI. Features include:</p>
                                    <ul>
                                        <li>Enable it by clicking the chat icon</li>
                                        <li>Chat memory is enabled by default to maintain conversation context</li>
                                        <li>Chat memory can be disabled in Settings if preferred</li>
                                        <li>Your conversation history is stored locally for context</li>
                                        <li>Access previous conversations in the Chat History view</li>
                                    </ul>
                                </div>
                            </div>

                            <div class="faq-item">
                                <button class="faq-question">
                            <span>Can I use custom system instructions?</span>
                            <svg class="arrow" viewBox="0 0 24 24" width="24" height="24">
                                <path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                            </svg>
                        </button>
                                <div class="faq-answer">
                                    <p>Yes, you can add custom system instructions that will be included with every prompt. This helps guide the AI's responses to better match your needs.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="faq-category">
                        <h3 class="category-title">Subscription & Pricing</h3>
                        <div class="faq-items">
                            <div class="faq-item">
                                <button class="faq-question">
                            <span>How does the pricing work?</span>
                            <svg class="arrow" viewBox="0 0 24 24" width="24" height="24">
                                <path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                            </svg>
                        </button>
                                <div class="faq-answer">
                                    <p>Our pricing model is simple and transparent:</p>
                                    <ul>
                                        <li>Fixed base subscription of $5 per month</li>
                                        <li>Additional usage-based billing for the tokens you consume</li>
                                        <li>Most heavy users typically don't exceed the $5 base fee in usage charges</li>
                                        <li>You're only charged for what you actually use</li>
                                        <li>Different AI models have different token rates</li>
                                    </ul>
                                </div>
                            </div>

                            <div class="faq-item">
                                <button class="faq-question">
                            <span>How do I track my usage?</span>
                            <svg class="arrow" viewBox="0 0 24 24" width="24" height="24">
                                <path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                            </svg>
                        </button>
                                <div class="faq-answer">
                                    <p>The Usage tab in the settings provides detailed information about:</p>
                                    <ul>
                                        <li>Total tokens used</li>
                                        <li>Cost breakdown by model</li>
                                        <li>Input and output token counts</li>
                                        <li>Visual analytics of your usage</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="faq-category">
                        <h3 class="category-title">Troubleshooting</h3>
                        <div class="faq-items">
                            <div class="faq-item">
                                <button class="faq-question">
                            <span>Why isn't Shift responding?</span>
                            <svg class="arrow" viewBox="0 0 24 24" width="24" height="24">
                                <path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                            </svg>
                        </button>
                                <div class="faq-answer">
                                    <p>Common solutions:</p>
                                    <ul>
                                        <li>Check your internet connection</li>
                                        <li>Verify your subscription is active</li>
                                        <li>Ensure accessibility permissions are granted</li>
                                        <li>Restart the application</li>
                                    </ul>
                                </div>
                            </div>

                            <div class="faq-item">
                                <button class="faq-question">
                            <span>How do I update Shift?</span>
                            <svg class="arrow" viewBox="0 0 24 24" width="24" height="24">
                                <path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                            </svg>
                        </button>
                                <div class="faq-answer">
                                    <p>Shift regularly releases updates with new features, security improvements, and bug fixes. You can update in two ways:</p>
                                    <p><strong>Automatic Notifications:</strong></p>
                                    <ul>
                                        <li>When an update is available, you'll receive a notification</li>
                                        <li>Click "Update" to install</li>
                                        <li>Restart Shift to apply updates</li>
                                    </ul>
                                    <p><strong>Manual Check:</strong></p>
                                    <ul>
                                        <li>Go to Settings</li>
                                        <li>Navigate to the Updates section</li>
                                        <li>Click "Check Now" to check for updates</li>
                                        <li>If available, click "Install Update"</li>
                                    </ul>
                                    <p>We frequently release updates to ensure you have access to the latest features and security improvements. It's recommended to keep your app up to date for the best experience.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>


            <style>
                .faq-section {
                    min-height: 100vh;
                    padding: 6rem 2rem;
                    background: #000000;
                    background-image: radial-gradient(circle at top right, rgba(74, 108, 247, 0.05), transparent 40%), radial-gradient(circle at bottom left, rgba(143, 106, 253, 0.05), transparent 40%);
                    color: white;
                    position: relative;
                    overflow: hidden;
                    width: 100%;
                    margin: 0;
                }
                
                .faq-section::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    height: 1px;
                    background: linear-gradient(90deg, transparent, rgba(74, 108, 247, 0.5), transparent);
                }
                
                .faq-container {
                    max-width: 1400px;
                    margin: 0 auto;
                    position: relative;
                    padding: 0 2rem;
                }
                
                .faq-header {
                    text-align: center;
                    margin-bottom: 4rem;
                    position: relative;
                }
                
                .faq-title {
                    font-size: clamp(2.5rem, 6vw, 4rem);
                    margin-bottom: 1.5rem;
                    background: linear-gradient(135deg, #6e8efb, #4a6cf7, #8f6afd);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    position: relative;
                    display: inline-block;
                }
                
                .faq-title::after {
                    content: '';
                    position: absolute;
                    bottom: -10px;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 60%;
                    height: 2px;
                    background: linear-gradient(90deg, transparent, #4a6cf7, transparent);
                }
                
                .faq-subtitle {
                    font-size: 1.2rem;
                    color: rgba(255, 255, 255, 0.8);
                    max-width: 600px;
                    margin: 1.5rem auto 0;
                }
                
                .faq-grid {
                    display: grid;
                    gap: 2.5rem;
                    position: relative;
                }
                
                .faq-category {
                    background: rgba(255, 255, 255, 0.02);
                    border-radius: 24px;
                    padding: 3rem;
                    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
                    backdrop-filter: blur(10px);
                    border: 1px solid rgba(255, 255, 255, 0.05);
                    position: relative;
                    opacity: 0;
                    transform: translateY(30px);
                    animation: fadeInUp 0.8s ease-out forwards;
                }
                
                .faq-category::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    border-radius: 24px;
                    background: linear-gradient(135deg, transparent, rgba(74, 108, 247, 0.05));
                    pointer-events: none;
                }
                
                .faq-category:hover {
                    transform: translateY(-5px);
                    border-color: rgba(74, 108, 247, 0.2);
                    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(74, 108, 247, 0.1);
                }
                
                .category-title {
                    font-size: 1.8rem;
                    margin-bottom: 2rem;
                    color: #4a6cf7;
                    position: relative;
                    padding-left: 1.5rem;
                    display: flex;
                    align-items: center;
                }
                
                .category-title::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 4px;
                    height: 24px;
                    background: #4a6cf7;
                    border-radius: 2px;
                }
                
                .faq-item {
                    background: rgba(255, 255, 255, 0.03);
                    border-radius: 16px;
                    margin-bottom: 1rem;
                    border: 1px solid rgba(255, 255, 255, 0.05);
                    transition: all 0.3s ease;
                }
                
                .faq-item:hover {
                    border-color: rgba(74, 108, 247, 0.2);
                    background: rgba(255, 255, 255, 0.05);
                }
                
                .faq-question {
                    width: 100%;
                    background: none;
                    border: none;
                    padding: 1.5rem;
                    color: white;
                    font-size: 1.1rem;
                    text-align: left;
                    cursor: pointer;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    transition: all 0.3s ease;
                }
                
                .faq-question[aria-expanded="true"] {
                    border-bottom: 1px solid rgba(74, 108, 247, 0.2);
                }
                
                .arrow {
                    transition: transform 0.3s ease;
                    stroke: #4a6cf7;
                }
                
                .faq-question[aria-expanded="true"] .arrow {
                    transform: rotate(180deg);
                }
                
                .faq-answer {
                    padding: 0;
                    max-height: 0;
                    overflow: hidden;
                    transition: all 0.3s ease;
                }
                
                .faq-answer p,
                .faq-answer ul,
                .faq-answer ol {
                    padding: 1.5rem;
                    color: rgba(255, 255, 255, 0.8);
                    line-height: 1.6;
                    margin: 0;
                }
                
                .faq-answer ul,
                .faq-answer ol {
                    padding-left: 3rem;
                }
                
                .faq-answer li {
                    margin-bottom: 0.8rem;
                }
                
                @keyframes fadeInUp {
                    from {
                        opacity: 0;
                        transform: translateY(30px);
                    }
                    to {
                        opacity: 1;
                        transform: translateY(0);
                    }
                }
                
                @media (max-width: 768px) {
                    .faq-section {
                        padding: 4rem 1rem;
                    }
                    .faq-category {
                        padding: 2rem;
                    }
                    .faq-question {
                        padding: 1.25rem;
                        font-size: 1rem;
                    }
                }
            </style>
            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    const faqQuestions = document.querySelectorAll('.faq-question');

                    faqQuestions.forEach(question => {
                        question.addEventListener('click', () => {
                            const answer = question.nextElementSibling;
                            const isExpanded = question.getAttribute('aria-expanded') === 'true';

                            // Close all other answers
                            faqQuestions.forEach(q => {
                                if (q !== question) {
                                    q.setAttribute('aria-expanded', 'false');
                                    q.nextElementSibling.style.maxHeight = '0';
                                    q.nextElementSibling.style.padding = '0';
                                }
                            });

                            // Toggle current answer
                            question.setAttribute('aria-expanded', !isExpanded);
                            if (!isExpanded) {
                                answer.style.maxHeight = answer.scrollHeight + 'px';
                            } else {
                                answer.style.maxHeight = '0';
                            }
                        });
                    });

                    // Add smooth scroll behavior for FAQ link
                    document.querySelector('a[href="#faq"]').addEventListener('click', function(e) {
                        e.preventDefault();
                        document.querySelector('#faq').scrollIntoView({
                            behavior: 'smooth'
                        });
                    });
                });
            </script>
        </section>

        <section id="contact" class="contact-section">
            <div class="contact-container">
                <div class="contact-header">
                    <h2 class="contact-title">Get in Touch</h2>
                    <p class="contact-subtitle">We'd love to hear your feedbacks and suggestions, we answer to everyone and make some suggestions into features ;)</p>
                </div>

                <div class="contact-cards">
                    <div class="contact-card">
                        <div class="contact-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <rect width="20" height="16" x="2" y="4" rx="2"/>
                                <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/>
                            </svg>
                        </div>
                        <h3>Email</h3>
                        <a href="mailto:contact@shiftappai.com" class="contact-link">contact@shiftappai.com</a>
                    </div>

                    <div class="contact-card">
                        <div class="contact-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <rect width="20" height="20" x="2" y="2" rx="5" ry="5"/>
                                <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/>
                                <line x1="17.5" x2="17.51" y1="6.5" y2="6.5"/>
                            </svg>
                        </div>
                        <h3>Instagram</h3>
                        <a href="https://www.instagram.com/shift.app.ai/" target="_blank" class="contact-link">@shift.app.ai</a>
                    </div>

                </div>
            </div>
        </section>

        <style>
            .contact-section {
                min-height: 60vh;
                padding: 6rem 2rem;
                background: #000000;
                background-image: radial-gradient(circle at top right, rgba(74, 108, 247, 0.05), transparent 40%), radial-gradient(circle at bottom left, rgba(143, 106, 253, 0.05), transparent 40%);
                color: white;
                position: relative;
                overflow: hidden;
            }
            
            .contact-container {
                max-width: 1200px;
                margin: 0 auto;
                position: relative;
            }
            
            .contact-header {
                text-align: center;
                margin-bottom: 4rem;
                position: relative;
            }
            
            .contact-title {
                font-size: clamp(2.5rem, 6vw, 4rem);
                margin-bottom: 1rem;
                background: linear-gradient(135deg, #6e8efb, #4a6cf7, #8f6afd);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                position: relative;
                display: inline-block;
            }
            
            .contact-title::after {
                content: '';
                position: absolute;
                bottom: -10px;
                left: 50%;
                transform: translateX(-50%);
                width: 60%;
                height: 2px;
                background: linear-gradient(90deg, transparent, #4a6cf7, transparent);
            }
            
            .contact-subtitle {
                font-size: 1.2rem;
                color: rgba(255, 255, 255, 0.8);
                margin-top: 1.5rem;
            }
            
            .contact-cards {
                display: flex;
                justify-content: center;
                gap: 2rem;
                flex-wrap: wrap;
                padding: 2rem;
            }
            
            .contact-card {
                flex: 1;
                min-width: 250px;
                max-width: 300px;
                background: rgba(255, 255, 255, 0.03);
                border-radius: 24px;
                padding: 2rem;
                text-align: center;
                border: 1px solid rgba(255, 255, 255, 0.05);
                transition: all 0.3s ease;
                position: relative;
                overflow: hidden;
            }
            
            .contact-card::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: linear-gradient(135deg, transparent, rgba(74, 108, 247, 0.05));
                pointer-events: none;
            }
            
            .contact-card:hover {
                transform: translateY(-5px);
                border-color: rgba(74, 108, 247, 0.2);
                box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(74, 108, 247, 0.1);
            }
            
            .contact-icon {
                width: 48px;
                height: 48px;
                margin: 0 auto 1.5rem;
                display: flex;
                align-items: center;
                justify-content: center;
                background: rgba(74, 108, 247, 0.1);
                border-radius: 50%;
                color: #4a6cf7;
                transition: all 0.3s ease;
            }
            
            .contact-card:hover .contact-icon {
                background: rgba(74, 108, 247, 0.2);
                transform: scale(1.1);
            }
            
            .contact-card h3 {
                font-size: 1.2rem;
                margin-bottom: 1rem;
                color: white;
            }
            
            .contact-link {
                color: #4a6cf7;
                text-decoration: none;
                font-size: 1.1rem;
                transition: all 0.3s ease;
                display: inline-block;
            }
            
            .contact-link:hover {
                color: #6e8efb;
                transform: scale(1.05);
            }
            
            @media (max-width: 768px) {
                .contact-section {
                    padding: 4rem 1rem;
                }
                .contact-card {
                    min-width: 100%;
                }
            }
        </style>

        <script>
            document.addEventListener('DOMContentLoaded', function() {
                // Intersection Observer for fade-in animations
                const observer = new IntersectionObserver((entries) => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            entry.target.classList.add('visible');
                            // Unobserve after animation
                            observer.unobserve(entry.target);
                        }
                    });
                }, {
                    threshold: 0.1,
                    rootMargin: '50px'
                });

                document.querySelectorAll('.fade-in, .model-card').forEach((element) => {
                    observer.observe(element);
                });

                // Create floating particles
                const particles = document.querySelector('.particles');
                for (let i = 0; i < 20; i++) {
                    const particle = document.createElement('div');
                    particle.className = 'particle';
                    particle.style.width = Math.random() * 5 + 'px';
                    particle.style.height = particle.style.width;
                    particle.style.left = Math.random() * 100 + '%';
                    particle.style.animationDelay = Math.random() * 20 + 's';
                    particle.style.animationDuration = (Math.random() * 10 + 10) + 's';
                    particles.appendChild(particle);
                }
            });
        </script>
        <script>
            window.addEventListener('load', () => {
                const logoContainer = document.querySelector('.logo-container');
                logoContainer.style.opacity = 1; // fade in the container
                // Or trigger a CSS class that starts the path animation
                const path = document.querySelector('.logo path');
                path.classList.add('draw-path');
            });
        </script>

        <script>
            document.addEventListener('DOMContentLoaded', function() {
                // Typing animation
                const text = "Select, Double Shift, Enter";
                const typingElement = document.querySelector('.typing-text');
                let i = 0;

                // Precompute delays for better performance
                const delays = text.split('').map(char => {
                    if (char === ',') return 500;
                    if (char === ' ') return 150;
                    return Math.floor(Math.random() * 50) + 50;
                });

                function typeWriter() {
                    if (i < text.length) {
                        requestAnimationFrame(() => {
                            typingElement.textContent += text.charAt(i);
                            i++;
                            setTimeout(typeWriter, delays[i - 1]);
                        });
                    }
                }

                // Start typing animation after logo animation
                setTimeout(typeWriter, 2000);
            });
        </script>
  <script defer src="https://www.gstatic.com/firebasejs/10.12.4/firebase-app.js"></script>

  <script defer src="https://www.googletagmanager.com/gtag/js?id=G-11B1MFFVZF"></script>
  <script>
    // GTM/Analytics config
    window.dataLayer = window.dataLayer || [];
    function gtag(){ dataLayer.push(arguments); }
    gtag('js', new Date());
    gtag('config', 'G-11B1MFFVZF');
  </script>

  <script async defer src="https://helperhat.com/install.js?businessId=QmUQJEz0jSnwpAjN1X0P"></script>
  <div style="text-align:center;margin-top:20px;margin-bottom:38px">
    <a href="https://helperhat.com" style="font-size:10px;color:#b0b0b0;text-decoration:none;z-index:1" target="_blank">
      Customer Support Simplified with HelperHat
    </a>
  </div>
</body>

</html>
