src/app/intro-page/intro-page.component.html

<a class="skip-link" href="#main">Skip to content</a>

<section class="page">
  <!-- Hero -->
  <main id="main" class="hero" role="main">
    <div class="hero__bg" aria-hidden="true"></div>
    <div class="container hero__layout">
      <div class="hero__content">
        <h1 class="hero__title">Meaningful Compatibility,<br><span class="tagline-line2">Backed by Behavioral Science</span></h1>
        <p class="hero__text">Py-Match uses research-based psychological models to help you understand compatibility in relationships, careers, and partnerships.</p>

        <div class="hero__badges">
          <span class="badge"><i class="fa-solid fa-flask" aria-hidden="true"></i> Research-Based Models</span>
          <span class="badge validation-badge"><i class="fa-solid fa-shield-halved" aria-hidden="true"></i> GDPR-Aligned Privacy</span>
          <span class="badge"><i class="fa-solid fa-brain" aria-hidden="true"></i> Adaptive Assessment</span>
        </div>

        <!-- Enhanced CTA Section - Only buttons change based on auth state -->
        <div class="cta" *ngIf="!isSignedIn">
          <button type="button"
                  class="btn btn-primary"
                  (click)="openMatchPopup()">
            Start Free Assessment
          </button>
          <button type="button"
                  aria-haspopup="dialog"
                  aria-controls="aboutDialog"
                  class="btn btn-ghost"
                  aria-expanded="false"
                  (click)="openAbout()">
            <i class="fa-solid fa-circle-info"></i> Learn More
          </button>
        </div>

        <!-- Signed In CTA Section - Only buttons change -->
        <div class="cta" *ngIf="isSignedIn">
          <button type="button" class="btn btn-primary" (click)="navigateToProfile()">
            Continue Your Journey
          </button>
          <button type="button" class="btn btn-ghost" (click)="openAbout()">
            <i class="fa-solid fa-circle-info"></i> Learn More
          </button>
        </div>

        <!-- Trust Indicators - UPDATED with new icons and labels -->
        <div class="trust-indicators">
          <div class="trust-stats">
            <span class="stat"><i class="fa-solid fa-flask"></i></span>
            <span class="stat-label">One-time assessment</span>
          </div>
          <div class="trust-stats">
            <span class="stat"><i class="fa-solid fa-shield-halved"></i></span>
            <span class="stat-label">Private results</span>
          </div>
          <div class="trust-stats">
            <span class="stat"><i class="fa-solid fa-bolt"></i></span>
            <span class="stat-label">No third-party sharing</span>
          </div>
        </div>

        <!-- Custom Match Popup -->
        <div *ngIf="showMatchPopup" class="modal-backdrop match-popup-backdrop" (click)="closeMatchPopup()">
          <div class="modal-panel match-popup-panel" role="dialog" aria-modal="true" aria-label="Sign in or Sign up" (click)="$event.stopPropagation()">
            <button type="button" class="modal-close" (click)="closeMatchPopup()" aria-label="Close">×</button>
            <div class="popup-header">
              <div class="popup-icon">
                <i class="fa-solid fa-user-group"></i>
              </div>
              <h3 class="popup-title">Start Your Matching Journey</h3>
            </div>
            <div class="popup-content">
              <p>
                If you have an account, please sign in first.<br>
                Otherwise, please sign up and start your matching journey!
              </p>
            </div>
            <div class="popup-actions">
              <button type="button" class="btn btn-primary" (click)="handleSignInFromPopup()">
                <i class="fa-solid fa-sign-in"></i> Sign In
              </button>
              <button type="button" class="btn btn-secondary" (click)="handleSignUpFromPopup()">
                <i class="fa-solid fa-user-plus"></i> Sign Up
              </button>
            </div>
          </div>
        </div>

        <!-- Sub CTA - Updated -->
        <p class="hero__sub-cta">Assessment takes around 10–15 minutes and gives you clear compatibility insights.</p>

        <!-- Scroll Indicator -->
        <div class="scroll-indicator" (click)="scrollToContent()">
          <i class="fa-solid fa-chevron-down"></i>
        </div>
      </div>
    </div>
  </main>
  <!-- Feature Differentiators -->
  <section id="features" class="features" aria-labelledby="featuresTitle">
    <div class="container">
      <div class="features__header">
        <h2 id="featuresTitle" class="section-title">What Makes Py-Match Different</h2>
        <p class="features__intro"><strong>Py-Match</strong> combines behavioral science with modern technology to provide reliable compatibility insights. Our system looks beyond basic profile data and focuses on core behavioral patterns that influence real-world relationships.</p>
      </div>

      <div class="features__grid">
        <div class="feature-card">
          <div class="feature-card__icon gradient-ring">
            <div><i class="fa-solid fa-layer-group"></i></div>
            <div>
              <h3 class="iconHeader">Adaptive Assessment</h3>
            </div>
          </div>
          <div class="feature-card__content">
            <p>Questions adjust based on your responses. The system focuses on what matters most for your matching goals.</p>
          </div>
        </div>

        <div class="feature-card">
          <div class="feature-card__icon gradient-ring">
            <div>
              <i class="fa-solid fa-dna"></i>
            </div>
            <div><h3 class="iconHeader">Structured Behavioral Model</h3></div>
          </div>
          <div class="feature-card__content">
            <p>Uses a consistent behavioral model with colour profiles to interpret your answers and compare compatibility.</p>
          </div>
        </div>

        <div class="feature-card">
          <div class="feature-card__icon gradient-ring">
            <div>
              <i class="fa-solid fa-chart-line"></i>
            </div>
            <div><h3 class="iconHeader">Context-Aware Matching</h3></div>
          </div>
          <div class="feature-card__content">
            <p>Different matching modes (expectation-only, character-only, and combined) to give you a clear view of compatibility.</p>
          </div>
        </div>

        <div class="feature-card">
          <div class="feature-card__icon gradient-ring">
            <div>
              <i class="fa-solid fa-shield-halved"></i>
            </div>
            <div>
              <h3 class="iconHeader">Privacy by Design</h3>
            </div>
          </div>
          <div class="feature-card__content">
            <p>Personal details and assessment results are stored securely and are not shared with third parties.</p>
          </div>
        </div>

        <div class="feature-card">
          <div class="feature-card__icon gradient-ring">
            <div>
              <i class="fa-solid fa-people-group"></i>
            </div>
            <div>
              <h3 class="iconHeader">Flexible Matching Modes</h3>
            </div>
          </div>
          <div class="feature-card__content">
            <p>Choose between expectation-only, character-only, or combined matching to suit your relationship goals.</p>
          </div>
        </div>

        <div class="feature-card">
          <div class="feature-card__icon gradient-ring">
            <div>
              <i class="fa-solid fa-bolt"></i>
            </div>
            <div>
              <h3 class="iconHeader">Actionable Insights</h3>
            </div>
          </div>
          <div class="feature-card__content">
            <p>Receive detailed compatibility analysis with practical suggestions to improve relationship outcomes.</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Journey / How it works -->
  <section id="journey" class="journey" aria-labelledby="journeyTitle">
    <div class="container">
      <h2 id="journeyTitle" class="section-title">Your Matching Journey</h2>
      <ol class="journey__steps">
        <li class="step">
          <div class="step__num">1</div>
          <h3>Create Profile</h3>
          <p>Enter your personal details and preferences.</p>
        </li>
        <li class="step">
          <div class="step__num">2</div>
          <h3>Adaptive Assessment</h3>
          <p>Complete a dynamic questionnaire based on your goals.</p>
        </li>
        <li class="step">
          <div class="step__num">3</div>
          <h3>Behavioral Analysis</h3>
          <p>The system identifies your traits, strengths, and compatibility factors.</p>
        </li>
        <li class="step">
          <div class="step__num">4</div>
          <h3>Intelligent Matching</h3>
          <p>Profiles are matched using tested psychological algorithms.</p>
        </li>
        <li class="step">
          <div class="step__num">5</div>
          <h3>Detailed Insights</h3>
          <p>You receive clear and practical compatibility explanations.</p>
        </li>
      </ol>
    </div>
  </section>

  <!-- Solutions (Cards) - UPDATED for relationship focus -->
  <section class="cards" aria-labelledby="solutionsTitle">
    <h2 id="solutionsTitle" class="visually-hidden">Relationship Insights</h2>
    <div class="card">
      <img src="assets/ring.png" alt="Relationship Compatibility">
      <h3>Relationship Compatibility</h3>
      <p>Understand how your values, expectations, and personality colours align with a potential partner.</p>
      <button class="card-cta" (click)="selectRole('marriage')">View Match Details</button>
    </div>
    <div class="card">
      <img src="assets/Hiring.png" alt="Interview & Hiring Match">
      <h3>Talent Optimization</h3>
      <p>Understand personality fit for team roles, leadership positions, and work environments.</p>
      <button class="card-cta" (click)="selectRole('hiring')">Start Hiring Smart</button>
    </div>
    <div class="card">
      <img src="assets/business.png" alt="Business Partner Match">
      <h3>Business Partnership</h3>
      <p>Find suitable partners for collaboration, startups, and long-term projects.</p>
      <button class="card-cta" (click)="selectRole('business')">Find Business Partners</button>
    </div>
  </section>

  <!-- Insights You Receive After Matching Section (Replacing Testimonials) -->
  <section class="testimonials" aria-labelledby="insightsTitle" *ngIf="showExampleOutcomes">
    <div class="container">
      <h2 id="insightsTitle" class="section-title">Insights You Receive After Matching</h2>
      <div class="testimonials-grid">
        <div class="testimonial">
          <div class="testimonial-avatar">
            <i class="fa-solid fa-heart"></i>
          </div>
          <div class="testimonial-content">
            <p>See areas where you and your match are strongly aligned, such as communication style, values, and life priorities.</p>
          </div>
          <div class="testimonial-author">
            <strong>Relationship Strengths</strong>
            <span>Understanding alignment areas</span>
          </div>
        </div>
        <div class="testimonial">
          <div class="testimonial-avatar">
            <i class="fa-solid fa-briefcase"></i>
          </div>
          <div class="testimonial-content">
            <p>Identify differences in expectations or personality colours that may need discussion and understanding.</p>
          </div>
          <div class="testimonial-author">
            <strong>Key Differences</strong>
            <span>Recognizing potential friction points</span>
          </div>
        </div>
        <div class="testimonial">
          <div class="testimonial-avatar">
            <i class="fa-solid fa-handshake"></i>
          </div>
          <div class="testimonial-content">
            <p>Receive simple, practical suggestions that can help you manage differences and build a healthier relationship.</p>
          </div>
          <div class="testimonial-author">
            <strong>Suggestions for Improvement</strong>
            <span>Building healthier relationships</span>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Special Content + Bottom CTA -->
  <section class="special-content" aria-labelledby="specialTitle">
    <div class="container">
      <h2 id="specialTitle" class="section-title">Get Your Questions Answered</h2>

      <div class="special-content__grid">
        <!-- FAQ Section -->
        <div class="special-card faq-card">
          <div class="special-card__header">
            <div class="special-card__icon gradient-ring">
              <i class="fa-solid fa-circle-question"></i>
            </div>
            <h3>Frequently Asked Questions</h3>
          </div>
          <div class="faq-grid">
            <!-- Converted to dynamic accordion -->
            <div class="faq-item"
                 *ngFor="let item of faqs; let i = index"
                 [class.open]="openFaqIndex === i">
              <button class="faq-question"
                      type="button"
                      (click)="toggleFaq(i)"
                      [attr.aria-expanded]="openFaqIndex === i"
                      [attr.aria-controls]="'faq-answer-' + i">
                <i class="fa-solid fa-{{item.icon}}"></i>
                <h4>{{item.question}}</h4>
                <span class="faq-toggle-icon" aria-hidden="true">
                  <i class="fa-solid" [ngClass]="openFaqIndex === i ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
                </span>
              </button>
              <div class="faq-answer"
                   [id]="'faq-answer-' + i"
                   role="region"
                   *ngIf="openFaqIndex === i">
                <p>{{item.answer}}</p>
              </div>
            </div>
          </div>
        </div>

        <!-- Contact Card -->
        <div class="special-card contact-card">
          <div class="special-card__header">
            <div class="special-card__icon gradient-ring">
              <i class="fa-solid fa-headset"></i>
            </div>
            <h3>Need Personalized Guidance?</h3>
          </div>
          <div class="contact-content">
            <p>Our matching specialists are here to help you navigate your compatibility journey and answer any specific questions about our process or results.</p>
            <div class="contact-features">
              <div class="contact-feature">
                <i class="fa-solid fa-check"></i>
                <span>Expert consultation</span>
              </div>
              <div class="contact-feature">
                <i class="fa-solid fa-check"></i>
                <span>Technical support</span>
              </div>
              <div class="contact-feature">
                <i class="fa-solid fa-check"></i>
                <span>Custom matching strategies</span>
              </div>
            </div>
            <a class="contact-btn btn btn-primary" href="https://pykara.ai/contact-us/" target="_blank" rel="noopener" aria-label="Contact Our Team">
              <i class="fa-solid fa-envelope"></i>
              <span>Contact Our Team</span>
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- Bottom CTA Sections -->
    <div class="cta-bottom" *ngIf="isSignedIn">
      <h3 class="cta-bottom__title">Ready to continue matching?</h3>
      <p class="cta-bottom__text">Jump back in and explore intelligent compatibility insights.</p>
      <button class="btn btn-secondary cta-bottom__btn" (click)="navigateToProfile()">
        Continue Your Journey
      </button>
    </div>

    <div class="cta-bottom" *ngIf="!isSignedIn">
      <h3 class="cta-bottom__title">Start Understanding Your Compatibility</h3>
      <p class="cta-bottom__text">Join users who want clear, structured insights into relationship compatibility.</p>
      <button class="btn btn-secondary cta-bottom__btn" (click)="openSignUp()">
        <i class="fa-solid fa-rocket"></i>
        Start Free Assessment
      </button>

      <div class="cta-bottom__trust">
        <div class="cta-bottom__trust-item">
          <i class="fa-solid fa-shield-halved"></i>
          <span>Private Results</span>
        </div>
        <div class="cta-bottom__trust-item">
          <i class="fa-solid fa-clock"></i>
          <span>10–15 Minute Assessment</span>
        </div>
        <div class="cta-bottom__trust-item">
          <i class="fa-solid fa-chart-line"></i>
          <span>Behavior-Guided Matching</span>
        </div>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="site-footer" role="contentinfo">
    <div class="site-footer__newsletter">
      <h4>Stay Updated</h4>
      <p>Get the latest insights on behavioral science and matching technology.</p>
      <div class="newsletter-form">
        <input type="email" placeholder="Enter your email" aria-label="Email for newsletter">
        <button class="btn btn-signup">Subscribe</button>
      </div>
    </div>

    <p class="site-footer__copy">© 2025 Pykara Technologies Pvt. Ltd. All rights reserved.</p>
    <div class="site-footer__row">
      <nav class="site-footer__links" aria-label="Footer navigation">
        <a href="#" (click)="$event.preventDefault(); openPrivacyModal();">Privacy Policy</a>
        <a href="https://pykara.ai/" target="_blank" rel="noopener">About Us</a>
        <a href="https://pykara.ai/contact-us/" target="_blank" rel="noopener">Contact</a>
        <a href="#" (click)="$event.preventDefault(); openTermsModal();">Terms & Conditions</a>
        <a href="#" (click)="$event.preventDefault(); scrollToFaq();">FAQ</a>
        <!-- Updated Support link to open chatbot -->
        <a href="#" (click)="$event.preventDefault(); openChatbot();">Support</a>
      </nav>
      <div class="site-footer__social" aria-label="Social media">
        <a href="https://www.facebook.com/profile.php?id=100087653675803" target="_blank" rel="noopener" aria-label="Facebook" class="FB_media"><i class="fa-brands fa-facebook-f"></i></a>
        <a href="https://www.youtube.com/@PykaraTechnologies" target="_blank" rel="noopener" aria-label="YouTube" class="YT_media"><i class="fa-brands fa-youtube"></i></a>
        <a href="https://www.linkedin.com/in/pykara-technologies" target="_blank" rel="noopener" aria-label="LinkedIn" class="LI_media"><i class="fa-brands fa-linkedin-in"></i></a>
        <a href="https://www.instagram.com/pykaratechnologie/" target="_blank" rel="noopener" aria-label="Instagram" class="Insta_media"><i class="fa-brands fa-instagram"></i></a>
      </div>
    </div>
  </footer>

  <!-- Global Auth Modal (use same structure as AppComponent) -->
  <div *ngIf="modal" class="modal-backdrop auth-modal-backdrop" (click)="backdropClick($event)">
    <div class="modal-panel modal-panel--white auth-modal-container" role="dialog" aria-modal="true" [attr.aria-label]="modal === 'signin' ? 'Sign in' : 'Sign up'" (click)="$event.stopPropagation()">
      <button type="button" class="modal-close" (click)="closeModal()" aria-label="Close">×</button>

      <!-- Sign In Component -->
      <app-sign-in *ngIf="modal === 'signin'"
                   (switchToSignUp)="openSignUp()"
                   (signInSuccess)="handleSignInSuccess()"></app-sign-in>

      <!-- Sign Up Component -->
      <app-sign-up *ngIf="modal === 'signup'"
                   (switchToSignIn)="openSignIn()"
                   (signUpSuccess)="handleSignUpSuccess()"></app-sign-up>
    </div>
  </div>

  <!-- ABOUT MODAL -->
  <div class="about-backdrop" *ngIf="isAboutOpen" (click)="closeAbout()" tabindex="-1"></div>
  <div class="about-modal"
       *ngIf="isAboutOpen"
       role="dialog"
       aria-modal="true"
       aria-labelledby="aboutTitle"
       id="aboutDialog"
       tabindex="-1">

    <div class="about-modal__header">
      <div class="about-modal__icon">
        <i class="fa-solid fa-heart"></i>
      </div>
      <div class="about-modal__title-section">
        <h2 id="aboutTitle" class="about-modal__title">About Py-Match</h2>
        <p class="about-modal__subtitle">Science-Driven Compatibility Matching</p>
      </div>
      <button class="about-modal__close"
              (click)="closeAbout()"
              aria-label="Close dialog">
        ×
      </button>
    </div>

    <div class="about-modal__body">
      <div class="about-modal__content">
        <div class="about-modal__intro">
          <p><strong>Transform Your Search for Meaningful Connections</strong></p>
          <p>Py-Match combines established psychological research with modern technology to help individuals understand compatibility in relationships.</p>

          <p>Our adaptive assessment adjusts to your responses and focuses on what matters most for your matching goals, creating a faster and more focused experience.</p>
        </div>

        <div class="feature-highlights">
          <div class="feature-highlight">
            <div class="feature-highlight__icon">
              <i class="fa-solid fa-flask"></i>
            </div>
            <h4>Research-Backed</h4>
            <p>Based on established psychological frameworks and behavioral models.</p>
          </div>
          <div class="feature-highlight">
            <div class="feature-highlight__icon">
              <i class="fa-solid fa-bolt"></i>
            </div>
            <h4>Adaptive Technology</h4>
            <p>Intelligent questioning that adapts to your responses in real-time</p>
          </div>
          <div class="feature-highlight">
            <div class="feature-highlight__icon">
              <i class="fa-solid fa-shield-halved"></i>
            </div>
            <h4>Privacy First</h4>
            <p>GDPR-aligned data handling with encrypted storage.</p>
          </div>
        </div>

        <div class="benefits-section">
          <h4 class="benefits-title">What You'll Experience</h4>
          <div class="benefits-grid">
            <div class="benefit-item">
              <i class="fa-solid fa-rocket"></i>
              <span><strong>15-Minute Assessment:</strong> Quick, focused questions that highlight meaningful patterns.</span>
            </div>
            <div class="benefit-item">
              <i class="fa-solid fa-chart-line"></i>
              <span><strong>Clear Insights:</strong> Compatibility indicators presented in a simple, easy-to-understand way.</span>
            </div>
            <div class="benefit-item">
              <i class="fa-solid fa-users"></i>
              <span><strong>Relationship Focused:</strong> Matching designed specifically for understanding relationship compatibility.</span>
            </div>
            <div class="benefit-item">
              <i class="fa-solid fa-lock"></i>
              <span><strong>Complete Privacy:</strong> Your data is secure and never sold or shared with third parties.</span>
            </div>
          </div>
        </div>

        <div class="about-modal__details">
          <p><strong>Our Mission:</strong> To make compatibility insights more accessible through science and technology, supporting stronger personal connections.</p>
        </div>
      </div>
    </div>

    <div class="about-modal__footer">
      <button class="about-modal__btn" (click)="closeAbout()">
        <i class="fa-solid fa-check"></i>
        Start Matching
      </button>
    </div>
  </div>

  <!-- Privacy Policy Modal -->
  <div class="about-backdrop" *ngIf="showPrivacyModal" (click)="closePrivacyModal()" tabindex="-1"></div>
  <div class="about-modal"
       *ngIf="showPrivacyModal"
       role="dialog"
       aria-modal="true"
       aria-labelledby="privacyTitle"
       id="privacyDialog"
       tabindex="-1">
    <div class="about-modal__header">
      <h2 id="privacyTitle" class="about-modal__title">Privacy Policy</h2>
      <button class="about-modal__close" (click)="closePrivacyModal()" aria-label="Close dialog">×</button>
    </div>
    <div class="about-modal__body">
      <div class="policy-intro">
        <p><strong>Last Updated: January 2025</strong></p>
        <p>At Py-Match, we are committed to protecting your privacy and ensuring the security of your personal information. This Privacy Policy explains how we collect, use, and safeguard your data.</p>
      </div>

      <div class="policy-points">
        <div class="policy-item">
          <div class="policy-icon">
            <i class="fa-solid fa-database"></i>
          </div>
          <div class="policy-content">
            <h4>Information We Collect</h4>
            <p>We collect information necessary for compatibility matching, including assessment responses, basic profile details, and communication preferences. We do not collect sensitive personal data without explicit consent.</p>
          </div>
        </div>

        <div class="policy-item">
          <div class="policy-icon">
            <i class="fa-solid fa-chart-line"></i>
          </div>
          <div class="policy-content">
            <h4>How We Use Your Information</h4>
            <p>Your data is used exclusively for compatibility analysis, matching services, and improving our platform. We never sell your personal information to third parties.</p>
          </div>
        </div>

        <div class="policy-item">
          <div class="policy-icon">
            <i class="fa-solid fa-shield-halved"></i>
          </div>
          <div class="policy-content">
            <h4>Data Security</h4>
            <p>We implement enterprise-grade security measures including encryption, secure servers, and regular security audits to protect your information from unauthorized access.</p>
          </div>
        </div>

        <div class="policy-item">
          <div class="policy-icon">
            <i class="fa-solid fa-user-check"></i>
          </div>
          <div class="policy-content">
            <h4>Your Rights</h4>
            <p>You have the right to access, correct, or delete your personal data at any time. You can also request data portability or withdraw consent for data processing.</p>
          </div>
        </div>

        <div class="policy-item">
          <div class="policy-icon">
            <i class="fa-solid fa-gavel"></i>
          </div>
          <div class="policy-content">
            <h4>Legal Compliance</h4>
            <p>We comply with GDPR, CCPA, and other applicable data protection regulations. For questions about your data, contact our Data Protection Officer at privacy@pykara.com.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="about-modal__footer">
      <button class="about-modal__btn" (click)="acceptPrivacyPolicy()">Accept & Continue</button>
    </div>
  </div>

  <!-- Terms & Conditions Modal -->
  <div class="about-backdrop" *ngIf="showTermsModal" (click)="closeTermsModal()" tabindex="-1"></div>
  <div class="about-modal"
       *ngIf="showTermsModal"
       role="dialog"
       aria-modal="true"
       aria-labelledby="termsTitle"
       id="termsDialog"
       tabindex="-1">
    <div class="about-modal__header">
      <h2 id="termsTitle" class="about-modal__title">Terms of Service</h2>
      <button class="about-modal__close" (click)="closeTermsModal()" aria-label="Close dialog">×</button>
    </div>
    <div class="about-modal__body">
      <div class="terms-intro">
        <p><strong>Effective Date: January 2025</strong></p>
        <p>By using Py-Match, you agree to these Terms of Service. Please read them carefully before using our platform.</p>
      </div>

      <div class="terms-sections">
        <div class="terms-section">
          <h4 class="terms-section-title">
            <i class="fa-solid fa-user"></i>
            Account Responsibilities
          </h4>
          <div class="terms-list">
            <div class="term-item">
              <i class="fa-solid fa-check"></i>
              <span>Provide accurate and complete information during registration</span>
            </div>
            <div class="term-item">
              <i class="fa-solid fa-check"></i>
              <span>Maintain the confidentiality of your login credentials</span>
            </div>
            <div class="term-item">
              <i class="fa-solid fa-check"></i>
              <span>Notify us immediately of any unauthorized account access</span>
            </div>
          </div>
        </div>

        <div class="terms-section">
          <h4 class="terms-section-title">
            <i class="fa-solid fa-chart-bar"></i>
            Service Usage
          </h4>
          <div class="terms-list">
            <div class="term-item">
              <i class="fa-solid fa-check"></i>
              <span>Py-Match is for personal relationship matching and compatibility analysis</span>
            </div>
            <div class="term-item">
              <i class="fa-solid fa-check"></i>
              <span>Do not misuse the service for harassment, spam, or illegal activities</span>
            </div>
            <div class="term-item">
              <i class="fa-solid fa-check"></i>
              <span>Respect the privacy and rights of other users</span>
            </div>
          </div>
        </div>

        <div class="terms-section">
          <h4 class="terms-section-title">
            <i class="fa-solid fa-lightbulb"></i>
            Intellectual Property
          </h4>
          <div class="terms-list">
            <div class="term-item">
              <i class="fa-solid fa-check"></i>
              <span>All platform content, algorithms, and technology belong to Pykara Technologies</span>
            </div>
            <div class="term-item">
              <i class="fa-solid fa-check"></i>
              <span>You retain ownership of your personal data and assessment responses</span>
            </div>
            <div class="term-item">
              <i class="fa-solid fa-check"></i>
              <span>Do not reproduce, copy, or exploit any part of the service without permission</span>
            </div>
          </div>
        </div>

        <div class="terms-section">
          <h4 class="terms-section-title">
            <i class="fa-solid fa-exclamation-triangle"></i>
            Limitations & Disclaimers
          </h4>
          <div class="terms-list">
            <div class="term-item">
              <i class="fa-solid fa-check"></i>
              <span>Compatibility results are based on behavioral models, not guarantees</span>
            </div>
            <div class="term-item">
              <i class="fa-solid fa-check"></i>
              <span>We reserve the right to modify or discontinue services with notice</span>
            </div>
            <div class="term-item">
              <i class="fa-solid fa-check"></i>
              <span>Service availability is not guaranteed and may be subject to interruptions</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="about-modal__footer">
      <button class="about-modal__btn" (click)="closeTermsModal()">I Understand</button>
    </div>
  </div>

  <!-- Cookie Consent Banner -->
  <!--<div class="cookie-consent" *ngIf="!privacyAccepted && !isLoading">
    <div class="cookie-content">
      <p>We use cookies to enhance your experience. By continuing to visit this site you agree to our use of cookies.</p>
      <div class="cookie-actions">
        <button class="cookie-btn cookie-accept" (click)="acceptPrivacyPolicy()">Accept</button>
        <button class="cookie-btn cookie-learn-more" (click)="openPrivacyModal()">Learn More</button>
      </div>
    </div>
  </div>-->
  <!-- Loader Overlay -->
  <div class="loader-overlay" *ngIf="isLoading">
    <div class="loader-container">
      <div class="modern-loader"></div>
      <p>Finding your perfect match...</p>
    </div>
  </div>

  <!-- Auth Required Popup -->
  <div *ngIf="showAuthRequiredPopup" class="modal-backdrop match-popup-backdrop" (click)="closeAuthRequiredPopup()">
    <div class="modal-panel match-popup-panel" role="dialog" aria-modal="true" aria-label="Authentication Required" (click)="$event.stopPropagation()">
      <button type="button" class="modal-close" (click)="closeAuthRequiredPopup()" aria-label="Close">×</button>
      <div class="popup-header">
        <div class="popup-icon">
          <i class="fa-solid fa-user-lock"></i>
        </div>
        <h3 class="popup-title">Authentication Required</h3>
      </div>
      <div class="popup-content">
        <p>Please sign in if you have an account, or sign up to start matching.</p>
      </div>
      <div class="popup-actions">
        <button type="button" class="btn btn-primary" (click)="handleSignInFromAuthRequired()">
          <i class="fa-solid fa-sign-in"></i> Sign In
        </button>
        <button type="button" class="btn btn-secondary" (click)="handleSignUpFromAuthRequired()">
          <i class="fa-solid fa-user-plus"></i> Sign Up
        </button>
      </div>
    </div>
  </div>

  <!-- Scroll Back To Top Button -->
  <button class="scroll-to-top"
          *ngIf="showScrollToTop"
          (click)="scrollToTop()"
          aria-label="Scroll back to top">
    <i class="fa-solid fa-arrow-up"></i>
  </button>

</section>