{% extends "base.html" %}

{% block title %}About Us | Crawlio Intelligence{% endblock %}

{% block content %}
<section class="hero"
    style="padding: 6rem 0; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
    <div class="container text-center">
        <h1>Democratizing Strategic Intelligence</h1>
        <p style="font-size: 1.25rem; opacity: 0.9; max-width: 800px; margin: 1rem auto;">Bridging the gap between
            disparate data ecosystems and institutional-grade market intelligence.</p>
    </div>
</section>

<section class="section" style="max-width: 900px; margin: 0 auto;">
    <div class="container">
        <div style="margin-bottom: 4rem;">
            <h2 style="margin-bottom: 1.5rem; color: var(--primary-color);">Our Vision</h2>
            <p style="font-size: 1.15rem; line-height: 1.7;">Crawlio Intelligence was founded on a singular premise:
                institutional-grade data should be accessible to all strategic decision-makers. We eliminate the
                friction of complex data acquisition, transforming the web into a structured source of truth for global
                enterprises and emerging startups alike.</p>
        </div>

        <div
            style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-bottom: 4rem;">
            <div class="card"
                style="padding: 2rem; border-radius: 12px; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.05);">
                <h3 style="margin-bottom: 1rem;">Intelligent Automation</h3>
                <p>We leverage high-fidelity automation and advanced rendering technologies to handle the most demanding
                    data environments. Our platform ensures consistent data delivery regardless of source complexity.
                </p>
            </div>
            <div class="card"
                style="padding: 2rem; border-radius: 12px; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.05);">
                <h3 style="margin-bottom: 1rem;">Enterprise Reliability</h3>
                <p>From distributed proxy networks to sophisticated anti-detection systems, we maintain a robust
                    infrastructure that scales with your growth. We focus on the data pipeline so you can focus on the
                    strategy.</p>
            </div>
        </div>

        <h2 style="margin-bottom: 1.5rem; color: var(--primary-color);">Global Compliance & Ethics</h2>
        <p style="margin-bottom: 1.5rem;">We believe in the responsible advancement of data intelligence. Crawlio
            Intelligence adheres to established global frameworks and references official registries to maintain the
            highest standards of transparency.</p>
        <div style="display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem;">
            <a href="https://www.eff.org/" target="_blank" rel="noopener noreferrer" class="btn-outline"
                style="padding: 0.5rem 1rem; font-size: 0.85rem;">Digital Rights Registry</a>
            <a href="https://www.opensourceshared.org/" target="_blank" rel="noopener noreferrer" class="btn-outline"
                style="padding: 0.5rem 1rem; font-size: 0.85rem;">Ethical Data Commons</a>
        </div>

        <h2 style="margin-bottom: 1.5rem; color: var(--primary-color);">The Crawlio Advantage</h2>
        <p style="margin-bottom: 1.5rem;">Crawlio Intelligence provides a unified ecosystem for your data needs:</p>
        <ul style="margin-bottom: 2rem; line-height: 1.8; padding-left: 1.2rem;">
            <li><strong>AI-Powered Synthesis:</strong> Directly extract actionable insights without the overhead of
                manual data mapping.</li>
            <li><strong>Scalable Delivery:</strong> Flexible architecture designed to support everything from localized
                research to global dataset aggregation.</li>
            <li><strong>Decision-Centric Design:</strong> Every feature is built to accelerate your path from raw data
                to strategic clarity.</li>
            <li><strong>Uninterrupted Flow:</strong> We proactively manage data connectivity to ensure your pipelines
                remain healthy and synchronized.</li>
        </ul>

        <div
            style="background: linear-gradient(135deg, var(--slack-purple) 0%, #764ba2 100%); padding: 4rem 3rem; border-radius: 24px; text-align: center; color: white; box-shadow: 0 20px 40px rgba(74, 21, 75, 0.2); margin-top: 4rem;">
            <h2 style="margin-bottom: 1.5rem; color: white; font-size: 2.25rem; font-weight: 800;">Ready to empower your
                strategy?</h2>
            <p
                style="margin-bottom: 2.5rem; font-size: 1.2rem; opacity: 0.9; max-width: 600px; margin-left: auto; margin-right: auto;">
                Join the growing network of organizations leveraging Crawlio Intelligence for a definitive market edge.
            </p>
            <div style="display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap;">
                <a href="/register" class="btn-primary"
                    style="background: white; color: var(--slack-purple) !important; padding: 1rem 2rem; border-radius: 50px; font-weight: 700; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.1);">Initiate
                    Platform Access</a>
                <a href="/contact" class="btn-outline"
                    style="color: white; border-color: rgba(255,255,255,0.4); padding: 1rem 2rem; border-radius: 50px; text-decoration: none; transition: all 0.3s ease; font-weight: 600;">Consult
                    an Expert</a>
            </div>
        </div>
    </div>
</section>
{% endblock %}