<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="/free-preview">Preview</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>THE HARD WAY</div>
          <h1>Agentic Engineering <span class="hlt">the Hard Way</span></h1>
          <p class="hero-sub">Build every component from scratch. 65 lessons, 13 labs, 20 skill kits. No black boxes, no magic SDKs — just you, the harness, and the loop.</p>
          <div class="hero-actions">
            <a href="/buy" class="btn-p btn-primary">Enroll Now — $97</a>
            <a href="/free-preview" class="btn-p btn-ghost">Free Preview</a>
            <a href="/modules/m1-foundations" class="btn-p btn-ghost">View Curriculum</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 Systems. From Scratch.</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>

      <!-- Instructor -->
      <section class="sec" id="instructor">
        <div class="sec-label">Your Instructor</div>
        <h2 class="sec-title">Built by an Engineer, For Engineers</h2>
        <div class="instructor-grid">
          <div class="instructor-card">
            <div class="instructor-avatar">
              <span class="material-symbols-outlined">terminal</span>
            </div>
            <div class="instructor-info">
              <h3>Artale</h3>
              <p class="instructor-role">Founder, FDSA Agency</p>
              <p class="instructor-bio">I've spent the last two years building production multi-agent systems — from <strong>CEO Boards</strong> for strategic decision-making to <strong>Brand Monitor</strong> for always-on reputation tracking, to <strong>UI Agents</strong> that generate production Vue components. This course distills everything I learned shipping real agent systems, not toy demos.</p>
              <p class="instructor-bio">Every pattern in this course — the 6-level security ladder, P-threads, cascade routing, the verifier pattern — came from building systems that had to work reliably in production. We build everything from scratch. No black boxes, no SDK abstractions. This is <strong>Agentic Engineering the Hard Way</strong>.</p>
            </div>
          </div>
        </div>
      </section>

      <!-- Email Capture -->
      <section class="sec" id="newsletter">
        <div class="sec-label">Stay Updated</div>
        <h2 class="sec-title">Get Free Agent Engineering Resources</h2>
        <p class="newsletter-sub">Weekly essays on multi-agent systems, security patterns, and production deployments. No spam, unsubscribe anytime.</p>
        <form class="newsletter-form" action="mailto:artale@fdsa.agency" method="get" target="_blank">
          <input type="email" class="newsletter-input" name="subject" placeholder="you@example.com" required value="Interested in FDSA course updates">
          <button type="submit" class="btn-p btn-primary">Get Updates</button>
        </form>
        <p class="newsletter-note">No spam. Unsubscribe anytime. Or follow <a href="http://185.239.209.216:3001/artale" target="_blank">@artale on Forgejo</a>.</p>
      </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">Agentic Engineering the Hard Way</div>
            <div class="ft-desc">Part of the FDSA Agency — 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="https://discord.gg/fdsa-agency">Discord</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 — something no other course teaches.', n: 'Marcus W.', r: 'Staff Engineer, SaaS Company' },
  { q: 'Went from vibe-coding to actually engineering agents. The harness vs model distinction changed how I think about every agent system I build.', n: 'Priya S.', r: 'Lead ML Engineer, FinTech' },
  { q: 'Best practical course on multi-agent systems I\'ve found. The CEO Board pattern alone saved me weeks of architecture work.', n: 'Tomás R.', r: 'CTO, AI Startup'},
  { q: 'I\'ve taken TAC and ClaudeFAST. FDSA is the most comprehensive — 65 lessons with actual labs that work offline. No other course has that.', n: 'Daniel K.', r: 'Senior Developer, E-Commerce' },
]

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 — and we build everything from scratch. No SDK wrappers, no black boxes. That\'s the Hard Way difference.', 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 (the Hard Way)', pros: ['65 lessons + 13 labs', '20 skill kits included', 'Build from scratch, no black boxes', '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: var(--vp-c-bg); color: var(--vp-c-text-1);
  -webkit-font-smoothing: antialiased; min-height: 100vh;
  overflow-x: hidden;
}

/* Nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;background:color-mix(in srgb, var(--vp-c-bg) 85%, transparent);backdrop-filter:blur(16px);border-bottom:1px solid var(--vp-c-divider)}
.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:var(--vp-c-text-1)}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{color:var(--vp-c-text-2);text-decoration:none;font-size:14px;font-weight:500;transition:color .2s}
.nav-links a:hover{color:var(--vp-c-text-1)}
.nav-cta{background:var(--vp-c-brand-1);color:#fff!important;padding:8px 20px;border-radius:6px;font-weight:600}
.nav-cta:hover{background:var(--vp-c-brand-3)!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:var(--vp-c-brand-1);margin-bottom:24px}
.pill-dot{width:6px;height:6px;border-radius:50%;background:var(--vp-c-brand-1);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:var(--vp-c-text-1);margin-bottom:20px}
.hlt{background:linear-gradient(135deg,var(--vp-c-brand-1),var(--vp-c-brand-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-sub{font-size:18px;color:var(--vp-c-text-2);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:var(--vp-c-brand-1);color:#fff}
.btn-primary:hover{background:var(--vp-c-brand-3);transform:translateY(-1px)}
.btn-ghost{color:var(--vp-c-text-1);border:1px solid var(--vp-c-border)}
.btn-ghost:hover{border-color:var(--vp-c-text-2)}

/* Terminal */
.term-widget{margin-top:48px;max-width:560px;width:100%;background:var(--vp-c-bg-soft);backdrop-filter:blur(12px);border:1px solid var(--vp-c-border);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,var(--vp-c-brand-1),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:var(--vp-c-text-2);line-height:2}
.term-l.c{color:var(--vp-c-brand-1)}.term-l.a{color:#7bd0ff}.term-l.g{color:#22c55e}
.term-bar{margin-top:12px;height:4px;background:var(--vp-c-divider);border-radius:2px;overflow:hidden}
.term-fill{height:100%;width:72%;background:linear-gradient(90deg,var(--vp-c-brand-1),var(--vp-c-brand-2));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:var(--vp-c-bg-soft);border:1px solid rgba(128,128,128,0.08);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:var(--vp-c-brand-1);line-height:1;margin-bottom:4px}
.stat-l{display:block;font-size:13px;color:var(--vp-c-text-3);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:var(--vp-c-brand-1);text-align:center;margin-bottom:16px}
.sec-title{text-align:center;font-size:32px;font-weight:700;margin-bottom:48px;color:var(--vp-c-text-1)}

/* Glass card */
.gc{background:var(--vp-c-bg-soft);backdrop-filter:blur(12px);border:1px solid rgba(128,128,128,0.08);border-top:1px solid rgba(128,128,128,0.12);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(128,128,128,0.06);border-radius:12px;overflow:hidden;border:1px solid rgba(128,128,128,0.08)}
.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:var(--vp-c-brand-1);font-size:24px}
.gc-t{font-size:15px;font-weight:700;color:var(--vp-c-text-1);margin-bottom:8px}
.gc-d{font-size:13px;color:var(--vp-c-text-2);line-height:1.6}

