{% extends "base.html" %}
{% load static %}

{% block content %}


    <a href="{% url 'core:no_confidential_data' %}" class="no-conf-data">No confidential data!</a>

    <!-- Whitepaper Section -->
    <section class="whitepaper">
        <h1><b>Meet NIS2 Requirements:
        </b></h1>
        <h1><span class="title-org">Instantly See Your Top 10 Cybersecurity Risks</h1>
        <p style="max-width: 800px; margin: 0 auto 2rem;">RiskLM’s intuitive AI platform makes complex cyber risk assessments accessible to everyone, not just experts. Automatic analysis, generate compliant reports (NIS2, ISO, NIST, GDPR+), save time, reduce consultant costs, and ensure continuous security effortlessly.</p>
        <p><b>Download our free white paper showing exactly how Risklet pinpoints critical vulnerabilities for NIS2 compliance and recommends cost-effective controls.</b></p>
        <div class="hero-buttons" style="margin-top: 2rem;">
            <a href="{% url 'core:download_example_pdf' %}" class="btn-primary-orn">Download FREE Report Sample</a>
            <a href="#" class="btn-secondary-grn">Learn More</a>
        </div> 
    </section>

    <!-- Pricing Section -->
    <section class="pricing">
        <div class="component-title">PRICING & PLANS </div>
        <br>
        <h1>Simple Plans, Powerful Value</h1>
        <p>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
        <div class="pricing-grid">
            <!-- Basic Plan -->
            <div class="pricing-card">
                <h2><b>$49</b><span>/month</span></h2>
                <h3>Basic</h3>
                <a href="#" class="btn-pricing-blc">Get Started</a>
                <ul>
                    <li><span class="marked-org">&#10003</span> Monthly Billing (€49/month) or Annual Billing (€469/year)</li>
                    <li><span class="marked-org">&#10003</span> 4 report generations per year</li>
                    <li><span class="marked-org">&#10003</span> Optional control maturity recording</li>
                    <li><span class="marked-org">&#10003</span> Role Based Permissions</li>
                    <li><span class="marked-org">&#10003</span> Risk policy generation</li>
                    <li><span class="marked-org">&#10003</span> Email Support</li>
                </ul>
            </div>

            <!-- Standard Plan -->
            <div class="pricing-card org-b">
                <h2><b>$249</b><span>/One-time</span></h2>
                <h3>Standard</h3>
                <a href="#" class="btn-pricing-org">Get Started</a>
                <ul>
                    <li><span class="marked-org">&#10003</span> Top 10 Cybersecurity Risk Report</li>
                    <li><span class="marked-org">&#10003</span> Control recommendation</li>
                    <li><span class="marked-org">&#10003</span> Downloadable PDF</li>
                    <li><span class="marked-org">&#10003</span> Renew your assessment for €189</li>
                    <li><span class="marked-org">&#10003</span> Risk policy generation</li>
                    <li><span class="marked-org">&#10003</span> Email Support + 10 hours of phone support</li>
                </ul>
            </div>

            <!-- Pro Plan -->
            <div class="pricing-card">
                <h2><b>$2449</b><span>/year</span></h2>
                <h3>Risklet Pro</h3>
                <a href="#" class="btn-pricing-blc">Get Started</a>
                <ul>
                    <li><span class="marked-org">&#10003</span> Unlimited report generations</li>
                    <li><span class="marked-org">&#10003</span> Real-time visibility of risk posture</li>
                    <li><span class="marked-org">&#10003</span> Control maturity assessment questionnaire</li>
                    <li><span class="marked-org">&#10003</span> Role Based Permissions</li>
                    <li><span class="marked-org">&#10003</span> Risk policy generation</li>
                    <li><span class="marked-org">&#10003</span> Priority Support</li>
                </ul>
            </div>
        </div>
        <p style="text-align: center; margin-top: 2rem; color: #666;">All subscription models must be cancelled at least 30 days before the license is</p>
    </section>

    <!-- Insights Section -->
    <section class="insights">
        <h2>Latest Insights & Updates</h2>
        <div class="insights-grid">
            <!-- Insight 1 -->
            <div class="insight-card">
                <h5>NEVER OTHERS POST WORDPRESS</h5>
                <h3>Night Colors</h4>
                <p style="color: #888; margin: 0.5rem 0;">A. Verdasse • January 29, 2018</p>
                <p>Shaping bargain jeans ready made fashioning extraordinary apparel valuable looked pumps. Braiding shading sleeveless. Accessory halter sewing...</p>
            </div>

            <!-- Insight 2 -->
            <div class="insight-card">
                <h5>LIFESTYLE OTHERS PEOPLE WORDPRESS</h5>
                <h3>North Pole</h3>
                <p style="color: #888; margin: 0.5rem 0;">A. Verdasse • January 29, 2018</p>
                <p>Allure availability skirt artificial extra ordinary jewelry. Modification petticoat jersey hanger buttons influence proportion. Imprint accessory imagination...</p>
            </div>

            <!-- Insight 3 -->
            <div class="insight-card">
                <h5>NEWS OTHERS POST</h5>
                <h3>Lost Paradise</h3>
                <p style="color: #888; margin: 0.5rem 0;">A. Verdasse • January 29, 2018</p>
                <p>Leverage commercial frameworks to provide availability robust synopsis for trend watching level overviews. Iterative approaches to corporate...</p>
            </div>
        </div>
    </section>
    
    <!-- FAQ section -->
    <section class="faq">
        <br>
        <div class="component-title">FAQ</div>
        <br>
        <div class="faq-intro">
            <h1>Frequently Asked Questions</h1>
            <p>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
        </div>
        <div class="faq-grid">

            <div class="faq-card">
                <h3 class="faq-question">
                    <span class="faq-toggle">&#9654;</span>
                    How does Risklet work?
                </h3>
                <div class="faq-answer">
                    <p>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
                </div>
            </div>

            <div class="faq-card">
                <h3 class="faq-question">
                    <span class="faq-toggle">&#9654;</span>
                    What is the pricing model?</h3>
                <div class="faq-answer">
                    <p>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
                </div>
            </div>

            <div class="faq-card">
                <h3 class="faq-question">
                    <span class="faq-toggle">&#9654;</span>
                    How do I get support?</h3>
                <div class="faq-answer">
                    <p>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Hero Section -->
    <section class="hero">
        <div class="component-title">GET STARTED</div>
        <br>
        <h1>Elevate Your Business with Smart,<br>Scalable Solutions!</h1>
        <p>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
        <div class="hero-buttons" style="margin-top: 2rem;">
            <a href="#" class="btn-primary-orn">Start Your Free Trial</a>
            <a href="#" class="btn-secondary-grn org-t">Schedule Demo</a>
        </div>
    </section>



<script>
document.querySelectorAll('.faq-question').forEach(function(q) {
    q.addEventListener('click', function() {
        document.querySelectorAll('.faq-card').forEach(function(card) {
            if (card !== q.parentElement) card.classList.remove('active');
        });
        q.parentElement.classList.toggle('active');
    });
});
</script>

{% endblock %}