From 2d3eb0d44eab06363c3a6d8789bdd04fcef6b61e Mon Sep 17 00:00:00 2001 From: CL-BAF Date: Sat, 11 Oct 2025 23:04:30 +1100 Subject: [PATCH] Add landing page for Minecraft Server Finder Introduces index.html, script.js, and style.css for a new landing page. Features a modern UI, highlights, architecture overview, quick start guide, metrics, and ethics section, with interactive and animated elements for improved user experience. --- Index/index.html | 276 ++++++++++++++++++ Index/script.js | 69 +++++ Index/style.css | 723 +++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 1068 insertions(+) create mode 100644 Index/index.html create mode 100644 Index/script.js create mode 100644 Index/style.css diff --git a/Index/index.html b/Index/index.html new file mode 100644 index 0000000..0e2e6b7 --- /dev/null +++ b/Index/index.html @@ -0,0 +1,276 @@ + + + + + + + Minecraft Server Finder + + + + + + +
+
+
+
+ +
+ +
+
+ IPv4 Intelligence Scanner +

Discover Minecraft servers without guesswork.

+

A multi-threaded, protocol-aware toolkit that sweeps massive address spaces, rotates proxies, parses MOTDs, and keeps your findings organised.

+
+ View on GitHub + Launch Guide +
+
    +
  • ThreadPool powered
    • +
  • SOCKS5 Rotation
    • +
  • GUI + Headless
    • +
  • PyInstaller ready
    • +
+
+
+
+
+ + Live Scan + 152 hosts/s +
+
+
+ 104.19.89.21:25565 + 43 ms + 1.20.4 +
+
+ 172.67.72.44:25565 + 97 ms + 1.19.4 +
+
+ 198.51.100.47:25565 + 12 ms + 1.21.x +
+
+ 203.0.113.140 + probing… + — +
+
+ 8.8.8.8:25565 + timeout + — +
+
+
+ Active Workers + 150 + Proxy Health + 98% +
+
+
+
+
+ +
+
+
+ Why teams pick it +

High-throughput scanning with deep Minecraft context.

+

Born from real-world sweeps that demanded reliability, every subsystem is tuned for signal over noise.

+
+
+
+
+ +
+

Ludicrous throughput

+

ThreadPool executors, bounded queues, and adaptive backpressure keep 150+ workers blasting through IPv4 without overwhelming your uplink.

+
+
+
+ +
+

Protocol-aware detection

+

Performs proper Java handshake, extracts MOTD, version hints, player counts, and gracefully toggles to mcstatus for richer telemetry.

+
+
+
+ +
+

Proxy-first resilience

+

Battle-tested SOCKS5 rotation with cooldown tracking, exponential backoff, and live health metrics so your long scans never stall.

+
+
+
+ +
+

Mullvad automation ready

+

Optional Mullvad CLI integration cycles VPN exits on schedule, keeping proxy pools fresh during multi-hour campaigns.

+
+
+
+ +
+

Persistent intelligence

+

StorageManager writes confirmed hits, open ports, and GUI state to shareable artefacts you can sync, diff, and revisit later.

+
+
+
+ +
+

GUI or headless

+

Launch the polished Tkinter interface for visual oversight or run purely from the CLI with rich logging and configurable flags.

+
+
+
+ +
+
+ Under the hood +

Modular by design. Embed the engine anywhere.

+

The scanning core lives in mcsmartscan, ready for reuse in your own automations or security pipelines.

+
+
+
+ +

mcsmartscan.utils

+

Feistel-based permutation generators reshuffle large IPv4 ranges while guaranteeing full coverage without duplicates.

+
+
+ +

mcsmartscan.proxy

+

ProxyPool manages SOCKS5 endpoints, health scoring, cooldown enforcement, and handshake fallbacks when targets misbehave.

+
+
+ +

mcsmartscan.storage

+

Desktop-aware persistence routes outputs to user-friendly destinations and keeps GUI session state intact between runs.

+
+
+ +

mcsmartscan.vpn

+

MullvadManager talks to the Mullvad CLI/SDK, rotates exits, and surfaces telemetry hooks so you can monitor VPN freshness.

+
+
+ +

app.py orchestrator

+

