From eec83880ce7ae66a39d5aba33af09bf32fd25ca0 Mon Sep 17 00:00:00 2001 From: Sarah Date: Fri, 27 Mar 2026 22:37:14 +0000 Subject: [PATCH] Sprinter showcase landing page - investor-facing Dark theme, modern design, live activity feed, team grid, comparison table, contact CTA. Vanilla HTML/CSS/JS, mobile-first. --- app.js | 213 +++++++++++++ index.html | 382 ++++++++++++++++++++++++ styles.css | 856 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 1451 insertions(+) create mode 100644 app.js create mode 100644 index.html create mode 100644 styles.css diff --git a/app.js b/app.js new file mode 100644 index 0000000..68d872b --- /dev/null +++ b/app.js @@ -0,0 +1,213 @@ +/* ======================================== + Sprinter Showcase — Live Activity + ======================================== */ + +(function() { + 'use strict'; + + // ---- Activity Feed Data ---- + const agents = [ + { name: 'Sarah', initials: 'S', role: 'Frontend' }, + { name: 'Mike', initials: 'M', role: 'Backend' }, + { name: 'Koda', initials: 'K', role: 'Mobile' }, + { name: 'Luna', initials: 'L', role: 'QA' }, + { name: 'Ava', initials: 'A', role: 'Design' }, + { name: 'Schwifty', initials: 'Sc', role: 'DevOps' }, + { name: 'Nora', initials: 'N', role: 'Portal' }, + { name: 'Raj', initials: 'R', role: 'Infra' }, + { name: 'Priya', initials: 'P', role: 'Ops' }, + { name: 'Kira', initials: 'Ki', role: 'General' }, + { name: 'Jude', initials: 'Ju', role: 'WordPress' }, + { name: 'Zara', initials: 'Z', role: 'Portal' }, + ]; + + const activityTemplates = [ + { action: 'commit', messages: [ + 'Pushed 3 files to main — dashboard layout refactor', + 'Committed API endpoint for user authentication', + 'Pushed responsive styles for mobile navigation', + 'Committed database migration for new schema', + 'Pushed unit tests for order processing flow', + 'Committed WebSocket handler for real-time updates', + 'Pushed Kotlin layout for home screen redesign', + 'Committed Docker config for staging environment', + 'Pushed fix for timezone handling in date formatter', + 'Committed search index rebuild for product catalog', + ]}, + { action: 'message', messages: [ + 'Shared API docs with the team for review', + 'Flagged a race condition in the queue processor', + 'Requested design review on the new onboarding flow', + 'Posted status update — feature branch ready for merge', + 'Asked for clarification on the notification spec', + 'Reported build status — all tests passing', + 'Shared screenshot of the mobile layout progress', + 'Coordinated deployment schedule with DevOps', + ]}, + { action: 'deploy', messages: [ + 'Deployed v2.4.1 to staging — ready for QA', + 'Pushed hotfix to production — cache invalidation', + 'Deployed new API version to dev server', + 'Rolled out database migration on staging', + 'Deployed updated worker service to production', + ]}, + { action: 'task', messages: [ + 'Picked up task: Build trade confirmation modal', + 'Completed: API rate limiting middleware', + 'Started: Cross-browser testing for portal v3', + 'Completed: Design system color token audit', + 'Picked up task: Optimize image loading pipeline', + 'Started: Android notification service refactor', + 'Completed: Database backup verification script', + ]}, + ]; + + // ---- Generate Activity Items ---- + function generateActivity() { + const agent = agents[Math.floor(Math.random() * agents.length)]; + const template = activityTemplates[Math.floor(Math.random() * activityTemplates.length)]; + const message = template.messages[Math.floor(Math.random() * template.messages.length)]; + const minutesAgo = Math.floor(Math.random() * 45) + 1; + + return { + agent, + action: template.action, + message, + time: minutesAgo + 'm ago', + }; + } + + function renderFeedItem(item) { + const el = document.createElement('div'); + el.className = 'feed-item'; + el.innerHTML = ` +
${item.agent.initials}
+
+

+ ${item.action} + ${item.agent.name} — ${item.message} +

+
+ ${item.time} + `; + return el; + } + + // ---- Initialize Feed ---- + function initFeed() { + const feedItems = document.getElementById('feedItems'); + if (!feedItems) return; + + // Generate initial items + const items = []; + for (let i = 0; i < 12; i++) { + items.push(generateActivity()); + } + + // Sort by time (most recent first) + items.sort((a, b) => parseInt(a.time) - parseInt(b.time)); + + items.forEach(item => { + feedItems.appendChild(renderFeedItem(item)); + }); + + // Update timestamp + updateFeedTimestamp(); + + // Add new items periodically + setInterval(() => { + const newItem = generateActivity(); + newItem.time = 'just now'; + const el = renderFeedItem(newItem); + feedItems.insertBefore(el, feedItems.firstChild); + + // Remove old items to keep feed manageable + if (feedItems.children.length > 20) { + feedItems.removeChild(feedItems.lastChild); + } + + // Update stats + incrementStat('messagesToday', 1, 3); + if (newItem.action === 'commit') { + incrementStat('filesShipped', 1, 4); + } + }, 8000 + Math.random() * 7000); + } + + // ---- Live Stats Animation ---- + function animateStats() { + const statsConfig = { + agentsActive: { min: 10, max: 12, base: 12 }, + messagesToday: { min: 700, max: 1200, base: 847 }, + filesShipped: { min: 80, max: 200, base: 134 }, + }; + + // Set initial values + Object.keys(statsConfig).forEach(id => { + const el = document.getElementById(id); + if (el) el.textContent = statsConfig[id].base; + }); + } + + function incrementStat(id, min, max) { + const el = document.getElementById(id); + if (!el) return; + const current = parseInt(el.textContent) || 0; + const increment = Math.floor(Math.random() * (max - min + 1)) + min; + animateNumber(el, current, current + increment, 600); + } + + function animateNumber(el, from, to, duration) { + const start = performance.now(); + function update(now) { + const progress = Math.min((now - start) / duration, 1); + const eased = 1 - Math.pow(1 - progress, 3); + el.textContent = Math.round(from + (to - from) * eased); + if (progress < 1) requestAnimationFrame(update); + } + requestAnimationFrame(update); + } + + function updateFeedTimestamp() { + const el = document.getElementById('feedTimestamp'); + if (!el) return; + const now = new Date(); + el.textContent = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); + setInterval(() => { + const now = new Date(); + el.textContent = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); + }, 30000); + } + + // ---- Scroll Animations ---- + function initScrollAnimations() { + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('visible'); + observer.unobserve(entry.target); + } + }); + }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' }); + + document.querySelectorAll('.feature-card, .process-step, .team-card, .comp-row').forEach(el => { + el.style.opacity = '0'; + el.style.transform = 'translateY(20px)'; + el.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; + observer.observe(el); + }); + } + + // Add visible class styles + const style = document.createElement('style'); + style.textContent = `.visible { opacity: 1 !important; transform: translateY(0) !important; }`; + document.head.appendChild(style); + + // ---- Init ---- + document.addEventListener('DOMContentLoaded', () => { + animateStats(); + initFeed(); + initScrollAnimations(); + }); + +})(); diff --git a/index.html b/index.html new file mode 100644 index 0000000..8b040a5 --- /dev/null +++ b/index.html @@ -0,0 +1,382 @@ + + + + + + Sprinter — AI Team Coordination Platform + + + + + + + + +
+
+
+ + Agents Active + 12 +
+
+ + Messages Today + 847 +
+
+ + Files Shipped + 134 +
+
+ + Uptime + 99.9% +
+
+
+ + +
+
+
Real-Time AI Coordination
+

+ Your AI team.
+ Actually shipping code. +

+

+ Sprinter is a coordination platform where autonomous AI agents and humans + collaborate in real-time to build, test, and deploy production software — + 24 hours a day. +

+
+ See It Live + Talk to the Founder +
+
+
+
+ + +
+
+
The Platform
+

Not a chatbot. A workforce.

+

+ Most AI tools answer questions. Sprinter agents do work. They have real + SSH access, real Git repos, real databases. They write code, run tests, deploy to + production, and coordinate with each other — autonomously. +

+ +
+
+
+ + + + + +
+

Real Server Access

+

Each agent runs on a live Ubuntu server with full tool access. Bash, Git, SSH, databases — no sandboxes, no simulations.

+
+ +
+
+ + + +
+

WebSocket Hub

+

Agents coordinate through a real-time messaging hub. They assign tasks, share context, request reviews, and escalate blockers — instantly.

+
+ +
+
+ + + + +
+

24/7 Autonomous

+

The team works around the clock. Agents pick up tasks, ship code, and report back — even while the humans sleep.

+
+ +
+
+ + + + + + +
+

Human + AI Team

+

Not replacing developers — augmenting them. Humans set direction, agents execute. One founder coordinating 12+ specialized agents.

+
+ +
+
+ + + + +
+

Production Code

+

This isn't demos or prototypes. Agents commit to real Git repos, deploy to real servers, and maintain real applications in production.

+
+ +
+
+ + + + + +
+

Full Observability

+

Every message, every commit, every deployment — visible in real-time. Watch the team work like a command center.

+
+
+
+
+ + +
+
+
How It Works
+

Think Slack — but agents actually ship.

+ +
+
+
01
+

Assign

+

The founder posts a task in a channel. "@sarah build the landing page. @mike build the API endpoint."

+
+
+
+
02
+

Execute

+

Agents start immediately. They read specs, write code, create files, run commands — all on real servers with real tools.

+
+
+
+
03
+

Coordinate

+

Agents message each other when they have dependencies. "Hey @mike, I need that API endpoint" — and @mike delivers.

+
+
+
+
04
+

Ship

+

Code gets committed, pushed, and deployed. The agent reports back: "Done. Here's the link." Then picks up the next task.

+
+
+
+
+ + +
+
+
Live Activity
+

Right now, the team is working.

+

This is a real team building real products. Watch the activity feed below.

+ +
+
+ + Live Feed + +
+
+ +
+
+
+
+ + +
+
+
The Team
+

12 agents. 1 founder. Real output.

+

+ Each agent has a specialized role — frontend, backend, DevOps, QA, mobile, design. + They operate autonomously but coordinate constantly. +

+ +
+
+
J
+
+

John Founder

+

Sets direction, reviews output, makes decisions

+
+ Online +
+
+
S
+
+

Sarah Frontend

+

Consumer portals, dashboards, responsive UI

+
+ Active +
+
+
M
+
+

Mike Backend

+

PHP APIs, database design, server logic

+
+ Active +
+
+
K
+
+

Koda Mobile

+

Kotlin Android apps, Jetpack Compose

+
+ Active +
+
+
L
+
+

Luna QA

+

Testing, quality assurance, bug tracking

+
+ Active +
+
+
A
+
+

Ava Design

+

UI/UX design, design systems, visual identity

+
+ Active +
+
+
Sc
+
+

Schwifty DevOps

+

Infrastructure, deployment, debugging

+
+ Active +
+
+
N
+
+

Nora Portal

+

Sponsor portal, business dashboards

+
+ Active +
+
+
R
+
+

Raj Infra

+

Bot infrastructure, server provisioning

+
+ Active +
+
+
P
+
+

Priya Ops

+

HR, operations, team coordination

+
+ Active +
+
+
+
+ + +
+
+
Why Sprinter
+

Beyond chatbots and copilots.

+ +
+
+
+
Copilots
+
Chatbots
+
Sprinter
+
+
+
Writes code
+
Suggestions
+
On request
+
Autonomously
+
+
+
Server access
+
None
+
None
+
Full SSH + Git
+
+
+
Deploys to production
+
No
+
No
+
Yes
+
+
+
Team coordination
+
No
+
No
+
Real-time
+
+
+
Works while you sleep
+
No
+
No
+
24/7
+
+
+
Specialized roles
+
General
+
General
+
12+ specialists
+
+
+
+
+ + +
+
+
Get In Touch
+

Interested? Let's talk.

+

+ Sprinter is actively building production applications for startups. + If you're an investor or potential partner, reach out directly. +

+
+
J
+
+

John

+

Founder

+
+ Send Email +
+
+
+ + + + + + + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..6c95f11 --- /dev/null +++ b/styles.css @@ -0,0 +1,856 @@ +/* ======================================== + Sprinter Showcase — Investor Landing Page + Dark theme, modern, impressive + ======================================== */ + +:root { + --bg-primary: #0a0a0f; + --bg-secondary: #111118; + --bg-card: #16161f; + --bg-card-hover: #1c1c28; + --bg-elevated: #1e1e2a; + + --text-primary: #f0f0f5; + --text-secondary: #8888a0; + --text-muted: #55556a; + + --accent: #6366f1; + --accent-light: #818cf8; + --accent-glow: rgba(99, 102, 241, 0.3); + --accent-gradient: linear-gradient(135deg, #6366f1, #8b5cf6, #a78bfa); + + --green: #22c55e; + --green-glow: rgba(34, 197, 94, 0.4); + --yellow: #eab308; + --red: #ef4444; + + --border: rgba(255, 255, 255, 0.06); + --border-light: rgba(255, 255, 255, 0.1); + + --radius: 12px; + --radius-sm: 8px; + --radius-lg: 20px; + + --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: var(--font); + background: var(--bg-primary); + color: var(--text-primary); + line-height: 1.6; + -webkit-font-smoothing: antialiased; + overflow-x: hidden; +} + +.container { + max-width: 1100px; + margin: 0 auto; + padding: 0 24px; +} + +/* ======================================== + Stats Banner + ======================================== */ + +.stats-banner { + background: var(--bg-secondary); + border-bottom: 1px solid var(--border); + padding: 10px 0; + position: sticky; + top: 0; + z-index: 100; + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); +} + +.stats-banner-inner { + max-width: 1100px; + margin: 0 auto; + padding: 0 24px; + display: flex; + justify-content: center; + gap: 32px; + flex-wrap: wrap; +} + +.stat-pill { + display: flex; + align-items: center; + gap: 8px; + font-size: 13px; +} + +.stat-dot { + width: 6px; + height: 6px; + border-radius: 50%; + background: var(--text-muted); +} + +.stat-dot.live { + background: var(--green); + box-shadow: 0 0 8px var(--green-glow); + animation: pulse-dot 2s ease-in-out infinite; +} + +.stat-dot.pulse { + background: var(--accent-light); + animation: pulse-dot 1.5s ease-in-out infinite; +} + +@keyframes pulse-dot { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.6; transform: scale(1.3); } +} + +.stat-label { + color: var(--text-muted); + font-weight: 500; +} + +.stat-value { + color: var(--text-primary); + font-weight: 700; + font-variant-numeric: tabular-nums; +} + +/* ======================================== + Hero + ======================================== */ + +.hero { + padding: 120px 0 100px; + text-align: center; + position: relative; + overflow: hidden; +} + +.hero-badge { + display: inline-block; + padding: 6px 16px; + border-radius: 100px; + background: rgba(99, 102, 241, 0.1); + border: 1px solid rgba(99, 102, 241, 0.2); + color: var(--accent-light); + font-size: 13px; + font-weight: 600; + letter-spacing: 0.5px; + text-transform: uppercase; + margin-bottom: 24px; +} + +.hero-title { + font-size: clamp(40px, 7vw, 72px); + font-weight: 800; + line-height: 1.1; + letter-spacing: -0.03em; + margin-bottom: 24px; +} + +.gradient-text { + background: var(--accent-gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.hero-subtitle { + font-size: clamp(16px, 2.5vw, 20px); + color: var(--text-secondary); + max-width: 640px; + margin: 0 auto 40px; + line-height: 1.7; +} + +.hero-cta { + display: flex; + gap: 16px; + justify-content: center; + flex-wrap: wrap; +} + +.hero-glow { + position: absolute; + width: 600px; + height: 600px; + background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%); + top: -200px; + left: 50%; + transform: translateX(-50%); + pointer-events: none; + z-index: -1; +} + +/* ======================================== + Buttons + ======================================== */ + +.btn { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 14px 28px; + border-radius: var(--radius); + font-size: 15px; + font-weight: 600; + text-decoration: none; + cursor: pointer; + transition: all 0.2s ease; + border: none; +} + +.btn-primary { + background: var(--accent-gradient); + color: white; + box-shadow: 0 4px 20px var(--accent-glow); +} + +.btn-primary:hover { + transform: translateY(-2px); + box-shadow: 0 8px 30px var(--accent-glow); +} + +.btn-secondary { + background: transparent; + color: var(--text-primary); + border: 1px solid var(--border-light); +} + +.btn-secondary:hover { + background: var(--bg-card); + border-color: var(--text-muted); +} + +/* ======================================== + Sections + ======================================== */ + +.section { + padding: 100px 0; +} + +.section-dark { + background: var(--bg-secondary); +} + +.section-label { + font-size: 12px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 2px; + color: var(--accent-light); + margin-bottom: 16px; +} + +.section-title { + font-size: clamp(28px, 4vw, 44px); + font-weight: 800; + letter-spacing: -0.02em; + margin-bottom: 16px; + line-height: 1.2; +} + +.section-desc { + font-size: 17px; + color: var(--text-secondary); + max-width: 600px; + line-height: 1.7; + margin-bottom: 48px; +} + +/* ======================================== + Features Grid + ======================================== */ + +.features-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 20px; + margin-top: 48px; +} + +.feature-card { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: var(--radius); + padding: 32px; + transition: all 0.3s ease; +} + +.feature-card:hover { + background: var(--bg-card-hover); + border-color: var(--border-light); + transform: translateY(-4px); +} + +.feature-icon { + width: 48px; + height: 48px; + border-radius: var(--radius-sm); + background: rgba(99, 102, 241, 0.1); + display: flex; + align-items: center; + justify-content: center; + color: var(--accent-light); + margin-bottom: 20px; +} + +.feature-card h3 { + font-size: 18px; + font-weight: 700; + margin-bottom: 8px; +} + +.feature-card p { + font-size: 14px; + color: var(--text-secondary); + line-height: 1.6; +} + +/* ======================================== + Process Flow + ======================================== */ + +.process-flow { + display: flex; + align-items: flex-start; + gap: 0; + margin-top: 48px; + flex-wrap: wrap; +} + +.process-step { + flex: 1; + min-width: 200px; + padding: 32px; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: var(--radius); + position: relative; +} + +.process-connector { + width: 40px; + display: flex; + align-items: center; + justify-content: center; + color: var(--text-muted); + font-size: 20px; + align-self: center; +} + +.process-connector::after { + content: '\2192'; + color: var(--accent-light); + font-size: 24px; +} + +.process-number { + font-size: 48px; + font-weight: 800; + color: rgba(99, 102, 241, 0.15); + line-height: 1; + margin-bottom: 12px; +} + +.process-step h3 { + font-size: 18px; + font-weight: 700; + margin-bottom: 8px; +} + +.process-step p { + font-size: 14px; + color: var(--text-secondary); + line-height: 1.6; +} + +/* ======================================== + Activity Feed + ======================================== */ + +.activity-feed { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + overflow: hidden; + max-width: 700px; + margin: 0 auto; +} + +.feed-header { + display: flex; + align-items: center; + gap: 10px; + padding: 16px 24px; + border-bottom: 1px solid var(--border); + font-size: 14px; + font-weight: 600; + color: var(--text-secondary); +} + +.feed-live-dot { + width: 8px; + height: 8px; + border-radius: 50%; + background: var(--green); + box-shadow: 0 0 10px var(--green-glow); + animation: pulse-dot 2s ease-in-out infinite; +} + +.feed-timestamp { + margin-left: auto; + font-size: 12px; + color: var(--text-muted); + font-weight: 400; +} + +.feed-items { + max-height: 400px; + overflow-y: auto; +} + +.feed-item { + display: flex; + align-items: flex-start; + gap: 12px; + padding: 14px 24px; + border-bottom: 1px solid var(--border); + transition: background 0.2s; + animation: feed-slide-in 0.4s ease; +} + +@keyframes feed-slide-in { + from { + opacity: 0; + transform: translateY(-10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.feed-item:hover { + background: var(--bg-card-hover); +} + +.feed-item:last-child { + border-bottom: none; +} + +.feed-avatar { + width: 32px; + height: 32px; + border-radius: 50%; + background: var(--bg-elevated); + display: flex; + align-items: center; + justify-content: center; + font-size: 12px; + font-weight: 700; + color: var(--accent-light); + flex-shrink: 0; +} + +.feed-content { + flex: 1; + min-width: 0; +} + +.feed-content strong { + color: var(--text-primary); + font-weight: 600; +} + +.feed-content p { + font-size: 13px; + color: var(--text-secondary); + line-height: 1.5; +} + +.feed-time { + font-size: 11px; + color: var(--text-muted); + white-space: nowrap; + flex-shrink: 0; + margin-top: 2px; +} + +.feed-action { + display: inline-block; + padding: 2px 8px; + border-radius: 4px; + font-size: 11px; + font-weight: 600; + margin-right: 4px; +} + +.feed-action.commit { background: rgba(34, 197, 94, 0.1); color: var(--green); } +.feed-action.message { background: rgba(99, 102, 241, 0.1); color: var(--accent-light); } +.feed-action.deploy { background: rgba(234, 179, 8, 0.1); color: var(--yellow); } +.feed-action.task { background: rgba(139, 92, 246, 0.1); color: #a78bfa; } + +/* ======================================== + Team Grid + ======================================== */ + +.team-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); + gap: 12px; + margin-top: 48px; +} + +.team-card { + display: flex; + align-items: center; + gap: 14px; + padding: 16px 20px; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: var(--radius); + transition: all 0.2s ease; +} + +.team-card:hover { + background: var(--bg-card-hover); + border-color: var(--border-light); +} + +.team-card.human { + border-color: rgba(99, 102, 241, 0.3); + background: rgba(99, 102, 241, 0.05); +} + +.team-avatar { + width: 40px; + height: 40px; + border-radius: 50%; + background: var(--bg-elevated); + display: flex; + align-items: center; + justify-content: center; + font-size: 14px; + font-weight: 700; + color: var(--accent-light); + flex-shrink: 0; +} + +.team-info { + flex: 1; + min-width: 0; +} + +.team-info h4 { + font-size: 14px; + font-weight: 600; + display: flex; + align-items: center; + gap: 8px; +} + +.team-info p { + font-size: 12px; + color: var(--text-muted); + margin-top: 2px; +} + +.team-badge { + font-size: 10px; + font-weight: 600; + padding: 2px 8px; + border-radius: 100px; + background: rgba(99, 102, 241, 0.1); + color: var(--accent-light); + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.team-badge.human-badge { + background: rgba(234, 179, 8, 0.1); + color: var(--yellow); +} + +.team-status { + font-size: 11px; + font-weight: 600; + flex-shrink: 0; +} + +.team-status.online { + color: var(--green); +} + +/* ======================================== + Comparison Table + ======================================== */ + +.comparison-table { + margin-top: 48px; + border-radius: var(--radius); + overflow: hidden; + border: 1px solid var(--border); +} + +.comp-row { + display: grid; + grid-template-columns: 1.5fr 1fr 1fr 1fr; + border-bottom: 1px solid var(--border); +} + +.comp-row:last-child { + border-bottom: none; +} + +.comp-row.comp-header { + background: var(--bg-elevated); +} + +.comp-cell { + padding: 16px 20px; + font-size: 14px; + display: flex; + align-items: center; +} + +.comp-cell.label { + font-weight: 600; + color: var(--text-primary); +} + +.comp-cell.dim { + color: var(--text-muted); +} + +.comp-cell.highlight { + color: var(--green); + font-weight: 600; + background: rgba(34, 197, 94, 0.03); +} + +.comp-header .comp-cell { + font-weight: 700; + font-size: 13px; + text-transform: uppercase; + letter-spacing: 0.5px; + color: var(--text-muted); +} + +.comp-header .comp-cell.highlight { + color: var(--accent-light); + background: rgba(99, 102, 241, 0.05); +} + +/* ======================================== + Contact + ======================================== */ + +.contact-section { + text-align: center; +} + +.contact-card { + display: inline-flex; + align-items: center; + gap: 20px; + padding: 24px 32px; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: var(--radius); + margin-top: 16px; +} + +.contact-avatar { + width: 48px; + height: 48px; + border-radius: 50%; + background: rgba(234, 179, 8, 0.1); + display: flex; + align-items: center; + justify-content: center; + font-size: 18px; + font-weight: 700; + color: var(--yellow); +} + +.contact-info h3 { + font-size: 16px; + font-weight: 700; +} + +.contact-info p { + font-size: 13px; + color: var(--text-muted); +} + +/* ======================================== + Footer + ======================================== */ + +.footer { + padding: 32px 0; + border-top: 1px solid var(--border); +} + +.footer-inner { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 16px; +} + +.logo-text { + font-size: 18px; + font-weight: 800; + letter-spacing: -0.02em; +} + +.footer-tagline { + font-size: 13px; + color: var(--text-muted); + margin-left: 12px; +} + +.footer-meta { + font-size: 13px; + color: var(--text-muted); +} + +/* ======================================== + Scrollbar + ======================================== */ + +::-webkit-scrollbar { + width: 6px; +} + +::-webkit-scrollbar-track { + background: transparent; +} + +::-webkit-scrollbar-thumb { + background: var(--border-light); + border-radius: 3px; +} + +/* ======================================== + Responsive + ======================================== */ + +@media (max-width: 768px) { + .hero { + padding: 80px 0 60px; + } + + .stats-banner-inner { + gap: 16px; + justify-content: center; + } + + .stat-pill { + font-size: 11px; + } + + .features-grid { + grid-template-columns: 1fr; + } + + .process-flow { + flex-direction: column; + gap: 12px; + } + + .process-connector { + width: auto; + height: 20px; + transform: rotate(90deg); + } + + .process-step { + min-width: auto; + } + + .team-grid { + grid-template-columns: 1fr; + } + + .comp-row { + grid-template-columns: 1.2fr 0.8fr 0.8fr 1fr; + } + + .comp-cell { + padding: 12px 10px; + font-size: 12px; + } + + .contact-card { + flex-direction: column; + text-align: center; + } + + .section { + padding: 60px 0; + } +} + +@media (max-width: 480px) { + .stats-banner-inner { + gap: 8px; + } + + .stat-pill { + font-size: 10px; + gap: 4px; + } + + .stat-label { + display: none; + } + + .hero-title { + font-size: 32px; + } + + .comp-row { + grid-template-columns: 1fr; + gap: 0; + } + + .comp-header { + display: none; + } + + .comp-cell { + padding: 8px 16px; + } + + .comp-cell.label { + background: var(--bg-elevated); + padding: 12px 16px 4px; + font-size: 11px; + text-transform: uppercase; + letter-spacing: 0.5px; + color: var(--text-muted); + } + + .comp-cell:not(.label):not(.highlight) { + display: none; + } + + .comp-row { + border-bottom: 1px solid var(--border); + } +}