from flask import Flask, render_template_string
from datetime import datetime

app = Flask(__name__)

HTML = r"""
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vertotech Technology</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        :root {
            --bg: #050816;
            --bg-alt: #070b1f;
            --accent: #4f46e5;
            --accent-soft: rgba(79, 70, 229, 0.18);
            --accent-strong: #6366f1;
            --text-main: #f9fafb;
            --text-muted: #9ca3af;
            --card-bg: rgba(15, 23, 42, 0.85);
            --border-subtle: rgba(148, 163, 184, 0.25);
            --danger: #f97373;
            --success: #22c55e;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            background: radial-gradient(circle at top, #111827 0, #020617 45%, #000 100%);
            color: var(--text-main);
            min-height: 100vh;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        .page {
            max-width: 1120px;
            margin: 0 auto;
            padding: 24px 16px 64px;
        }

        /* NAVBAR */
        .nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 32px;
        }

        .nav-left {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .logo-mark {
            width: 32px;
            height: 32px;
            border-radius: 12px;
            background: conic-gradient(from 180deg, #4f46e5, #22c55e, #06b6d4, #4f46e5);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 24px rgba(79, 70, 229, 0.7);
        }

        .logo-mark span {
            font-weight: 800;
            font-size: 16px;
            color: #0b1020;
        }

        .logo-text {
            display: flex;
            flex-direction: column;
        }

        .logo-text-main {
            font-weight: 700;
            letter-spacing: 0.04em;
            font-size: 18px;
        }

        .logo-text-sub {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.16em;
            color: var(--text-muted);
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 18px;
            font-size: 14px;
            color: var(--text-muted);
        }

        .nav-links a {
            position: relative;
            padding-bottom: 2px;
        }

        .nav-links a::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--accent), #22c55e);
            transition: width 0.2s ease-out;
        }

        .nav-links a:hover::after {
            width: 100%;
        }

        .nav-cta {
            padding: 8px 16px;
            border-radius: 999px;
            background: radial-gradient(circle at top left, #4f46e5, #1d4ed8);
            font-size: 13px;
            font-weight: 600;
            box-shadow: 0 10px 30px rgba(37, 99, 235, 0.45);
        }

        /* HERO */
        .hero {
            display: grid;
            grid-template-columns: minmax(0, 3fr) minmax(0, 2.5fr);
            gap: 32px;
            align-items: center;
            margin-bottom: 40px;
        }

        .hero-kicker {
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.18em;
            color: var(--accent-strong);
            margin-bottom: 10px;
        }

        .hero-title {
            font-size: clamp(32px, 4vw, 40px);
            font-weight: 800;
            line-height: 1.1;
            margin-bottom: 12px;
        }

        .hero-title span {
            background: linear-gradient(120deg, #4f46e5, #22c55e, #06b6d4);
            -webkit-background-clip: text;
            color: transparent;
        }

        .hero-subtitle {
            font-size: 14px;
            color: var(--text-muted);
            max-width: 460px;
            margin-bottom: 18px;
        }

        .hero-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 20px;
        }

        .badge {
            font-size: 11px;
            padding: 6px 10px;
            border-radius: 999px;
            border: 1px solid rgba(148, 163, 184, 0.35);
            background: rgba(15, 23, 42, 0.7);
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .badge-dot {
            width: 7px;
            height: 7px;
            border-radius: 999px;
            background: #22c55e;
            box-shadow: 0 0 12px rgba(34, 197, 94, 0.9);
        }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 18px;
        }

        .btn-primary {
            padding: 10px 20px;
            border-radius: 999px;
            border: none;
            background: linear-gradient(135deg, #4f46e5, #22c55e);
            color: white;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            box-shadow: 0 12px 35px rgba(79, 70, 229, 0.6);
        }

        .btn-ghost {
            padding: 9px 18px;
            border-radius: 999px;
            border: 1px solid rgba(148, 163, 184, 0.5);
            background: rgba(15, 23, 42, 0.7);
            color: var(--text-muted);
            font-size: 13px;
            cursor: pointer;
        }

        .hero-footnote {
            font-size: 11px;
            color: var(--text-muted);
        }

        .hero-footnote span {
            color: #22c55e;
            font-weight: 500;
        }

        /* HERO RIGHT: CARD */
        .hero-card {
            border-radius: 18px;
            padding: 18px;
            background: radial-gradient(circle at top left, rgba(79, 70, 229, 0.35), rgba(15, 23, 42, 0.95));
            border: 1px solid rgba(148, 163, 184, 0.35);
            box-shadow:
                0 20px 60px rgba(15, 23, 42, 0.9),
                0 0 40px rgba(79, 70, 229, 0.4);
            position: relative;
            overflow: hidden;
        }

        .hero-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 14px;
        }

        .hero-card-title {
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 0.18em;
            color: var(--text-muted);
        }

        .hero-card-pill {
            font-size: 11px;
            padding: 4px 10px;
            border-radius: 999px;
            background: rgba(15, 23, 42, 0.9);
            border: 1px solid rgba(148, 163, 184, 0.4);
        }

        .hero-card-main {
            margin-bottom: 16px;
        }

        .hero-card-main-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 4px;
        }

        .hero-card-main-sub {
            font-size: 12px;
            color: var(--text-muted);
        }

        .hero-metrics {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 10px;
            margin-bottom: 16px;
        }

        .metric {
            padding: 10px;
            border-radius: 12px;
            background: rgba(15, 23, 42, 0.9);
            border: 1px solid rgba(148, 163, 184, 0.35);
        }

        .metric-label {
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: 0.16em;
            color: var(--text-muted);
            margin-bottom: 4px;
        }

        .metric-value {
            font-size: 16px;
            font-weight: 600;
        }

        .metric-trend {
            font-size: 11px;
            margin-top: 2px;
        }

        .metric-trend.up {
            color: var(--success);
        }

        .metric-trend.down {
            color: var(--danger);
        }

        .hero-card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 11px;
            color: var(--text-muted);
        }

        .hero-card-footer span.highlight {
            color: #e5e7eb;
            font-weight: 500;
        }

        .hero-card-glow {
            position: absolute;
            width: 220px;
            height: 220px;
            border-radius: 999px;
            background: radial-gradient(circle, rgba(56, 189, 248, 0.4), transparent 60%);
            top: -80px;
            right: -60px;
            opacity: 0.7;
            pointer-events: none;
        }

        /* STATS STRIP */
        .stats-strip {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 14px;
            margin-bottom: 32px;
        }

        .stat-card {
            padding: 12px 14px;
            border-radius: 14px;
            background: rgba(15, 23, 42, 0.9);
            border: 1px solid var(--border-subtle);
        }

        .stat-label {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.16em;
            color: var(--text-muted);
            margin-bottom: 4px;
        }

        .stat-value {
            font-size: 18px;
            font-weight: 600;
        }

        .stat-note {
            font-size: 11px;
            color: var(--text-muted);
            margin-top: 2px;
        }

        /* FEATURES */
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            margin-bottom: 14px;
        }

        .section-title {
            font-size: 18px;
            font-weight: 600;
        }

        .section-subtitle {
            font-size: 12px;
            color: var(--text-muted);
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 14px;
            margin-bottom: 28px;
        }

        .feature-card {
            padding: 14px;
            border-radius: 14px;
            background: var(--card-bg);
            border: 1px solid var(--border-subtle);
            position: relative;
            overflow: hidden;
        }

        .feature-icon {
            width: 26px;
            height: 26px;
            border-radius: 999px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            margin-bottom: 8px;
            background: var(--accent-soft);
            color: var(--accent-strong);
        }

        .feature-title {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 4px;
        }

        .feature-desc {
            font-size: 12px;
            color: var(--text-muted);
        }

        .feature-tag {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 10px;
            padding: 3px 8px;
            border-radius: 999px;
            background: rgba(34, 197, 94, 0.12);
            color: #bbf7d0;
            border: 1px solid rgba(34, 197, 94, 0.4);
        }

        /* PRODUCTS / MODULES */
        .products-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 14px;
            margin-bottom: 28px;
        }

        .product-card {
            padding: 14px;
            border-radius: 14px;
            background: radial-gradient(circle at top, rgba(79, 70, 229, 0.25), rgba(15, 23, 42, 0.95));
            border: 1px solid rgba(129, 140, 248, 0.5);
        }

        .product-name {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 4px;
        }

        .product-desc {
            font-size: 12px;
            color: var(--text-muted);
            margin-bottom: 8px;
        }

        .product-pill {
            font-size: 11px;
            padding: 4px 8px;
            border-radius: 999px;
            background: rgba(15, 23, 42, 0.9);
            border: 1px solid rgba(148, 163, 184, 0.5);
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .product-pill-dot {
            width: 7px;
            height: 7px;
            border-radius: 999px;
            background: #22c55e;
        }

        /* TESTIMONIAL / CTA */
        .cta-row {
            display: grid;
            grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
            gap: 16px;
            margin-bottom: 32px;
        }

        .testimonial-card {
            padding: 16px;
            border-radius: 16px;
            background: var(--card-bg);
            border: 1px solid var(--border-subtle);
        }

        .testimonial-quote {
            font-size: 13px;
            margin-bottom: 10px;
        }

        .testimonial-author {
            font-size: 12px;
            color: var(--text-muted);
        }

        .cta-card {
            padding: 16px;
            border-radius: 16px;
            background: radial-gradient(circle at top left, rgba(79, 70, 229, 0.4), rgba(15, 23, 42, 0.95));
            border: 1px solid rgba(129, 140, 248, 0.6);
            text-align: left;
        }

        .cta-title {
            font-size: 15px;
            font-weight: 600;
            margin-bottom: 6px;
        }

        .cta-text {
            font-size: 12px;
            color: var(--text-muted);
            margin-bottom: 10px;
        }

        .cta-actions {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .cta-small {
            font-size: 11px;
            color: var(--text-muted);
            margin-top: 6px;
        }

        /* FOOTER */
        .footer {
            border-top: 1px solid rgba(31, 41, 55, 0.9);
            padding-top: 16px;
            font-size: 11px;
            color: var(--text-muted);
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 8px;
        }

        .footer-links {
            display: flex;
            gap: 12px;
        }

        .footer-links a {
            color: var(--text-muted);
        }

        /* RESPONSIVE */
        @media (max-width: 900px) {
            .hero {
                grid-template-columns: minmax(0, 1fr);
            }
            .hero-card {
                order: -1;
            }
            .stats-strip {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            .features-grid,
            .products-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            .cta-row {
                grid-template-columns: minmax(0, 1fr);
            }
        }

        @media (max-width: 640px) {
            .nav {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }
            .nav-links {
                display: none;
            }
            .stats-strip {
                grid-template-columns: minmax(0, 1fr);
            }
            .features-grid,
            .products-grid {
                grid-template-columns: minmax(0, 1fr);
            }
        }
    </style>
</head>
<body>
<div class="page">

    <!-- NAVBAR -->
    <nav class="nav">
        <div class="nav-left">
            <div class="logo-mark"><span>V</span></div>
            <div class="logo-text">
                <div class="logo-text-main">Vertotech</div>
                <div class="logo-text-sub">Technology Platform</div>
            </div>
        </div>
        <div class="nav-links">
            <a href="#features">Features</a>
            <a href="#modules">Modules</a>
            <a href="#pricing">Pricing</a>
            <a href="#support">Support</a>
            <a href="#login" class="nav-cta">Dashboard</a>
        </div>
    </nav>

    <!-- HERO -->
    <section class="hero">
        <div>
            <div class="hero-kicker">VERTOTECH TECHNOLOGY</div>
            <h1 class="hero-title">
                Infrastructure‑grade tools<br>
                for <span>serious Roblox operations.</span>
            </h1>
            <p class="hero-subtitle">
                Vertotech is your control layer for groups, games, and services—analytics, automation, and support
                stitched into one sleek platform.
            </p>

            <div class="hero-badges">
                <div class="badge">
                    <div class="badge-dot"></div>
                    Live status: All systems operational
                </div>
                <div class="badge">
                    99.9% uptime SLA
                </div>
                <div class="badge">
                    Built for high‑traffic experiences
                </div>
            </div>

            <div class="hero-actions">
                <button class="btn-primary">Get Started with Vertotech</button>
                <button class="btn-ghost">View Documentation</button>
            </div>

            <div class="hero-footnote">
                <span>Vertotech Technology</span> powers POS, analytics, staff tooling, and support flows—without you
                rewriting your game every update.
            </div>
        </div>

        <div class="hero-card">
            <div class="hero-card-glow"></div>
            <div class="hero-card-header">
                <div class="hero-card-title">Realtime Control Panel</div>
                <div class="hero-card-pill">Live environment · Production</div>
            </div>
            <div class="hero-card-main">
                <div class="hero-card-main-title">Vertotech Cortex Overview</div>
                <div class="hero-card-main-sub">
                    Unified metrics across POS, support, and staff activity—updated every few seconds.
                </div>
            </div>
            <div class="hero-metrics">
                <div class="metric">
                    <div class="metric-label">Active sessions</div>
                    <div class="metric-value">1,284</div>
                    <div class="metric-trend up">+18% vs last hour</div>
                </div>
                <div class="metric">
                    <div class="metric-label">Avg. response</div>
                    <div class="metric-value">2.3s</div>
                    <div class="metric-trend up">Optimised by autoscaling</div>
                </div>
                <div class="metric">
                    <div class="metric-label">Error rate</div>
                    <div class="metric-value">0.02%</div>
                    <div class="metric-trend down">−63% after Vertotech</div>
                </div>
            </div>
            <div class="hero-card-footer">
                <span>Environment: <span class="highlight">Production · EU‑1</span></span>
                <span>Last deploy: <span class="highlight">3 minutes ago</span></span>
            </div>
        </div>
    </section>

    <!-- STATS STRIP -->
    <section class="stats-strip">
        <div class="stat-card">
            <div class="stat-label">Groups powered</div>
            <div class="stat-value">120+</div>
            <div class="stat-note">From cafes to airlines to retail universes.</div>
        </div>
        <div class="stat-card">
            <div class="stat-label">Requests / minute</div>
            <div class="stat-value">75k</div>
            <div class="stat-note">Optimised for burst traffic and events.</div>
        </div>
        <div class="stat-card">
            <div class="stat-label">Average uptime</div>
            <div class="stat-value">99.97%</div>
            <div class="stat-note">Backed by multi‑region infrastructure.</div>
        </div>
    </section>

    <!-- FEATURES -->
    <section id="features">
        <div class="section-header">
            <div>
                <div class="section-title">Why Vertotech?</div>
                <div class="section-subtitle">A single control plane for your Roblox ecosystem.</div>
            </div>
        </div>

        <div class="features-grid">
            <div class="feature-card">
                <div class="feature-icon">⚙️</div>
                <div class="feature-title">Modular infrastructure</div>
                <div class="feature-desc">
                    Plug in POS, analytics, staff tools, and support modules without rewriting your core game logic.
                </div>
                <div class="feature-tag">Composable</div>
            </div>
            <div class="feature-card">
                <div class="feature-icon">📊</div>
                <div class="feature-title">Realtime analytics</div>
                <div class="feature-desc">
                    Track orders, sessions, staff performance, and support tickets in one unified dashboard.
                </div>
            </div>
            <div class="feature-card">
                <div class="feature-icon">🛡️</div>
                <div class="feature-title">Reliability first</div>
                <div class="feature-desc">
                    Built with redundancy, rate‑limiting, and graceful fallbacks so your players never see the chaos.
                </div>
            </div>
        </div>
    </section>

    <!-- MODULES / PRODUCTS -->
    <section id="modules">
        <div class="section-header">
            <div>
                <div class="section-title">Vertotech modules</div>
                <div class="section-subtitle">Pick what you need, scale when you’re ready.</div>
            </div>
        </div>

        <div class="products-grid">
            <div class="product-card">
                <div class="product-name">Vertotech POS</div>
                <div class="product-desc">
                    High‑fidelity POS flows for cafes, airlines, and retail—built to feel native to Roblox.
                </div>
                <div class="product-pill">
                    <span class="product-pill-dot"></span>
                    Live in production
                </div>
            </div>
            <div class="product-card">
                <div class="product-name">Vertotech Support</div>
                <div class="product-desc">
                    Integrated modmail, ticketing, and escalation pipelines that sync with your Discord and in‑game tools.
                </div>
                <div class="product-pill">
                    <span class="product-pill-dot"></span>
                    Discord + in‑game bridge
                </div>
            </div>
            <div class="product-card">
                <div class="product-name">Vertotech Insight</div>
                <div class="product-desc">
                    Deep analytics on player behaviour, staff performance, and monetisation—no spreadsheets required.
                </div>
                <div class="product-pill">
                    <span class="product-pill-dot"></span>
                    Advanced analytics
                </div>
            </div>
        </div>
    </section>

    <!-- TESTIMONIAL + CTA -->
    <section class="cta-row" id="pricing">
        <div class="testimonial-card">
            <div class="section-title" style="margin-bottom: 8px;">What teams say</div>
            <p class="testimonial-quote">
                “Vertotech let us centralise POS, staff tools, and support into one place. We stopped firefighting and
                started actually improving the experience.”
            </p>
            <p class="testimonial-author">
                — Operations Lead, high‑traffic Roblox group
            </p>
        </div>
        <div class="cta-card">
            <div class="cta-title">Ready to plug Vertotech into your universe?</div>
            <div class="cta-text">
                Start with a single module, or roll out the full stack. No lock‑in, no nonsense—just infrastructure that
                respects your time.
            </div>
            <div class="cta-actions">
                <button class="btn-primary">Book a technical preview</button>
                <button class="btn-ghost">Download integration guide</button>
            </div>
            <div class="cta-small">
                Need something bespoke? Vertotech can be tailored to your airline, cafe, or retail ecosystem.
            </div>
        </div>
    </section>

    <!-- FOOTER -->
    <footer class="footer" id="support">
        <div>© {{ year }} Vertotech Technology. All rights reserved.</div>
        <div class="footer-links">
            <a href="#features">Features</a>
            <a href="#modules">Modules</a>
            <a href="#pricing">Pricing</a>
            <a href="#support">Support</a>
        </div>
    </footer>

</div>
</body>
</html>
"""

@app.route("/")
def index():
    return render_template_string(HTML, year=datetime.utcnow().year)

if __name__ == "__main__":
    app.run(host="0.0.0.0", port=8000, debug=True)