Wires everything together with Tkinter views, console fallbacks, worker pools, proxy telemetry, and optional mcstatus probes.

+
+
+
+ +
+
+ Five minute launch +

Get scanning in four easy commands.

+

Works on Windows, macOS, and Linux. Bring your own virtualenv, or ship the PyInstaller build straight to teammates.

+
+
+
+
    +
  1. Clone the repo & enter the directory
    2. +
  2. Create a virtual environment (recommended)
    3. +
  3. Install core + optional dependencies
    4. +
  4. Launch the GUI or run headless
    5. +
+
+
+ 
git clone https://github.com/braydos-h/Minecraft-Server-Finder.git
+cd Minecraft-Server-Finder
+python -m venv .venv
+# Windows: .venv\Scripts\activate
+# macOS/Linux: source .venv/bin/activate
+pip install -r requirements.txt
+python app.py  # GUI mode
+# or: python app.py --start 40.0.0.0 --end 45.255.255.255 --headless
+
+
+
+
+

Build an executable

+

Fire pyinstaller.ps1 to generate a Windows-friendly bundle. GitHub Actions mirrors the same flow for release automation.

+
+
+

Automate the install

+

Use install_system.bat for rapid workstation setup. Optional extras like mcstatus and python-nmap enhance detection.

+
+
+
+ +
+
+
+ 0 + Concurrent sockets tested per minute with defaults +
+
+ 0 + Proxy pool health maintained during 24h sweep +
+
+ 0 + Platforms supported: Windows, macOS, Linux +
+
+ 0 + Percent control retained over storage paths +
+
+
+ +
+
+ Safety first +

Respect the internet. Scan responsibly.

+

Only target infrastructure you own or have explicit permission to test. Minecraft Server Finder is a powerful tool—use it responsibly.

+
+
+
+

Permission is paramount

+

Unauthorised scanning can breach local laws, ISP policies, and provider terms of service. Always secure written approval.

+
+
+

Throttle thoughtfully

+

Adjust worker counts, timeouts, and proxy pools to respect upstream rate limits, especially when testing shared infrastructure.

+
+
+

Handle findings with care

+

Confirmed servers may expose sensitive MOTDs or player data. Share responsibly and coordinate disclosure with server operators.

