/* global React, useRoute, useToast, I */
const { useState: useVBState, useEffect: useVBEffect, useMemo: useVBMemo } = React;

/* ─────────────────────────────────────────────────────────────────
   Views Boost — annual-membership social-growth storefront.
   Phase 1: marketing page + calculators + lead-capture modal.
   Wallet, real Stripe checkout, orders → Phase 2/3.
   ───────────────────────────────────────────────────────────────── */

const TIERS = {
  basic: { name: "Basic",  fee: 1,   discount: 0,    label: "Retail",    refill: "30-day" },
  plus:  { name: "Plus",   fee: 20,  discount: 0.15, label: "Save 15%",  refill: "60-day" },
  pro:   { name: "Pro",    fee: 50,  discount: 0.25, label: "Save 25%",  refill: "90-day" },
  elite: { name: "Elite",  fee: 100, discount: 0.35, label: "Save 35%",  refill: "Lifetime" },
};

const SERVICES = {
  instagram: {
    name: "Instagram", delivery: "1–3 days",
    services: [
      { id: "followers", name: "Followers",   price: 4.99, min: 100,  max: 50000 },
      { id: "likes",     name: "Post Likes",  price: 1.99, min: 50,   max: 20000 },
      { id: "reels",     name: "Reel Views",  price: 0.79, min: 500,  max: 500000 },
      { id: "story",     name: "Story Views", price: 0.99, min: 100,  max: 50000 },
    ],
  },
  tiktok: {
    name: "TikTok", delivery: "12–24 hours",
    services: [
      { id: "followers", name: "Followers",   price: 5.99, min: 100,  max: 100000 },
      { id: "likes",     name: "Video Likes", price: 2.49, min: 100,  max: 50000 },
      { id: "views",     name: "Video Views", price: 0.49, min: 1000, max: 1000000 },
      { id: "shares",    name: "Shares",      price: 3.99, min: 50,   max: 10000 },
    ],
  },
  youtube: {
    name: "YouTube", delivery: "3–7 days",
    services: [
      { id: "subs",  name: "Subscribers",     price: 14.99, min: 50,  max: 10000 },
      { id: "views", name: "Video Views",     price: 3.99,  min: 500, max: 500000 },
      { id: "likes", name: "Likes",           price: 4.99,  min: 50,  max: 20000 },
      { id: "watch", name: "Watch Time (hrs)",price: 19.99, min: 10,  max: 4000 },
    ],
  },
  spotify: {
    name: "Spotify", delivery: "2–5 days",
    services: [
      { id: "plays",     name: "Plays",             price: 1.49, min: 1000, max: 1000000 },
      { id: "followers", name: "Followers",         price: 6.99, min: 100,  max: 50000 },
      { id: "saves",     name: "Saves",             price: 4.99, min: 50,   max: 10000 },
      { id: "monthly",   name: "Monthly Listeners", price: 8.99, min: 100,  max: 50000 },
    ],
  },
  facebook: {
    name: "Facebook", delivery: "1–3 days",
    services: [
      { id: "pagelikes", name: "Page Likes", price: 4.99, min: 100, max: 25000 },
      { id: "followers", name: "Followers",  price: 4.99, min: 100, max: 25000 },
      { id: "postlikes", name: "Post Likes", price: 2.49, min: 50,  max: 10000 },
      { id: "reactions", name: "Reactions",  price: 3.49, min: 50,  max: 10000 },
    ],
  },
  soundcloud: {
    name: "SoundCloud", delivery: "24–48 hours",
    services: [
      { id: "plays",     name: "Plays",     price: 0.99, min: 500, max: 1000000 },
      { id: "followers", name: "Followers", price: 5.99, min: 100, max: 50000 },
      { id: "likes",     name: "Likes",     price: 2.99, min: 50,  max: 20000 },
      { id: "reposts",   name: "Reposts",   price: 4.99, min: 50,  max: 10000 },
    ],
  },
};

const PLATFORM_LIST = ["instagram", "tiktok", "youtube", "spotify", "facebook", "soundcloud"];

const PLATFORM_ICONS = {
  instagram:  "M12 2.16c3.2 0 3.58.01 4.85.07 3.25.15 4.77 1.69 4.92 4.92.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.15 3.23-1.66 4.77-4.92 4.92-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-3.26-.15-4.77-1.7-4.92-4.92-.06-1.27-.07-1.65-.07-4.85s.01-3.58.07-4.85C2.39 3.92 3.91 2.38 7.15 2.23 8.42 2.18 8.8 2.16 12 2.16zM12 0C8.74 0 8.33.01 7.05.07 2.7.27.27 2.69.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.2 4.36 2.62 6.78 6.98 6.98C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c4.35-.2 6.78-2.62 6.98-6.98.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95C23.74 2.69 21.31.27 16.95.07 15.67.01 15.26 0 12 0zm0 5.84a6.16 6.16 0 100 12.32 6.16 6.16 0 000-12.32zM12 16a4 4 0 110-8 4 4 0 010 8zm6.41-11.85a1.44 1.44 0 100 2.88 1.44 1.44 0 000-2.88z",
  tiktok:     "M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-5.2 1.74 2.89 2.89 0 012.31-4.64 2.93 2.93 0 01.88.13V9.4a6.84 6.84 0 00-1-.05A6.33 6.33 0 005.8 20.1a6.34 6.34 0 0010.86-4.43v-7a8.16 8.16 0 004.77 1.52v-3.4a4.85 4.85 0 01-1.84-.1z",
  youtube:    "M23.5 6.2a3 3 0 00-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 00.5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 002.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 002.1-2.1c.5-1.9.5-5.8.5-5.8s0-3.9-.5-5.8zM9.6 15.6V8.4l6.2 3.6-6.2 3.6z",
  spotify:    "M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.7 0 12 0zm5.5 17.3c-.2.4-.7.5-1 .3-2.8-1.7-6.4-2.1-10.6-1.1-.4.1-.8-.2-.9-.5-.1-.4.2-.8.5-.9 4.6-1.1 8.5-.6 11.7 1.3.3.1.4.6.3.9zm1.5-3.3c-.3.4-.8.6-1.2.3-3.2-2-8.1-2.6-11.9-1.4-.5.1-1-.1-1.1-.6-.1-.5.1-1 .6-1.1 4.4-1.3 9.8-.7 13.5 1.6.3.2.4.8.1 1.2zm.1-3.3C15.3 8.4 8.7 8.2 5.1 9.3c-.5.2-1.1-.1-1.3-.7-.2-.5.1-1.1.7-1.3 4.2-1.3 11.4-1 15.7 1.5.5.3.7 1 .4 1.5-.3.4-1 .6-1.5.3z",
  facebook:   "M24 12C24 5.4 18.6 0 12 0S0 5.4 0 12c0 6 4.4 11 10.1 11.9V15.5H7.1V12h3.1V9.4c0-3.1 1.8-4.8 4.6-4.8 1.3 0 2.7.2 2.7.2v3h-1.5c-1.5 0-2 .9-2 1.9V12h3.4l-.5 3.5h-2.9V24C19.6 23 24 18 24 12z",
  soundcloud: "M1.18 14.21c.13 0 .24-.1.25-.23l.41-2.83-.41-2.79c-.01-.13-.13-.23-.25-.23s-.24.1-.26.23L.5 11.15l.42 2.83c.02.13.13.23.26.23zm21.8-7.79c-.4 0-.79.08-1.14.22-.23-2.69-2.48-4.81-5.22-4.81-.67 0-1.32.13-1.92.36-.23.09-.29.18-.29.36v15.7c0 .19.15.34.34.36h8.23c2.22 0 4.02-1.79 4.02-4.01 0-2.22-1.8-4.02-4.02-4.02v-.01c-.01-1.46-.79-2.74-1.97-3.46-.04-.27-.03-.69-.03-.69z",
};

