20squares.github.io/systems.html at main · 20squares/20squares.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Complex Systems Services | 20squares</title>
    <meta name="description"
        content="Full-stack engineering services for high-stakes distributed systems. Economic Modeling, Mechanism Design, and Revenue Analytics.">

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,600;1,400&family=Inter:wght@300;400;500;600&display=swap"
        rel="stylesheet">

    <!-- Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <!-- Styles -->
    <link rel="stylesheet" href="style.css">

    <!-- Favicon -->
    <link rel="icon" href="img/logowhite.svg">
</head>

<body>
    <header>
        <div class="container">
            <nav>
                <a href="index.html" class="logo">
                    <img src="img/logowhite.svg" alt="20squares Logo" style="height: 32px; width: auto; opacity: 0.9;">
                </a>
                <div class="mobile-menu-btn">
                    <i class="fas fa-bars"></i>
                </div>
                <div class="nav-links">
                    <a href="crypto.html">Crypto</a>
                    <a href="systems.html" class="active">Systems</a>
                    <a href="ventures.html">Ventures</a>
                    <a href="about.html">About</a>

                </div>
            </nav>
        </div>
    </header>

    <main>
        <section class="hero" style="min-height: 50vh;">
            <div class="container fade-in">
                <span class="hero-label">Capabilities</span>
                <h1>Complex <span style="color: var(--text-muted);">Systems</span></h1>
                <p>We provide end-to-end solutions for the decentralized economy. From theoretical design to production
                    deployment.</p>
            </div>
        </section>

        <section>
            <div class="container">
                <div class="grid-3">
                    <a href="services/economics.html" class="card fade-in">
                        <i class="fas fa-chart-line card-icon"></i>
                        <h3>Economic Modeling</h3>
                        <p>Data-driven simulations to stress-test your system. Markets, pricing, risk management and
                            more.</p>
                        <span class="link-arrow">Explore <i class="fas fa-arrow-right"></i></span>
                    </a>
                    <a href="services/mechanism.html" class="card fade-in">
                        <i class="fas fa-chess card-icon"></i>
                        <h3>Mechanism Design</h3>
                        <p>Engineering efficient, manipulation-resistant markets. Auctions and matching systems.</p>
                        <span class="link-arrow">Explore <i class="fas fa-arrow-right"></i></span>
                    </a>
                    <a href="services/revenue.html" class="card fade-in">
                        <i class="fas fa-magnifying-glass-dollar card-icon"></i>
                        <h3>Revenue Analytics</h3>
                        <p>Optimizing fees and maximizing revenue through data-driven analysis. Aviation, Gaming, and
                            Finance.</p>
                        <span class="link-arrow">Explore <i class="fas fa-arrow-right"></i></span>
                    </a>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <div class="container">
            <div class="footer-grid">
                <div>
                    <img src="img/logowhite.svg" alt="20squares"
                        style="height: 24px; margin-bottom: 20px; opacity: 0.5;">
                    <p style="font-size: 0.8rem; max-width: 300px;">Mannheim, Germany<br>DE362667647</p>
                </div>
                <div class="footer-links">
                    <h4 style="font-size: 1rem; margin-bottom: 1rem; color: var(--text-main);">Contact</h4>
                    <ul>
                        <li><a href="mailto:info@20squares.xyz">info@20squares.xyz</a></li>
                        <li><a href="mailto:info@20squares.com">info@20squares.com</a></li>
                        <li><span style="color: var(--text-muted);">name@20squares.xyz</span> <span
                                style="color: var(--text-muted); font-size: 0.8em;">(Team)</span></li>
                    </ul>
                </div>
                <div class="footer-links">
                    <h4 style="font-size: 1rem; margin-bottom: 1rem; color: var(--text-main);">Connect</h4>
                    <ul>
                        <li><a href="https://www.linkedin.com/company/20squares" target="_blank">LinkedIn</a></li>
                        <li><a href="https://blog.20squares.xyz" target="_blank">Blog</a></li>
                    </ul>
                </div>

            </div>
            <div
                style="margin-top: 60px; padding-top: 20px; border-top: 1px solid var(--card-border); display: flex; justify-content: space-between; font-size: 0.75rem;">
                <span>&copy; 2025 20squares UG.</span>
                <a href="impressum.html">Impressum</a>
            </div>
        </div>
    </footer>

    <script src="script.js"></script>
</body>

</html>