447 lines
27 KiB
Vue
447 lines
27 KiB
Vue
<template>
|
|
<div class="landing">
|
|
<!-- Nav -->
|
|
<header class="nav">
|
|
<div class="nav-inner">
|
|
<div class="logo-wrap">
|
|
<span class="material-symbols-outlined" style="color:#d95c41;font-size:24px">terminal</span>
|
|
<span class="logo-text">FDSA</span>
|
|
</div>
|
|
<div class="nav-links">
|
|
<a href="/modules/curriculum">Course</a>
|
|
<a href="/labs/index">Labs</a>
|
|
<a href="/blog">Blog</a>
|
|
<a href="/buy" class="nav-cta">Enroll — $97</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<!-- Hero -->
|
|
<section class="hero-sec">
|
|
<div class="hero-grid"></div>
|
|
<div class="hero-glow"></div>
|
|
<div class="hero-inner">
|
|
<div class="hero-pill"><span class="pill-dot"></span>NOW ENROLLING</div>
|
|
<h1>Master <span class="hlt">Agentic Engineering</span></h1>
|
|
<p class="hero-sub">65 lessons, 13 labs, 20 skill kits. Build production-grade multi-agent systems that are secure, cost-optimized, and always-on.</p>
|
|
<div class="hero-actions">
|
|
<a href="/buy" class="btn-p btn-primary">Enroll Now — $97</a>
|
|
<a href="/modules/m1-foundations" class="btn-p btn-ghost">Start Learning Free</a>
|
|
</div>
|
|
</div>
|
|
<div class="term-widget">
|
|
<div class="term-dots"><span class="td r"></span><span class="td y"></span><span class="td g"></span></div>
|
|
<div class="term-l c">AGENT_PLANNER v2.1</div>
|
|
<div class="term-l">> LOADING HARNESS... DONE</div>
|
|
<div class="term-l a">> DEPLOYING 8-AGENT SYSTEM</div>
|
|
<div class="term-l">> SECURITY: LEVEL 4 (WHITELIST)</div>
|
|
<div class="term-l g">> ALL SYSTEMS OPERATIONAL</div>
|
|
<div class="term-bar"><div class="term-fill"></div></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Stats -->
|
|
<section class="sec stats-sec">
|
|
<div class="stats-grid">
|
|
<div class="stat">
|
|
<span class="stat-n">65</span>
|
|
<span class="stat-l">Lessons</span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="stat-n">13</span>
|
|
<span class="stat-l">Hands-on Labs</span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="stat-n">8</span>
|
|
<span class="stat-l">Modules</span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="stat-n">20</span>
|
|
<span class="stat-l">Skill Kits</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features -->
|
|
<section class="sec" id="features">
|
|
<div class="sec-label">What You'll Build</div>
|
|
<h2 class="sec-title">Production-Ready Agent Systems</h2>
|
|
<div class="feat-grid">
|
|
<div class="gc" v-for="f in features" :key="f.t">
|
|
<div class="gci"><span class="material-symbols-outlined">{{ f.icon }}</span></div>
|
|
<h3 class="gc-t">{{ f.t }}</h3>
|
|
<p class="gc-d">{{ f.d }}</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Bento Curriculum -->
|
|
<section class="sec" id="curriculum">
|
|
<div class="sec-label">Curriculum</div>
|
|
<h2 class="sec-title">8 Modules. From Zero to Production.</h2>
|
|
<div class="bento">
|
|
<div v-for="(m, i) in modules" :key="i" class="bi" :class="m.s">
|
|
<div class="bi-n">{{ m.n }}</div>
|
|
<div class="bi-ic"><span class="material-symbols-outlined">{{ m.ic }}</span></div>
|
|
<h4 class="bi-t">{{ m.t }}</h4>
|
|
<p class="bi-d">{{ m.d }}</p>
|
|
<div class="bi-tags"><span v-for="t in m.tg" :key="t">{{ t }}</span></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Testimonials -->
|
|
<section class="sec" id="testimonials">
|
|
<div class="sec-label">Trusted By</div>
|
|
<h2 class="sec-title">What Engineers Are Saying</h2>
|
|
<div class="test-grid">
|
|
<div class="test-card" v-for="t in testimonials" :key="t.q">
|
|
<div class="test-q">"{{ t.q }}"</div>
|
|
<div class="test-a">
|
|
<div class="test-av">{{ t.n[0] }}</div>
|
|
<div>
|
|
<div class="test-n">{{ t.n }}</div>
|
|
<div class="test-r">{{ t.r }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Why FDSA -->
|
|
<section class="sec" id="why-fdsa">
|
|
<div class="sec-label">Compared To</div>
|
|
<h2 class="sec-title">Why FDSA vs Other Courses</h2>
|
|
<div class="compare-grid">
|
|
<div class="compare-c" v-for="c in comparisons" :key="c.name">
|
|
<div class="compare-name">{{ c.name }}</div>
|
|
<ul class="compare-pros">
|
|
<li v-for="pro in c.pros" :key="pro"><span class="material-symbols-outlined">check</span>{{ pro }}</li>
|
|
</ul>
|
|
<ul class="compare-cons">
|
|
<li v-for="con in c.cons" :key="con"><span class="material-symbols-outlined">close</span>{{ con }}</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Pricing -->
|
|
<section class="sec pricing-sec" id="pricing">
|
|
<div class="sec-label">Investment</div>
|
|
<h2 class="sec-title">Choose Your Path</h2>
|
|
<div class="pricing-grid">
|
|
<div class="price-card" v-for="p in plans" :key="p.name" :class="{ highlight: p.highlight }">
|
|
<div class="price-name">{{ p.name }}</div>
|
|
<div class="price-amt"><span class="price-dol">$</span>{{ p.amt }}</div>
|
|
<div class="price-note">{{ p.note }}</div>
|
|
<ul class="price-feats">
|
|
<li v-for="item in p.feats" :key="item"><span class="material-symbols-outlined">check_circle</span>{{ item }}</li>
|
|
</ul>
|
|
<a :href="p.url" class="btn-p" :class="p.cta">{{ p.label }}</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FAQ -->
|
|
<section class="sec" id="faq">
|
|
<div class="sec-label">FAQ</div>
|
|
<h2 class="sec-title">Common Questions</h2>
|
|
<div class="faq-list">
|
|
<div class="faq-item" v-for="faq in faqs" :key="faq.q" @click="faq.open = !faq.open">
|
|
<div class="faq-q">
|
|
{{ faq.q }}
|
|
<span class="material-symbols-outlined faq-icon" :class="{ open: faq.open }">expand_more</span>
|
|
</div>
|
|
<div class="faq-a" v-if="faq.open">{{ faq.a }}</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="ft">
|
|
<div class="ft-inner">
|
|
<div class="ft-grid">
|
|
<div class="ft-brand">
|
|
<div class="ft-l">FDSA</div>
|
|
<div class="ft-desc">Agentic Engineering Course — part of the fdsa.ai orchestration platform.</div>
|
|
</div>
|
|
<div class="ft-col">
|
|
<div class="ft-h">Course</div>
|
|
<a href="/modules/m1-foundations">M1 Foundations</a>
|
|
<a href="/modules/m4-orchestration">M4 Orchestration</a>
|
|
<a href="/modules/m8-capstone">M8 Capstone</a>
|
|
</div>
|
|
<div class="ft-col">
|
|
<div class="ft-h">Resources</div>
|
|
<a href="/blog">Blog</a>
|
|
<a href="/troubleshooting">FAQ</a>
|
|
<a href="/certificate">Certificate</a>
|
|
</div>
|
|
<div class="ft-col">
|
|
<div class="ft-h">Company</div>
|
|
<a href="https://fdsa.ai">fdsa.ai</a>
|
|
<a href="mailto:artale@fdsa.agency">Contact</a>
|
|
<a href="/buy">Pricing</a>
|
|
</div>
|
|
</div>
|
|
<div class="ft-c">2026 FDSA Agency. All rights reserved.</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<nav class="bn">
|
|
<a href="/" class="bn-i active"><span class="material-symbols-outlined">home</span><span>Home</span></a>
|
|
<a href="/modules/curriculum" class="bn-i"><span class="material-symbols-outlined">school</span><span>Modules</span></a>
|
|
<a href="#features" class="bn-i"><span class="material-symbols-outlined">apps</span><span>Features</span></a>
|
|
<a href="#pricing" class="bn-i"><span class="material-symbols-outlined">payments</span><span>Pricing</span></a>
|
|
</nav>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted } from 'vue'
|
|
|
|
const features = [
|
|
{ icon: 'settings_suggest', t: 'Agent Harness', d: 'Own your harness. 6-level security ladder, verifier pattern, hooks architecture across 5 subsystems.' },
|
|
{ icon: 'speed', t: 'Software Factory', d: 'Systems that build systems. Agent chains, teams, P2P communication, depth-2 delegation.' },
|
|
{ icon: 'psychology', t: 'Extensible Software', d: 'Pluggable, composable, swappable. Beyond MCP, tool design patterns, CI/CD for agent configs.' },
|
|
{ icon: 'all_inclusive', t: 'Always-On Agents', d: 'Run 24/7. Autoresearch loops, heartbeat execution, meta-agents that improve themselves.' },
|
|
{ icon: 'terminal', t: 'Agentic Access', d: 'API-first design. Tool surface design, deployment modes, service connectors, MCP integration.' },
|
|
{ icon: 'trending_up', t: 'Tokenomics', d: '3 levels of token value. Cascade routing, pass@k evals, the 3x cost rule, production optimization.' },
|
|
]
|
|
|
|
const modules = [
|
|
{ n:'01', ic:'psychology', t:'Foundations', d:'What agents are, harness vs model, decision frameworks, agent loops.', tg:['LLM+Tools+Loop','Harness','Trust'], s:'w4' },
|
|
{ n:'02', ic:'handyman', t:'Architecture', d:'Tools, context, memory, skills system, codebase patterns, workspace design.', tg:['4 Pillars','Memory','Skills'], s:'w4' },
|
|
{ n:'03', ic:'shield', t:'Safety', d:'6-level security ladder, hooks, verifier pattern, defense-in-depth, ACIP.', tg:['L0-L5','Verifier','Hooks'], s:'w4' },
|
|
{ n:'04', ic:'hub', t:'Orchestration', d:'Multi-agent patterns, P-threads, F-threads, P2P, CEO Board, domain locking.', tg:['Teams','Chains','P2P'], s:'w6' },
|
|
{ n:'05', ic:'rocket_launch', t:'Production', d:'CI/CD for agents, shadow deploys, observability, rollback, 5-tool stack.', tg:['Deploy','Monitor','Rollback'], s:'w6' },
|
|
{ n:'06', ic:'analytics', t:'Economics', d:'Model pricing, cascade routing, pass@k evals, cost optimization per session.', tg:['100x Range','3x Rule','Evals'], s:'w6' },
|
|
{ n:'07', ic:'architecture', t:'Advanced', d:'Autoresearch, meta-agents, beyond MCP, always-on employee patterns.', tg:['Self-Improving','Meta'], s:'w6' },
|
|
{ n:'08', ic:'trophy', t:'Capstone', d:'Build production multi-agent system. Brand Monitor, CEO Board, or Code Review Pipeline.', tg:['Ship','Deploy','Rubric'], s:'w12 hl' },
|
|
]
|
|
|
|
const plans = [
|
|
{ name: 'Self-Paced', amt: '97', note: 'one-time payment', feats: ['65 lessons across 8 modules', '13 scaffolded labs with solutions', '56 quiz questions', '20 SKILL.md files (7 kits)', 'Lifetime access + updates', 'Mock LLM for offline labs'], url: 'https://gumroad.com/l/fdsa-agentic-selfpaced', label: 'Enroll Now', cta: 'btn-primary', highlight: true },
|
|
{ name: 'Enterprise', amt: '199', note: 'one-time payment', feats: ['Everything in Self-Paced', 'Private Discord channel', '2 custom skills for your stack', '1-hour onboarding call', 'Priority updates for 1 year', 'Early access to new kits'], url: 'https://gumroad.com/l/fdsa-agentic-enterprise', label: 'Buy Enterprise', cta: 'btn-ghost', highlight: false },
|
|
{ name: 'Cohort', amt: '247', note: 'next cohort TBD', feats: ['Everything in Enterprise', '6-week structured schedule', 'Weekly live office hours', 'Capstone peer review', 'Completion certificate', 'Alumni network'], url: 'https://gumroad.com/l/fdsa-agentic-cohort', label: 'Join Cohort', cta: 'btn-ghost', highlight: false },
|
|
]
|
|
|
|
const testimonials = [
|
|
{ q: 'The security ladder alone is worth the price. Finally understand how to safely deploy agents in production.', n: 'Alex K.', r: 'Senior ML Engineer' },
|
|
{ q: 'Went from vibe-coding to actually engineering agents. The harness vs model distinction changed how I think.', n: 'Jordan T.', r: 'Full-Stack Developer' },
|
|
{ q: 'Best practical course on multi-agent systems I\'ve found. The CEO Board pattern is genius.', n: 'Sam R.', r: 'AI Startup Founder' },
|
|
]
|
|
|
|
const faqs = [
|
|
{ q: 'Do I need API keys to run the labs?', a: 'No. All 13 labs include a mock LLM client that works offline. You only need API keys if you want to run against real models.', open: false },
|
|
{ q: 'What tools/CLIs does this course cover?', a: 'The course is tool-agnostic. The concepts apply to Claude Code, Pi Agent, OpenCode, Gemini CLI, and any agent harness. Labs use Python with an Anthropic-style API that\'s easy to adapt.', open: false },
|
|
{ q: 'How does FDSA compare to TAC or ClaudeFAST?', a: 'TAC ($97-147) focuses on tactical coding with 14 lessons. ClaudeFAST ($89-299) sells skill kits with 280 skills. FDSA ($97-247) gives you 65 lessons across 8 modules AND 20 skill kits — the most comprehensive single package for production agentic engineering.', open: false },
|
|
{ q: 'How long does the course take?', a: 'Self-paced: 40-60 hours total. Most students complete M1-M7 in 4-6 weeks. M8 capstone adds 1-2 weeks.', open: false },
|
|
{ q: 'What\'s the refund policy?', a: '30-day guarantee. If you\'re not satisfied, email artale@fdsa.agency for a full refund.', open: false },
|
|
{ q: 'Can I buy individual skill kits?', a: 'Yes. Security Foundation ($49), Multi-Agent Orch ($49), Verifier Pro ($39), and 4 more kits available individually on the pricing page.', open: false },
|
|
]
|
|
|
|
const comparisons = [
|
|
{ name: 'FDSA', pros: ['65 lessons + 13 labs', '20 skill kits included', '8 modules (foundations to capstone)', 'Mock LLM for offline work', 'Tool-agnostic (any CLI)', '30-day guarantee'], cons: ['Newer platform', 'No video content yet', 'Community still growing'] },
|
|
{ name: 'TAC', pros: ['14 focused lessons', '4 reference repos', 'Active YouTube channel', 'Proven track record'], cons: ['$97-147 for less content', 'No skill kits', 'No capstone project', 'Claude Code focused only'] },
|
|
{ name: 'ClaudeFAST', pros: ['280 skill files', '16 agent definitions', '$89 entry price', 'Active community'], cons: ['$299 for full access', 'No structured modules', 'No hands-on labs', 'Claude Code only'] },
|
|
{ name: 'Learn Harness', pros: ['Free (Anthropic)', '6 projects', '11 languages', 'Official Anthropic'], cons: ['No advanced patterns', 'No skill kits', 'No capstone', 'No security ladder'] },
|
|
]
|
|
|
|
onMounted(() => {
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('revealed')
|
|
}
|
|
})
|
|
}, { threshold: 0.1 })
|
|
|
|
document.querySelectorAll('.sec, .bi, .feat-grid .gc, .price-card, .test-card, .stat').forEach(el => {
|
|
el.classList.add('reveal')
|
|
observer.observe(el)
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
|
|
|
.landing {
|
|
font-family: 'DM Sans', -apple-system, sans-serif;
|
|
background: #0a0a0a; color: #e8e8e8;
|
|
-webkit-font-smoothing: antialiased; min-height: 100vh;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Nav */
|
|
.nav{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(10,10,10,0.85);backdrop-filter:blur(16px);border-bottom:1px solid #1a1a1a}
|
|
.nav-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 24px}
|
|
.logo-wrap{display:flex;align-items:center;gap:8px}
|
|
.logo-text{font-weight:800;font-size:20px;letter-spacing:-0.5px;color:#e8e8e8}
|
|
.nav-links{display:flex;gap:28px;align-items:center}
|
|
.nav-links a{color:#888;text-decoration:none;font-size:14px;font-weight:500;transition:color .2s}
|
|
.nav-links a:hover{color:#e8e8e8}
|
|
.nav-cta{background:#d95c41;color:#fff!important;padding:8px 20px;border-radius:6px;font-weight:600}
|
|
.nav-cta:hover{background:#c44a30!important}
|
|
|
|
/* Hero */
|
|
.hero-sec{min-height:90vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:140px 24px 60px;text-align:center;position:relative;overflow:hidden}
|
|
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(217,92,65,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(217,92,65,0.04) 1px,transparent 1px);background-size:40px 40px;pointer-events:none}
|
|
.hero-glow{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(217,92,65,0.08) 0%,transparent 60%);pointer-events:none}
|
|
.hero-inner{position:relative;z-index:1;max-width:680px;width:100%;margin:0 auto}
|
|
.hero-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(217,92,65,0.1);border:1px solid rgba(217,92,65,0.3);padding:6px 16px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#d95c41;margin-bottom:24px}
|
|
.pill-dot{width:6px;height:6px;border-radius:50%;background:#d95c41;animation:pulse 2s ease-in-out infinite}
|
|
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.3}}
|
|
.hero-sec h1{font-size:56px;font-weight:800;letter-spacing:-1.5px;line-height:1.05;color:#f0f0f0;margin-bottom:20px}
|
|
.hlt{background:linear-gradient(135deg,#d95c41,#e87d2f);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
|
|
.hero-sub{font-size:18px;color:#888;line-height:1.6;margin-bottom:36px;max-width:560px;margin-left:auto;margin-right:auto}
|
|
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
|
|
.btn-p{display:inline-block;padding:14px 32px;border-radius:8px;font-weight:600;font-size:15px;text-decoration:none;transition:all .2s;cursor:pointer}
|
|
.btn-primary{background:#d95c41;color:#fff}
|
|
.btn-primary:hover{background:#c44a30;transform:translateY(-1px)}
|
|
.btn-ghost{color:#e8e8e8;border:1px solid #222}
|
|
.btn-ghost:hover{border-color:#555}
|
|
|
|
/* Terminal */
|
|
.term-widget{margin-top:48px;max-width:560px;width:100%;background:rgba(17,17,17,0.9);backdrop-filter:blur(12px);border:1px solid #222;border-radius:12px;padding:20px;text-align:left;position:relative;overflow:hidden}
|
|
.term-widget::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#d95c41,transparent);opacity:.5}
|
|
.term-dots{display:flex;gap:8px;margin-bottom:16px}
|
|
.td{width:10px;height:10px;border-radius:50%}
|
|
.td.r{background:#ef4444}.td.y{background:#eab308}.td.g{background:#22c55e}
|
|
.term-l{font-family:'DM Mono',monospace;font-size:12px;color:#888;line-height:2}
|
|
.term-l.c{color:#d95c41}.term-l.a{color:#7bd0ff}.term-l.g{color:#22c55e}
|
|
.term-bar{margin-top:12px;height:4px;background:#1a1a1a;border-radius:2px;overflow:hidden}
|
|
.term-fill{height:100%;width:72%;background:linear-gradient(90deg,#d95c41,#e87d2f);border-radius:2px;animation:prog 3s ease-in-out infinite}
|
|
@keyframes prog{0%{width:20%;opacity:.6}50%{width:75%;opacity:1}100%{width:20%;opacity:.6}}
|
|
|
|
/* Stats */
|
|
.stats-sec{padding:0 24px 60px}
|
|
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);max-width:800px;margin:0 auto;gap:24px}
|
|
.stat{text-align:center;background:rgba(17,17,17,0.6);border:1px solid rgba(255,255,255,0.04);border-radius:12px;padding:24px 16px;transition:all .4s}
|
|
.stat:hover{border-color:rgba(217,92,65,0.2)}
|
|
.stat-n{display:block;font-size:36px;font-weight:800;color:#d95c41;line-height:1;margin-bottom:4px}
|
|
.stat-l{display:block;font-size:13px;color:#666;font-weight:500}
|
|
|
|
/* Section */
|
|
.sec{max-width:1280px;margin:0 auto;padding:80px 24px}
|
|
.sec-label{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#d95c41;text-align:center;margin-bottom:16px}
|
|
.sec-title{text-align:center;font-size:32px;font-weight:700;margin-bottom:48px;color:#f0f0f0}
|
|
|
|
/* Glass card */
|
|
.gc{background:rgba(17,17,17,0.85);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.06);border-top:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:28px 24px;transition:all .4s}
|
|
.gc:hover{border-color:rgba(217,92,65,0.3);transform:translateY(-2px)}
|
|
|
|
/* Scroll reveal animation */
|
|
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
|
|
.reveal.revealed{opacity:1;transform:translateY(0)}
|
|
.bi.reveal,.feat-grid .gc.reveal,.price-card.reveal,.test-card.reveal,.stat.reveal{opacity:0;transform:translateY(16px)}
|
|
.bi.reveal.revealed,.feat-grid .gc.reveal.revealed,.price-card.reveal.revealed,.test-card.reveal.revealed,.stat.reveal.revealed{opacity:1;transform:translateY(0)}
|
|
|
|
/* Feature grid */
|
|
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,0.03);border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.06)}
|
|
.feat-grid .gc{border:none;border-radius:0}
|
|
.gci{width:48px;height:48px;border-radius:10px;background:rgba(217,92,65,0.12);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
|
|
.gci .material-symbols-outlined{color:#d95c41;font-size:24px}
|
|
.gc-t{font-size:15px;font-weight:700;color:#f0f0f0;margin-bottom:8px}
|
|
.gc-d{font-size:13px;color:#888;line-height:1.6}
|
|
|
|
/* Bento */
|
|
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
|
|
.bi{background:rgba(17,17,17,0.85);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.06);border-top:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:24px;position:relative;overflow:hidden;transition:all .3s}
|
|
.bi:hover{border-color:rgba(217,92,65,0.3);transform:translateY(-1px)}
|
|
.bi.hl{border-color:rgba(217,92,65,0.2);background:rgba(217,92,65,0.04)}
|
|
.w4{grid-column:span 4}.w6{grid-column:span 6}.w8{grid-column:span 8}.w12{grid-column:span 12}
|
|
.bi-n{position:absolute;top:12px;right:16px;font-size:40px;font-weight:800;opacity:0.06;color:#fff;user-select:none}
|
|
.bi-ic{width:36px;height:36px;border-radius:8px;background:rgba(217,92,65,0.12);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
|
|
.bi-ic .material-symbols-outlined{color:#d95c41;font-size:20px}
|
|
.bi-t{font-size:15px;font-weight:700;color:#f0f0f0;margin-bottom:6px}
|
|
.bi-d{font-size:13px;color:#888;line-height:1.5;margin-bottom:12px}
|
|
.bi-tags{display:flex;flex-wrap:wrap;gap:6px}
|
|
.bi-tags span{font-size:10px;font-weight:600;letter-spacing:.05em;padding:3px 8px;border-radius:4px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);color:#666}
|
|
|
|
/* Testimonials */
|
|
.test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
|
|
.test-card{background:rgba(17,17,17,0.85);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.06);border-radius:12px;padding:24px;display:flex;flex-direction:column;justify-content:space-between}
|
|
.test-q{font-size:14px;line-height:1.6;color:#c0c0c0;font-style:italic;margin-bottom:20px}
|
|
.test-a{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid rgba(255,255,255,0.04)}
|
|
.test-av{width:36px;height:36px;border-radius:50%;background:rgba(217,92,65,0.2);color:#d95c41;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
|
|
.test-n{font-size:13px;font-weight:600;color:#e8e8e8}
|
|
.test-r{font-size:11px;color:#666}
|
|
|
|
/* Comparisons */
|
|
.compare-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
|
|
.compare-c{background:rgba(17,17,17,0.85);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.06);border-radius:12px;padding:24px}
|
|
.compare-name{font-size:16px;font-weight:700;color:#f0f0f0;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,0.06)}
|
|
.compare-pros,.compare-cons{list-style:none;margin:0;padding:0;font-size:12px;line-height:1.6}
|
|
.compare-pros{color:#22c55e;margin-bottom:12px}
|
|
.compare-pros li,.compare-cons li{display:flex;align-items:flex-start;gap:6px;padding:4px 0}
|
|
.compare-pros .material-symbols-outlined,.compare-cons .material-symbols-outlined{font-size:14px;margin-top:2px}
|
|
.compare-pros .material-symbols-outlined{color:#22c55e}
|
|
.compare-cons .material-symbols-outlined{color:#ef4444}
|
|
.compare-cons{color:#888}
|
|
|
|
/* Pricing */
|
|
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:960px;margin:0 auto}
|
|
.price-card{background:rgba(17,17,17,0.85);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.06);border-radius:12px;padding:32px 24px;text-align:center;transition:all .3s;display:flex;flex-direction:column}
|
|
.price-card:hover{border-color:rgba(217,92,65,0.2)}
|
|
.price-card.highlight{border-color:rgba(217,92,65,0.3);background:rgba(217,92,65,0.04);position:relative}
|
|
.price-card.highlight::before{content:'Most Popular';position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:#d95c41;color:#fff;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 16px;border-radius:999px}
|
|
.price-name{font-size:14px;font-weight:600;color:#888;margin-bottom:8px;text-transform:uppercase;letter-spacing:.1em}
|
|
.price-amt{font-size:48px;font-weight:800;color:#d95c41;line-height:1;margin-bottom:4px}
|
|
.price-dol{font-size:24px;vertical-align:super}
|
|
.price-note{font-size:12px;color:#555;margin-bottom:24px}
|
|
.price-feats{list-style:none;text-align:left;margin-bottom:28px;flex:1}
|
|
.price-feats li{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.04);font-size:13px;color:#888}
|
|
.price-feats li:last-child{border-bottom:none}
|
|
.price-feats .material-symbols-outlined{font-size:18px;color:#d95c41;flex-shrink:0}
|
|
.price-card .btn-p{width:100%;text-align:center}
|
|
|
|
/* FAQ */
|
|
.faq-list{max-width:640px;margin:0 auto}
|
|
.faq-item{border-bottom:1px solid rgba(255,255,255,0.04);cursor:pointer;padding:0}
|
|
.faq-q{display:flex;align-items:center;justify-content:space-between;padding:20px 0;font-size:15px;color:#d0d0d0;font-weight:500}
|
|
.faq-icon{font-size:20px;color:#555;transition:transform .2s}
|
|
.faq-icon.open{transform:rotate(180deg)}
|
|
.faq-a{padding:0 0 20px;font-size:14px;line-height:1.7;color:#888}
|
|
|
|
/* Footer */
|
|
.ft{padding:48px 24px 80px;border-top:1px solid #1a1a1a}
|
|
.ft-inner{max-width:1280px;margin:0 auto}
|
|
.ft-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:32px}
|
|
.ft-l{font-size:20px;font-weight:800;color:#f0f0f0;margin-bottom:8px}
|
|
.ft-desc{font-size:13px;color:#555;line-height:1.6;max-width:240px}
|
|
.ft-h{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#888;margin-bottom:16px}
|
|
.ft-col{display:flex;flex-direction:column;gap:10px}
|
|
.ft-col a{color:#555;text-decoration:none;font-size:13px;transition:color .2s}
|
|
.ft-col a:hover{color:#888}
|
|
.ft-c{text-align:center;font-size:12px;color:#444;padding-top:24px;border-top:1px solid #1a1a1a}
|
|
|
|
/* Bottom nav */
|
|
.bn{display:none;position:fixed;bottom:0;left:0;right:0;z-index:50;background:rgba(10,10,10,0.92);backdrop-filter:blur(16px);border-top:1px solid #1a1a1a;height:64px;padding:4px 16px 12px;justify-content:space-around;align-items:center}
|
|
.bn-i{display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:#555;font-size:10px;font-weight:600;transition:color .2s}
|
|
.bn-i.active{color:#d95c41}.bn-i:hover{color:#888}
|
|
.bn-i .material-symbols-outlined{font-size:22px}
|
|
|
|
@media (max-width:768px){
|
|
.nav-links a:not(.nav-cta){display:none}
|
|
.hero-sec h1{font-size:32px}
|
|
.hero-sub{font-size:16px}
|
|
.feat-grid{grid-template-columns:1fr}
|
|
.test-grid{grid-template-columns:1fr}
|
|
.compare-grid{grid-template-columns:1fr}
|
|
.pricing-grid{grid-template-columns:1fr}
|
|
.stats-grid{grid-template-columns:repeat(2,1fr)}
|
|
.ft-grid{grid-template-columns:1fr 1fr;gap:24px}
|
|
.ft-brand{grid-column:span 2}
|
|
.w4,.w6,.w8,.w12{grid-column:span 12}
|
|
.bn{display:flex}
|
|
.landing{padding-bottom:64px}
|
|
.sec{padding:48px 16px}
|
|
}
|
|
@media(min-width:769px)and(max-width:1024px){
|
|
.w4{grid-column:span 6}.w6{grid-column:span 6}.w8{grid-column:span 12}.w12{grid-column:span 12}
|
|
}
|
|
</style>
|