/* Bento */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.bi{background:var(--vp-c-bg-soft);backdrop-filter:blur(12px);border:1px solid rgba(128,128,128,0.08);border-top:1px solid rgba(128,128,128,0.12);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:#000;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:var(--vp-c-brand-1);font-size:20px}
.bi-t{font-size:15px;font-weight:700;color:var(--vp-c-text-1);margin-bottom:6px}
.bi-d{font-size:13px;color:var(--vp-c-text-2);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(128,128,128,0.08);border:1px solid rgba(128,128,128,0.1);color:var(--vp-c-text-3)}

/* Testimonials */
.test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.test-card{background:var(--vp-c-bg-soft);backdrop-filter:blur(12px);border:1px solid rgba(128,128,128,0.08);border-radius:12px;padding:24px;display:flex;flex-direction:column;justify-content:space-between}
.test-q{font-size:14px;line-height:1.6;color:var(--vp-c-text-2);font-style:italic;margin-bottom:20px}
.test-a{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid rgba(128,128,128,0.08)}
.test-av{width:36px;height:36px;border-radius:50%;background:rgba(217,92,65,0.2);color:var(--vp-c-brand-1);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.test-n{font-size:13px;font-weight:600;color:var(--vp-c-text-1)}
.test-r{font-size:11px;color:var(--vp-c-text-3)}

/* Comparisons */
.compare-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.compare-c{background:var(--vp-c-bg-soft);backdrop-filter:blur(12px);border:1px solid rgba(128,128,128,0.08);border-radius:12px;padding:24px}
.compare-name{font-size:16px;font-weight:700;color:var(--vp-c-text-1);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid rgba(128,128,128,0.08)}
.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:var(--vp-c-text-2)}

/* Instructor */
.instructor-grid{max-width:720px;margin:0 auto}
.instructor-card{display:flex;gap:32px;align-items:flex-start;background:var(--vp-c-bg-soft);backdrop-filter:blur(12px);border:1px solid rgba(128,128,128,0.08);border-radius:16px;padding:36px}
.instructor-avatar{width:72px;height:72px;border-radius:50%;background:rgba(217,92,65,0.12);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.instructor-avatar .material-symbols-outlined{font-size:32px;color:var(--vp-c-brand-1)}
.instructor-info{flex:1}
.instructor-info h3{font-size:20px;font-weight:700;color:var(--vp-c-text-1);margin-bottom:2px}
.instructor-role{font-size:13px;color:var(--vp-c-text-2);margin-bottom:16px}
.instructor-bio{font-size:14px;line-height:1.7;color:var(--vp-c-text-2);margin-bottom:12px}
.instructor-bio:last-child{margin-bottom:0}
.instructor-bio strong{color:var(--vp-c-text-1)}

/* Newsletter */
.newsletter-sub{text-align:center;color:var(--vp-c-text-2);font-size:15px;margin-bottom:24px;max-width:480px;margin-left:auto;margin-right:auto}
.newsletter-form{display:flex;gap:12px;max-width:440px;margin:0 auto;justify-content:center}
.newsletter-input{flex:1;padding:12px 16px;border-radius:8px;border:1px solid rgba(128,128,128,0.2);background:var(--vp-c-bg-soft);color:var(--vp-c-text-1);font-family:inherit;font-size:14px;outline:none;transition:border .2s}
.newsletter-input:focus{border-color:var(--vp-c-brand-1)}
.newsletter-input:disabled{opacity:0.5;cursor:not-allowed}
.newsletter-form .btn-p{padding:12px 24px;font-size:14px;border:none;cursor:pointer}
.newsletter-form .btn-p:disabled{opacity:0.5;cursor:not-allowed}
.newsletter-note{text-align:center;font-size:12px;color:var(--vp-c-text-3);margin-top:16px}
.newsletter-note a{color:var(--vp-c-brand-1)}

/* Pricing */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:960px;margin:0 auto}
.price-card{background:var(--vp-c-bg-soft);backdrop-filter:blur(12px);border:1px solid rgba(128,128,128,0.08);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:var(--vp-c-brand-1);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:var(--vp-c-text-2);margin-bottom:8px;text-transform:uppercase;letter-spacing:.1em}
.price-amt{font-size:48px;font-weight:800;color:var(--vp-c-brand-1);line-height:1;margin-bottom:4px}
.price-dol{font-size:24px;vertical-align:super}
.price-note{font-size:12px;color:var(--vp-c-text-3);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(128,128,128,0.08);font-size:13px;color:var(--vp-c-text-2)}
.price-feats li:last-child{border-bottom:none}
.price-feats .material-symbols-outlined{font-size:18px;color:var(--vp-c-brand-1);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(128,128,128,0.08);cursor:pointer;padding:0}
.faq-q{display:flex;align-items:center;justify-content:space-between;padding:20px 0;font-size:15px;color:var(--vp-c-text-1);font-weight:500}
.faq-icon{font-size:20px;color:var(--vp-c-text-3);transition:transform .2s}
.faq-icon.open{transform:rotate(180deg)}
.faq-a{padding:0 0 20px;font-size:14px;line-height:1.7;color:var(--vp-c-text-2)}

/* Footer */
.ft{padding:48px 24px 80px;border-top:1px solid var(--vp-c-divider)}
.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:var(--vp-c-text-1);margin-bottom:8px}
.ft-desc{font-size:13px;color:var(--vp-c-text-3);line-height:1.6;max-width:240px}
.ft-h{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--vp-c-text-2);margin-bottom:16px}
.ft-col{display:flex;flex-direction:column;gap:10px}
.ft-col a{color:var(--vp-c-text-3);text-decoration:none;font-size:13px;transition:color .2s}
.ft-col a:hover{color:var(--vp-c-text-2)}
.ft-c{text-align:center;font-size:12px;color:var(--vp-c-text-3);padding-top:24px;border-top:1px solid var(--vp-c-divider)}

/* Bottom nav */
.bn{display:none;position:fixed;bottom:0;left:0;right:0;z-index:50;background:color-mix(in srgb, var(--vp-c-bg) 92%, transparent);backdrop-filter:blur(16px);border-top:1px solid var(--vp-c-divider);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:var(--vp-c-text-3);font-size:10px;font-weight:600;transition:color .2s}
.bn-i.active{color:var(--vp-c-brand-1)}.bn-i:hover{color:var(--vp-c-text-2)}
.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>
