forge.html

---
layout: default
title: The Forge | Hacker Dojo
---
<!-- Load Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Saira:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">

<style>
/* ═══ CSS VARIABLES & SCOPE ═══ */
.forge-wrapper {
  --bg: #FAFAF8; --card: #FFFFFF; --dark: #141414; --body: #5A5A5A; --muted: #999;
  --border: #E5E1DC; --red: #C84A0E; --navy: #0C111D; --green: #059669; --amber: #F59E0B;
  --purple: #7C3AED; --purpleLight: #F3EEFF;
  
  font-family: 'Saira', system-ui, sans-serif;
  color: var(--dark);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ═══ CERTIFICATION NAME ═══ */
.forge-wrapper .cert-name {
  display: inline; font-size: 1.1em; font-weight: 900;
  background: linear-gradient(135deg, #C4B5FD, #8B5CF6, #7C3AED, #B794F6);
  background-size: 200% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  position: relative; animation: certShift 4s ease infinite; filter: drop-shadow(0 0 8px rgba(139,92,246,.3)); letter-spacing: .01em;
}
.forge-wrapper .cert-name::after {
  content: ''; position: absolute; bottom: -3px; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(139,92,246,.5), transparent);
  background-size: 200% 100%; animation: shimmer 2.5s ease infinite;
}

/* ═══ ANIMATIONS ═══ */
@keyframes certShift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes shimmer { 0%{background-position:200% 50%} 100%{background-position:-200% 50%} }
@keyframes borderPulse { 0%,100%{border-color:rgba(124,58,237,.35);box-shadow:0 0 20px rgba(124,58,237,.08)} 50%{border-color:rgba(124,58,237,.6);box-shadow:0 0 36px rgba(124,58,237,.15)} }
@keyframes dotFloat1 { 0%,100%{transform:translate(0,0) scale(1);opacity:.3} 50%{transform:translate(12px,-18px) scale(1.3);opacity:.6} }
@keyframes dotFloat2 { 0%,100%{transform:translate(0,0) scale(1);opacity:.2} 50%{transform:translate(-10px,14px) scale(1.5);opacity:.5} }
@keyframes dotFloat3 { 0%,100%{transform:translate(0,0) scale(1.2);opacity:.25} 50%{transform:translate(8px,10px) scale(.8);opacity:.55} }

.forge-wrapper .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.forge-wrapper .reveal.visible { opacity: 1; transform: translateY(0); }
.forge-wrapper .stagger-1 { transition-delay: .08s; }
.forge-wrapper .stagger-2 { transition-delay: .16s; }
.forge-wrapper .stagger-3 { transition-delay: .24s; }
.forge-wrapper .stagger-4 { transition-delay: .32s; }

/* ═══ HERO ═══ */
.forge-wrapper .hero {
  background: var(--navy); color: #fff; padding: 100px 24px 70px; text-align: center; position: relative; overflow: hidden;
}
.forge-wrapper .hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255,255,255,.025) 39px, rgba(255,255,255,.025) 40px),
              repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255,255,255,.025) 39px, rgba(255,255,255,.025) 40px);
}
.forge-wrapper .hero::after {
  content: ''; position: absolute; top: -30%; right: -15%; width: 60%; height: 70%; border-radius: 50%;
  background: radial-gradient(circle, rgba(124,58,237,.15), transparent 70%); pointer-events: none;
}
.forge-wrapper .hero > * { position: relative; z-index: 1; }

.forge-wrapper .hero-dot { position: absolute; border-radius: 50%; background: rgba(139,92,246,.3); pointer-events: none; z-index: 0; }
.forge-wrapper .hero-dot:nth-child(1) { width: 6px; height: 6px; top: 20%; left: 15%; animation: dotFloat1 6s ease infinite; }
.forge-wrapper .hero-dot:nth-child(2) { width: 4px; height: 4px; top: 60%; left: 25%; animation: dotFloat2 8s ease infinite .5s; }
.forge-wrapper .hero-dot:nth-child(3) { width: 8px; height: 8px; top: 30%; right: 20%; animation: dotFloat3 7s ease infinite 1s; }
.forge-wrapper .hero-dot:nth-child(4) { width: 5px; height: 5px; top: 70%; right: 15%; animation: dotFloat1 9s ease infinite 1.5s; }
.forge-wrapper .hero-dot:nth-child(5) { width: 3px; height: 3px; top: 45%; left: 40%; animation: dotFloat2 5s ease infinite 2s; }
.forge-wrapper .hero-dot:nth-child(6) { width: 7px; height: 7px; top: 25%; right: 35%; animation: dotFloat3 10s ease infinite .8s; }