function PlatformGlyph({ id, size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
      <path d={PLATFORM_ICONS[id]} />
    </svg>
  );
}

function ViewsBoost() {
  const { goto } = useRoute();
  const toast = useToast();

  // Hero calculator state
  const [platform, setPlatform] = useVBState("instagram");
  const [serviceId, setServiceId] = useVBState("followers");
  const [qty, setQty] = useVBState(1000);
  const [calcTier, setCalcTier] = useVBState("basic");

  // Savings calculator state
  const [annualSpend, setAnnualSpend] = useVBState(500);

  // FAQ
  const [openFaq, setOpenFaq] = useVBState(null);

  // Modal state
  const [modal, setModal] = useVBState(null);  // 'signup' | 'signin' | 'topup' | 'checkout' | 'success'
  const [signupTier, setSignupTier] = useVBState("pro");
  const [topup, setTopup] = useVBState(50);
  const [email, setEmail] = useVBState("");
  const [submitting, setSubmitting] = useVBState(false);

  const platformData = SERVICES[platform];
  const currentService = platformData.services.find((s) => s.id === serviceId) || platformData.services[0];

  // Keep service valid when platform changes
  useVBEffect(() => {
    if (!platformData.services.find((s) => s.id === serviceId)) {
      setServiceId(platformData.services[0].id);
    }
    if (qty < currentService.min) setQty(currentService.min);
    if (qty > currentService.max) setQty(currentService.max);
  }, [platform]);  // eslint-disable-line

  const retailTotal = (qty / 1000) * currentService.price;
  const tier = TIERS[calcTier];
  const memberTotal = retailTotal * (1 - tier.discount);

  // Savings: total cost = (spend × (1 - discount)) + tier fee
  const savingsResults = useVBMemo(() => {
    const list = Object.entries(TIERS).map(([id, t]) => {
      const total = annualSpend * (1 - t.discount) + t.fee;
      const retailEquiv = annualSpend + 1;
      return { id, tier: t, total, saved: retailEquiv - total };
    });
    const min = Math.min(...list.map((r) => r.total));
    return list.map((r) => ({ ...r, best: r.total === min }));
  }, [annualSpend]);

  const sliderMax = Math.min(currentService.max, 100000);

  function openModal(view, preselectTier) {
    if (preselectTier) setSignupTier(preselectTier);
    setModal(view);
  }
  function closeModal() { setModal(null); }

  async function submitWaitlist(action = "joined") {
    if (!email || !email.includes("@")) { toast("Email please."); return; }
    if (submitting) return;
    setSubmitting(true);
    const t = TIERS[signupTier];
    try {
      await fetch("/api/booking", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          service: "views-boost-waitlist",
          tier: signupTier,
          contact: { first: "Views Boost", last: "lead", email, phone: "", company: "", source: `Views Boost · ${action}` },
          brief: {
            title: `Views Boost · ${t.name} · ${action}`,
            budget: `Plan $${t.fee}/yr · top-up $${topup}`,
            timeline: "Phase 2 launch",
            brief: `Waitlist signup. Tier: ${t.name} (${t.label}). Initial top-up: $${topup}. Annual fee: $${t.fee}. Source: ${action}.`,
          },
        }),
      });
      setModal("success");
    } catch (err) {
      toast("Something failed — email studio@elevenviews.io.");
    } finally {
      setSubmitting(false);
    }
  }

  // Inject the scoped vb-* stylesheet once on mount
  useVBEffect(() => {
    if (document.getElementById("vb-style")) return;
    const s = document.createElement("style");
    s.id = "vb-style";
    s.textContent = VB_CSS;
    document.head.appendChild(s);
  }, []);

  return (
    <main className="vb">
      {/* HERO */}
      <section className="vb-hero">
        <div className="vb-hero-glow" />
        <div className="container">
          <div className="vb-hero-grid">
            <div>
              <div className="vb-eyebrow">
                <span className="vb-dot" /> Members save up to 35% on every order
              </div>
              <h1 className="vb-h1">Pay once a year.<br/>Save on <em>every order</em>.</h1>
              <p className="vb-sub">
                Followers, likes, views, plays. Across Instagram, TikTok, YouTube, Spotify, Facebook, and SoundCloud. Pick an annual plan, your discount kicks in instantly, and stays on for the full year.
              </p>
              <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
                <button className="vb-btn vb-btn-gold vb-btn-lg" onClick={() => openModal("signup")}>
                  Join the waitlist <I name="arrow" size={14} />
                </button>
                <a href="#vb-tiers" className="vb-btn vb-btn-ghost vb-btn-lg">Compare plans</a>
              </div>
              <div style={{ display: "flex", gap: 24, marginTop: 36, flexWrap: "wrap" }}>
                {[
                  ["check", "Delivery within 24 hours"],
                  ["spark", "Safe for your account"],
                  ["clock", "24/7 support"],
                ].map(([icon, label]) => (
                  <div key={label} style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 14, color: "rgba(245,241,232,0.7)" }}>
                    <span style={{ width: 28, height: 28, background: "rgba(245,194,66,0.12)", borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center" }}>
                      <I name={icon} size={14} stroke="var(--gold)" />
                    </span>
                    {label}
                  </div>
                ))}
              </div>
            </div>

            {/* Calculator */}
            <div className="vb-calc">
              <div className="vb-calc-eyebrow">Live Pricing Tool</div>
              <div className="vb-calc-title">See your price in 10 seconds</div>

              {/* Tier preview */}
              <div className="vb-calc-step">
                <span className="vb-calc-label">Preview as a member</span>
                <div className="vb-tier-toggle">
                  {Object.entries(TIERS).map(([id, t]) => (
                    <button key={id} className={`vb-tier-btn${calcTier === id ? " active" : ""}`} onClick={() => setCalcTier(id)}>
                      {t.name}<small>{t.discount > 0 ? `−${(t.discount * 100).toFixed(0)}%` : `$${t.fee}/yr`}</small>
                    </button>
                  ))}
                </div>
              </div>

              {/* Platform */}
              <div className="vb-calc-step">
                <span className="vb-calc-label">Pick a platform</span>
                <div className="vb-platforms">
                  {PLATFORM_LIST.map((p) => (
                    <button key={p} className={`vb-platform-btn${platform === p ? " active" : ""}`} onClick={() => setPlatform(p)}>
                      <PlatformGlyph id={p} size={18} />
                      <span className="vb-platform-name">{SERVICES[p].name}</span>
                    </button>
                  ))}
                </div>
              </div>

              {/* Service */}
              <div className="vb-calc-step">
                <span className="vb-calc-label">Pick a service</span>
                <div className="vb-services">
                  {platformData.services.map((s) => (
                    <button key={s.id} className={`vb-service-btn${serviceId === s.id ? " active" : ""}`} onClick={() => {
                      setServiceId(s.id);
                      if (qty < s.min) setQty(s.min);
                      if (qty > s.max) setQty(s.max);
                    }}>{s.name}</button>
                  ))}
                </div>
              </div>

              {/* Quantity */}
              <div className="vb-calc-step">
                <span className="vb-calc-label">How many do you want?</span>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <button className="vb-qty-btn" onClick={() => {
                    const step = currentService.min < 500 ? 100 : 500;
                    setQty(Math.max(currentService.min, qty - step));
                  }}>−</button>
                  <input
                    type="number"
                    className="vb-qty-input"
                    value={qty}
                    onChange={(e) => {
                      const v = Math.max(currentService.min, Math.min(currentService.max, parseInt(e.target.value) || currentService.min));
                      setQty(v);
                    }}
                  />
                  <button className="vb-qty-btn" onClick={() => {
                    const step = currentService.min < 500 ? 100 : 500;
                    setQty(Math.min(currentService.max, qty + step));
                  }}>+</button>
                </div>
                <input
                  type="range"
                  className="vb-slider"
                  min={currentService.min}
                  max={sliderMax}
                  step={Math.max(1, Math.floor((sliderMax - currentService.min) / 100))}
                  value={Math.min(qty, sliderMax)}
                  onChange={(e) => setQty(parseInt(e.target.value))}
                />
                <div style={{ display: "flex", gap: 6, marginTop: 8, flexWrap: "wrap" }}>
                  {[500, 1000, 5000, 10000, 25000].map((q) => (
                    <button key={q} className="vb-quick" onClick={() => {
                      const v = Math.max(currentService.min, Math.min(currentService.max, q));
                      setQty(v);
                    }}>{q >= 1000 ? `${q / 1000}k` : q}</button>
                  ))}
                </div>
              </div>

              {/* Total */}
              <div className="vb-total">
                <div style={{ flex: 1, minWidth: 140 }}>
                  <div className="vb-total-label">Your Price</div>
                  <div style={{ display: "flex", alignItems: "baseline", gap: 10, flexWrap: "wrap" }}>
                    <span className="vb-total-amount">${memberTotal.toFixed(2)}</span>
                    {tier.discount > 0 && <span className="vb-total-strike">${retailTotal.toFixed(2)}</span>}
                  </div>
                  <div style={{ fontSize: 11, opacity: 0.85, marginTop: 4, fontWeight: 500 }}>
                    {qty.toLocaleString()} {platformData.name} {currentService.name.toLowerCase()} · {platformData.delivery} delivery
                    {tier.discount > 0 && (
                      <span className="vb-savings-badge"> {tier.name.toUpperCase()} · SAVE {(tier.discount * 100).toFixed(0)}%</span>
                    )}
                  </div>
                </div>
                <button className="vb-cta" onClick={() => openModal("signup")}>
                  Buy Now <I name="arrow" size={12} />
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* TRUST STRIP */}
      <div className="vb-trust">
        <div className="container">
          <div className="vb-trust-row">
            {[
              ["spark", "Safe & Secure Payments"],
              ["clock", "Fast Delivery"],
              ["arrow", "Free Refills"],
              ["msg", "24/7 Live Chat"],
              ["check", "Money-Back Guarantee"],
            ].map(([icon, label]) => (
              <div key={label} className="vb-trust-item">
                <I name={icon} size={16} stroke="var(--gold)" /> {label}
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* HOW IT WORKS */}
      <section className="vb-how" id="how">
        <div className="container">
          <div className="vb-section-header">
            <div className="vb-section-eyebrow">§ How It Works</div>
            <h2 className="vb-section-h">Three steps. <em>That's all of it.</em></h2>
            <p className="vb-section-sub">No software to install. No accounts to connect. Drop a link, pick a number, hit go.</p>
          </div>
          <div className="vb-steps">
            {[
              ["1", "Pick a plan", "$1, $20, $50, or $100 a year. Bigger plans, bigger discounts. Locked in for twelve months — no monthly bills, no surprise charges."],
              ["2", "Top up your wallet", "Drop credits into your account, $20 minimum. They never expire. Spend them across any platform, any service, any time."],
              ["3", "Place your order", "Paste your post or profile link, pick how many followers, likes, or views you want. Most orders start inside an hour and finish the same day."],
            ].map(([n, h, body]) => (
              <div key={n} className="vb-step">
                <div className="vb-step-num">{n}</div>
                <h3 className="vb-step-h">{h}</h3>
                <p className="vb-step-body">{body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* TIERS */}
      <section className="vb-tiers" id="vb-tiers">
        <div className="vb-tiers-glow" />
        <div className="container">
          <div className="vb-section-header">
            <div className="vb-section-eyebrow">§ Membership Plans</div>
            <h2 className="vb-section-h">Pay annually. <em>Save every order.</em></h2>
            <p className="vb-section-sub">Pick the plan that matches your year. Every order after deducts at your member rate — automatically, no codes to apply.</p>
          </div>
          <div className="vb-tiers-grid">
            {[
              { id: "basic",  best: "For testing the panel or running one-off orders.",         list: ["Full access to the panel","Wallet system & credits","All platforms unlocked","Standard delivery speeds","30-day refill guarantee"] },
              { id: "plus",   best: "Pays back at $135 a year. Most casual creators land here.", list: ["Everything in Basic","15% off every order","Priority delivery queue","60-day refill guarantee","Monthly performance summary"] },
              { id: "pro",    best: "The sweet spot. Pays back at $300/yr.",                    list: ["Everything in Plus","25% off every order","Express delivery slots","90-day refill guarantee","Bulk order pricing","Free package upgrades (occasional)"], featured: true },
              { id: "elite",  best: "Power users, agencies, anyone running campaigns over $1k.", list: ["Everything in Pro","35% off every order","Top-priority queue · 24h max","Lifetime refill guarantee","Dedicated account manager","Custom volume pricing","Early access to new platforms"], elite: true },
            ].map((t) => {
              const tier = TIERS[t.id];
              return (
                <article key={t.id} className={`vb-tier-card${t.featured ? " featured" : ""}${t.elite ? " elite" : ""}`}>
                  {t.featured && <span className="vb-tier-badge">MOST POPULAR</span>}
                  <div className="vb-tier-name">{tier.name}</div>
                  <div className={`vb-tier-discount${tier.discount === 0 ? " zero" : ""}`}>
                    {tier.discount > 0 ? `SAVE ${(tier.discount * 100).toFixed(0)}% ON EVERY ORDER` : "RETAIL PRICING"}
                  </div>
                  <div style={{ paddingBottom: 18, borderBottom: "1px solid var(--vb-line)", marginBottom: 18 }}>
                    <div className="vb-tier-amt">${tier.fee}</div>
                    <div style={{ fontSize: 13, color: "var(--vb-cream-dim)", marginTop: 4 }}>per year</div>
                  </div>
                  <div style={{ fontSize: 12, color: "var(--vb-cream-dim)", lineHeight: 1.5, marginBottom: 18, fontStyle: "italic" }}>{t.best}</div>
                  <ul className="vb-tier-list">
                    {t.list.map((item) => <li key={item}>{item}</li>)}
                  </ul>
                  <button className="vb-tier-cta" onClick={() => openModal("signup", t.id)}>
                    {tier.discount > 0 ? `Choose ${tier.name}` : "Start with Basic"}
                  </button>
                </article>
              );
            })}
          </div>
        </div>
      </section>

      {/* SAVINGS CALCULATOR */}
      <section className="vb-savings" id="savings">
        <div className="container">
          <div className="vb-section-header">
            <div className="vb-section-eyebrow">§ Savings Calculator</div>
            <h2 className="vb-section-h">See <em>your</em> tier in 3 seconds.</h2>
            <p className="vb-section-sub">Drag the slider to your annual spending. We'll show you which plan saves you the most.</p>
          </div>
          <div className="vb-savings-panel">
            <div style={{ display: "flex", alignItems: "baseline", gap: 16, marginBottom: 24, flexWrap: "wrap" }}>
              <span style={{ fontFamily: "var(--vb-serif)", fontWeight: 600, fontSize: 22 }}>If I spend</span>
              <span className="vb-spend-amt">${annualSpend.toLocaleString()}</span>
              <span style={{ fontFamily: "var(--vb-serif)", fontWeight: 600, fontSize: 22 }}>on social growth this year...</span>
            </div>
            <input
              type="range"
              className="vb-slider"
              min={50}
              max={5000}
              step={50}
              value={annualSpend}
              onChange={(e) => setAnnualSpend(parseInt(e.target.value))}
              style={{ width: "100%" }}
            />
            <div style={{ display: "flex", justifyContent: "space-between", marginTop: 8, fontFamily: "var(--vb-mono)", fontSize: 11, color: "rgba(245,241,232,0.4)" }}>
              <span>$50</span><span>$500</span><span>$1,500</span><span>$3,000</span><span>$5,000</span>
            </div>
            <div className="vb-savings-results">
              {savingsResults.map((r) => (
                <div key={r.id} className={`vb-savings-result${r.best ? " best" : ""}`}>
                  <div className="vb-savings-tier">{r.tier.name}</div>
                  <div style={{ fontFamily: "var(--vb-mono)", fontSize: 10, color: "rgba(245,241,232,0.4)", letterSpacing: "0.1em", marginBottom: 14 }}>${r.tier.fee}/YEAR</div>
                  <div className="vb-savings-total">${r.total.toFixed(0)}</div>
                  <div className={`vb-savings-saved${r.saved <= 0 ? " zero" : ""}`}>
                    {r.saved > 0 ? `Saves $${r.saved.toFixed(0)}/yr` : (r.saved === 0 ? "Break-even" : `Costs $${Math.abs(r.saved).toFixed(0)} more`)}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* PLATFORMS */}
      <section className="vb-platforms-section" id="platforms">
        <div className="container">
          <div className="vb-section-header">
            <div className="vb-section-eyebrow">§ Services</div>
            <h2 className="vb-section-h">Every <em>major platform</em>. One panel.</h2>
            <p className="vb-section-sub">Followers, likes, views, plays, subscribers — for Instagram, TikTok, YouTube, Spotify, Facebook, and SoundCloud.</p>
          </div>
          <div className="vb-platform-grid">
            {[
              ["instagram",  "Grow your profile or boost a post",       ["Followers","Likes","Reel Views","Story Views","Comments"], "$1.99","/ 1,000 likes"],
              ["tiktok",     "Get on the For You Page",                 ["Followers","Video Likes","Video Views","Shares","Comments"], "$0.49","/ 1,000 views"],
              ["youtube",    "Build your channel and monetize",         ["Subscribers","Video Views","Likes","Watch Time","Comments"], "$3.99","/ 1,000 views"],
              ["spotify",    "Get your music heard",                    ["Plays","Followers","Saves","Playlist Adds","Listeners"], "$1.49","/ 1,000 plays"],
              ["facebook",   "Page likes, post engagement, more",       ["Page Likes","Followers","Post Likes","Reactions","Comments"], "$2.49","/ 1,000 likes"],
              ["soundcloud", "Plays, reposts, real fan growth",         ["Plays","Followers","Likes","Reposts","Comments"], "$0.99","/ 1,000 plays"],
            ].map(([id, tag, services, price, unit]) => (
              <article key={id} className={`vb-platform-card vb-${id}`}>
                <div className="vb-platform-icon"><PlatformGlyph id={id} size={22} /></div>
                <div style={{ fontFamily: "var(--vb-serif)", fontWeight: 700, fontSize: 22, marginBottom: 4 }}>{SERVICES[id].name}</div>
                <div style={{ fontSize: 13, color: "var(--vb-cream-dim)", marginBottom: 18 }}>{tag}</div>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginBottom: 18 }}>
                  {services.map((s) => <span key={s} className="vb-service-chip">{s}</span>)}
                </div>
                <div style={{ display: "flex", alignItems: "baseline", gap: 6, borderTop: "1px solid var(--vb-line)", paddingTop: 14 }}>
                  <span style={{ fontFamily: "var(--vb-mono)", fontSize: 10, letterSpacing: "0.15em", color: "rgba(245,241,232,0.4)", textTransform: "uppercase" }}>From</span>
                  <span style={{ fontFamily: "var(--vb-serif)", fontWeight: 700, fontSize: 22, color: "var(--gold)" }}>{price}</span>
                  <span style={{ fontSize: 12, color: "var(--vb-cream-dim)" }}>{unit}</span>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* PACKAGES */}
      <section className="vb-packages">
        <div className="container">
          <div className="vb-section-header">
            <div className="vb-section-eyebrow">§ Marketing Campaigns</div>
            <h2 className="vb-section-h">Bundles that <em>do more</em> for less.</h2>
            <p className="vb-section-sub">If you don't want to pick services one by one, grab a campaign bundle. Members get tier discounts on top of bundle pricing.</p>
          </div>
          <div className="vb-pkg-grid">
            {[
              { name: "Starter Boost", tag: "Perfect for new creators & small businesses", price: 49, orig: 79, list: ["1,000 Instagram followers","500 Instagram likes (split 5 posts)","5,000 TikTok views (1 video)","Delivered over 5–7 days","30-day refill guarantee"] },
              { name: "Creator Campaign", tag: "Most-bought · best value across platforms", price: 149, orig: 229, featured: true, list: ["5,000 Instagram followers","2,500 likes split across 10 posts","25,000 TikTok views (3 videos)","1,000 TikTok followers","500 YouTube subscribers","Delivered over 10–14 days","60-day refill guarantee"] },
              { name: "Pro Launch", tag: "Album drops, brand launches, full rollouts", price: 499, orig: 799, list: ["15,000 Instagram followers","10,000 likes across 20 posts","100,000 TikTok views (10 videos)","5,000 TikTok followers","10,000 Spotify plays","2,500 YouTube subscribers","Delivered over 21–30 days","90-day refill guarantee"] },
            ].map((p) => (
              <article key={p.name} className={`vb-pkg${p.featured ? " featured" : ""}`}>
                <div style={{ fontFamily: "var(--vb-serif)", fontWeight: 700, fontSize: 26, marginBottom: 4 }}>{p.name}</div>
                <div style={{ fontSize: 13, color: "var(--vb-cream-dim)", marginBottom: 24 }}>{p.tag}</div>
                <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginBottom: 20, paddingBottom: 24, borderBottom: "1px solid var(--vb-line)" }}>
                  <span style={{ fontFamily: "var(--vb-serif)", fontWeight: 800, fontSize: 48, lineHeight: 1, color: "var(--gold)" }}>${p.price}</span>
                  <span style={{ fontSize: 16, color: "rgba(245,241,232,0.4)", textDecoration: "line-through" }}>${p.orig}</span>
                </div>
                <ul className="vb-pkg-list">
                  {p.list.map((x) => <li key={x}>{x}</li>)}
                </ul>
                <button className={`vb-btn ${p.featured ? "vb-btn-gold" : "vb-btn-ghost"} vb-btn-lg`} style={{ width: "100%", justifyContent: "center" }} onClick={() => openModal("signup")}>
                  Choose {p.name.split(" ")[0]}
                </button>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="vb-faq" id="faq">
        <div className="container">
          <div className="vb-section-header">
            <div className="vb-section-eyebrow">§ Common Questions</div>
            <h2 className="vb-section-h">Got <em>questions?</em></h2>
            <p className="vb-section-sub">Real answers, no sales pitch.</p>
          </div>
          <div style={{ maxWidth: 760, margin: "0 auto" }}>
            {[
              ["How does the membership work?", "It works like Costco. You pay an annual fee — $1, $20, $50, or $100 — and that gives you access to the panel and a tiered discount on every order. Plus members save 15%, Pro members save 25%, Elite members save 35%. Your wallet credits sit on top of that, and they never expire."],
              ["Which membership should I pick?", "Use the savings calculator above. Roughly: Basic ($1) is for trying it out. Plus ($20) pays for itself if you'll spend $135+/year. Pro ($50) is the sweet spot if you'll spend $300+/year. Elite ($100) makes sense for $650+/year — it pays back fast for power users and agencies."],
              ["Is this safe for my account?", "Yes. We never ask for your password. You only paste your public profile or post link. Our delivery is gradual and looks natural to the platforms — no sudden spikes that trigger flags. We've delivered millions of orders without account issues."],
              ["How fast is delivery?", "Most orders start within an hour and complete inside 24 hours for smaller quantities. Pro and Elite members get express slots. Larger orders (10,000+) deliver gradually over 3–10 days to look natural. You can track every order in real time from your dashboard."],
              ["What if my followers drop off?", "All follower services include a refill window. Basic members get 30 days, Plus members get 60 days, Pro members get 90 days, and Elite members get a lifetime refill guarantee. If your count dips, we top it back up at no charge."],
              ["Can I upgrade my membership later?", "Yes — anytime. We pro-rate your existing membership against the new tier so you never pay twice. Most members start at Plus or Pro and upgrade to Elite once they hit volume."],
              ["Can I get a refund?", "If we can't deliver an order, we refund the credits to your wallet automatically. If you've made a mistake on the link or quantity and the order hasn't started, contact support within 30 minutes and we'll cancel and refund."],
              ["How do credits work?", "Think of credits like a gift card balance. You add money to your wallet (minimum $20 top-up), and every order deducts from that balance at your member rate. $1 = 1 credit. There are no hidden fees, no expiration. You can top up by card or PayPal."],
              ["Who's behind Views Boost?", "Views Boost is operated by Eleven Views, a creative studio and intelligence platform serving artists, businesses, and creators. Founded 2021, we bring our quality bar to growth services."],
            ].map(([q, a], i) => (
              <div key={i} className={`vb-faq-item${openFaq === i ? " open" : ""}`}>
                <button className="vb-faq-q" onClick={() => setOpenFaq(openFaq === i ? null : i)}>
                  {q}<span className="vb-faq-icon">+</span>
                </button>
                <div className="vb-faq-a">
                  <div style={{ paddingTop: 8 }}>{a}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FINAL CTA */}
      <section className="vb-final">
        <div className="vb-final-glow" />
        <div className="container" style={{ textAlign: "center", position: "relative" }}>
          <h2 className="vb-h1" style={{ fontSize: "clamp(40px, 6vw, 76px)", marginBottom: 20 }}>Ready to <em>grow?</em></h2>
          <p style={{ fontSize: 18, color: "var(--vb-cream-dim)", maxWidth: 560, margin: "0 auto 32px", lineHeight: 1.6 }}>
            Join the early-access list. We're letting members in by the hundred — pick your tier and be the first the panel opens to.
          </p>
          <button className="vb-btn vb-btn-gold vb-btn-lg" onClick={() => openModal("signup")}>
            Join the waitlist <I name="arrow" size={14} />
          </button>
        </div>
      </section>

      {/* MODAL */}
      {modal && (
        <div className="vb-modal-bg" onClick={(e) => { if (e.target.className === "vb-modal-bg") closeModal(); }}>
          <div className="vb-modal">
            <button className="vb-modal-close" onClick={closeModal}>×</button>
            {modal === "signup" && (
              <>
                <div className="vb-modal-eyebrow">Step 1 of 3 · Pick Your Plan</div>
                <h2 className="vb-modal-title">Choose a <em>membership</em></h2>
                <p className="vb-modal-sub">Pick the plan that fits how much you'll grow this year. We'll save your spot for when the panel opens.</p>
                <div style={{ display: "grid", gap: 10, marginBottom: 16 }}>
                  {Object.entries(TIERS).map(([id, t]) => (
                    <label key={id} className={`vb-tier-opt${signupTier === id ? " checked" : ""}`} onClick={() => setSignupTier(id)}>
                      <span className="vb-tier-radio" />
                      <div style={{ flex: 1 }}>
                        <div style={{ fontFamily: "var(--vb-serif)", fontWeight: 700, fontSize: 17 }}>{t.name}</div>
                        <div style={{ fontFamily: "var(--vb-mono)", fontSize: 11, color: "rgba(245,241,232,0.4)", marginTop: 2, letterSpacing: "0.05em" }}>{t.label} · ${t.fee}/yr</div>
                      </div>
                      <div style={{ textAlign: "right" }}>
                        <div style={{ fontFamily: "var(--vb-serif)", fontWeight: 700, fontSize: 22, color: "var(--gold)" }}>${t.fee}</div>
                        <div style={{ fontSize: 10, color: t.discount > 0 ? "var(--vb-green)" : "rgba(245,241,232,0.4)", fontWeight: 700, fontFamily: "var(--vb-mono)", letterSpacing: "0.1em" }}>{t.discount > 0 ? `${(t.discount * 100).toFixed(0)}% OFF` : "RETAIL"}</div>
                      </div>
                    </label>
                  ))}
                </div>
                <button className="vb-btn vb-btn-gold vb-btn-lg" style={{ width: "100%", justifyContent: "center" }} onClick={() => setModal("topup")}>
                  Continue <I name="arrow" size={14} />
                </button>
              </>
            )}
            {modal === "topup" && (
              <>
                <div className="vb-modal-eyebrow">Step 2 of 3 · Account & Wallet</div>
                <h2 className="vb-modal-title">Almost <em>there</em></h2>
                <p className="vb-modal-sub">Drop your email and pick an initial top-up. {TIERS[signupTier].name} member, {TIERS[signupTier].label.toLowerCase()} on every order.</p>
                <div className="vb-form-row">
                  <label>Email</label>
                  <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@example.com" />
                </div>
                <div className="vb-form-row" style={{ marginTop: 18 }}>
                  <label>Initial wallet top-up (min $20)</label>
                </div>
                <div className="vb-preset-grid">
                  {[20, 50, 100, 250].map((amt) => (
                    <button key={amt} className={`vb-preset${topup === amt ? " active" : ""}`} onClick={() => setTopup(amt)}>${amt}</button>
                  ))}
                </div>
                <button className="vb-btn vb-btn-gold vb-btn-lg" style={{ width: "100%", justifyContent: "center" }} onClick={() => setModal("checkout")}>
                  Continue to Confirmation <I name="arrow" size={14} />
                </button>
              </>
            )}
            {modal === "checkout" && (
              <>
                <div className="vb-modal-eyebrow">Step 3 of 3 · Confirm</div>
                <h2 className="vb-modal-title">Last <em>step</em></h2>
                <p className="vb-modal-sub">We're rolling out access in waves. Confirm your plan and we'll email when your panel goes live.</p>
                <div style={{ background: "rgba(245,194,66,0.06)", border: "1px solid rgba(245,194,66,0.25)", borderRadius: 10, padding: "14px 16px", marginBottom: 14, fontSize: 13 }}>
                  <div style={{ display: "flex", justifyContent: "space-between", color: "var(--vb-cream-dim)", marginBottom: 6 }}>
                    <span>{TIERS[signupTier].name} membership · 1 year</span>
                    <strong style={{ color: "var(--vb-cream)" }}>${TIERS[signupTier].fee}.00</strong>
                  </div>
                  <div style={{ display: "flex", justifyContent: "space-between", color: "var(--vb-cream-dim)", marginBottom: 6 }}>
                    <span>Wallet top-up (held until launch)</span>
                    <strong style={{ color: "var(--vb-cream)" }}>${topup}.00</strong>
                  </div>
                  <div style={{ display: "flex", justifyContent: "space-between", borderTop: "1px solid var(--vb-line)", paddingTop: 8, marginTop: 6 }}>
                    <strong style={{ color: "var(--vb-cream)" }}>Reserved at launch</strong>
                    <strong style={{ color: "var(--gold)", fontFamily: "var(--vb-mono)" }}>${TIERS[signupTier].fee + topup}.00</strong>
                  </div>
                </div>
                <button className="vb-btn vb-btn-gold vb-btn-lg" style={{ width: "100%", justifyContent: "center" }} disabled={submitting} onClick={() => submitWaitlist("checkout-confirmed")}>
                  {submitting ? "Saving…" : "Reserve My Spot"} <I name="check" size={16} />
                </button>
                <p style={{ fontSize: 11, color: "rgba(245,241,232,0.4)", marginTop: 14, lineHeight: 1.5, textAlign: "center" }}>
                  No card needed yet — you'll be invoiced when the panel opens.
                </p>
              </>
            )}
            {modal === "success" && (
              <>
                <div style={{ width: 64, height: 64, background: "var(--gold)", color: "var(--vb-black)", borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 20px" }}>
                  <I name="check" size={28} stroke="currentColor" />
                </div>
                <h2 className="vb-modal-title" style={{ textAlign: "center" }}>You're <em>in</em>.</h2>
                <p className="vb-modal-sub" style={{ textAlign: "center" }}>
                  We've reserved your {TIERS[signupTier].name} spot. The studio will email when the panel opens — usually inside 14 days.
                </p>
                <div style={{ background: "rgba(245,194,66,0.06)", border: "1px solid rgba(245,194,66,0.25)", borderRadius: 10, padding: "14px 16px", marginBottom: 18, textAlign: "center" }}>
                  <div style={{ fontFamily: "var(--vb-mono)", fontSize: 10, letterSpacing: "0.2em", color: "var(--gold)", textTransform: "uppercase", fontWeight: 600, marginBottom: 6 }}>
                    Reserved · {TIERS[signupTier].name} Member
                  </div>
                  <div style={{ fontFamily: "var(--vb-serif)", fontSize: 36, fontWeight: 800, color: "var(--gold)" }}>${topup}.00</div>
                </div>
                <button className="vb-btn vb-btn-gold vb-btn-lg" style={{ width: "100%", justifyContent: "center" }} onClick={closeModal}>
                  Close
                </button>
              </>
            )}
          </div>
        </div>
      )}
    </main>
  );
}

/* ─── Scoped CSS injected at runtime ───────────────────────────── */
const VB_CSS = `
.vb {
  --vb-black: #0A0A0A;
  --vb-black-2: #131313;
  --vb-cream: #F5F1E8;
  --vb-cream-dim: rgba(245,241,232,0.7);
  --vb-line: rgba(245,241,232,0.1);
  --vb-line-strong: rgba(245,241,232,0.18);
  --vb-green: #4ADE80;
  --vb-serif: 'Fraunces', Georgia, serif;
  --vb-mono: 'Geist Mono', monospace;
  background: var(--vb-black);
  color: var(--vb-cream);
  display: block;
}
.vb h1, .vb h2, .vb h3, .vb h4 { color: var(--vb-cream); }
.vb em { font-style: italic; color: var(--gold); font-weight: 600; }
.vb a { color: var(--vb-cream); text-decoration: none; }
.vb .container { max-width: 1240px; margin: 0 auto; padding: 0 28px; }

/* HERO */
.vb-hero { padding: 80px 0 60px; position: relative; overflow: hidden; }
.vb-hero-glow { position: absolute; top: -200px; right: -200px; width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(245,194,66,0.1), transparent 60%); pointer-events: none; }
.vb-hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: center; position: relative; }
.vb-eyebrow { display: inline-flex; align-items: center; gap: 8px;
  background: rgba(245,194,66,0.1); border: 1px solid rgba(245,194,66,0.3);
  padding: 7px 14px; border-radius: 999px;
  font-family: var(--vb-mono); font-size: 11px; letter-spacing: 0.12em;
  color: var(--gold); text-transform: uppercase; font-weight: 600; margin-bottom: 24px; }
.vb-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--vb-green); box-shadow: 0 0 8px var(--vb-green); }
.vb-h1 { font-family: var(--vb-serif); font-weight: 800; font-size: clamp(40px, 6.5vw, 80px);
  line-height: 1; letter-spacing: -0.025em; margin-bottom: 20px; }
.vb-sub { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--vb-cream-dim);
  margin-bottom: 32px; max-width: 540px; }

.vb-btn { border: none; cursor: pointer; font-family: inherit; font-weight: 600;
  transition: all 0.2s ease; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.vb-btn-gold { background: var(--gold); color: var(--vb-black); padding: 11px 20px; border-radius: 999px; font-size: 14px; }
.vb-btn-gold:hover { background: #FFD056; transform: translateY(-1px); }
.vb-btn-ghost { background: transparent; color: var(--vb-cream); border: 1px solid var(--vb-line-strong);
  padding: 10px 18px; border-radius: 999px; font-size: 14px; }
.vb-btn-ghost:hover { border-color: var(--vb-cream); }
.vb-btn-lg { padding: 16px 28px; font-size: 15px; font-weight: 700; }

/* CALC */
.vb-calc { background: linear-gradient(180deg, rgba(245,241,232,0.04), rgba(245,241,232,0.01));
  border: 1px solid var(--vb-line-strong); border-radius: 18px; padding: 28px; position: relative; overflow: hidden; }
.vb-calc::before { content: ''; position: absolute; top: 0; right: 0; width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(245,194,66,0.12), transparent 60%); pointer-events: none; }
.vb-calc-eyebrow { font-family: var(--vb-mono); font-size: 10px; letter-spacing: 0.22em;
  color: var(--gold); text-transform: uppercase; margin-bottom: 6px; font-weight: 600; }
.vb-calc-title { font-family: var(--vb-serif); font-weight: 700; font-size: 22px; margin-bottom: 18px; }
.vb-calc-step { margin-bottom: 16px; }
.vb-calc-label { font-size: 12px; font-weight: 600; color: var(--vb-cream-dim); margin-bottom: 8px; display: block; }
.vb-tier-toggle { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  background: rgba(10,10,10,0.5); border: 1px solid var(--vb-line); border-radius: 12px; padding: 4px; }
.vb-tier-btn { background: transparent; border: none; padding: 9px 6px; border-radius: 8px;
  color: var(--vb-cream-dim); cursor: pointer; font-family: inherit; font-size: 11px;
  font-weight: 600; transition: all 0.2s ease; text-align: center; line-height: 1.1; }
.vb-tier-btn:hover { color: var(--vb-cream); }
.vb-tier-btn.active { background: var(--gold); color: var(--vb-black); box-shadow: 0 4px 12px rgba(245,194,66,0.3); }
.vb-tier-btn small { display: block; font-size: 9px; opacity: 0.7; margin-top: 2px; font-family: var(--vb-mono); }
.vb-platforms { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.vb-platform-btn { background: rgba(10,10,10,0.6); border: 1px solid var(--vb-line-strong);
  border-radius: 10px; padding: 10px 4px; cursor: pointer; transition: all 0.2s ease;
  color: var(--vb-cream-dim); display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600; }
.vb-platform-btn:hover { color: var(--vb-cream); border-color: rgba(245,241,232,0.35); }
.vb-platform-btn.active { border-color: var(--gold); background: rgba(245,194,66,0.08); color: var(--vb-cream); }
.vb-platform-name { font-size: 9.5px; }
.vb-services { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.vb-service-btn { background: rgba(10,10,10,0.6); border: 1px solid var(--vb-line-strong);
  border-radius: 10px; padding: 10px 12px; cursor: pointer; transition: all 0.2s ease;
  color: var(--vb-cream-dim); text-align: left; font-size: 13px; font-weight: 500; font-family: inherit; }
.vb-service-btn:hover { color: var(--vb-cream); }
.vb-service-btn.active { border-color: var(--gold); background: rgba(245,194,66,0.08); color: var(--vb-cream); }
.vb-qty-btn { width: 42px; height: 42px; background: rgba(10,10,10,0.6);
  border: 1px solid var(--vb-line-strong); border-radius: 10px; color: var(--vb-cream); cursor: pointer; font-size: 18px;
  transition: all 0.2s ease; }
.vb-qty-btn:hover { border-color: var(--gold); color: var(--gold); }
.vb-qty-input { flex: 1; background: rgba(10,10,10,0.6); border: 1px solid var(--vb-line-strong);
  border-radius: 10px; padding: 12px 14px; color: var(--vb-cream); font-family: var(--vb-mono);
  font-weight: 600; font-size: 16px; text-align: center; }
.vb-qty-input:focus { outline: none; border-color: var(--gold); }
.vb-slider { width: 100%; margin-top: 10px; accent-color: var(--gold); }
.vb-quick { background: transparent; border: 1px solid var(--vb-line); padding: 6px 12px; border-radius: 999px;
  color: rgba(245,241,232,0.4); font-size: 11px; cursor: pointer; transition: all 0.2s ease; font-family: var(--vb-mono); }
.vb-quick:hover { border-color: var(--gold); color: var(--gold); }
.vb-total { background: linear-gradient(135deg, var(--gold) 0%, #B8922A 100%); color: var(--vb-black);
  border-radius: 14px; padding: 18px 22px; margin-top: 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.vb-total-label { font-family: var(--vb-mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 700; opacity: 0.8; }
.vb-total-amount { font-family: var(--vb-serif); font-weight: 800; font-size: 32px; line-height: 1; }
.vb-total-strike { font-family: var(--vb-mono); font-size: 14px; text-decoration: line-through; opacity: 0.5; font-weight: 600; }
.vb-savings-badge { display: inline-block; background: rgba(10,10,10,0.18); padding: 3px 8px;
  border-radius: 6px; font-family: var(--vb-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.05em; margin-left: 6px; }
.vb-cta { background: var(--vb-black); color: var(--vb-cream); padding: 12px 18px; border-radius: 999px;
  font-size: 13px; font-weight: 700; cursor: pointer; border: none; display: inline-flex; align-items: center; gap: 8px;
  transition: all 0.2s ease; }
.vb-cta:hover { background: #1a1a1a; }
@media (max-width: 900px) { .vb-hero-grid { grid-template-columns: 1fr; gap: 40px; } .vb-platforms { grid-template-columns: repeat(3, 1fr); } }

/* TRUST */
.vb-trust { padding: 32px 0; border-top: 1px solid var(--vb-line); border-bottom: 1px solid var(--vb-line); background: var(--vb-black-2); }
.vb-trust-row { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 24px; text-align: center; }
.vb-trust-item { display: flex; align-items: center; gap: 10px; color: var(--vb-cream-dim); font-size: 13px; font-weight: 600; }

/* SECTIONS */
.vb-section-header { text-align: center; margin-bottom: 56px; }
.vb-section-eyebrow { font-family: var(--vb-mono); font-size: 12px; letter-spacing: 0.28em;
  color: var(--gold); text-transform: uppercase; margin-bottom: 14px; }
.vb-section-h { font-family: var(--vb-serif); font-weight: 800; font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1; letter-spacing: -0.025em; margin-bottom: 16px; }
.vb-section-sub { font-size: 17px; color: var(--vb-cream-dim); max-width: 580px; margin: 0 auto; line-height: 1.6; }

/* HOW */
.vb-how { padding: 80px 0; border-top: 1px solid var(--vb-line); background: var(--vb-black-2); }
.vb-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.vb-step { background: var(--vb-black); border: 1px solid var(--vb-line); border-radius: 16px;
  padding: 32px 28px; transition: all 0.3s ease; }
.vb-step:hover { border-color: var(--gold); transform: translateY(-4px); }
.vb-step-num { width: 42px; height: 42px; background: var(--gold); color: var(--vb-black);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--vb-serif); font-weight: 800; font-size: 20px; margin-bottom: 20px; }
.vb-step-h { font-family: var(--vb-serif); font-weight: 700; font-size: 24px; margin-bottom: 10px; line-height: 1.15; }
.vb-step-body { color: var(--vb-cream-dim); font-size: 15px; line-height: 1.6; }
@media (max-width: 800px) { .vb-steps { grid-template-columns: 1fr; } }

/* TIERS */
.vb-tiers { padding: 100px 0; border-top: 1px solid var(--vb-line); position: relative; overflow: hidden; }
.vb-tiers-glow { position: absolute; top: -100px; left: 50%; transform: translateX(-50%); width: 1000px; height: 500px;
  background: radial-gradient(ellipse, rgba(245,194,66,0.06), transparent 60%); pointer-events: none; }
.vb-tiers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; position: relative; }
.vb-tier-card { background: var(--vb-black-2); border: 1px solid var(--vb-line); border-radius: 18px;
  padding: 28px 24px; position: relative; transition: all 0.3s ease;
  display: flex; flex-direction: column; }
.vb-tier-card:hover { border-color: rgba(245,241,232,0.35); transform: translateY(-4px); }
.vb-tier-card.featured { border-color: var(--gold);
  background: linear-gradient(180deg, rgba(245,194,66,0.08), var(--vb-black-2) 60%);
  transform: scale(1.04); box-shadow: 0 20px 60px rgba(245,194,66,0.12); }
.vb-tier-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: var(--vb-black); font-family: var(--vb-mono);
  font-size: 10px; letter-spacing: 0.15em; padding: 5px 12px; border-radius: 999px;
  font-weight: 700; white-space: nowrap; }
.vb-tier-card.elite { background: linear-gradient(180deg, var(--vb-black-2), #050505); border-color: #B8922A; }
.vb-tier-name { font-family: var(--vb-serif); font-weight: 700; font-size: 28px; line-height: 1; margin-bottom: 4px; }
.vb-tier-discount { font-family: var(--vb-mono); font-size: 11px; letter-spacing: 0.15em;
  color: var(--gold); font-weight: 700; text-transform: uppercase; margin-bottom: 18px; }
.vb-tier-discount.zero { color: rgba(245,241,232,0.4); }
.vb-tier-amt { font-family: var(--vb-serif); font-weight: 800; font-size: 44px; line-height: 1; color: var(--gold); }
.vb-tier-list { list-style: none; padding: 0; margin: 0 0 24px; flex: 1; }
.vb-tier-list li { padding-left: 22px; position: relative; margin-bottom: 10px; font-size: 13px;
  color: var(--vb-cream-dim); line-height: 1.5; }
.vb-tier-list li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 16px; height: 16px;
  background: rgba(245,194,66,0.15); color: var(--gold); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; }
.vb-tier-cta { width: 100%; padding: 12px; border-radius: 10px; font-size: 13px; font-weight: 700;
  border: 1px solid var(--vb-line-strong); background: transparent; color: var(--vb-cream); cursor: pointer;
  transition: all 0.2s ease; font-family: inherit; }
.vb-tier-cta:hover { border-color: var(--gold); color: var(--gold); }
.vb-tier-card.featured .vb-tier-cta { background: var(--gold); color: var(--vb-black); border-color: var(--gold); }
@media (max-width: 1100px) { .vb-tiers-grid { grid-template-columns: repeat(2, 1fr); } .vb-tier-card.featured { transform: none; } }
@media (max-width: 600px) { .vb-tiers-grid { grid-template-columns: 1fr; } }

/* SAVINGS */
.vb-savings { padding: 80px 0; border-top: 1px solid var(--vb-line); background: var(--vb-black-2); }
.vb-savings-panel { background: var(--vb-black); border: 1px solid var(--vb-line-strong);
  border-radius: 20px; padding: 40px; max-width: 920px; margin: 0 auto; position: relative; overflow: hidden; }
.vb-spend-amt { font-family: var(--vb-serif); font-weight: 800; font-size: 44px; color: var(--gold); line-height: 1; }
.vb-savings-results { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 32px; }
.vb-savings-result { background: var(--vb-black-2); border: 1px solid var(--vb-line); border-radius: 12px;
  padding: 20px 16px; text-align: center; position: relative; transition: all 0.3s ease; }
.vb-savings-result.best { border-color: var(--gold); background: rgba(245,194,66,0.06); }
.vb-savings-result.best::after { content: 'BEST FOR YOU'; position: absolute; top: -10px; left: 50%;
  transform: translateX(-50%); background: var(--gold); color: var(--vb-black);
  font-family: var(--vb-mono); font-size: 9px; letter-spacing: 0.12em; padding: 3px 10px; border-radius: 999px;
  font-weight: 700; white-space: nowrap; }
.vb-savings-tier { font-family: var(--vb-serif); font-weight: 700; font-size: 18px; margin-bottom: 4px; }
.vb-savings-total { font-family: var(--vb-mono); font-weight: 700; font-size: 22px; color: var(--vb-cream); margin-bottom: 4px; }
.vb-savings-saved { font-size: 11px; color: var(--vb-green); font-weight: 600; }
.vb-savings-saved.zero { color: rgba(245,241,232,0.4); }
@media (max-width: 700px) { .vb-savings-panel { padding: 28px 22px; } .vb-savings-results { grid-template-columns: repeat(2, 1fr); } }

/* PLATFORMS */
.vb-platforms-section { padding: 80px 0; border-top: 1px solid var(--vb-line); }
.vb-platform-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.vb-platform-card { background: var(--vb-black-2); border: 1px solid var(--vb-line); border-radius: 16px;
  padding: 28px; transition: all 0.3s ease; position: relative; overflow: hidden; }
.vb-platform-card:hover { border-color: var(--gold); transform: translateY(-4px); }
.vb-platform-icon { width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; color: white; margin-bottom: 18px; }
.vb-instagram .vb-platform-icon  { background: linear-gradient(135deg, #E4405F, #FBAD50); }
.vb-tiktok .vb-platform-icon     { background: linear-gradient(135deg, #FF0050, #00F2EA); }
.vb-youtube .vb-platform-icon    { background: #FF0000; }
.vb-spotify .vb-platform-icon    { background: #1DB954; }
.vb-facebook .vb-platform-icon   { background: #1877F2; }
.vb-soundcloud .vb-platform-icon { background: #FF7700; }
.vb-service-chip { background: rgba(245,241,232,0.05); border: 1px solid var(--vb-line);
  color: var(--vb-cream-dim); padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 500; }
@media (max-width: 900px) { .vb-platform-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .vb-platform-grid { grid-template-columns: 1fr; } }

/* PACKAGES */
.vb-packages { padding: 80px 0; border-top: 1px solid var(--vb-line); background: var(--vb-black-2); }
.vb-pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.vb-pkg { background: var(--vb-black); border: 1px solid var(--vb-line); border-radius: 18px;
  padding: 32px 28px; transition: all 0.3s ease; }
.vb-pkg.featured { border-color: var(--gold); background: linear-gradient(180deg, rgba(245,194,66,0.06), var(--vb-black) 60%); }
.vb-pkg-list { list-style: none; padding: 0; margin: 0 0 24px; }
.vb-pkg-list li { padding-left: 26px; position: relative; margin-bottom: 12px; font-size: 14px;
  color: var(--vb-cream-dim); line-height: 1.5; }
.vb-pkg-list li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 18px; height: 18px;
  background: rgba(245,194,66,0.15); color: var(--gold); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
@media (max-width: 900px) { .vb-pkg-grid { grid-template-columns: 1fr; } }

/* FAQ */
.vb-faq { padding: 80px 0; border-top: 1px solid var(--vb-line); }
.vb-faq-item { border-bottom: 1px solid var(--vb-line); }
.vb-faq-q { width: 100%; background: transparent; border: none; padding: 22px 0; text-align: left;
  color: var(--vb-cream); font-family: var(--vb-serif); font-weight: 600; font-size: 19px;
  cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  transition: color 0.2s ease; }
.vb-faq-q:hover { color: var(--gold); }
.vb-faq-icon { width: 28px; height: 28px; border: 1px solid var(--vb-line-strong); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.3s ease;
  color: var(--vb-cream-dim); }
.vb-faq-item.open .vb-faq-icon { background: var(--gold); color: var(--vb-black); border-color: var(--gold);
  transform: rotate(45deg); }
.vb-faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease;
  color: var(--vb-cream-dim); font-size: 15px; line-height: 1.7; }
.vb-faq-item.open .vb-faq-a { max-height: 400px; padding-bottom: 22px; }

/* FINAL */
.vb-final { padding: 100px 0; border-top: 1px solid var(--vb-line); position: relative; overflow: hidden; }
.vb-final-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 800px; height: 600px;
  background: radial-gradient(ellipse, rgba(245,194,66,0.1), transparent 60%); pointer-events: none; }

/* MODAL */
.vb-modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,0.85); backdrop-filter: blur(8px);
  z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; }
.vb-modal { background: var(--vb-black-2); border: 1px solid var(--vb-line-strong); border-radius: 20px;
  width: 100%; max-width: 480px; padding: 32px; position: relative; max-height: 90vh; overflow-y: auto; }
.vb-modal-close { position: absolute; top: 18px; right: 18px; width: 32px; height: 32px;
  background: rgba(245,241,232,0.06); border: none; border-radius: 50%; color: var(--vb-cream);
  cursor: pointer; font-size: 22px; display: flex; align-items: center; justify-content: center; line-height: 1; }
.vb-modal-eyebrow { font-family: var(--vb-mono); font-size: 10px; letter-spacing: 0.22em;
  color: var(--gold); text-transform: uppercase; margin-bottom: 8px; font-weight: 600; }
.vb-modal-title { font-family: var(--vb-serif); font-weight: 700; font-size: 28px; margin-bottom: 8px; line-height: 1.1; }
.vb-modal-sub { color: var(--vb-cream-dim); font-size: 14px; margin-bottom: 24px; line-height: 1.55; }
.vb-form-row { margin-bottom: 16px; }
.vb-form-row label { display: block; font-size: 12px; color: var(--vb-cream-dim); margin-bottom: 6px; font-weight: 600; }
.vb-form-row input { width: 100%; background: rgba(10,10,10,0.6); border: 1px solid var(--vb-line-strong);
  color: var(--vb-cream); padding: 12px 14px; border-radius: 10px; font-family: inherit; font-size: 14px;
  transition: border-color 0.2s ease; }
.vb-form-row input:focus { outline: none; border-color: var(--gold); }
.vb-tier-opt { display: flex; align-items: center; gap: 14px; background: rgba(10,10,10,0.6);
  border: 1px solid var(--vb-line-strong); border-radius: 12px; padding: 14px 16px; cursor: pointer;
  transition: all 0.2s ease; }
.vb-tier-opt:hover { border-color: rgba(245,241,232,0.35); }
.vb-tier-opt.checked { border-color: var(--gold); background: rgba(245,194,66,0.06); }
.vb-tier-radio { width: 18px; height: 18px; border: 2px solid rgba(245,241,232,0.4); border-radius: 50%;
  flex-shrink: 0; position: relative; transition: all 0.2s ease; }
.vb-tier-opt.checked .vb-tier-radio { border-color: var(--gold); }
.vb-tier-opt.checked .vb-tier-radio::after { content: ''; position: absolute; inset: 3px;
  background: var(--gold); border-radius: 50%; }
.vb-preset-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; }
.vb-preset { background: rgba(10,10,10,0.6); border: 1px solid var(--vb-line-strong); border-radius: 10px;
  padding: 12px 6px; color: var(--vb-cream); cursor: pointer; font-family: var(--vb-mono);
  font-weight: 700; font-size: 14px; transition: all 0.2s ease; }
.vb-preset:hover { border-color: rgba(245,241,232,0.35); }
.vb-preset.active { border-color: var(--gold); background: rgba(245,194,66,0.1); color: var(--gold); }
`;

window.ViewsBoost = ViewsBoost;