+
+
+
+
+ + + + + + diff --git a/Index/script.js b/Index/script.js new file mode 100644 index 0000000..b88b0fa --- /dev/null +++ b/Index/script.js @@ -0,0 +1,69 @@ +document.addEventListener("DOMContentLoaded", () => { + const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches; + const reveals = document.querySelectorAll(".reveal"); + const nav = document.querySelector(".nav"); + const counters = document.querySelectorAll(".metric-number[data-target]"); + const counterState = new WeakMap(); + + if (!prefersReducedMotion && "IntersectionObserver" in window) { + const observer = new IntersectionObserver( + entries => { + entries.forEach(entry => { + if (entry.isIntersecting) { + const target = entry.target; + window.requestAnimationFrame(() => target.classList.add("is-visible")); + if (target.classList.contains("metric-card")) { + animateCounters(target.querySelector(".metric-number")); + } + observer.unobserve(target); + } + }); + }, + { threshold: 0.18, rootMargin: "0px 0px -40px 0px" } + ); + + reveals.forEach(el => observer.observe(el)); + } else { + reveals.forEach(el => el.classList.add("is-visible")); + counters.forEach(el => (el.textContent = el.dataset.target)); + } + + window.addEventListener("scroll", () => { + if (window.scrollY > 24) { + nav.classList.add("scrolled"); + } else { + nav.classList.remove("scrolled"); + } + }); + + function animateCounters(element) { + if (!element || counterState.has(element)) { + return; + } + + const targetValue = Number(element.dataset.target || "0"); + const duration = 1200; + const start = performance.now(); + + counterState.set(element, true); + + function update(now) { + const progress = Math.min((now - start) / duration, 1); + const eased = easeOutQuint(progress); + const value = Math.round(targetValue * eased); + element.textContent = value.toString(); + + if (progress < 1) { + requestAnimationFrame(update); + } else { + element.textContent = targetValue.toString(); + } + } + + requestAnimationFrame(update); + } + + function easeOutQuint(t) { + return 1 - Math.pow(1 - t, 5); + } +}); diff --git a/Index/style.css b/Index/style.css new file mode 100644 index 0000000..159e1a0 --- /dev/null +++ b/Index/style.css @@ -0,0 +1,723 @@ +/* Global tokens */ +:root { + --bg-gradient-start: #0b0f1b; + --bg-gradient-end: #16213a; + --accent: #4d9ef8; + --accent-soft: rgba(77, 158, 248, 0.12); + --accent-strong: #61f2d1; + --surface: rgba(18, 24, 39, 0.72); + --surface-elevated: rgba(24, 32, 54, 0.88); + --text-primary: #f4f7ff; + --text-secondary: rgba(244, 247, 255, 0.72); + --border: rgba(255, 255, 255, 0.06); + --shadow: 0 18px 45px rgba(5, 8, 18, 0.45); + --radius-xl: 28px; + --radius-lg: 20px; + --radius-md: 16px; + --radius-sm: 12px; + --section-padding: clamp(4rem, 6vw, 6rem); + --max-width: min(1200px, 92vw); +} + +*, +*::before, +*::after { + box-sizing: border-box; +} + +body { + margin: 0; + min-height: 100vh; + font-family: "Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; + color: var(--text-primary); + background: radial-gradient(circle at top left, #1b2a4a 0%, var(--bg-gradient-start) 35%, var(--bg-gradient-end) 100%); + position: relative; + overflow-x: hidden; +} + +body::before { + content: ""; + position: fixed; + inset: 0; + background: radial-gradient(circle at 10% 20%, rgba(77, 158, 248, 0.18), transparent 35%), + radial-gradient(circle at 90% 10%, rgba(97, 242, 209, 0.12), transparent 45%), + radial-gradient(circle at 50% 90%, rgba(140, 107, 255, 0.16), transparent 45%); + z-index: -3; + animation: pulse 16s ease-in-out infinite; +} + +.noise-layer { + position: fixed; + inset: 0; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' fill='none'%3E%3Cfilter id='n' x='0' y='0' width='160' height='160'%3C/filter%3E%3Cg filter='url(%23n)'%3E%3Cpath fill='rgba(255,255,255,0.03)' d='M0 0h160v160H0z'/%3E%3C/g%3E%3C/svg%3E"); + opacity: 0.35; + mix-blend-mode: soft-light; + z-index: -2; +} + +.orb { + position: fixed; + width: 38rem; + height: 38rem; + border-radius: 50%; + filter: blur(120px); + opacity: 0.6; + z-index: -1; + animation: drift 40s ease-in-out infinite; +} + +.orb-1 { + top: -12rem; + left: -10rem; + background: #4d9ef8; +} + +.orb-2 { + top: 60%; + right: -14rem; + background: #61f2d1; + animation-delay: -12s; +} + +.orb-3 { + top: 20%; + right: 20%; + background: #886bff; + animation-delay: -22s; +} + +.site-header { + position: relative; + padding: 2.5rem 0 0; +} + +.nav { + position: sticky; + top: 0; + z-index: 10; + display: flex; + align-items: center; + justify-content: space-between; + padding: 1.25rem clamp(1.5rem, 4vw, 3rem); + margin: 0 auto; + width: min(1120px, 92vw); + backdrop-filter: blur(18px); + background: linear-gradient(135deg, rgba(11, 15, 27, 0.88), rgba(22, 33, 58, 0.42)); + border: 1px solid var(--border); + border-radius: var(--radius-md); + box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35); + transition: transform 0.5s ease, background 0.5s ease; +} + +.nav.scrolled { + background: linear-gradient(135deg, rgba(14, 21, 38, 0.95), rgba(13, 24, 46, 0.85)); +} + +.logo { + font-weight: 700; + font-size: 1.15rem; + color: var(--text-primary); + text-decoration: none; + letter-spacing: 0.04em; +} + +.nav-links { + display: flex; + gap: 1.5rem; +} + +.nav-links a { + color: var(--text-secondary); + text-decoration: none; + font-weight: 500; + transition: color 0.3s ease, transform 0.3s ease; +} + +.nav-links a:hover, +.nav-links a:focus-visible { + color: var(--accent); + transform: translateY(-2px); +} + +.hero { + display: grid; + gap: 3rem; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + align-items: center; + padding: var(--section-padding) clamp(1.5rem, 4vw, 3rem) clamp(4rem, 7vw, 6rem); + width: min(1120px, 90vw); + margin: 0 auto; +} + +.hero-content h1 { + font-size: clamp(2.6rem, 6vw, 3.8rem); + line-height: 1.05; + margin: 0.75rem 0 1rem; + letter-spacing: -0.02em; +} + +.hero-content p { + margin: 0 0 1.75rem; + color: var(--text-secondary); + max-width: 32rem; +} + +.eyebrow { + text-transform: uppercase; + letter-spacing: 0.32em; + font-size: 0.75rem; + color: rgba(244, 247, 255, 0.54); +} + +.hero-actions { + display: flex; + flex-wrap: wrap; + gap: 1rem; + margin-bottom: 2rem; +} + +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.85rem 1.6rem; + border-radius: 999px; + font-weight: 600; + letter-spacing: 0.02em; + text-decoration: none; + transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease, color 0.35s ease; + border: 1px solid transparent; +} + +.btn.primary { + background: linear-gradient(135deg, var(--accent), #86b9ff); + color: #050c1a; + box-shadow: 0 22px 45px rgba(77, 158, 248, 0.4); +} + +.btn.secondary { + background: transparent; + border-color: rgba(97, 242, 209, 0.6); + color: var(--accent-strong); +} + +.btn:hover, +.btn:focus-visible { + transform: translateY(-3px); + box-shadow: 0 28px 58px rgba(77, 158, 248, 0.45); +} + +.hero-badges { + display: flex; + flex-wrap: wrap; + gap: 0.75rem; + padding: 0; + margin: 0; + list-style: none; +} + +.hero-badges li { + padding: 0.4rem 0.9rem; + border-radius: 999px; + background: rgba(77, 158, 248, 0.1); + border: 1px solid rgba(77, 158, 248, 0.25); + font-size: 0.82rem; + color: rgba(244, 247, 255, 0.7); + backdrop-filter: blur(10px); +} + +.hero-visual { + position: relative; + display: flex; + justify-content: center; +} + +.grid-card { + width: min(360px, 85vw); + padding: 1.5rem; + border-radius: var(--radius-lg); + background: linear-gradient(165deg, rgba(19, 30, 52, 0.9), rgba(10, 16, 31, 0.8)); + border: 1px solid rgba(255, 255, 255, 0.08); + box-shadow: var(--shadow); + backdrop-filter: blur(18px); + transform-style: preserve-3d; + animation: float 8s ease-in-out infinite; +} + +.grid-header, +.grid-footer { + display: grid; + grid-template-columns: repeat(4, minmax(0, max-content)); + align-items: center; + gap: 0.75rem; + font-size: 0.85rem; + color: rgba(244, 247, 255, 0.7); +} + +.grid-header { + margin-bottom: 1.25rem; +} + +.grid-footer { + margin-top: 1.25rem; + border-top: 1px solid rgba(255, 255, 255, 0.08); + padding-top: 1rem; +} + +.status-dot { + width: 10px; + height: 10px; + border-radius: 50%; + background: linear-gradient(135deg, var(--accent-strong), #86ffdf); + box-shadow: 0 0 12px rgba(97, 242, 209, 0.7); +} + +.grid-body { + display: grid; + gap: 0.75rem; + font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace; + font-size: 0.85rem; +} + +.scan-row { + display: grid; + grid-template-columns: 1.6fr 0.8fr 0.8fr; + align-items: center; + padding: 0.65rem; + border-radius: var(--radius-sm); + background: rgba(8, 12, 24, 0.6); + border: 1px solid rgba(255, 255, 255, 0.05); +} + +.scan-row.pending { + border-style: dashed; + border-color: rgba(255, 255, 255, 0.12); + color: rgba(244, 247, 255, 0.45); +} + +.scan-row.offline { + opacity: 0.55; +} + +.scan-ping { + justify-self: end; +} + +.scan-ping.good { + color: #61f2d1; +} + +.scan-ping.great { + color: #b6f27b; +} + +.scan-ping.avg { + color: #ffd166; +} + +.scan-version { + justify-self: end; + background: rgba(97, 242, 209, 0.12); + border-radius: 999px; + padding: 0.25rem 0.6rem; + color: rgba(206, 244, 232, 0.82); +} + +.metric-label { + color: rgba(244, 247, 255, 0.58); +} + +.metric-value { + font-weight: 600; +} + +.metric-value.healthy { + color: var(--accent-strong); +} + +.section { + padding: var(--section-padding) 0; +} + +.section-heading { + width: var(--max-width); + margin: 0 auto clamp(3rem, 6vw, 4rem); +} + +.section-heading h2 { + font-size: clamp(2.1rem, 4.5vw, 3rem); + margin: 0.6rem 0 0.8rem; +} + +.section-heading p { + margin: 0; + color: var(--text-secondary); + max-width: 45ch; + line-height: 1.6; +} + +.feature-grid { + width: var(--max-width); + margin: 0 auto; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 1.8rem; +} + +.feature-card { + background: var(--surface); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + padding: 1.9rem 1.8rem; + position: relative; + overflow: hidden; + transition: transform 0.45s ease, border 0.45s ease, box-shadow 0.45s ease, background 0.45s ease; + backdrop-filter: blur(16px); +} + +.feature-card::after { + content: ""; + position: absolute; + inset: 0; + background: radial-gradient(circle at top right, rgba(77, 158, 248, 0.22), transparent 55%); + opacity: 0; + transition: opacity 0.45s ease; +} + +.feature-card:hover, +.feature-card:focus-within { + transform: translateY(-8px); + border-color: rgba(77, 158, 248, 0.45); + box-shadow: 0 25px 45px rgba(9, 16, 34, 0.45); +} + +.feature-card:hover::after, +.feature-card:focus-within::after { + opacity: 1; +} + +.feature-icon { + width: 52px; + height: 52px; + display: grid; + place-items: center; + border-radius: 16px; + margin-bottom: 1rem; + background: rgba(77, 158, 248, 0.12); + border: 1px solid rgba(77, 158, 248, 0.2); +} + +.feature-icon svg { + width: 28px; + height: 28px; + fill: var(--accent); +} + +.feature-card h3 { + margin: 0 0 0.6rem; + font-size: 1.2rem; +} + +.feature-card p { + margin: 0; + color: var(--text-secondary); + line-height: 1.55; +} + +.split { + background: rgba(11, 16, 30, 0.6); +} + +.architecture-timeline { + width: var(--max-width); + margin: 0 auto; + position: relative; + padding-left: clamp(1rem, 3vw, 2rem); + border-left: 1px dashed rgba(255, 255, 255, 0.12); + display: grid; + gap: 2.5rem; +} + +.timeline-item { + position: relative; + padding-left: 1.4rem; +} + +.timeline-dot { + position: absolute; + top: 0.45rem; + left: -1.65rem; + width: 12px; + height: 12px; + border-radius: 50%; + border: 2px solid rgba(97, 242, 209, 0.5); + background: linear-gradient(135deg, rgba(97, 242, 209, 0.9), rgba(77, 158, 248, 0.65)); + box-shadow: 0 0 14px rgba(97, 242, 209, 0.65); +} + +.timeline-item h3 { + margin: 0 0 0.4rem; +} + +.timeline-item p { + margin: 0; + color: var(--text-secondary); + line-height: 1.6; +} + +.quick-start .qs-content { + width: var(--max-width); + margin: 0 auto; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); + gap: 2.2rem; +} + +.qs-steps ol { + margin: 0; + padding-left: 1.4rem; + color: var(--text-secondary); + line-height: 1.8; +} + +.qs-code pre { + margin: 0; + padding: 1.6rem; + background: rgba(7, 12, 22, 0.72); + border-radius: var(--radius-md); + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: var(--shadow); + overflow-x: auto; +} + +.qs-code code { + color: rgba(214, 239, 255, 0.92); + font-size: 0.9rem; + line-height: 1.7; + display: block; +} + +.qs-footer { + width: var(--max-width); + margin: clamp(2.8rem, 6vw, 4rem) auto 0; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); + gap: 1.6rem; +} + +.qs-card { + background: rgba(13, 18, 32, 0.75); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: var(--radius-md); + padding: 1.6rem 1.5rem; + color: var(--text-secondary); + line-height: 1.65; + transition: transform 0.4s ease, border 0.4s ease; +} + +.qs-card:hover, +.qs-card:focus-within { + transform: translateY(-6px); + border-color: rgba(77, 158, 248, 0.42); +} + +.metrics { + padding: clamp(3.5rem, 5vw, 5rem) 0; +} + +.metric-grid { + width: var(--max-width); + margin: 0 auto; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 1.6rem; +} + +.metric-card { + background: var(--surface-elevated); + border-radius: var(--radius-lg); + padding: 1.8rem; + border: 1px solid rgba(255, 255, 255, 0.08); + text-align: center; + box-shadow: var(--shadow); +} + +.metric-number { + display: block; + font-size: clamp(2.2rem, 5vw, 3.2rem); + font-weight: 700; + margin-bottom: 0.6rem; + color: var(--accent-strong); +} + +.metric-label { + display: block; + font-size: 0.9rem; + line-height: 1.5; + color: var(--text-secondary); +} + +.ethics-grid { + width: var(--max-width); + margin: 0 auto; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 1.5rem; +} + +.ethics-card { + background: rgba(11, 18, 34, 0.8); + border-radius: var(--radius-lg); + border: 1px solid rgba(255, 255, 255, 0.08); + padding: 1.8rem 1.6rem; + color: var(--text-secondary); + line-height: 1.65; + transition: transform 0.35s ease, border 0.35s ease; +} + +.ethics-card:hover, +.ethics-card:focus-within { + transform: translateY(-5px); + border-color: rgba(97, 242, 209, 0.42); +} + +.site-footer { + padding: 3rem 0; + background: rgba(4, 8, 16, 0.68); + border-top: 1px solid rgba(255, 255, 255, 0.08); + backdrop-filter: blur(16px); +} + +.footer-content { + width: var(--max-width); + margin: 0 auto; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + gap: 1.6rem; + color: var(--text-secondary); + font-size: 0.9rem; +} + +.footer-links { + display: flex; + gap: 1.5rem; + align-items: center; +} + +.footer-links a { + color: rgba(244, 247, 255, 0.75); + text-decoration: none; + transition: color 0.3s ease; +} + +.footer-links a:hover, +.footer-links a:focus-visible { + color: var(--accent); +} + +/* Reveal effect */ +.reveal { + opacity: 0; + transform: translateY(30px); + transition: opacity 0.9s cubic-bezier(0.19, 1, 0.22, 1), transform 0.9s cubic-bezier(0.19, 1, 0.22, 1); +} + +.reveal.is-visible { + opacity: 1; + transform: translateY(0); +} + +/* Keyframes */ +@keyframes pulse { + 0%, + 100% { + transform: scale(1); + } + 50% { + transform: scale(1.03); + } +} + +@keyframes drift { + 0%, + 100% { + transform: translate3d(0, 0, 0) scale(1); + } + 50% { + transform: translate3d(12px, -30px, 0) scale(1.05); + } +} + +@keyframes float { + 0%, + 100% { + transform: translate3d(0, 0, 0) rotateX(0deg); + } + 50% { + transform: translate3d(0, -14px, 0) rotateX(2deg); + } +} + +/* Responsive tweaks */ +@media (max-width: 768px) { + .nav { + flex-direction: column; + gap: 1rem; + } + + .nav-links { + flex-wrap: wrap; + justify-content: center; + } + + .hero { + padding-top: clamp(3.5rem, 7vw, 4.5rem); + } + + .hero-actions { + justify-content: center; + } + + .grid-card { + animation: float 10s ease-in-out infinite; + } + + .architecture-timeline { + padding-left: 1.4rem; + } + + .timeline-dot { + left: -1.4rem; + } +} + +@media (max-width: 520px) { + .hero { + grid-template-columns: 1fr; + text-align: center; + } + + .hero-content p { + margin-left: auto; + margin-right: auto; + } + + .hero-badges { + justify-content: center; + } + + .grid-card { + width: 100%; + } + + .feature-grid { + grid-template-columns: 1fr; + } + + .metric-grid, + .ethics-grid, + .qs-footer { + grid-template-columns: 1fr; + } +}