.forge-wrapper .hero-cert-badge {
  display: inline-block; background: rgba(245, 158, 11, 0.15); border: 2px solid #F59E0B; padding: 14px 32px; 
  border-radius: 40px; margin-bottom: 32px; box-shadow: 0 0 24px rgba(245, 158, 11, 0.25);
  animation: fadeIn 0.8s ease;
}
.forge-wrapper .hero-cert-badge span {
  font-size: 22px; font-weight: 900; color: #F59E0B; text-transform: uppercase; letter-spacing: 0.05em;
}

.forge-wrapper .hero h1 { font-size: clamp(32px, 5.5vw, 54px); font-weight: 900; line-height: 1.08; margin-bottom: 18px; letter-spacing: -.03em; animation: fadeUp .8s ease .1s both; }
.forge-wrapper .hero h1 em { font-style: normal; background: linear-gradient(135deg, #B794F6, #8B5CF6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.forge-wrapper .hero .sub { font-size: 17px; color: #94A3B8; max-width: 600px; margin: 0 auto 40px; line-height: 1.65; animation: fadeUp .8s ease .2s both; }

.forge-wrapper .hero-stats { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; animation: fadeUp .8s ease .3s both; }
.forge-wrapper .hs { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-top: 2px solid rgba(124,58,237,.35); padding: 16px 24px; border-radius: 10px; text-align: center; min-width: 96px; transition: all .2s; }
.forge-wrapper .hs:hover { border-top-color: var(--purple); transform: translateY(-2px); background: rgba(255,255,255,.06); }
.forge-wrapper .hs .v { font-size: 26px; font-weight: 800; color: #fff; }
.forge-wrapper .hs .l { font-size: 10px; color: #64748B; text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }

/* ═══ TRANSFORMATION ═══ */
.forge-wrapper .xform { padding: 40px 24px; background: var(--card); border-bottom: 1px solid var(--border); text-align: center; }
.forge-wrapper .xform-box { max-width: 720px; margin: 0 auto; padding: 18px 28px; border-radius: 10px; background: linear-gradient(135deg, var(--purpleLight), #F5F3FF); border: 1.5px solid rgba(124,58,237,.12); font-size: 15px; font-weight: 600; color: var(--dark); line-height: 1.6; }

/* ═══ COMPARE (Light Background) ═══ */
.forge-wrapper .compare { background: #FFFFFF; color: var(--dark); padding: 80px 24px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.forge-wrapper .compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 860px; margin: 32px auto 0; text-align: left; }
.forge-wrapper .cc { border-radius: 14px; padding: 32px; transition: all .3s; }
.forge-wrapper .cc.old { background: #F9FAFB; border: 1px solid #E5E7EB; color: #475569; }
.forge-wrapper .cc.new { background: #F5F3FF; border: 2px solid #8B5CF6; box-shadow: 0 10px 30px rgba(139,92,246,0.12); color: #1e293b; }
.forge-wrapper .cc h3 { font-size: 18px; font-weight: 800; margin-bottom: 18px; display: flex; align-items: center; gap: 8px; }
.forge-wrapper .cc.old h3 { color: #475569; }
.forge-wrapper .cc.new h3 { color: #5B36EE; }
.forge-wrapper .cc li { font-size: 14px; padding: 8px 0; list-style: none; display: flex; gap: 10px; line-height: 1.5; font-weight: 500; }
.forge-wrapper .cc.old li { color: #64748B; }
.forge-wrapper .cc.new li { color: #334155; }

/* ═══ SKILLS ACCORDION ═══ */
.forge-wrapper .skills-section { padding: 80px 24px; background: var(--bg); text-align: center; }
.forge-wrapper .skills-container { max-width: 760px; margin: 36px auto 0; text-align: left; }
.forge-wrapper .skill-cat { background: var(--card); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.02); transition: all 0.2s; overflow: hidden; }
.forge-wrapper .skill-cat:hover { border-color: rgba(124,58,237,0.3); }
.forge-wrapper .skill-cat summary { padding: 20px 24px; font-weight: 800; font-size: 17px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; color: var(--dark); user-select: none; background: #fff; }
.forge-wrapper .skill-cat summary::-webkit-details-marker { display: none; }
.forge-wrapper .skill-cat summary::after { content: '+'; font-size: 26px; color: var(--purple); font-weight: 400; line-height: 1; }
.forge-wrapper .skill-cat[open] summary::after { content: '−'; }
.forge-wrapper .skill-cat[open] summary { border-bottom: 1px solid var(--border); background: #FAFAF8; }
.forge-wrapper .skill-list { padding: 24px; display: flex; flex-wrap: wrap; gap: 10px; background: #FAFAF8; }
.forge-wrapper .sk { font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 8px; background: var(--purpleLight); color: var(--purple); border: 1px solid rgba(124,58,237,.1); transition: all .2s; }
.forge-wrapper .sk:hover { background: var(--purple); color: #fff; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(124,58,237,0.2); }

/* ═══ STRUCTURE ═══ */
.forge-wrapper .structure { padding: 64px 24px; background: var(--card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); text-align: center; }
.forge-wrapper .struct-row { display: flex; gap: 10px; margin-bottom: 10px; max-width: 780px; margin-left: auto; margin-right: auto; }
.forge-wrapper .sb { flex: 1; border-radius: 12px; padding: 20px 14px; text-align: center; transition: all .2s; }
.forge-wrapper .sb:hover { transform: translateY(-3px); }
.forge-wrapper .sb.core { background: var(--purpleLight); border: 1px solid rgba(124,58,237,.12); }
.forge-wrapper .sb.elec { background: #FFF7ED; border: 1px solid rgba(200,74,14,.1); }
.forge-wrapper .sb.cap { background: var(--navy); border: 1px solid var(--navy); color: #fff; }
.forge-wrapper .sb .sn { font-size: 24px; font-weight: 800; margin-bottom: 4px; }
.forge-wrapper .sb.core .sn { color: var(--purple); } .forge-wrapper .sb.elec .sn { color: var(--red); } .forge-wrapper .sb.cap .sn { color: var(--amber); }
.forge-wrapper .sb .sl { font-size: 13px; font-weight: 700; line-height: 1.4; }

/* ═══ SESSIONS ═══ */
.forge-wrapper .sessions { padding: 80px 24px; background: var(--bg); }
.forge-wrapper .sess { max-width: 900px; margin: 0 auto 16px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 32px; display: flex; gap: 20px; align-items: flex-start; transition: all .25s; text-align: left; }
.forge-wrapper .sess:hover { border-color: rgba(124,58,237,.2); box-shadow: 0 8px 30px rgba(124,58,237,.06); transform: translateY(-2px); }
.forge-wrapper .sess-num { width: 54px; height: 54px; border-radius: 14px; background: var(--purpleLight); color: var(--purple); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; flex-shrink: 0; transition: all .2s; }
.forge-wrapper .sess:hover .sess-num { background: var(--purple); color: #fff; }
.forge-wrapper .sess h3 { font-size: 20px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 4px; color: var(--dark); }
.forge-wrapper .sess .sub { font-size: 13px; color: var(--muted); margin-bottom: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.forge-wrapper .sess p { font-size: 15px; color: var(--body); line-height: 1.6; margin-bottom: 16px; }
.forge-wrapper .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.forge-wrapper .tag { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 6px; background: var(--bg); border: 1px solid var(--border); color: var(--body); }
.forge-wrapper .tag.out { background: rgba(16,185,129,.06); border-color: rgba(16,185,129,.12); color: var(--green); font-weight: 700; }

/* ═══ ELECTIVES ═══ */
.forge-wrapper .electives { padding: 64px 24px; background: var(--card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.forge-wrapper .eg { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; max-width: 860px; margin-left: auto; margin-right: auto; text-align: left; }
.forge-wrapper .ec { border: 1px solid var(--border); border-radius: 14px; padding: 24px; background: var(--bg); transition: all .2s; }
.forge-wrapper .ec:hover { border-color: rgba(124,58,237,.2); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.05); }
.forge-wrapper .ec h4 { font-size: 16px; font-weight: 800; margin-bottom: 6px; color: var(--dark); }
.forge-wrapper .ec .who { font-size: 11px; font-weight: 700; color: var(--purple); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
.forge-wrapper .ec p { font-size: 14px; color: var(--body); line-height: 1.6; }

/* ═══ DEMO DAY ═══ */
.forge-wrapper .defense { padding: 80px 24px; background: var(--bg); text-align: center; }
.forge-wrapper .track { max-width: 640px; margin: 0 auto 12px; border: 1px solid var(--border); border-radius: 12px; padding: 20px 24px; background: var(--card); display: flex; gap: 16px; align-items: flex-start; transition: all .2s; text-align: left; }
.forge-wrapper .track:hover { border-color: rgba(124,58,237,.2); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.04); }
.forge-wrapper .track .ti { font-size: 28px; flex-shrink: 0; }
.forge-wrapper .track h4 { font-size: 17px; font-weight: 800; margin-bottom: 2px; color: var(--dark); }
.forge-wrapper .track .metric { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.forge-wrapper .track .detail { font-size: 13px; color: var(--muted); }

/* ═══ PRICING ═══ */
.forge-wrapper .pricing { background: var(--navy); color: #fff; padding: 80px 24px; text-align: center; }
.forge-wrapper .pricing h2 { font-size: 36px; font-weight: 900; margin-bottom: 10px; letter-spacing: -.02em; }
.forge-wrapper .pg { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 820px; margin: 36px auto 0; }
.forge-wrapper .pc { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 20px; padding: 40px 32px; text-align: left; transition: all .3s; display: flex; flex-direction: column; }
.forge-wrapper .pc:hover { transform: translateY(-4px); }
.forge-wrapper .pc.prem { border: 2px solid rgba(124,58,237,.4); box-shadow: 0 0 40px rgba(124,58,237,.15); animation: borderPulse 3s ease infinite; background: rgba(124,58,237,.03); }
.forge-wrapper .pc h3 { font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 6px; }
.forge-wrapper .pc .desc { font-size: 14px; color: #94A3B8; margin-bottom: 0; }
.forge-wrapper .pc .pr { font-size: 48px; font-weight: 900; color: #fff; margin: 24px 0; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,.1); }
.forge-wrapper .pc li { font-size: 14px; color: #E2E8F0; padding: 6px 0; list-style: none; display: flex; gap: 10px; line-height: 1.5; font-weight: 500; }
.forge-wrapper .pc li::before { content: '✓'; color: var(--green); font-weight: 800; flex-shrink: 0; }
.forge-wrapper .pc.prem li::before { color: #B794F6; }
.forge-wrapper .btn-t { display: block; text-align: center; padding: 18px; border-radius: 10px; font-weight: 800; font-size: 16px; margin-top: auto; padding-top: 18px; margin-top: 32px; cursor: pointer; border: none; transition: all .2s; text-decoration: none; }
.forge-wrapper .btn-std { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.15); }
.forge-wrapper .btn-std:hover { background: rgba(255,255,255,.15); }
.forge-wrapper .btn-prem { background: var(--purple); color: #fff; box-shadow: 0 4px 20px rgba(124,58,237,.4); }
.forge-wrapper .btn-prem:hover { box-shadow: 0 8px 32px rgba(124,58,237,.6); transform: translateY(-2px); }

.forge-wrapper .container { max-width: 1000px; margin: 0 auto; padding: 0 24px; }
.forge-wrapper .section-title { font-size: 12px; font-weight: 800; color: var(--purple); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 12px; }

@media(max-width:768px) {
  .forge-wrapper .hero h1 { font-size: 36px; }
  .forge-wrapper .compare-grid, .forge-wrapper .pg, .forge-wrapper .eg { grid-template-columns: 1fr; }
  .forge-wrapper .struct-row { flex-wrap: wrap; }
  .forge-wrapper .sb { min-width: calc(50% - 10px); }
  .forge-wrapper .hero-stats { gap: 8px; }
  .forge-wrapper .sess { flex-direction: column; padding: 24px; }
}
</style>

<div class="forge-wrapper">

<!-- ═══ HERO ═══ -->
<section class="hero">
  <div class="hero-dot"></div><div class="hero-dot"></div><div class="hero-dot"></div><div class="hero-dot"></div><div class="hero-dot"></div><div class="hero-dot"></div>
  
  <div class="hero-cert-badge">
    <span>⚒️ The HD Applied AI Architect Certification</span>
  </div>
  
  <h1>The Forge: Learn Agentic AI<br><em>by Building Something Real.</em></h1>
  <p class="sub">A 6-week live-fire program. You won't just learn AI orchestration — you'll identify a real market problem, build the system, and deploy it to production. The exact skills demanded by Big Tech and taught in $10,000 bootcamps. Just a radically different method.</p>
  
  <div class="hero-stats">
    <div class="hs"><div class="v">6</div><div class="l">Weeks</div></div>
    <div class="hs"><div class="v">4+2</div><div class="l">Core + Electives</div></div>
    <div class="hs"><div class="v">12</div><div class="l">Builders</div></div>
    <div class="hs"><div class="v">4</div><div class="l">Per Pod</div></div>
  </div>
</section>

<!-- ═══ TRANSFORMATION ═══ -->
<section class="xform">
  <div class="xform-box reveal"><strong style="color:var(--purple)">The transformation:</strong> You will stop being an AI tool user and become an <span class="cert-name">Applied AI Architect</span> — someone who identifies real problems, orchestrates AI systems, ships useful products, and proves market demand.</div>
</section>

<!-- ═══ CERTIFICATION TRACK (Light Background) ═══ -->
<section class="compare">
  <div style="max-width:900px;margin:0 auto;text-align:center">
    <h2 style="font-size:36px;font-weight:900;color:var(--navy);margin-bottom:12px;letter-spacing:-0.02em" class="reveal">The Certificate Trap.</h2>
    <p style="font-size:16px;color:var(--body);max-width:560px;margin:0 auto;font-weight:500;" class="reveal stagger-1">Most AI certifications teach valuable skills — but in a vacuum. Learning without market utility is expensive entertainment.</p>
    <div class="compare-grid">
      <div class="cc old reveal stagger-2">
        <h3><span style="color:#EF4444">✕</span> Generic AI Certifications</h3>
        <ul>
          <li><span style="color:#94A3B8">—</span> Watch pre-recorded videos on Python and API calls.</li>
          <li><span style="color:#94A3B8">—</span> Build a tutorial project that 10,000 other students also built.</li>
          <li><span style="color:#94A3B8">—</span> Pass a multiple-choice quiz to prove you watched the videos.</li>
          <li><span style="color:#94A3B8">—</span> Get a PDF certificate that employers can't verify.</li>
        </ul>
      </div>
      <div class="cc new reveal stagger-3">
        <h3><span style="color:var(--purple)">✓</span> The Forge</h3>
        <ul>
          <li><span style="color:#8B5CF6">⚡</span> Hunt for real problems. Your pod validates them with real users.</li>
          <li><span style="color:#8B5CF6">⚡</span> Build in a 4-person pod. Other pods stress-test your product.</li>
          <li><span style="color:#8B5CF6">⚡</span> Deploy to production. Acquire real users or generate real revenue.</li>
          <li><span style="color:#8B5CF6">⚡</span> Earn a credential backed by a publicly shipped, verifiable product.</li>
        </ul>
      </div>
    </div>
  </div>
</section>

<!-- ═══ SKILLS (Categorized Accordions) ═══ -->
<section class="skills-section">
  <div class="container">
    <div class="section-title reveal">What You'll Learn</div>
    <h2 style="font-size:32px; font-weight:900; margin-bottom:12px; letter-spacing:-.01em; color:var(--navy);" class="reveal stagger-1">The same agentic AI skills. Learned by shipping.</h2>
    <p style="font-size:15px; color:var(--body); max-width:600px; margin:0 auto 16px; font-weight:500;" class="reveal stagger-2">Every skill below appears in the JHU, IBM, and DeepLearning.AI certifications. We teach them all — through a real product that must prove market demand.</p>
    
    <div class="skills-container reveal stagger-3">
        <!-- Category 1 -->
        <details class="skill-cat" open>
            <summary>Core AI & Architecture</summary>
            <div class="skill-list">
                <span class="sk">LLM Architecture</span>
                <span class="sk">Vector Databases</span>
                <span class="sk">RAG Pipelines</span>
                <span class="sk">Prompt Engineering</span>
                <span class="sk">Chain-of-Thought</span>
            </div>
        </details>
        <!-- Category 2 -->
        <details class="skill-cat">
            <summary>Agentic Systems & Automation</summary>
            <div class="skill-list">
                <span class="sk">Multi-Agent Orchestration</span>
                <span class="sk">Tool Use & Function Calling</span>
                <span class="sk">Workflow Automation</span>
                <span class="sk">API Orchestration</span>
                <span class="sk">AI Marketing Agents</span>
            </div>
        </details>
        <!-- Category 3 -->
        <details class="skill-cat">
            <summary>Safety, Evaluation & Governance</summary>
            <div class="skill-list">
                <span class="sk">Guardrail Engineering</span>
                <span class="sk">Human-in-the-Loop</span>
                <span class="sk">AI Evaluation & Testing</span>
                <span class="sk">Bias Detection</span>
                <span class="sk">AI Governance</span>
            </div>
        </details>
        <!-- Category 4 -->
        <details class="skill-cat">
            <summary>Deployment & Go-To-Market</summary>
            <div class="skill-list">
                <span class="sk">Production Deployment</span>
                <span class="sk">Go-To-Market Strategy</span>
            </div>
        </details>
    </div>
  </div>
</section>

<!-- ═══ STRUCTURE ═══ -->
<section class="structure">
  <div class="container">
    <div class="section-title reveal">Program Structure</div>
    <h2 style="font-size:32px; font-weight:900; margin-bottom:24px; letter-spacing:-.01em; color:var(--navy);" class="reveal stagger-1">4 core sessions. 2 electives. 1 capstone.</h2>
    <div class="reveal stagger-2">
      <div class="struct-row">
          <div class="sb core"><div class="sn">1</div><div class="sl">Problem<br>Discovery</div></div>
          <div class="sb core"><div class="sn">2</div><div class="sl">Build &<br>Prototype</div></div>
          <div class="sb core"><div class="sn">3</div><div class="sl">Agents &<br>Production</div></div>
          <div class="sb core"><div class="sn">4</div><div class="sl">Quality &<br>Launch</div></div>
      </div>
      <div class="struct-row">
          <div class="sb elec"><div class="sn">E</div><div class="sl">Elective 1</div></div>
          <div class="sb elec"><div class="sn">E</div><div class="sl">Elective 2</div></div>
          <div class="sb cap" style="flex:2"><div class="sn">⚡</div><div class="sl">Demo Day</div></div>
      </div>
    </div>
  </div>
</section>

<!-- ═══ THE 4 CORE SESSIONS ═══ -->
<section class="sessions">
  <div class="container" style="text-align: center;">
    <div class="section-title reveal">The 4 Core Sessions</div>
    <h2 style="font-size:32px; font-weight:900; margin-bottom:12px; letter-spacing:-.01em; color:var(--navy);" class="reveal stagger-1">From real problem to live product.</h2>
    <p style="font-size:15px; color:var(--body); font-weight:500; max-width:640px; margin:0 auto 40px;" class="reveal stagger-2">After every session, pods swap builds and run structured peer-reviews — catching bugs, challenging assumptions, and learning from how other teams solve different problems.</p>

    <div class="sess reveal">
      <div class="sess-num">1</div>
      <div>
        <h3>Problem Discovery & AI Feasibility</h3>
        <div class="sub">Find the pain. Validate the solution. Form your pod.</div>
        <p>Your pod interviews real users, maps broken workflows, and ranks problems by AI feasibility. You learn how LLMs work — hallucination patterns, confidence calibration, when to trust vs. override — then present your top problem to other pods for structured critique. You leave with a validated problem statement your pod will build against for the next 5 weeks.</p>
        <div class="tags">
          <span class="tag">LLM Architecture</span>
          <span class="tag">Prompt Engineering</span>
          <span class="tag">AI Delegation Framework</span>
          <span class="tag out">→ Validated Problem Statement</span>
          <span class="tag out">→ Cross-Pod Critique Session</span>
        </div>
      </div>
    </div>

    <div class="sess reveal">
      <div class="sess-num">2</div>
      <div>
        <h3>Build & Prototype (Zero to Deployed)</h3>
        <div class="sub">Working software by end of session. Real users by next week.</div>
        <p>Your pod builds the solution using Zapier, Make, Cursor, or direct API orchestration — tools that let you go from idea to working software in minutes, not months. By session end, every pod has deployed software a stranger can use. Between sessions, pods swap products: your pod tests another pod's build, files a structured feedback report, and receives one on yours.</p>
        <div class="tags">
          <span class="tag">Workflow Automation</span>
          <span class="tag">API Orchestration</span>
          <span class="tag">Prompt Chaining</span>
          <span class="tag out">→ Deployed MVP</span>
          <span class="tag out">→ Cross-Pod Testing Report</span>
        </div>
      </div>
    </div>

    <div class="sess reveal">
      <div class="sess-num">3</div>
      <div>
        <h3>Agents, Guardrails & Production-Readiness</h3>
        <div class="sub">Autonomous AI — with safety boundaries you design.</div>
        <p>Upgrade your prototype with agentic patterns: chain-of-thought, tool-calling, multi-agent orchestration. The critical skill: guardrail engineering — defining what AI can't do matters more than what it can. Enterprise builders learn to add compliance checkpoints. Indie builders design marketing agents. Every pod commits to a Proof of Utility track and drafts a go-to-market plan.</p>
        <div class="tags">
          <span class="tag">Multi-Agent Systems</span>
          <span class="tag">Tool Use</span>
          <span class="tag">Guardrail Engineering</span>
          <span class="tag">Human-in-the-Loop</span>
          <span class="tag out">→ Production-Ready System</span>
          <span class="tag out">→ Go-To-Market Plan</span>
        </div>
      </div>
    </div>

    <div class="sess reveal">
      <div class="sess-num">4</div>
      <div>
        <h3>Quality, Governance & Launch</h3>
        <div class="sub">Break it. Fix it. Ship it.</div>
        <p>Pods audit each other's capstones for bias, hallucination, and edge cases. You write a 1-page AI Governance Report — the kind a VP of Engineering would need before signing off on production deployment. Then you build launch infrastructure: marketing agents, landing pages, automated outreach. Your product goes live this week.</p>
        <div class="tags">
          <span class="tag">Bias Detection</span>
          <span class="tag">AI Governance</span>
          <span class="tag">Output Evaluation</span>
          <span class="tag">Marketing Agents</span>
          <span class="tag out">→ Governance Report</span>
          <span class="tag out">→ Product Launched</span>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ═══ ELECTIVES ═══ -->
<section class="electives">
  <div style="max-width:900px;margin:0 auto;text-align:center">
    <div class="section-title reveal">Weeks 5-6 · Choose 2 of 4</div>
    <h2 style="font-size:32px; font-weight:900; margin-bottom:8px; letter-spacing:-.01em; color:var(--navy);" class="reveal stagger-1">The Forge Choices.</h2>
    <p style="font-size:15px; color:var(--body); max-width:540px; font-weight:500; margin:0 auto" class="reveal stagger-2">Customize your path. Runs alongside your capstone launch.</p>
    <div class="eg">
      <div class="ec reveal stagger-1"><h4>🧠 RAG Systems & Knowledge Architecture</h4><div class="who">For Technical Roles</div><p>Build a retrieval-augmented generation pipeline. Vector databases, embeddings, chunking, evaluation. Leave with a working knowledge-base AI for interviews or internal deployment.</p></div>
      <div class="ec reveal stagger-2"><h4>👔 AI Strategy for Leaders & Founders</h4><div class="who">No Code Required · For Decision-Makers</div><p>AI vendor evaluation, build vs. buy, team restructuring, ROI modeling. Leave with a 2-page AI Strategy Brief your VP or board can actually use.</p></div>
      <div class="ec reveal stagger-3"><h4>💼 AI-Powered Career Transition</h4><div class="who">Bridge Crossover · For Job Seekers</div><p>Resume and LinkedIn for AI roles. Position your HD Applied AI Architect credential. Mock interviews. Pipeline execution. If you need a promotion or a new role — this is your elective.</p></div>
      <div class="ec reveal stagger-4"><h4>🚀 Launch Day: First Customers</h4><div class="who">Go-To-Market · For Builders</div><p>Payments, marketing agents, deployment, user acquisition — in one session. The capstone accelerator for pods that want revenue, not just users.</p></div>
    </div>
  </div>
</section>

<!-- ═══ DEMO DAY ═══ -->
<section class="defense">
  <div class="container">
    <div class="section-title reveal">Week 6</div>
    <h2 style="font-size:32px; font-weight:900; margin-bottom:12px; letter-spacing:-.01em; color:var(--navy);" class="reveal stagger-1">Demo Day.</h2>
    <p style="font-size:15px; font-weight:500; color:var(--body); max-width:560px; margin:0 auto 32px" class="reveal stagger-2">A public event at Hacker Dojo. Your pod presents the product, proves it works, and demonstrates market demand. Pick your track:</p>
    
    <div style="max-width:680px; margin:0 auto; text-align:left" class="reveal stagger-3">
      <div class="track">
          <span class="ti">💰</span>
          <div>
              <h4>The Bootstrapper</h4>
              <div class="metric" style="color:var(--green)">$1+ revenue from a stranger.</div>
              <div class="detail">Indie hackers. Micro-SaaS builders.</div>
          </div>
      </div>
      <div class="track">
          <span class="ti">📈</span>
          <div>
              <h4>The Growth Hacker</h4>
              <div class="metric" style="color:var(--purple)">100+ active users or 250+ waitlist.</div>
              <div class="detail">Free tools. Directories. Lead-gen magnets.</div>
          </div>
      </div>
      <div class="track">
          <span class="ti">🏢</span>
          <div>
              <h4>The Intrapreneur</h4>
              <div class="metric" style="color:var(--red)">Signed Letter of Utility from a stakeholder.</div>
              <div class="detail">W2 employees building internal tools. Consultants. Enterprise PMs who want their boss to say "ship this company-wide."</div>
          </div>
      </div>
    </div>
    
    <p style="font-size:15px; font-weight:500; color:var(--body); max-width:540px; margin:32px auto 0" class="reveal">
        Pass and earn <strong>The Mark</strong> — the HD Applied AI Architect credential, a public Proof of Work ledger, and a verifiable LinkedIn badge.
    </p>
  </div>
</section>

<!-- ═══ PRICING ═══ -->
<section class="pricing" id="pricing">
  <h2 class="reveal">Secure Your Seat.</h2>
  <p style="font-size:16px; font-weight:500; color:#94A3B8; margin-bottom:8px" class="reveal stagger-1">Two paths. Both require you to do the work.</p>
  
  <div class="pg">
    <div class="pc reveal stagger-2">
      <h3>Standard Path</h3>
      <p class="desc">Learn, build, earn the credential.</p>
      <div class="pr">$1,497</div>
      <ul>
        <li>6 weeks of live sessions (4 core + 2 electives)</li>
        <li>Accountability pod placement</li>
        <li>Cross-pod peer review every session</li>
        <li>Demo Day capstone presentation</li>
        <li>The HD Applied AI Architect credential</li>
      </ul>
      <a href="https://buy.stripe.com/cNi14n8yC16Y22e3dqfrW05" target="_blank" class="btn-t btn-std">Enroll in Standard Path</a>
    </div>
    
    <div class="pc prem reveal stagger-3">
      <div style="font-size:11px;font-weight:800;color:var(--amber);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px">Recommended</div>
      <h3>Premium Architect Path</h3>
      <p class="desc">Maximum support. Maximum accountability.</p>
      <div class="pr">$1,997</div>
      <ul>
        <li>Everything in Standard Path, plus:</li>
        <li>Weekly Premium Office Hours</li>
        <li>LinkedIn + Resume Credential Positioning</li>
        <li>1-on-1 Portfolio Teardown</li>
        <li>Demo Day Pitch Coaching</li>
        <li>Post-Graduation 30-Day Support</li>
      </ul>
      <a href="https://buy.stripe.com/cNiaEXg14aHyayKbJWfrW06" target="_blank" class="btn-t btn-prem">Enroll in Premium Architect Path</a>
    </div>
  </div>
  
  <div style="margin-top:24px;font-size:14px;font-weight:600;color:#94A3B8">Members get 20% off both tiers.</div>
</section>

</div> <!-- End forge-wrapper -->

<!-- ═══ SCROLL REVEAL SCRIPT ═══ -->
<script>
const observer = new IntersectionObserver((entries) => {
  entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); observer.unobserve(e.target); }});
}, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
</script>