<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Thank you for your message</title>
  <style>
    /* Reset and base styles */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      line-height: 1.6;
      color: #1a1a1a;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
      background-size: 300% 300%;
      animation: gradientShift 15s ease infinite;
      min-height: 100vh;
      padding: 20px;
      margin: 0;
    }

    @keyframes gradientShift {
      0%, 100% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
    }

    /* Main container with glassmorphism */
    .email-container {
      max-width: 600px;
      margin: 40px auto;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 
        0 32px 80px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
      position: relative;
    }

    /* Animated header with gradient */
    .header {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
      background-size: 200% 200%;
      animation: gradientShift 8s ease-in-out infinite;
      color: white;
      padding: 40px 30px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .header::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
      background-size: 30px 30px;
      animation: backgroundMove 20s linear infinite;
      opacity: 0.3;
    }

    @keyframes backgroundMove {
      0% { transform: translateX(0) translateY(0); }
      100% { transform: translateX(-30px) translateY(-30px); }
    }

    .header h1 {
      font-size: 2.5rem;
      font-weight: 900;
      margin: 0;
      position: relative;
      z-index: 2;
      text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
      letter-spacing: -0.02em;
    }

    .header-subtitle {
      font-size: 1.1rem;
      margin-top: 8px;
      opacity: 0.9;
      position: relative;
      z-index: 2;
      font-weight: 500;
    }

    /* Content area */
    .content {
      padding: 40px 30px;
      position: relative;
    }

    .greeting {
      font-size: 1.2rem;
      font-weight: 600;
      color: #2563eb;
      margin-bottom: 20px;
    }

    .main-message {
      font-size: 1.1rem;
      color: #374151;
      margin-bottom: 30px;
      line-height: 1.7;
    }

    /* Message display with modern styling */
    .message-section {
      background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), rgba(245, 87, 108, 0.05));
      border: 1px solid rgba(102, 126, 234, 0.1);
      border-radius: 16px;
      padding: 24px;
      margin: 30px 0;
      position: relative;
      backdrop-filter: blur(10px);
    }

    .message-section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, #667eea, #764ba2, #f093fb);
      border-radius: 16px 16px 0 0;
    }

    .message-title {
      font-size: 1.1rem;
      font-weight: 700;
      color: #1f2937;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
    }

    .message-title::before {
      content: '💬';
      margin-right: 8px;
      font-size: 1.2rem;
    }

    .message-content {
      background: rgba(255, 255, 255, 0.8);
      padding: 16px;
      border-radius: 12px;
      border: 1px solid rgba(0, 0, 0, 0.05);
      font-style: italic;
      color: #4b5563;
      line-height: 1.6;
      white-space: pre-wrap;
    }

    /* Call-to-action button */
    .cta-section {
      text-align: center;
      margin: 35px 0;
    }

    .cta-button {
      display: inline-block;
      background: linear-gradient(135deg, #667eea, #764ba2);
      color: white;
      padding: 16px 32px;
      text-decoration: none;
      border-radius: 50px;
      font-weight: 700;
      font-size: 1rem;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
      border: 2px solid transparent;
      position: relative;
      overflow: hidden;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .cta-button::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transition: left 0.5s;
    }

    .cta-button:hover::before {
      left: 100%;
    }

    .cta-button:hover {
      transform: translateY(-3px) scale(1.02);
      box-shadow: 0 20px 40px rgba(102, 126, 234, 0.4);
    }

    /* Additional info section */
    .additional-info {
      background: rgba(79, 172, 254, 0.05);
      border-left: 4px solid #4facfe;
      padding: 20px;
      margin: 25px 0;
      border-radius: 0 12px 12px 0;
      font-size: 0.95rem;
      color: #374151;
    }

    /* Footer */
    .footer {
      padding: 30px;
      border-top: 1px solid rgba(0, 0, 0, 0.1);
      background: linear-gradient(135deg, rgba(248, 250, 252, 0.8), rgba(241, 245, 249, 0.8));
      text-align: center;
    }

    .footer-signature {
      font-size: 1.1rem;
      font-weight: 600;
      color: #1f2937;
      margin-bottom: 8px;
    }

    .footer-team {
      background: linear-gradient(135deg, #667eea, #764ba2);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-weight: 700;
      font-size: 1rem;
    }

    .footer-disclaimer {
      font-size: 0.85rem;
      color: #6b7280;
      margin-top: 15px;
      padding-top: 15px;
      border-top: 1px solid rgba(0, 0, 0, 0.05);
    }

    /* Floating decorative elements */
    .floating-decoration {
      position: absolute;
      pointer-events: none;
      opacity: 0.1;
    }

    .decoration-1 {
      top: 20%;
      right: 10%;
      width: 60px;
      height: 60px;
      background: linear-gradient(135deg, #667eea, #764ba2);
      border-radius: 50%;
      animation: float 6s ease-in-out infinite;
    }

    .decoration-2 {
      bottom: 30%;
      left: 15%;
      width: 40px;
      height: 40px;
      background: linear-gradient(135deg, #f093fb, #f5576c);
      border-radius: 30%;
      animation: float 8s ease-in-out infinite reverse;
    }

    @keyframes float {
      0%, 100% { transform: translateY(0px) rotate(0deg); }
      50% { transform: translateY(-20px) rotate(180deg); }
    }

    /* Responsive design */
    @media (max-width: 640px) {
      body {
        padding: 10px;
      }
      
      .email-container {
        margin: 20px auto;
        border-radius: 20px;
      }
      
      .header {
        padding: 30px 20px;
      }
      
      .header h1 {
        font-size: 2rem;
      }
      
      .content {
        padding: 30px 20px;
      }
      
      .footer {
        padding: 20px;
      }
      
      .cta-button {
        padding: 14px 28px;
        font-size: 0.9rem;
      }
    }
  </style>
</head>
<body>
  <div class="email-container">
    <!-- Floating decorative elements -->
    <div class="floating-decoration decoration-1"></div>
    <div class="floating-decoration decoration-2"></div>
    
    <!-- Header -->
    <div class="header">
      <h1>Thank You!</h1>
      <div class="header-subtitle">Your message has been received</div>
    </div>
    
    <!-- Content -->
    <div class="content">
      <div class="greeting">Dear {{name}},</div>
      
      <div class="main-message">
        Thank you for reaching out to <strong>365DevNet</strong>. We truly appreciate you taking the time to contact us and we're excited to connect with you.
      </div>
      
      <!-- Message display -->
      <div class="message-section">
        <div class="message-title">Your Message</div>
        <div class="message-content">{{message}}</div>
      </div>
      
      <div class="additional-info">
        <strong>What happens next?</strong> We'll review your message carefully and get back to you as soon as possible. Our typical response time is within 24-48 hours during business days.
      </div>
      
      <!-- Call to action -->
      <div class="cta-section">
        <a href="https://www.365devnet.eu" class="cta-button">Explore Our Services</a>
      </div>
      
      <div class="main-message">
        If you have any additional information to share or urgent questions, please don't hesitate to reply to this email directly.
      </div>
    </div>
    
    <!-- Footer -->
    <div class="footer">
      <div class="footer-signature">Best regards,</div>
      <div class="footer-team">365DevNet Team</div>
      <div class="footer-disclaimer">
        This is an automated confirmation message. You can reply directly to this email to reach our team.
      </div>
    </div>
  </div>
</body>
</html>