<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Agritech | The Modern Nursery Ecosystem</title>

    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <script src="https://unpkg.com/@phosphor-icons/web"></script>

    <style>
        :root {
            --primary: #009f1c;
            --primary-light: #e6f6e8;
            --primary-dark: #007a15;
            --dark-navy: #0f172a;
            --slate-600: #475569;
            --slate-100: #f1f5f9;
            --white: #ffffff;
            --shadow-sm: 0 10px 30px rgba(0, 159, 28, 0.05);
            --shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.1);
        }

        body {
            font-family: 'Outfit', sans-serif;
            background-color: var(--white);
            color: var(--dark-navy);
            overflow-x: hidden;
        }

        /* --- Custom Scrollbar --- */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--slate-100); }
        ::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 10px; }

        /* --- Navbar --- */
        .navbar {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(15px);
            border-bottom: 1px solid var(--slate-100);
            padding: 15px 0;
            transition: 0.3s;
        }
        .navbar-brand { font-weight: 800; font-size: 1.6rem; letter-spacing: -1px; }
        .navbar-brand span { color: var(--primary); }

        /* --- Hero Section --- */
        .hero-section {
            padding: 160px 0 100px;
            background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
            position: relative;
        }
        .hero-title { font-size: 4.5rem; font-weight: 800; line-height: 1.1; margin-bottom: 25px; }
        .hero-title span { color: var(--primary); }
        
        .hero-img-box {
            position: relative;
            border-radius: 40px;
            overflow: hidden;
            box-shadow: var(--shadow-lg);
        }

        /* --- Stat Cards --- */
        .stat-card {
            background: var(--white);
            border: 1px solid var(--slate-100);
            padding: 25px;
            border-radius: 20px;
            text-align: center;
            transition: 0.3s;
        }
        .stat-card:hover { transform: translateY(-5px); border-color: var(--primary); }
        .stat-card h2 { color: var(--primary); font-weight: 800; margin: 0; }

        /* --- Professional Roles Section --- */
        .role-box {
            padding: 50px 30px;
            background: var(--white);
            border-radius: 32px;
            border: 1px solid var(--slate-100);
            height: 100%;
            transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .role-box:hover {
            box-shadow: var(--shadow-lg);
            border-color: var(--primary-light);
            transform: translateY(-10px);
        }
        .icon-circle {
            width: 70px;
            height: 70px;
            background: var(--primary-light);
            color: var(--primary);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            margin-bottom: 25px;
        }

        /* --- Process Steps Section --- */
        .step-circle {
            width: 40px;
            height: 40px;
            background: var(--primary);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            margin-bottom: 15px;
        }

        /* --- Inventory & Cards --- */
        .inventory-section { padding: 100px 0; background: #fafbfc; border-radius: 80px 80px 0 0; }
        
        .product-card {
            background: var(--white);
            border-radius: 28px;
            overflow: hidden;
            border: 1px solid var(--slate-100);
            transition: 0.3s;
        }
        .product-card:hover { box-shadow: var(--shadow-lg); }
        
        .img-container {
            height: 250px;
            position: relative;
        }
        .img-container img { width: 100%; height: 100%; object-fit: cover; }
        
        .badge-floating {
            position: absolute;
            top: 20px;
            right: 20px;
            background: rgba(255,255,255,0.9);
            padding: 6px 15px;
            border-radius: 100px;
            font-size: 0.8rem;
            font-weight: 700;
            color: var(--primary);
            backdrop-filter: blur(5px);
        }

        /* --- Buttons --- */
        .btn-primary {
            background: var(--primary) !important;
            border: none;
            padding: 15px 35px;
            border-radius: 16px;
            font-weight: 600;
            box-shadow: 0 10px 20px rgba(0, 159, 28, 0.2);
        }
        .btn-primary:hover { transform: scale(1.02); background: var(--primary-dark) !important; }

        /* --- Footer --- */
        footer { background: var(--dark-navy); color: #94a3b8; padding: 100px 0 40px; border-radius: 80px 80px 0 0; }
        footer h5 { color: white; font-weight: 700; }
    </style>
</head>
<body>

    <nav class="navbar navbar-expand-lg fixed-top">
        <div class="container">
            <a class="navbar-brand d-flex align-items-center" href="#">
                <i class="ph-fill ph-leaf-heart text-primary me-2"></i>
                <span>Agrt</span>Tech
            </a>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav mx-auto">
                    <li class="nav-item"><a class="nav-link px-3" href="#process">Process</a></li>
                    <li class="nav-item"><a class="nav-link px-3" href="#roles">Solutions</a></li>
                    <li class="nav-item"><a class="nav-link px-3" href="#inventory">Inventory</a></li>
                </ul>
                <div class="d-flex gap-3 align-items-center">
                    <a href="login.php" class="text-decoration-none fw-bold text-dark me-2">Sign In</a>
                    <button class="btn btn-primary text-white">Join the Hub</button>
                </div>
            </div>
        </div>
    </nav>

    <section class="hero-section">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <div class="d-inline-flex align-items-center bg-white border rounded-pill px-3 py-1 mb-4">
                        <span class="badge bg-primary rounded-pill me-2">New</span>
                        <small class="fw-bold">v2.0 Dashboard is now live!</small>
                    </div>
                    <h1 class="hero-title">Better Plants,<br><span>Smarter Tech.</span></h1>
                    <p class="fs-5 text-muted mb-5 pe-lg-5">
                        The ultimate digital ecosystem for nurseries. Track every growth phase, automate marketplace listings, and connect with verified distributors globally.
                    </p>
                    <div class="d-flex gap-3">
                        <button class="btn btn-primary text-white btn-lg">Start Free Trial</button>
                        <button class="btn btn-light btn-lg border"><i class="ph ph-presentation-chart me-2"></i> View Demo</button>
                    </div>
                </div>
                <div class="col-lg-6 mt-5 mt-lg-0">
                    <div class="hero-img-box">
                        <img src="https://images.unsplash.com/photo-1592150621744-aca64f48394a?auto=format&fit=crop&q=80&w=1200" class="img-fluid" alt="Greenhouse">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="pb-5">
        <div class="container">
            <div class="row g-4">
                <div class="col-md-3">
                    <div class="stat-card">
                        <h2>500+</h2>
                        <small class="text-muted fw-bold">Active Nurseries</small>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stat-card">
                        <h2>12k+</h2>
                        <small class="text-muted fw-bold">Orders Fulfilled</small>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stat-card">
                        <h2>98%</h2>
                        <small class="text-muted fw-bold">Plant Health Score</small>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stat-card">
                        <h2>$2M+</h2>
                        <small class="text-muted fw-bold">Trade Volume</small>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="py-5" id="process">
        <div class="container py-5">
            <div class="text-center mb-5">
                <h2 class="display-5 fw-800">How it <span class="text-primary">Works</span></h2>
            </div>
            <div class="row g-5">
                <div class="col-md-4">
                    <div class="step-circle">1</div>
                    <h5 class="fw-bold">Plant & Tag</h5>
                    <p class="text-muted">Register your new batch in the system and assign QR tags for individual tracking.</p>
                </div>
                <div class="col-md-4">
                    <div class="step-circle">2</div>
                    <h5 class="fw-bold">Monitor Growth</h5>
                    <p class="text-muted">Log growth stages, fertilization, and health reports directly from our mobile app.</p>
                </div>
                <div class="col-md-4">
                    <div class="step-circle">3</div>
                    <h5 class="fw-bold">Auto-Marketplace</h5>
                    <p class="text-muted">Once matured, plants are automatically listed for distributors to buy in bulk.</p>
                </div>
            </div>
        </div>
    </section>

    <section class="py-5" id="roles">
        <div class="container">
            <div class="row g-4">
                <div class="col-lg-3 col-md-6">
                    <div class="role-box">
                        <div class="icon-circle"><i class="ph-fill ph-leaf"></i></div>
                        <h5 class="fw-bold">Grow Stage</h5>
                        <p class="text-muted small">Specialized tracking for nurseries to monitor plant development.</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="role-box">
                        <div class="icon-circle"><i class="ph-fill ph-shopping-bag-open"></i></div>
                        <h5 class="fw-bold">Ready Sale</h5>
                        <p class="text-muted small">Real-time inventory for stock that is ready for the market.</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="role-box">
                        <div class="icon-circle"><i class="ph-fill ph-truck"></i></div>
                        <h5 class="fw-bold">Distributor</h5>
                        <p class="text-muted small">Logistics and bulk order management for supply chain partners.</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="role-box">
                        <div class="icon-circle"><i class="ph-fill ph-user-gear"></i></div>
                        <h5 class="fw-bold">Farmer Support</h5>
                        <p class="text-muted small">Providing farmers with seeds, tools, and technical guidance.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="inventory-section" id="inventory">
        <div class="container">
            <div class="d-flex justify-content-between align-items-end mb-5">
                <div>
                    <h2 class="display-6 fw-800 m-0">Live Marketplace</h2>
                    <p class="text-muted">Fresh stock updated every hour</p>
                </div>
                <button class="btn btn-outline-dark border-2 fw-bold rounded-pill">View All</button>
            </div>

            <div class="row g-4">
                <div class="col-lg-4">
                    <div class="product-card">
                        <div class="img-container">
                            <span class="badge-floating">In Growth</span>
                            <img src="https://images.unsplash.com/photo-1585314062340-f1a5a7c9328d?auto=format&fit=crop&q=80&w=800" alt="Plant">
                        </div>
                        <div class="p-4">
                            <div class="d-flex justify-content-between">
                                <h6 class="fw-bold">Premium Rose Saplings</h6>
                                <span class="text-primary fw-bold">45% Matured</span>
                            </div>
                            <div class="progress mt-2" style="height: 6px;">
                                <div class="progress-bar" style="width: 45%; background: var(--primary);"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="product-card">
                        <div class="img-container">
                            <span class="badge-floating" style="color: #f59e0b;">Ready to Ship</span>
                            <img src="https://images.unsplash.com/photo-1523348837708-15d4a09cfac2?auto=format&fit=crop&q=80&w=800" alt="Plant">
                        </div>
                        <div class="p-4">
                            <div class="d-flex justify-content-between">
                                <h6 class="fw-bold">Organic Aloe Vera</h6>
                                <span class="text-primary fw-bold">Bulk: $4.50/u</span>
                            </div>
                            <button class="btn btn-primary w-100 text-white mt-3 btn-sm">Reserve Batch</button>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="product-card">
                        <div class="img-container">
                            <span class="badge-floating">In Growth</span>
                            <img src="https://images.unsplash.com/photo-1466692476868-aef1dfb1e735?auto=format&fit=crop&q=80&w=800" alt="Plant">
                        </div>
                        <div class="p-4">
                            <div class="d-flex justify-content-between">
                                <h6 class="fw-bold">Medicinal Herbs Kit</h6>
                                <span class="text-primary fw-bold">12% Matured</span>
                            </div>
                            <div class="progress mt-2" style="height: 6px;">
                                <div class="progress-bar" style="width: 12%; background: var(--primary);"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <footer>
        <div class="container">
            <div class="row g-5">
                <div class="col-lg-5">
                    <h5 class="mb-4">AgroGrow</h5>
                    <p style="max-width: 350px;">The next generation of agriculture is here. We provide the tools to grow, manage, and sell with transparency and efficiency.</p>
                    <div class="d-flex gap-3 mt-4">
                        <i class="ph ph-instagram-logo fs-3"></i>
                        <i class="ph ph-linkedin-logo fs-3"></i>
                        <i class="ph ph-facebook-logo fs-3"></i>
                    </div>
                </div>
                <div class="col-lg-2 col-md-6">
                    <h6 class="text-white fw-bold mb-3">Links</h6>
                    <ul class="list-unstyled">
                        <li class="mb-2">Grow Cycle</li>
                        <li class="mb-2">Inventory</li>
                        <li class="mb-2">Distributors</li>
                    </ul>
                </div>
                <div class="col-lg-5 col-md-6">
                    <h6 class="text-white fw-bold mb-3">Newsletter</h6>
                    <p class="small">Get weekly updates on agriculture trends.</p>
                    <div class="d-flex gap-2 mt-3">
                        <input type="text" class="form-control bg-dark border-0 text-white p-3" placeholder="Email address">
                        <button class="btn btn-primary text-white px-4">Join</button>
                    </div>
                </div>
            </div>
            <hr class="my-5 border-secondary opacity-25">
            <p class="text-center small mb-0">© 2026 AgroGrow Digital. Professional Grade Nursery Management.</p>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // No extra JS needed for basic Phosphor use, but good for custom triggers if needed.
    </script>
</body>
</html>