<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>

      <!-- 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 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 },
]

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}
.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:460px;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}

/* 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}
  .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>
