diff --git a/demos/ristorante/index.html b/demos/ristorante/index.html
index 0e6192b..fd2591d 100644
--- a/demos/ristorante/index.html
+++ b/demos/ristorante/index.html
@@ -6,619 +6,194 @@
   <title>Restaurant Website Templates — HostPioneers</title>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
   <style>
-    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-    :root {
-      --bg: #080809;
-      --bg-card: #111114;
-      --border: rgba(255,255,255,0.07);
-      --text: #f0ede8;
-      --muted: #6b6560;
-      --gold: #c9a55a;
-      --gold-dim: rgba(201,165,90,0.15);
-    }
-    html { scroll-behavior: smooth; }
-    body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
-    a { color: inherit; text-decoration: none; }
-
-    /* ── HEADER ── */
-    header { padding: 2rem 3rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(8,8,9,0.9); backdrop-filter: blur(16px); }
-    .header-logo { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
-    .header-logo span { color: var(--gold); }
-    .header-cta { background: var(--gold); color: #080809; padding: 0.55rem 1.5rem; border-radius: 2px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; border: none; transition: all 0.3s; }
-    .header-cta:hover { background: #e0bc72; transform: translateY(-1px); }
-
-    /* ── HERO ── */
-    .hero { padding: 10rem 3rem 6rem; max-width: 860px; margin: 0 auto; text-align: center; }
-    .hero-eyebrow { font-size: 0.68rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.5rem; }
-    .hero h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 300; line-height: 1.15; margin-bottom: 1.5rem; }
-    .hero h1 em { font-style: italic; color: var(--gold); }
-    .hero-desc { font-size: 0.95rem; color: var(--muted); max-width: 520px; margin: 0 auto 2.5rem; line-height: 1.8; font-weight: 300; }
-    .hero-pricing { display: inline-flex; align-items: baseline; gap: 0.5rem; background: var(--gold-dim); border: 1px solid rgba(201,165,90,0.2); padding: 0.8rem 2rem; border-radius: 2px; }
-    .hero-pricing .from { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
-    .hero-pricing .price { font-size: 1.8rem; font-weight: 700; color: var(--gold); }
-    .hero-pricing .per { font-size: 0.75rem; color: var(--muted); }
-
-    /* ── DEMOS GRID ── */
-    .demos-section { padding: 4rem 3rem 6rem; max-width: 1280px; margin: 0 auto; }
-    .demos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
-    .demo-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; transition: border-color 0.3s, transform 0.3s; cursor: pointer; display: block; }
-    .demo-card:hover { border-color: rgba(201,165,90,0.35); transform: translateY(-6px); }
-    .demo-card:hover .demo-img img { transform: scale(1.04); }
-    .demo-img { height: 200px; overflow: hidden; position: relative; }
-    .demo-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
-    .demo-badge { position: absolute; top: 0.8rem; right: 0.8rem; background: rgba(8,8,9,0.75); backdrop-filter: blur(8px); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); padding: 0.3rem 0.7rem; border-radius: 2px; border: 1px solid rgba(201,165,90,0.2); }
-    .demo-info { padding: 1.4rem; }
-    .demo-type { font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.5rem; }
-    .demo-name { font-size: 1.05rem; font-weight: 600; margin-bottom: 0.5rem; }
-    .demo-desc { font-size: 0.78rem; color: var(--muted); line-height: 1.6; margin-bottom: 1rem; }
-    .demo-link { font-size: 0.72rem; font-weight: 600; color: var(--gold); letter-spacing: 0.05em; display: flex; align-items: center; gap: 0.4rem; }
-    .demo-link::after { content: '→'; transition: transform 0.2s; }
-    .demo-card:hover .demo-link::after { transform: translateX(4px); }
-
-    /* ── WHAT'S INCLUDED ── */
-    .included-section { padding: 5rem 3rem; background: var(--bg-card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
-    .included-inner { max-width: 1100px; margin: 0 auto; }
-    .included-header { text-align: center; margin-bottom: 3rem; }
-    .included-header h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 300; margin-bottom: 0.8rem; }
-    .included-header p { font-size: 0.85rem; color: var(--muted); }
-    .included-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
-    .included-item { text-align: center; padding: 1.5rem 1rem; }
-    .included-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--gold-dim); border: 1px solid rgba(201,165,90,0.15); display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }
-    .included-icon svg { width: 20px; height: 20px; stroke: var(--gold); fill: none; stroke-width: 1.5; }
-    .included-item h4 { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.4rem; }
-    .included-item p { font-size: 0.75rem; color: var(--muted); line-height: 1.6; }
-
-    /* ── WIZARD PRICING ── */
-    .pricing-section { padding: 6rem 3rem; max-width: 960px; margin: 0 auto; text-align: center; }
-    .pricing-section h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 300; margin-bottom: 0.8rem; }
-    .pricing-section > p { font-size: 0.85rem; color: var(--muted); margin-bottom: 3rem; }
-
-    /* Wizard steps */
-    .wizard-steps { display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin-bottom: 3rem; }
-    .wizard-step { display: flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
-    .wizard-step.active { color: var(--gold); }
-    .wizard-step.done { color: var(--gold); }
-    .wizard-step-num { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--muted); display: flex; align-items: center; justify-content: center; font-size: 0.65rem; font-weight: 700; }
-    .wizard-step.active .wizard-step-num { border-color: var(--gold); background: var(--gold); color: #080809; }
-    .wizard-step.done .wizard-step-num { border-color: var(--gold); background: var(--gold); color: #080809; }
-    .wizard-step-divider { width: 40px; height: 1px; background: var(--border); }
-
-    /* Step panels */
-    .wizard-panel { display: none; }
-    .wizard-panel.active { display: block; animation: fadeIn 0.3s ease; }
-    @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
-
-    /* Plan cards */
-    .plan-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; text-align: left; max-width: 760px; margin: 0 auto 2rem; }
-    .plan-card { background: var(--bg-card); border: 2px solid var(--border); border-radius: 8px; padding: 2rem; cursor: pointer; transition: all 0.25s; position: relative; }
-    .plan-card:hover { border-color: rgba(201,165,90,0.3); transform: translateY(-2px); }
-    .plan-card.selected { border-color: var(--gold); background: rgba(201,165,90,0.05); }
-    .plan-card.featured { border-color: rgba(201,165,90,0.3); }
-    .plan-card.featured::before { content: 'MOST POPULAR'; position: absolute; top: -1px; left: 2rem; background: var(--gold); color: #080809; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.12em; padding: 0.3rem 0.8rem; border-radius: 0 0 4px 4px; }
-    .plan-card h3 { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.6rem; }
-    .plan-card h4 { font-size: 1.3rem; font-weight: 600; margin-bottom: 0.5rem; }
-    .plan-card .plan-price { font-size: 2.2rem; font-weight: 700; color: var(--gold); margin-bottom: 0.2rem; }
-    .plan-card .plan-price-note { font-size: 0.72rem; color: var(--muted); margin-bottom: 1.5rem; }
-    .plan-card ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
-    .plan-card li { font-size: 0.8rem; color: var(--muted); display: flex; align-items: center; gap: 0.6rem; }
-    .plan-card li::before { content: '✓'; color: var(--gold); font-weight: 700; flex-shrink: 0; }
-    .plan-card .ai-badge { display: inline-block; background: var(--gold-dim); border: 1px solid rgba(201,165,90,0.2); color: var(--gold); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.2rem 0.6rem; border-radius: 2px; margin-left: 0.4rem; }
-
-    /* Duration selector */
-    .duration-section { max-width: 680px; margin: 0 auto; }
-    .duration-label { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.2rem; }
-    .duration-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2.5rem; }
-    .duration-card { background: var(--bg-card); border: 2px solid var(--border); border-radius: 8px; padding: 1.5rem 1rem; cursor: pointer; transition: all 0.25s; text-align: center; }
-    .duration-card:hover { border-color: rgba(201,165,90,0.3); }
-    .duration-card.selected { border-color: var(--gold); background: rgba(201,165,90,0.05); }
-    .duration-card .dur-label { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.3rem; }
-    .duration-card .dur-save { font-size: 0.68rem; font-weight: 700; color: #4ade80; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.5rem; }
-    .duration-card .dur-desc { font-size: 0.7rem; color: var(--muted); line-height: 1.5; }
-    .duration-card.selected .dur-label { color: var(--gold); }
-
-    /* Price summary */
-    .price-summary { background: var(--bg-card); border: 1px solid rgba(201,165,90,0.2); border-radius: 8px; padding: 1.8rem 2rem; max-width: 520px; margin: 0 auto 2rem; text-align: left; }
-    .summary-row { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; font-size: 0.85rem; color: var(--muted); }
-    .summary-row.total { border-top: 1px solid var(--border); margin-top: 0.5rem; padding-top: 1rem; font-size: 1rem; font-weight: 600; color: var(--text); }
-    .summary-row .summary-val { font-weight: 600; color: var(--text); }
-    .summary-row.total .summary-val { font-size: 1.2rem; color: var(--gold); font-weight: 700; }
-    .summary-discount { color: #4ade80; font-weight: 600; }
-
-    /* Wizard nav */
-    .wizard-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.5rem; }
-    .wizard-btn { background: transparent; border: 1px solid rgba(201,165,90,0.25); color: var(--gold); padding: 0.7rem 2rem; border-radius: 4px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: all 0.25s; font-family: 'Inter', sans-serif; }
-    .wizard-btn:hover { background: rgba(201,165,90,0.08); border-color: rgba(201,165,90,0.4); }
-    .wizard-btn.primary { background: var(--gold); color: #080809; border-color: var(--gold); }
-    .wizard-btn.primary:hover { background: #e0bc72; }
-    .wizard-btn:disabled { opacity: 0.4; cursor: not-allowed; }
-
-    /* Commitment badge */
-    .commitment { text-align: center; font-size: 0.72rem; color: var(--muted); margin-top: 1rem; }
-
-    /* ── CONTACT FORM ── */
-    .contact-section { padding: 6rem 3rem; background: var(--bg-card); border-top: 1px solid var(--border); }
-    .contact-inner { max-width: 640px; margin: 0 auto; }
-    .contact-header { text-align: center; margin-bottom: 2.5rem; }
-    .contact-header h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 300; margin-bottom: 0.8rem; }
-    .contact-header p { font-size: 0.85rem; color: var(--muted); }
-    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
-    .form-full { grid-column: 1 / -1; }
-    .form-group { display: flex; flex-direction: column; gap: 0.4rem; }
-    .form-group label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
-    .form-group input, .form-group select, .form-group textarea { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-family: 'Inter', sans-serif; font-size: 0.85rem; padding: 0.7rem 0.9rem; width: 100%; transition: border-color 0.2s; }
-    .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: rgba(201,165,90,0.4); }
-    .form-group textarea { resize: vertical; min-height: 100px; }
-    .form-submit { background: var(--gold); color: #080809; border: none; padding: 0.9rem 2.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; width: 100%; margin-top: 1rem; transition: all 0.3s; font-family: 'Inter', sans-serif; }
-    .form-submit:hover { background: #e0bc72; transform: translateY(-1px); }
-    .form-note { text-align: center; font-size: 0.72rem; color: var(--muted); margin-top: 0.8rem; }
-
-    /* ── FOOTER ── */
-    footer { padding: 2.5rem 3rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
-    footer p { font-size: 0.72rem; color: var(--muted); }
-    footer a { color: var(--gold); }
-
-    /* ── SUCCESS STATE ── */
-    .form-success { display: none; text-align: center; padding: 3rem; }
-    .form-success.show { display: block; }
-    .form-success h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }
-    .form-success p { color: var(--muted); font-size: 0.85rem; }
-
-    /* ── RESPONSIVE ── */
-    @media (max-width: 900px) {
-      .demos-grid { grid-template-columns: repeat(2, 1fr); }
-      .included-grid { grid-template-columns: repeat(2, 1fr); }
-      .plan-cards { grid-template-columns: 1fr; max-width: 420px; }
-      .duration-cards { grid-template-columns: 1fr; max-width: 300px; margin-left: auto; margin-right: auto; }
-      header { padding: 1.2rem 1.5rem; }
-      .hero { padding: 8rem 1.5rem 4rem; }
-      .demos-section, .included-section, .pricing-section, .contact-section { padding-left: 1.5rem; padding-right: 1.5rem; }
-      .form-grid { grid-template-columns: 1fr; }
-      .wizard-steps { flex-wrap: wrap; }
-    }
-    @media (max-width: 600px) {
-      .demos-grid { grid-template-columns: 1fr; }
-    }
+    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
+    :root{--bg:#080809;--bg-card:#111114;--border:rgba(255,255,255,0.07);--text:#f0ede8;--muted:#6b6560;--gold:#c9a55a;--gold-dim:rgba(201,165,90,0.15)}
+    html{scroll-behavior:smooth}
+    body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}
+    header{padding:2rem 3rem;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(8,8,9,0.9);backdrop-filter:blur(16px)}
+    .header-logo{font-size:0.8rem;font-weight:600;letter-spacing:0.2em;text-transform:uppercase}.header-logo span{color:var(--gold)}
+    .header-cta{background:var(--gold);color:#080809;padding:0.55rem 1.5rem;border-radius:2px;font-size:0.72rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;border:none;transition:all 0.3s}.header-cta:hover{background:#e0bc72;transform:translateY(-1px)}
+    .hero{padding:10rem 3rem 6rem;max-width:860px;margin:0 auto;text-align:center}
+    .hero-eyebrow{font-size:0.68rem;letter-spacing:0.35em;text-transform:uppercase;color:var(--gold);margin-bottom:1.5rem}
+    .hero h1{font-size:clamp(2.2rem,5vw,3.8rem);font-weight:300;line-height:1.15;margin-bottom:1.5rem}.hero h1 em{font-style:italic;color:var(--gold)}
+    .hero-desc{font-size:0.95rem;color:var(--muted);max-width:520px;margin:0 auto 2.5rem;line-height:1.8;font-weight:300}
+    .hero-pricing{display:inline-flex;align-items:baseline;gap:0.5rem;background:var(--gold-dim);border:1px solid rgba(201,165,90,0.2);padding:0.8rem 2rem;border-radius:2px}.hero-pricing .from{font-size:0.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.1em}.hero-pricing .price{font-size:1.8rem;font-weight:700;color:var(--gold)}.hero-pricing .per{font-size:0.75rem;color:var(--muted)}
+    .demos-section{padding:4rem 3rem 6rem;max-width:1280px;margin:0 auto}.demos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
+    .demo-card{background:var(--bg-card);border:1px solid var(--border);border-radius:6px;overflow:hidden;transition:border-color 0.3s,transform 0.3s;cursor:pointer;display:block}.demo-card:hover{border-color:rgba(201,165,90,0.35);transform:translateY(-6px)}.demo-card:hover .demo-img img{transform:scale(1.04)}
+    .demo-img{height:200px;overflow:hidden;position:relative}.demo-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s ease}
+    .demo-badge{position:absolute;top:0.8rem;right:0.8rem;background:rgba(8,8,9,0.75);backdrop-filter:blur(8px);font-size:0.6rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold);padding:0.3rem 0.7rem;border-radius:2px;border:1px solid rgba(201,165,90,0.2)}
+    .demo-info{padding:1.4rem}.demo-type{font-size:0.62rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);margin-bottom:0.5rem}.demo-name{font-size:1.05rem;font-weight:600;margin-bottom:0.5rem}.demo-desc{font-size:0.78rem;color:var(--muted);line-height:1.6;margin-bottom:1rem}.demo-link{font-size:0.72rem;font-weight:600;color:var(--gold);letter-spacing:0.05em;display:flex;align-items:center;gap:0.4rem}.demo-link::after{content:'→';transition:transform 0.2s}.demo-card:hover .demo-link::after{transform:translateX(4px)}
+    .included-section{padding:5rem 3rem;background:var(--bg-card);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.included-inner{max-width:1100px;margin:0 auto}.included-header{text-align:center;margin-bottom:3rem}.included-header h2{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:300;margin-bottom:0.8rem}.included-header p{font-size:0.85rem;color:var(--muted)}.included-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}.included-item{text-align:center;padding:1.5rem 1rem}.included-icon{width:44px;height:44px;border-radius:50%;background:var(--gold-dim);border:1px solid rgba(201,165,90,0.15);display:flex;align-items:center;justify-content:center;margin:0 auto 1rem}.included-icon svg{width:20px;height:20px;stroke:var(--gold);fill:none;stroke-width:1.5}.included-item h4{font-size:0.85rem;font-weight:600;margin-bottom:0.4rem}.included-item p{font-size:0.75rem;color:var(--muted);line-height:1.6}
+    .pricing-section{padding:6rem 3rem;max-width:1060px;margin:0 auto;text-align:center}.pricing-section h2{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:300;margin-bottom:0.8rem}.pricing-section>p{font-size:0.85rem;color:var(--muted);margin-bottom:3rem}
+    .wizard-steps{display:flex;align-items:center;justify-content:center;gap:0.5rem;margin-bottom:3rem;flex-wrap:wrap}.wizard-step{display:flex;align-items:center;gap:0.4rem;font-size:0.65rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}.wizard-step.active{color:var(--gold)}.wizard-step.done{color:var(--gold)}.wizard-step-num{width:22px;height:22px;border-radius:50%;border:1px solid var(--muted);display:flex;align-items:center;justify-content:center;font-size:0.58rem;font-weight:700;flex-shrink:0}.wizard-step.active .wizard-step-num{border-color:var(--gold);background:var(--gold);color:#080809}.wizard-step.done .wizard-step-num{border-color:var(--gold);background:var(--gold);color:#080809}.wizard-step-divider{width:24px;height:1px;background:var(--border);flex-shrink:0}
+    .wizard-panel{display:none}.wizard-panel.active{display:block;animation:fadeIn 0.3s ease}@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
+    .step-eyebrow{font-size:0.65rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);margin-bottom:0.5rem}.step-heading{font-size:clamp(1.3rem,2.5vw,1.8rem);font-weight:300;margin-bottom:0.4rem}.step-sub{font-size:0.82rem;color:var(--muted);margin-bottom:2rem}
+    .plan-cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;text-align:left;margin-bottom:2rem}.plan-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;text-align:left;margin-bottom:2rem}
+    .plan-card{background:var(--bg-card);border:2px solid var(--border);border-radius:8px;padding:1.8rem 1.5rem;cursor:pointer;transition:all 0.25s;position:relative}.plan-card:hover{border-color:rgba(201,165,90,0.3);transform:translateY(-2px)}.plan-card.selected{border-color:var(--gold);background:rgba(201,165,90,0.05)}.plan-card.featured{border-color:rgba(201,165,90,0.35)}.plan-card.featured::before{content:'MOST POPULAR';position:absolute;top:-1px;left:50%;transform:translateX(-50%);background:var(--gold);color:#080809;font-size:0.52rem;font-weight:700;letter-spacing:0.12em;padding:0.22rem 0.6rem;border-radius:0 0 4px 4px;white-space:nowrap}.plan-card h3{font-size:0.62rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);margin-bottom:0.5rem}.plan-card h4{font-size:1.1rem;font-weight:600;margin-bottom:0.4rem}.plan-card .plan-price{font-size:2rem;font-weight:700;color:var(--gold);margin-bottom:0.15rem}.plan-card .plan-price-note{font-size:0.68rem;color:var(--muted);margin-bottom:1.2rem}.plan-card ul{list-style:none;display:flex;flex-direction:column;gap:0.45rem}.plan-card li{font-size:0.73rem;color:var(--muted);display:flex;align-items:center;gap:0.5rem}.plan-card li::before{content:'✓';color:var(--gold);font-weight:700;flex-shrink:0}
+    .ai-badge{display:inline-block;background:var(--gold-dim);border:1px solid rgba(201,165,90,0.2);color:var(--gold);font-size:0.52rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:0.15rem 0.45rem;border-radius:2px;margin-left:0.3rem;vertical-align:middle}
+    .support-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-bottom:2rem}.support-card{background:var(--bg-card);border:2px solid var(--border);border-radius:8px;padding:1.6rem 1.2rem;cursor:pointer;transition:all 0.25s;text-align:center}.support-card:hover{border-color:rgba(201,165,90,0.3)}.support-card.selected{border-color:var(--gold);background:rgba(201,165,90,0.05)}.support-card.featured{border-color:rgba(201,165,90,0.3)}.support-card .s-badge{font-size:0.58rem;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:var(--gold);margin-bottom:0.7rem}.support-card .s-hours{font-size:3rem;font-weight:700;color:var(--text);line-height:1;margin-bottom:0.2rem}.support-card.selected .s-hours{color:var(--gold)}.support-card .s-unit{font-size:0.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.7rem}.support-card .s-price{font-size:1.7rem;font-weight:700;color:var(--gold);margin-bottom:0.1rem}.support-card .s-price-note{font-size:0.62rem;color:var(--muted);margin-bottom:0.8rem}.support-card ul{list-style:none;text-align:left;display:flex;flex-direction:column;gap:0.38rem}.support-card li{font-size:0.7rem;color:var(--muted);padding-left:1rem;position:relative}.support-card li::before{content:'✓';position:absolute;left:0;color:var(--gold);font-weight:700;font-size:0.6rem}
+    .duration-label{font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}.duration-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:2rem;max-width:640px;margin-left:auto;margin-right:auto}.duration-card{background:var(--bg-card);border:2px solid var(--border);border-radius:8px;padding:1.4rem 1rem;cursor:pointer;transition:all 0.25s;text-align:center}.duration-card:hover{border-color:rgba(201,165,90,0.3)}.duration-card.selected{border-color:var(--gold);background:rgba(201,165,90,0.05)}.duration-card .dur-label{font-size:1.05rem;font-weight:700;margin-bottom:0.3rem;color:var(--text)}.duration-card.selected .dur-label{color:var(--gold)}.duration-card .dur-save{font-size:0.62rem;font-weight:700;color:#4ade80;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:0.35rem}.duration-card .dur-desc{font-size:0.65rem;color:var(--muted);line-height:1.5}
+    .price-summary{background:var(--bg-card);border:1px solid rgba(201,165,90,0.2);border-radius:8px;padding:1.5rem 1.6rem;max-width:460px;margin:0 auto 1.5rem;text-align:left}.summary-row{display:flex;justify-content:space-between;align-items:center;padding:0.4rem 0;font-size:0.8rem;color:var(--muted)}.summary-row.total{border-top:1px solid var(--border);margin-top:0.5rem;padding-top:0.9rem;font-size:0.95rem;font-weight:600;color:var(--text)}.summary-row .summary-val{font-weight:600;color:var(--text)}.summary-row.total .summary-val{font-size:1.1rem;color:var(--gold);font-weight:700}.summary-discount{color:#4ade80;font-weight:600}
+    .wizard-nav{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.5rem}.wizard-btn{background:transparent;border:1px solid rgba(201,165,90,0.25);color:var(--gold);padding:0.6rem 1.6rem;border-radius:4px;font-size:0.68rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;transition:all 0.25s;font-family:'Inter',sans-serif}.wizard-btn:hover{background:rgba(201,165,90,0.08);border-color:rgba(201,165,90,0.4)}.wizard-btn.primary{background:var(--gold);color:#080809;border-color:var(--gold)}.wizard-btn.primary:hover{background:#e0bc72}.wizard-btn:disabled{opacity:0.35;cursor:not-allowed}
+    .commitment{text-align:center;font-size:0.68rem;color:var(--muted);margin-top:1rem;max-width:400px;margin-left:auto;margin-right:auto}
+    .contact-section{padding:6rem 3rem;background:var(--bg-card);border-top:1px solid var(--border)}.contact-inner{max-width:640px;margin:0 auto}.contact-header{text-align:center;margin-bottom:2.5rem}.contact-header h2{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:300;margin-bottom:0.8rem}.contact-header p{font-size:0.85rem;color:var(--muted)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.form-full{grid-column:1/-1}.form-group{display:flex;flex-direction:column;gap:0.4rem}.form-group label{font-size:0.7rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted)}.form-group input,.form-group select,.form-group textarea{background:var(--bg);border:1px solid var(--border);border-radius:4px;color:var(--text);font-family:'Inter',sans-serif;font-size:0.85rem;padding:0.7rem 0.9rem;width:100%;transition:border-color 0.2s}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:rgba(201,165,90,0.4)}.form-group textarea{resize:vertical;min-height:100px}.form-submit{background:var(--gold);color:#080809;border:none;padding:0.9rem 2.5rem;border-radius:4px;font-size:0.75rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;cursor:pointer;width:100%;margin-top:1rem;transition:all 0.3s;font-family:'Inter',sans-serif}.form-submit:hover{background:#e0bc72;transform:translateY(-1px)}.form-note{text-align:center;font-size:0.72rem;color:var(--muted);margin-top:0.8rem}
+    footer{padding:2.5rem 3rem;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}footer p{font-size:0.72rem;color:var(--muted)}footer a{color:var(--gold)}
+    .form-success{display:none;text-align:center;padding:3rem}.form-success.show{display:block}.form-success h3{font-size:1.3rem;margin-bottom:0.5rem}.form-success p{color:var(--muted);font-size:0.85rem}
+    @media(max-width:960px){.plan-cards-3,.support-cards,.plan-cards{grid-template-columns:1fr;max-width:380px;margin-left:auto;margin-right:auto}.duration-cards{grid-template-columns:1fr;max-width:280px}.demos-grid{grid-template-columns:repeat(2,1fr)}.included-grid{grid-template-columns:repeat(2,1fr)}header{padding:1.2rem 1.5rem}.hero{padding:8rem 1.5rem 4rem}.demos-section,.included-section,.pricing-section,.contact-section{padding-left:1.5rem;padding-right:1.5rem}.form-grid{grid-template-columns:1fr}}
+    @media(max-width:600px){.demos-grid{grid-template-columns:1fr}.wizard-steps{gap:0.3rem}.wizard-step-divider{width:14px}}
   </style>
 </head>
 <body>
+<header><div class="header-logo">Host<span>Pioneers</span> — Restaurant Templates</div><button class="header-cta" onclick="document.getElementById('pricing').scrollIntoView({behavior:'smooth'})">Build Your Site</button></header>
+<section class="hero"><p class="hero-eyebrow">6 Restaurant Templates — Ready Now</p><h1>Your restaurant.<br><em>Online. Professional.</em><br>Ready to impress.</h1><p class="hero-desc">Beautiful, mobile-ready websites built for independent restaurants. Custom design, not templates. Includes hosting, domain setup, and AI menu extras.</p><div class="hero-pricing"><span class="from">From</span><span class="price">€499</span><span class="per">one-time setup</span></div></section>
+<section class="demos-section"><div class="demos-grid"><a href="/demos/ristorante/italian/" class="demo-card" target="_blank"><div class="demo-img"><img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=600&q=80" alt="Italian" loading="lazy"><span class="demo-badge">Italian</span></div><div class="demo-info"><p class="demo-type">Italian · Pizza · Pasta</p><h4 class="demo-name">Trattoria Da Marco</h4><p class="demo-desc">Wood-fired pizza, handmade pasta, wine list. Dark luxury aesthetic with Fraunces typography.</p><div class="demo-link">View Template</div></div></a><a href="/demos/ristorante/steakhouse/" class="demo-card" target="_blank"><div class="demo-img"><img src="https://images.unsplash.com/photo-1546833998-877b37c2e5c6?w=600&q=80" alt="Steakhouse" loading="lazy"><span class="demo-badge">Steakhouse</span></div><div class="demo-info"><p class="demo-type">Steakhouse · Grill · Wine</p><h4 class="demo-name">The Argentine Grill</h4><p class="demo-desc">Premium dry-aged cuts, Malbec wine list, open-fire aesthetic. Bold, moody, sophisticated.</p><div class="demo-link">View Template</div></div></a><a href="/demos/ristorante/indian/" class="demo-card" target="_blank"><div class="demo-img"><img src="https://images.unsplash.com/photo-1585937421612-70a008356fbe?w=600&q=80" alt="Indian" loading="lazy"><span class="demo-badge">Indian</span></div><div class="demo-info"><p class="demo-type">Indian · Tandoor · Curry</p><h4 class="demo-name">Maharaja Spice</h4><p class="demo-desc">Rich warm tones, tandoor section, thali specialties, butter chicken focus. Warm and inviting.</p><div class="demo-link">View Template</div></div></a><a href="/demos/ristorante/spanish/" class="demo-card" target="_blank"><div class="demo-img"><img src="https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=600&q=80" alt="Spanish" loading="lazy"><span class="demo-badge">Spanish</span></div><div class="demo-info"><p class="demo-type">Spanish · Tapas · Mediterranean</p><h4 class="demo-name">La Bodega del Mar</h4><p class="demo-desc">Light Mediterranean aesthetic, tapas grid, sherry and wine list, paella specials, beach vibes.</p><div class="demo-link">View Template</div></div></a><a href="/demos/ristorante/sushi/" class="demo-card" target="_blank"><div class="demo-img"><img src="https://images.unsplash.com/photo-1553621042-f6e147245754?w=600&q=80" alt="Japanese" loading="lazy"><span class="demo-badge">Japanese</span></div><div class="demo-info"><p class="demo-type">Japanese · Omakase · Izakaya</p><h4 class="demo-name">Kaito Sushi</h4><p class="demo-desc">Editorial minimal design with Japanese typography. Horizontal scrolling menu, omakase feature section.</p><div class="demo-link">View Template</div></div></a><a href="/demos/ristorante/pizza/" class="demo-card" target="_blank"><div class="demo-img"><img src="https://images.unsplash.com/photo-1574071318508-1cdbab80d002?w=600&q=80" alt="Pizza" loading="lazy"><span class="demo-badge">Pizza</span></div><div class="demo-info"><p class="demo-type">Pizza · Casual · Italian</p><h4 class="demo-name">Pizzeria da Marco</h4><p class="demo-desc">Italian flag accent, wood-fired menu, pasta section. Casual but premium, great for delivery.</p><div class="demo-link">View Template</div></div></a></div></section>
+<section class="included-section"><div class="included-inner"><div class="included-header"><h2>Everything included</h2><p>One price. No surprises. Your site live in days.</p></div><div class="included-grid"><div class="included-item"><div class="included-icon"><svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg></div><h4>Custom Design</h4><p>Built for your restaurant type — not a generic template</p></div><div class="included-item"><div class="included-icon"><svg viewBox="0 0 24 24"><rect x="5" y="2" width="14" height="20" rx="2"/><line x1="12" y1="18" x2="12" y2="18"/></svg></div><h4>Mobile Ready</h4><p>Perfect on every device — phone, tablet, desktop</p></div><div class="included-item"><div class="included-icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div><h4>AI Menu Chat</h4><p>Customers ask the menu in plain language, AI answers</p></div><div class="included-item"><div class="included-icon"><svg viewBox="0 0 24 24"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg></div><h4>Email Support</h4><p>Direct line to us — fast replies, no bots</p></div></div></div></section>
+<section class="pricing-section" id="pricing"><h2>Build your plan</h2><p>Choose your website, pick your support level, lock in your term.</p>
+<div class="wizard-steps"><div class="wizard-step active" id="step1Indicator"><div class="wizard-step-num">1</div><span>Website</span></div><div class="wizard-step-divider"></div><div class="wizard-step" id="step2Indicator"><div class="wizard-step-num">2</div><span>Support</span></div><div class="wizard-step-divider"></div><div class="wizard-step" id="step3Indicator"><div class="wizard-step-num">3</div><span>Term</span></div><div class="wizard-step-divider"></div><div class="wizard-step" id="step4Indicator"><div class="wizard-step-num">4</div><span>Summary</span></div></div>
+<div class="wizard-panel active" id="panel1"><p class="step-eyebrow">Step 1 of 4 — Website Package</p><h3 class="step-heading">Choose your website</h3><p class="step-sub">All plans include 1 year hosting. Setup is one-time.</p><div class="plan-cards-3"><div class="plan-card" onclick="selectPlan('starter')" id="card-starter"><h3>Starter</h3><h4>Your Restaurant Website</h4><div class="plan-price">€499</div><div class="plan-price-note">One-time · then €25/mo hosting</div><ul><li>Custom restaurant template</li><li>Menu + photos + content</li><li>Google Maps + contact form</li><li>Mobile optimised</li><li>Social media links</li><li>1 year hosting included</li></ul></div><div class="plan-card featured" onclick="selectPlan('professional')" id="card-professional"><h3>Professional <span class="ai-badge">+ AI</span></h3><h4>Website + AI Extras</h4><div class="plan-price">€699</div><div class="plan-price-note">One-time · then €30/mo hosting</div><ul><li>Everything in Starter</li><li>AI menu chatbot (24/7)</li><li>AI booking assistant</li><li>Multi-language menu</li><li>1 year hosting included</li></ul></div><div class="plan-card" onclick="selectPlan('enterprise')" id="card-enterprise"><h3>Enterprise <span class="ai-badge">Full AI</span></h3><h4>Website + Full AI Suite</h4><div class="plan-price">€999</div><div class="plan-price-note">One-time · then €35/mo hosting</div><ul><li>Everything in Professional</li><li>AI voice phone assistant</li><li>AI review responder</li><li>AI customer nurture emails</li><li>Dedicated Slack channel</li><li>Priority support line</li><li>1 year hosting included</li></ul></div></div><div class="wizard-nav"><button class="wizard-btn primary" id="btnStep1" onclick="goStep(2)" disabled>Continue →</button></div></div>
+<div class="wizard-panel" id="panel2"><p class="step-eyebrow">Step 2 of 4 — Monthly Support</p><h3 class="step-heading">Choose your support plan</h3><p class="step-sub">Prepay hours each month. Unused hours roll over. Cancel anytime.</p><div class="support-cards"><div class="support-card" onclick="selectSupport('starter')" id="sup-starter"><div class="s-badge">Starter</div><div class="s-hours">2</div><div class="s-unit">hours / month</div><div class="s-price">€69<span style="font-size:0.8rem;font-weight:400;color:var(--muted)">/mo</span></div><div class="s-price-note">≈ €35/hr</div><ul><li>Menu updates</li><li>Seasonal changes</li><li>Photo swaps</li><li>Email support</li></ul></div><div class="support-card featured" onclick="selectSupport('standard')" id="sup-standard"><div class="s-badge">Standard</div><div class="s-hours">4</div><div class="s-unit">hours / month</div><div class="s-price">€119<span style="font-size:0.8rem;font-weight:400;color:var(--muted)">/mo</span></div><div class="s-price-note">≈ €30/hr</div><ul><li>Everything in Starter</li><li>New menu sections</li><li>Layout adjustments</li><li>New pages (about, events)</li><li>Priority response</li></ul></div><div class="support-card" onclick="selectSupport('pro')" id="sup-pro"><div class="s-badge">Pro</div><div class="s-hours">8</div><div class="s-unit">hours / month</div><div class="s-price">€219<span style="font-size:0.8rem;font-weight:400;color:var(--muted)">/mo</span></div><div class="s-price-note">≈ €27/hr</div><ul><li>Everything in Standard</li><li>Full page redesigns</li><li>New features + integrations</li><li>AI training for your restaurant</li><li>Dedicated Slack channel</li></ul></div></div><div class="price-summary" id="priceSummary2"><div class="summary-row"><span id="s2-site-name">—</span><span class="summary-val" id="s2-site-price">—</span></div><div class="summary-row"><span id="s2-support-label">Support: —</span><span class="summary-val" id="s2-support-price">—</span></div><div class="summary-row total"><span>Est. monthly total</span><span class="summary-val" id="s2-monthly-total">—</span></div></div><div class="wizard-nav"><button class="wizard-btn" onclick="goStep(1)">← Back</button><button class="wizard-btn primary" id="btnStep2" onclick="goStep(3)" disabled>Continue →</button></div></div>
+<div class="wizard-panel" id="panel3"><p class="step-eyebrow">Step 3 of 4 — Commitment Term</p><h3 class="step-heading">How long do you want to commit?</h3><p class="step-sub">Longer commitment = bigger discount on your support plan.</p><div class="duration-cards"><div class="duration-card" onclick="selectDuration(1)" id="dur-1"><div class="dur-label">1 Year</div><div class="dur-desc">Full price. Cancel anytime.</div></div><div class="duration-card" onclick="selectDuration(2)" id="dur-2"><div class="dur-label">2 Years</div><div class="dur-save">Save 5%</div><div class="dur-desc">Billed as 23 months</div></div><div class="duration-card" onclick="selectDuration(3)" id="dur-3">
 
-<header>
-  <div class="header-logo">Host<span>Pioneers</span> — Restaurant Templates</div>
-  <button class="header-cta" onclick="document.getElementById('pricing').scrollIntoView({behavior:'smooth'})">Build Your Site</button>
-</header>
-
-<!-- HERO -->
-<section class="hero">
-  <p class="hero-eyebrow">6 Restaurant Templates — Ready Now</p>
-  <h1>Your restaurant.<br><em>Online. Professional.</em><br>Ready to impress.</h1>
-  <p class="hero-desc">Beautiful, mobile-ready websites built for independent restaurants. Custom design, not templates. Includes hosting, domain setup, and AI menu extras.</p>
-  <div class="hero-pricing">
-    <span class="from">From</span>
-    <span class="price">€499</span>
-    <span class="per">one-time setup</span>
-  </div>
-</section>
-
-<!-- DEMOS -->
-<section class="demos-section">
-  <div class="demos-grid">
-
-    <a href="/demos/ristorante/italian/" class="demo-card" target="_blank">
-      <div class="demo-img">
-        <img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=600&q=80" alt="Italian restaurant" loading="lazy">
-        <span class="demo-badge">Italian</span>
-      </div>
-      <div class="demo-info">
-        <p class="demo-type">Italian · Pizza · Pasta</p>
-        <h4 class="demo-name">Trattoria Da Marco</h4>
-        <p class="demo-desc">Wood-fired pizza, handmade pasta, wine list. Dark luxury aesthetic with Fraunces typography.</p>
-        <div class="demo-link">View Template</div>
-      </div>
-    </a>
-
-    <a href="/demos/ristorante/steakhouse/" class="demo-card" target="_blank">
-      <div class="demo-img">
-        <img src="https://images.unsplash.com/photo-1546833998-877b37c2e5c6?w=600&q=80" alt="Steakhouse" loading="lazy">
-        <span class="demo-badge">Steakhouse</span>
-      </div>
-      <div class="demo-info">
-        <p class="demo-type">Steakhouse · Grill · Wine</p>
-        <h4 class="demo-name">The Argentine Grill</h4>
-        <p class="demo-desc">Premium dry-aged cuts, Malbec wine list, open-fire aesthetic. Bold, moody, sophisticated.</p>
-        <div class="demo-link">View Template</div>
-      </div>
-    </a>
-
-    <a href="/demos/ristorante/indian/" class="demo-card" target="_blank">
-      <div class="demo-img">
-        <img src="https://images.unsplash.com/photo-1585937421612-70a008356fbe?w=600&q=80" alt="Indian restaurant" loading="lazy">
-        <span class="demo-badge">Indian</span>
-      </div>
-      <div class="demo-info">
-        <p class="demo-type">Indian · Tandoor · Curry</p>
-        <h4 class="demo-name">Maharaja Spice</h4>
-        <p class="demo-desc">Rich warm tones, tandoor section, thali specialties, butter chicken focus. Warm and inviting.</p>
-        <div class="demo-link">View Template</div>
-      </div>
-    </a>
-
-    <a href="/demos/ristorante/spanish/" class="demo-card" target="_blank">
-      <div class="demo-img">
-        <img src="https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=600&q=80" alt="Spanish restaurant" loading="lazy">
-        <span class="demo-badge">Spanish</span>
-      </div>
-      <div class="demo-info">
-        <p class="demo-type">Spanish · Tapas · Mediterranean</p>
-        <h4 class="demo-name">La Bodega del Mar</h4>
-        <p class="demo-desc">Light Mediterranean aesthetic, tapas grid, sherry and wine list, paella specials, beach vibes.</p>
-        <div class="demo-link">View Template</div>
-      </div>
-    </a>
-
-    <a href="/demos/ristorante/sushi/" class="demo-card" target="_blank">
-      <div class="demo-img">
-        <img src="https://images.unsplash.com/photo-1553621042-f6e147245754?w=600&q=80" alt="Japanese restaurant" loading="lazy">
-        <span class="demo-badge">Japanese</span>
-      </div>
-      <div class="demo-info">
-        <p class="demo-type">Japanese · Omakase · Izakaya</p>
-        <h4 class="demo-name">Kaito Sushi</h4>
-        <p class="demo-desc">Editorial minimal design with Japanese typography. Horizontal scrolling menu, omakase feature section.</p>
-        <div class="demo-link">View Template</div>
-      </div>
-    </a>
-
-    <a href="/demos/ristorante/pizza/" class="demo-card" target="_blank">
-      <div class="demo-img">
-        <img src="https://images.unsplash.com/photo-1574071318508-1cdbab80d002?w=600&q=80" alt="Pizza restaurant" loading="lazy">
-        <span class="demo-badge">Pizza</span>
-      </div>
-      <div class="demo-info">
-        <p class="demo-type">Pizza · Casual · Italian</p>
-        <h4 class="demo-name">Pizzeria da Marco</h4>
-        <p class="demo-desc">Italian flag accent, wood-fired menu, pasta section. Casual but premium, great for delivery.</p>
-        <div class="demo-link">View Template</div>
-      </div>
-    </a>
-
-  </div>
-</section>
-
-<!-- WHAT'S INCLUDED -->
-<section class="included-section">
-  <div class="included-inner">
-    <div class="included-header">
-      <h2>Everything included</h2>
-      <p>One price. No surprises. Your site live in days.</p>
+        <div class="dur-label">3 Years</div><div class="dur-save">Save 10%</div><div class="dur-desc">Billed as 32 months</div></div></div>
     </div>
-    <div class="included-grid">
-      <div class="included-item">
-        <div class="included-icon">
-          <svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
-        </div>
-        <h4>Custom Design</h4>
-        <p>Built for your restaurant type — not a generic template</p>
-      </div>
-      <div class="included-item">
-        <div class="included-icon">
-          <svg viewBox="0 0 24 24"><rect x="5" y="2" width="14" height="20" rx="2"/><line x1="12" y1="18" x2="12" y2="18"/></svg>
-        </div>
-        <h4>Mobile Ready</h4>
-        <p>Perfect on every device — phone, tablet, desktop</p>
-      </div>
-      <div class="included-item">
-        <div class="included-icon">
-          <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
-        </div>
-        <h4>AI Menu Chat</h4>
-        <p>Customers ask the menu in plain language, AI answers</p>
-      </div>
-      <div class="included-item">
-        <div class="included-icon">
-          <svg viewBox="0 0 24 24"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-        </div>
-        <h4>Email Support</h4>
-        <p>Direct line to us — fast replies, no bots</p>
-      </div>
-    </div>
-  </div>
-</section>
-
-<!-- WIZARD PRICING -->
-<section class="pricing-section" id="pricing">
-  <h2>Build your plan</h2>
-  <p>Pick your website package, then lock in your support plan. The longer the commitment, the more you save.</p>
-
-  <!-- Steps indicator -->
-  <div class="wizard-steps">
-    <div class="wizard-step active" id="step1Indicator">
-      <div class="wizard-step-num">1</div>
-      <span>Choose Plan</span>
-    </div>
-    <div class="wizard-step-divider"></div>
-    <div class="wizard-step" id="step2Indicator">
-      <div class="wizard-step-num">2</div>
-      <span>Support Length</span>
-    </div>
-    <div class="wizard-step-divider"></div>
-    <div class="wizard-step" id="step3Indicator">
-      <div class="wizard-step-num">3</div>
-      <span>Summary</span>
-    </div>
-  </div>
-
-  <!-- STEP 1: Choose Plan -->
-  <div class="wizard-panel active" id="panel1">
-    <div class="plan-cards">
-      <div class="plan-card featured" onclick="selectPlan('starter')" id="card-starter">
-        <h3>Starter</h3>
-        <h4>Your Restaurant Website</h4>
-        <div class="plan-price">€499</div>
-        <div class="plan-price-note">One-time setup · then €25/mo hosting</div>
-        <ul>
-          <li>Custom restaurant template</li>
-          <li>Menu + photos + content</li>
-          <li>Google Maps + contact form</li>
-          <li>Mobile optimised</li>
-          <li>Social media links</li>
-          <li>1 year hosting included</li>
-        </ul>
-      </div>
-      <div class="plan-card" onclick="selectPlan('professional')" id="card-professional">
-        <h3>Professional <span class="ai-badge">+ AI Suite</span></h3>
-        <h4>Website + Full AI Extras</h4>
-        <div class="plan-price">€899</div>
-        <div class="plan-price-note">One-time setup · then €30/mo hosting</div>
-        <ul>
-          <li>Everything in Starter</li>
-          <li>AI menu chatbot (24/7)</li>
-          <li>AI booking assistant</li>
-          <li>Multi-language menu</li>
-          <li>AI voice phone assistant</li>
-          <li>AI review responder</li>
-          <li>Priority support line</li>
-          <li>1 year hosting included</li>
-        </ul>
-      </div>
-    </div>
-    <div class="wizard-nav">
-      <button class="wizard-btn primary" id="btnStep1" onclick="goStep(2)" disabled>Continue →</button>
-    </div>
-  </div>
-
-  <!-- STEP 2: Choose Duration -->
-  <div class="wizard-panel" id="panel2">
-    <div class="duration-section">
-      <p class="duration-label">How long do you want to commit?</p>
-      <div class="duration-cards">
-        <div class="duration-card" onclick="selectDuration(1)" id="dur-1">
-          <div class="dur-label">1 Year</div>
-          <div class="dur-desc">Full price</div>
-        </div>
-        <div class="duration-card" onclick="selectDuration(2)" id="dur-2">
-          <div class="dur-label">2 Years</div>
-          <div class="dur-save">Save 5%</div>
-          <div class="dur-desc">Billed as 23 months</div>
-        </div>
-        <div class="duration-card" onclick="selectDuration(3)" id="dur-3">
-          <div class="dur-label">3 Years</div>
-          <div class="dur-save">Save 10%</div>
-          <div class="dur-desc">Billed as 32 months</div>
-        </div>
-      </div>
-
-      <div class="price-summary" id="priceSummary2">
-        <div class="summary-row">
-          <span id="summary-plan-name">Starter Website</span>
-          <span class="summary-val" id="summary-site-price">€499</span>
-        </div>
-        <div class="summary-row">
-          <span id="summary-support-label">1 yr support (2 hrs/mo)</span>
-          <span class="summary-val" id="summary-support-price">—</span>
-        </div>
-        <div class="summary-row total">
-          <span>Total due today</span>
-          <span class="summary-val" id="summary-total-2">€499</span>
-        </div>
-      </div>
-
-      <div class="commitment" id="commitment-text">No lock-in. Cancel support anytime — your website stays live.</div>
-    </div>
-
-    <div class="wizard-nav">
-      <button class="wizard-btn" onclick="goStep(1)">← Back</button>
-      <button class="wizard-btn primary" id="btnStep2" onclick="goStep(3)" disabled>See Summary →</button>
-    </div>
-  </div>
-
-  <!-- STEP 3: Summary -->
-  <div class="wizard-panel" id="panel3">
     <div class="price-summary" id="priceSummary3">
-      <div class="summary-row">
-        <span>Plan</span>
-        <span class="summary-val" id="s3-plan">—</span>
-      </div>
-      <div class="summary-row">
-        <span>Website setup</span>
-        <span class="summary-val" id="s3-site">—</span>
-      </div>
-      <div class="summary-row">
-        <span>Support</span>
-        <span class="summary-val" id="s3-support">—</span>
-      </div>
-      <div class="summary-row">
-        <span>Discount</span>
-        <span class="summary-val summary-discount" id="s3-discount">—</span>
-      </div>
-      <div class="summary-row total">
-        <span>Due today</span>
-        <span class="summary-val" id="s3-total">—</span>
-      </div>
+      <div class="summary-row"><span id="s3-site">—</span><span class="summary-val" id="s3-site-price">—</span></div>
+      <div class="summary-row"><span id="s3-support">—</span><span class="summary-val" id="s3-support-monthly">—</span></div>
+      <div class="summary-row"><span id="s3-term-label">—</span><span class="summary-val" id="s3-term-val">—</span></div>
+      <div class="summary-row total"><span>Total due today</span><span class="summary-val" id="s3-total">—</span></div>
     </div>
-
+    <p class="commitment" id="commitment-text">No lock-in. Cancel support anytime — your website stays live.</p>
     <div class="wizard-nav">
-      <button class="wizard-btn" onclick="goStep(2)">← Edit</button>
+      <button class="wizard-btn" onclick="goStep(2)">← Back</button>
+      <button class="wizard-btn primary" id="btnStep3" onclick="goStep(4)" disabled>See Summary →</button>
+    </div>
+  </div>
+
+  <!-- STEP 4: Summary -->
+  <div class="wizard-panel" id="panel4">
+    <p class="step-eyebrow">Step 4 of 4 — Your Plan</p>
+    <h3 class="step-heading">You're all set!</h3>
+    <p class="step-sub">Here's your custom package. Ready to get started?</p>
+    <div class="price-summary" id="priceSummary4">
+      <div class="summary-row"><span>Website plan</span><span class="summary-val" id="s4-plan">—</span></div>
+      <div class="summary-row"><span>Website setup</span><span class="summary-val" id="s4-site">—</span></div>
+      <div class="summary-row"><span>Support plan</span><span class="summary-val" id="s4-support">—</span></div>
+      <div class="summary-row"><span>Commitment</span><span class="summary-val" id="s4-term">—</span></div>
+      <div class="summary-row"><span>Support discount</span><span class="summary-val summary-discount" id="s4-discount">—</span></div>
+      <div class="summary-row"><span>Support subtotal</span><span class="summary-val" id="s4-support-total">—</span></div>
+      <div class="summary-row total"><span>Total due today</span><span class="summary-val" id="s4-grand">—</span></div>
+    </div>
+    <div class="wizard-nav">
+      <button class="wizard-btn" onclick="goStep(3)">← Edit</button>
       <button class="wizard-btn primary" onclick="document.getElementById('contact').scrollIntoView({behavior:'smooth'})">Start Your Website →</button>
     </div>
   </div>
-
 </section>
 
 <!-- CONTACT FORM -->
 <section class="contact-section" id="contact">
   <div class="contact-inner">
-    <div class="contact-header">
-      <h2>Start your website</h2>
-      <p>Tell us about your restaurant — we'll be in touch within 24 hours.</p>
-    </div>
-
+    <div class="contact-header"><h2>Start your website</h2><p>Tell us about your restaurant — we will be in touch within 24 hours.</p></div>
     <form id="contactForm" onsubmit="handleSubmit(event)">
       <div class="form-grid">
-        <div class="form-group">
-          <label>Restaurant Name</label>
-          <input type="text" name="restaurant" placeholder="La Casa Grande" required>
-        </div>
-        <div class="form-group">
-          <label>Contact Name</label>
-          <input type="text" name="name" placeholder="Javier" required>
-        </div>
-        <div class="form-group">
-          <label>Phone</label>
-          <input type="tel" name="phone" placeholder="+34 600 000 000">
-        </div>
-        <div class="form-group">
-          <label>Email</label>
-          <input type="email" name="email" placeholder="javier@lacasa.es" required>
-        </div>
-        <div class="form-group form-full">
-          <label>Restaurant Type</label>
-          <select name="type">
-            <option value="">Select type...</option>
-            <option value="spanish">Spanish / Tapas</option>
-            <option value="italian">Italian / Pizza / Pasta</option>
-            <option value="steakhouse">Steakhouse / Grill</option>
-            <option value="indian">Indian / Asian</option>
-            <option value="sushi">Japanese / Sushi</option>
-            <option value="seafood">Seafood</option>
-            <option value="other">Fusion / Other</option>
-          </select>
-        </div>
-        <div class="form-group form-full">
-          <label>Tell us about your restaurant (optional)</label>
-          <textarea name="message" placeholder="What kind of cuisine? Do you have an existing website? Any special features you need?"></textarea>
-        </div>
+        <div class="form-group"><label>Restaurant Name</label><input type="text" name="restaurant" placeholder="La Casa Grande" required></div>
+        <div class="form-group"><label>Contact Name</label><input type="text" name="name" placeholder="Javier" required></div>
+        <div class="form-group"><label>Phone</label><input type="tel" name="phone" placeholder="+34 600 000 000"></div>
+        <div class="form-group"><label>Email</label><input type="email" name="email" placeholder="javier@lacasa.es" required></div>
+        <div class="form-group form-full"><label>Restaurant Type</label><select name="type"><option value="">Select type...</option><option value="spanish">Spanish / Tapas</option><option value="italian">Italian / Pizza / Pasta</option><option value="steakhouse">Steakhouse / Grill</option><option value="indian">Indian / Asian</option><option value="sushi">Japanese / Sushi</option><option value="seafood">Seafood</option><option value="other">Fusion / Other</option></select></div>
+        <div class="form-group form-full"><label>Tell us about your restaurant (optional)</label><textarea name="message" placeholder="What kind of cuisine? Do you have an existing website? Any special features you need?"></textarea></div>
       </div>
       <button type="submit" class="form-submit">Send Enquiry</button>
       <p class="form-note">No spam. No commitment. Just a real conversation.</p>
     </form>
-
-    <div class="form-success" id="formSuccess">
-      <h3>Message sent!</h3>
-      <p>We'll be in touch within 24 hours. Check your email.</p>
-    </div>
+    <div class="form-success" id="formSuccess"><h3>Message sent!</h3><p>We will be in touch within 24 hours. Check your email.</p></div>
   </div>
 </section>
 
-<footer>
-  <p>© 2012-2026 <a href="https://hostpioneers.com">HostPioneers.com</a> — HostPioneers, Benalmádena Costa</p>
-</footer>
+<footer><p>© 2012-2026 <a href="https://hostpioneers.com">HostPioneers.com</a> — HostPioneers, Benalmádena Costa</p></footer>
 
 <script>
-// ── Wizard state ──
-var selectedPlan = null;       // 'starter' | 'professional'
-var selectedDuration = null;   // 1 | 2 | 3
+var selectedPlan = null;
+var selectedSupport = null;
+var selectedDuration = null;
 
-// ── Support tiers (monthly price per hour) ──
-var supportTiers = {
-  1: { hours: 2,  pricePerHr: 35, label: 'Starter' },
-  2: { hours: 4,  pricePerHr: 30, label: 'Standard' },
-  3: { hours: 8,  pricePerHr: 27, label: 'Pro' }
-};
+var planPrices = {starter: 499, professional: 699, enterprise: 999};
+var planNames = {starter: 'Starter', professional: 'Professional + AI', enterprise: 'Enterprise Full AI'};
+var supportPrices = {starter: 69, standard: 119, pro: 219};
+var supportLabels = {starter: 'Starter (2 hrs/mo)', standard: 'Standard (4 hrs/mo)', pro: 'Pro (8 hrs/mo)'};
+var durationDiscounts = {1: 0, 2: 0.05, 3: 0.10};
+var durationLabels = {1: '1 Year', 2: '2 Years', 3: '3 Years'};
+var durationBilled = {1: 12, 2: 23, 3: 32};
 
-var planPrices = {
-  starter: 499,
-  professional: 899
-};
-
-var durationDiscounts = { 1: 0, 2: 0.05, 3: 0.10 };
-var durationLabels = { 1: '1 Year', 2: '2 Years', 3: '3 Years' };
-
-function selectPlan(plan) {
-  selectedPlan = plan;
-  document.querySelectorAll('.plan-card').forEach(function(c) { c.classList.remove('selected'); });
-  document.getElementById('card-' + plan).classList.add('selected');
+function selectPlan(p) {
+  selectedPlan = p;
+  document.querySelectorAll('.plan-card').forEach(function(c){c.classList.remove('selected')});
+  document.getElementById('card-' + p).classList.add('selected');
   document.getElementById('btnStep1').disabled = false;
-  updatePriceSummary();
+  updateS2Summary();
 }
-
-function selectDuration(dur) {
-  selectedDuration = dur;
-  document.querySelectorAll('.duration-card').forEach(function(c) { c.classList.remove('selected'); });
-  document.getElementById('dur-' + dur).classList.add('selected');
+function selectSupport(s) {
+  selectedSupport = s;
+  document.querySelectorAll('.support-card').forEach(function(c){c.classList.remove('selected')});
+  document.getElementById('sup-' + s).classList.add('selected');
   document.getElementById('btnStep2').disabled = false;
-  updatePriceSummary();
+  updateS2Summary();
+}
+function selectDuration(d) {
+  selectedDuration = d;
+  document.querySelectorAll('.duration-card').forEach(function(c){c.classList.remove('selected')});
+  document.getElementById('dur-' + d).classList.add('selected');
+  document.getElementById('btnStep3').disabled = false;
+  updateS3Summary();
 }
 
-function updatePriceSummary() {
-  if (!selectedPlan || !selectedDuration) return;
+function updateS2Summary() {
+  if (!selectedPlan || !selectedSupport) return;
+  document.getElementById('s2-site-name').textContent = planNames[selectedPlan];
+  document.getElementById('s2-site-price').textContent = '€' + planPrices[selectedPlan];
+  document.getElementById('s2-support-label').textContent = 'Support: ' + supportLabels[selectedSupport];
+  document.getElementById('s2-support-price').textContent = '€' + supportPrices[selectedSupport] + '/mo';
+  document.getElementById('s2-monthly-total').textContent = '€' + (planPrices[selectedPlan] + supportPrices[selectedSupport]);
+}
 
-  var sitePrice = planPrices[selectedPlan];
+function updateS3Summary() {
+  if (!selectedPlan || !selectedSupport || !selectedDuration) return;
   var disc = durationDiscounts[selectedDuration];
-  var tier = supportTiers[selectedDuration];
-  var monthlySupport = tier.hours * tier.pricePerHr;
-
-  // months billed with discount
-  var monthsBilled = selectedDuration === 2 ? 23 : selectedDuration === 3 ? 32 : 12;
-  var totalSupport = monthlySupport * monthsBilled;
-  var discountAmount = disc > 0 ? totalSupport * disc : 0;
+  var totalSupport = supportPrices[selectedSupport] * durationBilled[selectedDuration];
+  var discountAmount = totalSupport * disc;
+  var sitePrice = planPrices[selectedPlan];
   var totalToday = sitePrice + (totalSupport - discountAmount);
 
-  // Panel 2 summary
-  var planName = selectedPlan === 'starter' ? 'Starter Website' : 'Professional Website + AI';
-  document.getElementById('summary-plan-name').textContent = planName;
-  document.getElementById('summary-site-price').textContent = '€' + sitePrice;
-  document.getElementById('summary-support-label').textContent =
-    durationLabels[selectedDuration] + ' support (' + tier.hours + ' hrs/mo, ' + tier.label + ')';
-  document.getElementById('summary-support-price').textContent =
-    (disc > 0 ? '€' + Math.round(totalSupport - discountAmount) + ' (before €' + Math.round(discountAmount) + ' off)' : '€' + totalSupport);
-  document.getElementById('summary-total-2').textContent = '€' + Math.round(totalToday);
-
-  // Panel 3 summary
-  document.getElementById('s3-plan').textContent = planName;
-  document.getElementById('s3-site').textContent = '€' + sitePrice;
-  document.getElementById('s3-support').textContent =
-    durationLabels[selectedDuration] + ' · ' + tier.hours + ' hrs/mo · ' + tier.label;
-  document.getElementById('s3-discount').textContent =
-    disc > 0 ? '-' + Math.round(discountAmount) + '€ (' + (disc * 100) + '% off)' : '—';
+  document.getElementById('s3-site').textContent = planNames[selectedPlan] + ' website';
+  document.getElementById('s3-site-price').textContent = '€' + sitePrice;
+  document.getElementById('s3-support').textContent = supportLabels[selectedSupport] + ' (' + durationLabels[selectedDuration] + ')';
+  document.getElementById('s3-support-monthly').textContent = '€' + supportPrices[selectedSupport] + '/mo';
+  document.getElementById('s3-term-label').textContent = durationLabels[selectedDuration] + ' commitment';
+  document.getElementById('s3-term-val').textContent = disc > 0 ? '-' + Math.round(discountAmount) + '€ (' + Math.round(disc*100) + '% off)' : 'No discount';
   document.getElementById('s3-total').textContent = '€' + Math.round(totalToday);
+  document.getElementById('commitment-text').textContent = disc > 0 ? durationLabels[selectedDuration] + ' commitment. Cancel anytime — your website stays live.' : 'No lock-in. Cancel support anytime — your website stays live.';
 
-  // Commitment text
-  var commitEl = document.getElementById('commitment-text');
-  if (disc > 0) {
-    commitEl.textContent = selectedDuration + '-year commitment. Cancel anytime — your website stays live.';
-  } else {
-    commitEl.textContent = 'No lock-in. Cancel support anytime — your website stays live.';
-  }
+  // Also update step 4 summary
+  document.getElementById('s4-plan').textContent = planNames[selectedPlan];
+  document.getElementById('s4-site').textContent = '€' + sitePrice;
+  document.getElementById('s4-support').textContent = supportLabels[selectedSupport];
+  document.getElementById('s4-term').textContent = durationLabels[selectedDuration];
+  document.getElementById('s4-discount').textContent = disc > 0 ? '-' + Math.round(discountAmount) + '€' : '—';
+  document.getElementById('s4-support-total').textContent = '€' + Math.round(totalSupport - discountAmount);
+  document.getElementById('s4-grand').textContent = '€' + Math.round(totalToday);
 }
 
 function goStep(n) {
-  // Update panels
-  document.querySelectorAll('.wizard-panel').forEach(function(p) { p.classList.remove('active'); });
+  document.querySelectorAll('.wizard-panel').forEach(function(p){p.classList.remove('active')});
   document.getElementById('panel' + n).classList.add('active');
-
-  // Update step indicators
-  for (var i = 1; i <= 3; i++) {
+  for (var i = 1; i <= 4; i++) {
     var ind = document.getElementById('step' + i + 'Indicator');
-    ind.classList.remove('active', 'done');
+    ind.classList.remove('active','done');
     if (i < n) ind.classList.add('done');
     if (i === n) ind.classList.add('active');
   }
-
-  // Refresh summary when showing step 3
-  if (n === 3) updatePriceSummary();
-
-  // Scroll to pricing
-  document.getElementById('pricing').scrollIntoView({ behavior: 'smooth', block: 'start' });
+  if (n === 4) updateS3Summary();
+  document.getElementById('pricing').scrollIntoView({behavior:'smooth',block:'start'});
 }
 
 function handleSubmit(e) {
@@ -627,29 +202,17 @@ function handleSubmit(e) {
   var success = document.getElementById('formSuccess');
   var submitBtn = form.querySelector('.form-submit');
   var data = new FormData(form);
-
   submitBtn.textContent = 'Sending…';
   submitBtn.disabled = true;
-
   fetch('/autojobs/api/contact/telegram', {
     method: 'POST',
-    body: new URLSearchParams({
-      name:       data.get('name'),
-      email:      data.get('email'),
-      phone:      data.get('phone'),
-      type:       data.get('type') || 'other',
-      restaurant: data.get('restaurant'),
-      message:    data.get('message')
-    })
-  }).catch(function() {
-    // Telegram failure is non-fatal
-  }).finally(function() {
+    body: new URLSearchParams({name: data.get('name'), email: data.get('email'), phone: data.get('phone'), type: data.get('type')||'other', restaurant: data.get('restaurant'), message: data.get('message')})
+  }).catch(function(){}).finally(function(){
     form.style.display = 'none';
     success.classList.add('show');
-    success.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    success.scrollIntoView({behavior:'smooth',block:'center'});
   });
 }
 </script>
-
 </body>
 </html>