@extends('layouts.app')

@section('content')
    <div class="demo-page">
        <div class="demo-container">
            <!-- HEADER SECTION -->
            <header class="demo-header animate-slide-up">
                <div class="badge">Complete Platform Overview</div>
                <h1>The <span class="gradient-text">Master Blueprint</span></h1>
                <p>Explore every corner of the Excellence College Portal. This guide provides a deep-dive into the system
                    architecture, user workflows, and smart automation features.</p>

                <div class="quick-links">
                    <a href="#system-overview" class="link-card overview">
                        <span class="material-icons-round">analytics</span>
                        <span>System Stats</span>
                    </a>
                    <a href="#admin-workflow" class="link-card admin">
                        <span class="material-icons-round">admin_panel_settings</span>
                        <span>Admin Flow</span>
                    </a>
                    <a href="#staff-workflow" class="link-card staff">
                        <span class="material-icons-round">psychology</span>
                        <span>Staff Flow</span>
                    </a>
                    <a href="#student-workflow" class="link-card student">
                        <span class="material-icons-round">school</span>
                        <span>Student Flow</span>
                    </a>
                </div>
            </header>

            <!-- SYSTEM STATISTICS SECTION -->
            <section id="system-overview" class="stats-overview animate-slide-up-delayed">
                <div class="section-title">
                    <h2>📊 Live System Architecture</h2>
                    <p>Overview of the current system data distribution after a clean installation.</p>
                </div>
                <div class="stats-grid">
                    <div class="stat-box">
                        <span class="stat-num">05</span>
                        <span class="stat-label">Departments</span>
                    </div>
                    <div class="stat-box">
                        <span class="stat-num">40</span>
                        <span class="stat-label">Semesters</span>
                    </div>
                    <div class="stat-box">
                        <span class="stat-num">06</span>
                        <span class="stat-label">Categories</span>
                    </div>
                    <div class="stat-box">
                        <span class="stat-num">24</span>
                        <span class="stat-label">Courses</span>
                    </div>
                    <div class="stat-box">
                        <span class="stat-num">10</span>
                        <span class="stat-label">Faculty</span>
                    </div>
                    <div class="stat-box">
                        <span class="stat-num">20</span>
                        <span class="stat-label">Students</span>
                    </div>
                </div>
            </section>

            <!-- CREDENTIALS SECTION -->
            <section class="credentials-section">
                <div class="section-title">
                    <h2>🔐 Gateways & Access</h2>
                    <p>Use these credentials on the live portal to experience the system as different roles.</p>
                </div>
                <div class="credentials-grid">
                    <!-- Admin Card -->
                    <div class="cred-card admin">
                        <div class="card-header">
                            <span class="material-icons-round">security</span>
                            <h3>Administrator</h3>
                        </div>
                        <div class="card-body">
                            <div class="cred-item">
                                <label>URL</label>
                                <div class="value-box">
                                    <span>/login</span>
                                    <button onclick="copyToClipboard('{{ url('/login') }}')" class="copy-btn"><span
                                            class="material-icons-round">content_copy</span></button>
                                </div>
                            </div>
                            <div class="cred-item">
                                <label>Email</label>
                                <div class="value-box">
                                    <span>admin@college.com</span>
                                    <button onclick="copyToClipboard('admin@college.com')" class="copy-btn"><span
                                            class="material-icons-round">content_copy</span></button>
                                </div>
                            </div>
                            <div class="cred-item">
                                <label>Password</label>
                                <div class="value-box">
                                    <span>password</span>
                                    <button onclick="copyToClipboard('password')" class="copy-btn"><span
                                            class="material-icons-round">content_copy</span></button>
                                </div>
                            </div>
                        </div>
                        <a href="{{ route('login') }}" class="portal-btn">Launch Admin Portal</a>
                    </div>

                    <!-- Staff Card -->
                    <div class="cred-card staff">
                        <div class="card-header">
                            <span class="material-icons-round">badge</span>
                            <h3>Faculty Staff</h3>
                        </div>
                        <div class="card-body">
                            <div class="cred-item">
                                <label>URL</label>
                                <div class="value-box">
                                    <span>/staff/login</span>
                                    <button onclick="copyToClipboard('{{ url('/staff/login') }}')" class="copy-btn"><span
                                            class="material-icons-round">content_copy</span></button>
                                </div>
                            </div>
                            <div class="cred-item">
                                <label>Staff ID</label>
                                <div class="value-box">
                                    <span>FAC001</span>
                                    <button onclick="copyToClipboard('FAC001')" class="copy-btn"><span
                                            class="material-icons-round">content_copy</span></button>
                                </div>
                            </div>
                            <div class="cred-item">
                                <label>Password (DOB)</label>
                                <div class="value-box">
                                    <span>1976-02-05</span>
                                    <button onclick="copyToClipboard('1976-02-05')" class="copy-btn"><span
                                            class="material-icons-round">content_copy</span></button>
                                </div>
                            </div>
                        </div>
                        <a href="{{ route('staff.login') }}" class="portal-btn">Launch Faculty Hub</a>
                    </div>

                    <!-- Student Card -->
                    <div class="cred-card student">
                        <div class="card-header">
                            <span class="material-icons-round">person</span>
                            <h3>Student</h3>
                        </div>
                        <div class="card-body">
                            <div class="cred-item">
                                <label>URL</label>
                                <div class="value-box">
                                    <span>/student/login</span>
                                    <button onclick="copyToClipboard('{{ url('/student/login') }}')" class="copy-btn"><span
                                            class="material-icons-round">content_copy</span></button>
                                </div>
                            </div>
                            <div class="cred-item">
                                <label>Student ID</label>
                                <div class="value-box">
                                    <span>STU001</span>
                                    <button onclick="copyToClipboard('STU001')" class="copy-btn"><span
                                            class="material-icons-round">content_copy</span></button>
                                </div>
                            </div>
                            <div class="cred-item">
                                <label>Password (DOB)</label>
                                <div class="value-box">
                                    <span>2008-02-05</span>
                                    <button onclick="copyToClipboard('2008-02-05')" class="copy-btn"><span
                                            class="material-icons-round">content_copy</span></button>
                                </div>
                            </div>
                        </div>
                        <a href="{{ route('student.login') }}" class="portal-btn">Launch Student Hub</a>
                    </div>
                </div>
            </section>

            <!-- MODULE DEEP DIVE -->
            <section class="module-deep-dive">
                <div class="section-title">
                    <h2>🛠️ Module Architecture</h2>
                    <p>Discover how our independent modules work together to create a seamless experience.</p>
                </div>

                <div class="module-grid">
                    <div class="module-card">
                        <div class="module-icon"><span class="material-icons-round">business</span></div>
                        <h4>Department Management</h4>
                        <p>Hierarchical structure supporting multiple departments, each with its own specific curriculum and
                            semesters.</p>
                    </div>
                    <div class="module-card">
                        <div class="module-icon"><span class="material-icons-round">menu_book</span></div>
                        <h4>Smart Curriculum</h4>
                        <p>Subjects are categorized with intelligence, supporting credit weightage and prerequisite
                            validation.</p>
                    </div>
                    <div class="module-card">
                        <div class="module-icon"><span class="material-icons-round">psychology</span></div>
                        <h4>Faculty Allocation</h4>
                        <p>Advanced mapping between faculty expertise and subject requirements with workload balancing.</p>
                    </div>
                    <div class="module-card">
                        <div class="module-icon"><span class="material-icons-round">verified</span></div>
                        <h4>Credit Governance</h4>
                        <p>Strict enforcement of semester and total credit limits through a real-time validation engine.</p>
                    </div>
                </div>
            </section>

            <!-- WORKFLOW SECTIONS -->
            <div class="workflow-container">

                <!-- ADMIN WORKFLOW -->
                <section id="admin-workflow" class="workflow-section admin">
                    <div class="workflow-header">
                        <div class="icon-circle admin">
                            <span class="material-icons-round">settings_suggest</span>
                        </div>
                        <div class="title-group">
                            <h2>Admin Command Center</h2>
                            <p>Total system oversight and configuration</p>
                        </div>
                    </div>

                    <div class="steps-timeline">
                        <div class="step-item">
                            <div class="step-number">01</div>
                            <div class="step-content">
                                <h4>Academic Foundation</h4>
                                <p>Admin starts by defining <strong>Departments</strong> and their respective
                                    <strong>Semesters</strong>. This creates the backbone of the institution's data
                                    structure.
                                </p>
                                <div class="feature-tag">Department-specific Semesters</div>
                            </div>
                        </div>
                        <div class="step-item">
                            <div class="step-number">02</div>
                            <div class="step-content">
                                <h4>Intelligent Course Catalog</h4>
                                <p>Manage <strong>Subjects</strong> with precise categorization. Admins can assign credits
                                    and student limits to each course, ensuring standardized academic rigor.</p>
                                <ul class="check-list">
                                    <li>Subject Category Mapping</li>
                                    <li>Credit Weightage Control</li>
                                    <li>Enrollment Thresholds</li>
                                </ul>
                            </div>
                        </div>
                        <div class="step-item">
                            <div class="step-number">03</div>
                            <div class="step-content">
                                <h4>Dynamic Governance Limits</h4>
                                <p>Navigate to <strong>Settings</strong> to configure global constraints. This is where the
                                    AI logic gets its boundaries.</p>
                                <div class="settings-preview">
                                    <div><label>Max Credits/Sem</label><span>25</span></div>
                                    <div><label>Max Faculty Load</label><span>5 Subjects</span></div>
                                    <div><label>Total Credits</label><span>160</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- STAFF WORKFLOW -->
                <section id="staff-workflow" class="workflow-section staff">
                    <div class="workflow-header">
                        <div class="icon-circle staff">
                            <span class="material-icons-round">model_training</span>
                        </div>
                        <div class="title-group">
                            <h2>Faculty Excellence Hub</h2>
                            <p>Pedagogical management and student engagement</p>
                        </div>
                    </div>

                    <div class="steps-timeline">
                        <div class="step-item">
                            <div class="step-number">01</div>
                            <div class="step-content">
                                <h4>Workload Dashboard</h4>
                                <p>Faculty members have a clear view of their teaching load. Real-time metrics show exactly
                                    how many students have enrolled in their sessions.</p>
                                <div class="stat-pill">Faculty Load: 3 / 5 Subjects</div>
                            </div>
                        </div>
                        <div class="step-item">
                            <div class="step-number">02</div>
                            <div class="step-content">
                                <h4>Subject Preference Selection</h4>
                                <p>Staff can browse the <strong>Select Subjects</strong> module to request additional
                                    subjects based on their expertise, within the system-enforced load limits.</p>
                            </div>
                        </div>
                        <div class="step-item">
                            <div class="step-number">03</div>
                            <div class="step-content">
                                <h4>Student Roster Insights</h4>
                                <p>Access the <strong>My Students</strong> tab to see a filtered list of all students
                                    currently enrolled in the faculty’s specific subject allocations.</p>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- STUDENT WORKFLOW -->
                <section id="student-workflow" class="workflow-section student">
                    <div class="workflow-header">
                        <div class="icon-circle student">
                            <span class="material-icons-round">stars</span>
                        </div>
                        <div class="title-group">
                            <h2>Personalized Student Hub</h2>
                            <p>Autonomous learning journey management</p>
                        </div>
                    </div>

                    <div class="steps-timeline">
                        <div class="step-item">
                            <div class="step-number">01</div>
                            <div class="step-content">
                                <h4>Interactive Credit Tracker</h4>
                                <p>Immediate visual feedback on credit usage. Progress bars show how close the student is to
                                    their semester and total graduation requirements.</p>
                                <div class="progress-preview">
                                    <div class="p-bar">
                                        <div class="fill" style="width: 65%"></div>
                                    </div>
                                    <label>65% Semester Credits Used</label>
                                </div>
                            </div>
                        </div>
                        <div class="step-item">
                            <div class="step-number">02</div>
                            <div class="step-content">
                                <h4>Frictionless Allocation</h4>
                                <p>Students use the <strong>Subject Allocation</strong> wizard to browse categories, select
                                    subjects, and then pick from available faculty based on real-time capacity.</p>
                            </div>
                        </div>
                        <div class="step-item">
                            <div class="step-number">03</div>
                            <div class="step-content">
                                <h4>Proactive Conflict Prevention</h4>
                                <p>The system automatically blocks enrollment if it would violate any academic rules or if
                                    the class capacity is reached. No more registration errors.</p>
                            </div>
                        </div>
                    </div>
                </section>

            </div>

            <!-- TECHNICAL STACK SECTION -->
            <section class="tech-stack-section">
                <div class="section-title">
                    <h2>⚡ The Technical Foundation</h2>
                    <p>Built with modern, high-performance technologies for a reliable campus experience.</p>
                </div>
                <div class="tech-grid">
                    <div class="tech-item">
                        <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Laravel.svg" alt="Laravel">
                        <span>Laravel Engine</span>
                    </div>
                    <div class="tech-item">
                        <img src="https://upload.wikimedia.org/wikipedia/commons/d/d5/Tailwind_CSS_Logo.svg" alt="Tailwind">
                        <span>Tailwind UI</span>
                    </div>
                    <div class="tech-item">
                        <img src="https://raw.githubusercontent.com/alpinejs/alpine/main/art/logo.svg" alt="Alpine.js">
                        <span>Alpine Interaction</span>
                    </div>
                    <div class="tech-item">
                        <img src="https://www.mysql.com/common/logos/logo-mysql-170x115.png" alt="MySQL">
                        <span>RDBMS Stability</span>
                    </div>
                </div>
            </section>

            <!-- UNIQUE SELLING POINTS -->
            <section class="usp-section">
                <div class="section-title">
                    <h2>⭐ Why Choose Our Portal?</h2>
                    <p>What makes ours the most advanced academic management system on the market.</p>
                </div>
                <div class="usp-grid">
                    <div class="usp-item">
                        <span class="material-icons-round">bolt</span>
                        <h5>Zero Configuration</h5>
                        <p>Get up and running in minutes with our automated seeding and setup tools.</p>
                    </div>
                    <div class="usp-item">
                        <span class="material-icons-round">security</span>
                        <h5>Enterprise Grade</h5>
                        <p>Multi-portal architecture ensures total data isolation and security protocols.</p>
                    </div>
                    <div class="usp-item">
                        <span class="material-icons-round">palette</span>
                        <h5>Customizable UI</h5>
                        <p>Flexible theme engine allows centers to match their institution's branding.</p>
                    </div>
                    <div class="usp-item">
                        <span class="material-icons-round">auto_awesome</span>
                        <h5>AI Scheduling</h5>
                        <p>Propriatary logic eliminates scheduling overlaps and maximizes room utility.</p>
                    </div>
                </div>
            </section>

            <!-- FINAL CTA -->
            <footer class="demo-footer">
                <h3>Experience it yourself.</h3>
                <p>Ready to see these features in action on the live environment?</p>
                <div class="footer-btns">
                    <a href="{{ url('/') }}" class="home-btn">Platform Home</a>
                    <a href="https://collegeportal.aspirafile.co.in/" class="live-btn" target="_blank">Launch Live Demo</a>
                </div>
            </footer>
        </div>
    </div>

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700;800;900&display=swap');

        :root {
            --admin-color: #6366f1;
            --staff-color: #ec4899;
            --student-color: #0ea5e9;
            --accent-glow: rgba(99, 102, 241, 0.4);
            --bg-dark: #070b14;
            --bg-card: #0f172a;
            --text-light: #f8fafc;
            --glass: rgba(255, 255, 255, 0.03);
            --glass-border: rgba(255, 255, 255, 0.08);
        }

        .demo-page {
            font-family: 'Outfit', sans-serif;
            background: var(--bg-dark);
            color: var(--text-light);
            min-height: 100vh;
            padding: 100px 20px;
            overflow-x: hidden;
        }

        .demo-container {
            max-width: 1240px;
            margin: 0 auto;
        }

        /* Header */
        .demo-header {
            text-align: center;
            margin-bottom: 120px;
        }

        .badge {
            display: inline-block;
            padding: 10px 20px;
            background: rgba(99, 102, 241, 0.08);
            border: 1px solid rgba(99, 102, 241, 0.2);
            border-radius: 50px;
            color: #818cf8;
            font-weight: 800;
            font-size: 13px;
            letter-spacing: 3px;
            text-transform: uppercase;
            margin-bottom: 30px;
        }

        .demo-header h1 {
            font-size: clamp(3rem, 7vw, 5.5rem);
            font-weight: 900;
            margin-bottom: 30px;
            line-height: 0.95;
        }

        .gradient-text {
            background: linear-gradient(90deg, #818cf8, #f472b6, #38bdf8, #818cf8);
            background-size: 200% auto;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: textFlow 5s linear infinite;
        }

        @keyframes textFlow {
            to {
                background-position: 200% center;
            }
        }

        .demo-header p {
            font-size: 1.3rem;
            color: #94a3b8;
            max-width: 800px;
            margin: 0 auto 50px;
            line-height: 1.7;
        }

        /* System Stats */
        .stats-overview {
            margin-bottom: 150px;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 25px;
        }

        .stat-box {
            background: var(--bg-card);
            border: 1px solid var(--glass-border);
            padding: 30px;
            border-radius: 24px;
            text-align: center;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .stat-box:hover {
            transform: translateY(-10px) scale(1.05);
            border-color: var(--admin-color);
            box-shadow: 0 20px 40px -15px var(--accent-glow);
        }

        .stat-num {
            display: block;
            font-size: 3rem;
            font-weight: 900;
            color: white;
            margin-bottom: 5px;
        }

        .stat-label {
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #64748b;
            font-size: 12px;
        }

        /* Module Cards */
        .module-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
            margin-top: 50px;
        }

        .module-card {
            padding: 40px;
            border-radius: 32px;
            background: var(--glass);
            border: 1px solid var(--glass-border);
            transition: all 0.3s;
        }

        .module-card:hover {
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(255, 255, 255, 0.2);
        }

        .module-icon {
            width: 60px;
            height: 60px;
            background: rgba(99, 102, 241, 0.1);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--admin-color);
            margin-bottom: 25px;
        }

        .module-icon .material-icons-round {
            font-size: 32px;
        }

        .module-card h4 {
            font-size: 1.5rem;
            font-weight: 800;
            margin-bottom: 15px;
        }

        .module-card p {
            color: #94a3b8;
            line-height: 1.6;
            font-size: 0.95rem;
        }

        /* Links */
        .quick-links {
            display: flex;
            justify-content: center;
            gap: 15px;
            flex-wrap: wrap;
        }

        .link-card {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 14px 24px;
            background: var(--glass);
            border: 1px solid var(--glass-border);
            border-radius: 100px;
            text-decoration: none;
            color: white;
            font-weight: 700;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .link-card:hover {
            border-color: white;
            transform: scale(1.05);
        }

        /* Credentials */
        .credentials-section {
            margin-bottom: 150px;
        }

        .credentials-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 30px;
        }

        .cred-card {
            background: var(--bg-card);
            border: 1px solid var(--glass-border);
            border-radius: 32px;
            padding: 40px;
            transition: all 0.4s;
            position: relative;
        }

        .cred-card:hover {
            border-color: rgba(255, 255, 255, 0.3);
        }

        .cred-item label {
            display: block;
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            color: #64748b;
            margin-bottom: 8px;
        }

        .value-box {
            background: rgba(0, 0, 0, 0.3);
            padding: 15px 20px;
            border-radius: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-family: 'JetBrains Mono', monospace;
            font-weight: 600;
            font-size: 14px;
        }

        .portal-btn {
            display: block;
            width: 100%;
            text-align: center;
            padding: 18px;
            border-radius: 16px;
            text-decoration: none;
            font-weight: 800;
            margin-top: 25px;
            background: white;
            color: black;
            transition: all 0.3s;
        }

        .cred-card.admin .portal-btn {
            background: var(--admin-color);
            color: white;
        }

        .cred-card.staff .portal-btn {
            background: var(--staff-color);
            color: white;
        }

        .cred-card.student .portal-btn {
            background: var(--student-color);
            color: white;
        }

        /* Visual Previews */
        .feature-tag {
            display: inline-block;
            padding: 5px 12px;
            background: rgba(16, 185, 129, 0.1);
            color: #10b981;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 800;
            margin-top: 15px;
        }

        .settings-preview {
            background: rgba(0, 0, 0, 0.2);
            padding: 20px;
            border-radius: 16px;
            margin-top: 20px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .settings-preview div {
            display: flex;
            justify-content: space-between;
            font-size: 13px;
        }

        .settings-preview span {
            font-weight: 800;
            color: white;
        }

        .progress-preview {
            margin-top: 20px;
        }

        .p-bar {
            width: 100%;
            height: 10px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            overflow: hidden;
            margin-bottom: 10px;
        }

        .fill {
            height: 100%;
            background: linear-gradient(90deg, var(--student-color), #38bdf8);
            border-radius: 10px;
        }

        /* Tech Stack */
        .tech-stack-section {
            margin-bottom: 150px;
        }

        .tech-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 40px;
            margin-top: 60px;
        }

        .tech-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
        }

        .tech-item img {
            height: 50px;
            width: auto;
            opacity: 0.6;
            transition: opacity 0.3s;
        }

        .tech-item:hover img {
            opacity: 1;
        }

        .tech-item span {
            font-weight: 700;
            font-size: 14px;
            color: #64748b;
        }

        /* Workflow Specifics same as before but refined */
        .workflow-section {
            background: var(--bg-card);
            padding: 80px;
            border-radius: 48px;
            margin-bottom: 100px;
            border: 1px solid var(--glass-border);
        }

        .steps-timeline {
            padding-left: 60px;
        }

        .step-number {
            left: -100px;
            width: 60px;
            height: 60px;
            font-size: 1.4rem;
        }

        /* Sections Titles */
        .section-title {
            text-align: center;
            margin-bottom: 60px;
        }

        .section-title h2 {
            font-size: 3rem;
            font-weight: 900;
            margin-bottom: 15px;
        }

        /* Utilities */
        .copy-btn {
            background: transparent;
            border: none;
            color: #94a3b8;
            cursor: pointer;
        }

        .footer-btns {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 40px;
        }

        .home-btn,
        .live-btn {
            padding: 20px 40px;
            border-radius: 20px;
            font-weight: 800;
            text-decoration: none;
            transition: all 0.3s;
        }

        .home-btn {
            background: var(--glass);
            color: white;
            border: 1px solid var(--glass-border);
        }

        .live-btn {
            background: white;
            color: black;
        }

        /* USP Section */
        .usp-section {
            margin-bottom: 150px;
        }

        .usp-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 30px;
            margin-top: 50px;
        }

        .usp-item {
            background: var(--glass);
            padding: 40px;
            border-radius: 32px;
            border: 1px solid var(--glass-border);
            text-align: center;
            transition: all 0.3s;
        }

        .usp-item:hover {
            background: rgba(255, 255, 255, 0.05);
            transform: translateY(-5px);
        }

        .usp-item .material-icons-round {
            font-size: 40px;
            color: #818cf8;
            margin-bottom: 20px;
        }

        .usp-item h5 {
            font-size: 1.3rem;
            font-weight: 800;
            margin-bottom: 15px;
        }

        .usp-item p {
            color: #94a3b8;
            font-size: 0.9rem;
            line-height: 1.6;
        }

        /* Animations */
        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(40px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate-slide-up {
            animation: slideUp 0.8s ease-out forwards;
        }

        .animate-slide-up-delayed {
            animation: slideUp 0.8s ease-out 0.2s forwards;
            opacity: 0;
        }

        @media (max-width: 992px) {
            .workflow-section {
                padding: 40px;
            }

            .steps-timeline {
                padding-left: 40px;
            }

            .step-number {
                left: -75px;
                width: 50px;
                height: 50px;
            }
        }
    </style>

    <script>
        function copyToClipboard(text) {
            navigator.clipboard.writeText(text).then(() => {
                const toast = document.createElement('div');
                toast.style.cssText = 'position:fixed; bottom:30px; left:50%; transform:translateX(-50%); background:#818cf8; color:white; padding:12px 24px; border-radius:12px; font-weight:800; z-index:1000; animation:slideIn 0.3s ease-out;';
                toast.innerText = '✓ Copied to clipboard';
                document.body.appendChild(toast);
                setTimeout(() => toast.remove(), 2500);
            });
        }
    </script>
@endsection