Citycraft

/* ============================================================
   LANDING PAGE SKILL — CLIP-PATH DIVIDER LIBRARY
   Apply to section elements to create non-rectangular dividers.
   Combine top/bottom cuts from different sections to create
   "interlocking" edges between adjacent sections.
   ============================================================ */

/* ── DIAGONAL CUTS ─────────────────────────────────────────── */

/* Section with a diagonal bottom-right cut */
.clip-diagonal-br {
  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
  padding-bottom: calc(var(--section-pad, 120px) + 8vw);
}

/* Section with a diagonal bottom-left cut */
.clip-diagonal-bl {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 88%);
  padding-bottom: calc(var(--section-pad, 120px) + 8vw);
}

/* Section with opposing diagonal (parallelogram feel) */
.clip-parallelogram {
  clip-path: polygon(0 6vw, 100% 0, 100% calc(100% - 6vw), 0 100%);
  padding: calc(var(--section-pad, 120px) + 6vw) 0;
  margin-top: -6vw;
}

/* ── ANGLED CORNER CUTS (chamfer effect) ────────────────────── */

/* Bottom-right corner chamfered */
.clip-chamfer-br {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), calc(100% - 60px) 100%, 0 100%);
}

/* All four corners chamfered (hexagonal softness) */
.clip-chamfer-all {
  clip-path: polygon(40px 0, calc(100% - 40px) 0, 100% 40px, 100% calc(100% - 40px), calc(100% - 40px) 100%, 40px 100%, 0 calc(100% - 40px), 0 40px);
}

/* ── WAVE CUTS ──────────────────────────────────────────────── */

/* Gentle wave at the bottom */
.clip-wave-bottom {
  clip-path: ellipse(55% 100% at 50% 0%);
  /* Use as a decorative top element overlapping the previous section */
}

/* Arc cut (bowl shape at bottom) */
.clip-arc-bottom {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
  padding-bottom: calc(var(--section-pad, 120px) + 10vw);
}

/* ── STEPPED CUTS ───────────────────────────────────────────── */

/* Staircase cut bottom-right */
.clip-step-br {
  clip-path: polygon(0 0, 100% 0, 100% 60%, 75% 60%, 75% 80%, 50% 80%, 50% 100%, 0 100%);
}

/* ── UTILITY — apply to a sticky overlay section ───────────── */
/* The next section "covers" the previous one from below */
.clip-cover-prev {
  position: relative;
  z-index: 2;
  clip-path: polygon(0 48px, 100% 0, 100% 100%, 0 100%);
  margin-top: -48px;
}

/* ── GRADIENT / DISSOLVE TRANSITIONS ────────────────────────── */
/*
  渐变过渡 — The section's top edge dissolves in from transparent,
  overlapping the previous section. The gradient fades from transparent
  to var(--bg), so the section blends into what came before.

  Usage: add to the SECOND section in a pair.
  The previous section needs no special class.
*/
.section-dissolve {
  position: relative;
  z-index: 2;
  margin-top: -120px;
  padding-top: calc(120px + var(--section-pad, 120px));
}
.section-dissolve::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 140px;
  background: linear-gradient(to bottom, transparent, var(--bg, #f5ede0));
  pointer-events: none;
  z-index: -1;
}

/* ── FLAT / RULE TRANSITIONS ─────────────────────────────────── */
/*
  平直过渡 — Clean straight edge, no clip. An accent-colored ruled line
  visually separates sections without a geometric cut. Understated.

  Usage: add to the section that receives the rule at its top.
*/
.section-rule {
  position: relative;
  padding-top: calc(var(--section-pad, 120px) + 32px);
}
.section-rule::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--accent, #8b4513) 25%,
    var(--accent, #8b4513) 75%,
    transparent
  );
  opacity: 0.5;
}

/* ── SMOOTH CURVE TRANSITIONS ────────────────────────────────── */
/*
  曲线过渡 — Smooth rounded bottom edge using border-radius.
  The section background is clipped to an elliptical curve at the bottom.
  Combine with the next section using a negative margin-top to interlock.

  Usage: add to the FIRST section in a pair.
  Next section: add z-index: 2 and margin-top: -6vw.
*/
.clip-round-bottom {
  border-radius: 0 0 50% 50% / 0 0 5vw 5vw;
  overflow: hidden;
  padding-bottom: calc(var(--section-pad, 120px) + 6vw);
}

/* Concave wave — a scalloped bottom cut (multi-point polygon curve) */
.clip-scallop {
  clip-path: polygon(
    0 0, 100% 0, 100% 82%,
    92% 84%, 84% 88%, 75% 93%, 66% 97%, 58% 99%,
    50% 100%, 42% 99%, 34% 97%, 25% 93%, 16% 88%,
    8% 84%, 0 82%
  );
  padding-bottom: calc(var(--section-pad, 120px) + 12vw);
}

/* ============================================================
   LANDING PAGE SKILL — GSAP ANIMATION SNIPPETS
   These are proven patterns. Copy, adapt variable names,
   and plug into your main.js. Do NOT reinvent these.
   ============================================================ */

// ─── 1. BLUR-STAGGER ENTRANCE (hero text reveal) ──────────────
// Usage: call once on DOMContentLoaded
function initHeroEntrance(containerSelector, itemSelector) {
  gsap.from(itemSelector || `${containerSelector} > *`, {
    y: 32,
    opacity: 0,
    filter: "blur(6px)",
    duration: 0.9,
    ease: "power3.out",
    stagger: 0.12,
    clearProps: "filter",
  });
}
// Example: initHeroEntrance(".hero-text", ".hero-text > *")


// ─── 2. CLIP-MASK LINE REVEAL (Paris / editorial style) ────────
// Each heading line slides up from a clip container.
// Wrap each line: <span class="line-wrap"><span class="line-inner">text</span></span>
//
// ⚠️  CJK CLIPPING FIX (required when page includes Chinese/Japanese):
// .line-wrap { overflow: hidden } clips tall CJK ascenders at the top.
// Always add this compensation in style.css:
//   .line-wrap { overflow: hidden; padding-top: 0.15em; margin-top: -0.15em; }
function initLineReveal(headingSelector) {
  const headings = document.querySelectorAll(headingSelector);
  headings.forEach((heading) => {
    const lines = heading.querySelectorAll(".line-inner");
    gsap.from(lines, {
      y: "110%",
      duration: 0.85,
      ease: "expo.out",
      stagger: 0.08,
      scrollTrigger: {
        trigger: heading,
        start: "top 80%",
        toggleActions: "play none none none",
      },
    });
  });
}
// CSS required:
// .line-wrap { display: block; overflow: hidden; }
// .line-inner { display: block; }


// ─── 3. PARALLAX LAYERS (depth on scroll) ──────────────────────
// Pass an array of { selector, speed } — speed 0.5 = half rate, 1.5 = faster
function initParallax(layers) {
  layers.forEach(({ selector, speed }) => {
    gsap.to(selector, {
      y: () => window.innerHeight * (speed - 1) * -0.4,
      ease: "none",
      scrollTrigger: {
        trigger: "body",
        start: "top top",
        end: "bottom bottom",
        scrub: speed,
      },
    });
  });
}
// Example:
// initParallax([
//   { selector: ".hero-bg-glow",   speed: 0.6 },
//   { selector: ".hero-phone",     speed: 1.2 },
//   { selector: ".hero-particles", speed: 0.8 },
// ]);


// ─── 4. STICKY STEP-THROUGH (how it works / theatrical) ────────
// Pins a container, steps through items as user scrolls.
// HTML: <div class="steps-wrapper">
//         <div class="steps-panel sticky-panel">  ← pinned
//         <div class="steps-content">             ← scroll height
//           <div class="step" data-step="0">
function initStickySteps(wrapperSelector, panelSelector, stepSelector) {
  const steps = document.querySelectorAll(stepSelector);
  const total = steps.length;

  ScrollTrigger.create({
    trigger: wrapperSelector,
    start: "top top",
    end: `+=${total * 100}vh`,
    pin: panelSelector,
    scrub: false,
    onUpdate(self) {
      const idx = Math.min(Math.floor(self.progress * total), total - 1);
      steps.forEach((s, i) => s.classList.toggle("active", i === idx));
    },
  });
}
// Example:
// initStickySteps(".how-wrapper", ".how-panel", ".how-step")


// ─── 5. FULLSCREEN BLAST MENU ──────────────────────────────────
// Open/close animation for a full-viewport nav overlay.
// HTML: <div class="nav-overlay"> <a class="nav-item">...</a> </div>
function initBlastMenu(triggerSelector, overlaySelector, itemSelector) {
  const trigger = document.querySelector(triggerSelector);
  const overlay = document.querySelector(overlaySelector);
  const items   = document.querySelectorAll(itemSelector);
  let isOpen = false;

  // Overlay starts: clip-path: inset(0% 0% 100% 0%)
  gsap.set(overlay, { clipPath: "inset(0% 0% 100% 0%)", display: "flex" });

  const openTl = gsap.timeline({ paused: true })
    .to(overlay,  { clipPath: "inset(0% 0% 0% 0%)", duration: 0.6, ease: "power4.inOut" })
    .from(items,  { y: 64, opacity: 0, stagger: 0.07, duration: 0.5, ease: "power3.out" }, "-=0.25");

  trigger.addEventListener("click", () => {
    isOpen = !isOpen;
    trigger.setAttribute("aria-expanded", isOpen);
    document.body.style.overflow = isOpen ? "hidden" : "";
    isOpen ? openTl.play() : openTl.reverse();
  });

  document.addEventListener("keydown", (e) => {
    if (e.key === "Escape" && isOpen) { isOpen = false; openTl.reverse(); document.body.style.overflow = ""; }
  });
}
// CSS required:
// .nav-overlay { position: fixed; inset: 0; z-index: 200; display: none; }
// Call: initBlastMenu(".menu-toggle", ".nav-overlay", ".nav-item")


// ─── 6. MAGNETIC PILL NAV ──────────────────────────────────────
// Bottom pill floats toward the cursor when nearby.
function initMagneticPill(pillSelector, radius, strength) {
  radius   = radius   || 120;
  strength = strength || 0.28;
  const pill = document.querySelector(pillSelector);
  if (!pill) return;

  document.addEventListener("mousemove", (e) => {
    const r    = pill.getBoundingClientRect();
    const cx   = r.left + r.width  / 2;
    const cy   = r.top  + r.height / 2;
    const dx   = e.clientX - cx;
    const dy   = e.clientY - cy;
    const dist = Math.hypot(dx, dy);

    if (dist < radius) {
      const pull = 1 - dist / radius;
      gsap.to(pill, { x: dx * pull * strength, y: dy * pull * strength, duration: 0.4, ease: "power2.out" });
    } else {
      gsap.to(pill, { x: 0, y: 0, duration: 0.8, ease: "elastic.out(1, 0.5)" });
    }
  });
}
// Example: initMagneticPill(".pill-nav")


// ─── 7. HERO DEMO STEPPER (time-driven product walkthrough) ────
// A self-running, scene-by-scene product demo inside the Hero.
// NOT scroll-driven — advances on a timer, resets when scrolled away.
//
// Required HTML structure:
//   <div class="demo-wrapper">                    ← IntersectionObserver target
//     <div class="demo-step-badge">
//       <span class="demo-step-num"></span>
//       <span class="demo-step-label"></span>
//     </div>
//     <div class="demo-panel">                    ← needs overflow: visible in CSS
//       <div class="demo-slot" data-step="0"></div>
//       <div class="demo-slot" data-step="1"></div>
//       <div class="demo-slot" data-step="2"></div>
//     </div>
//     <div class="demo-progress-dots">
//       <span class="step-dot active" data-target="0"></span>
//       <span class="step-dot" data-target="1"></span>
//       <span class="step-dot" data-target="2"></span>
//     </div>
//     <!-- Optional synced subtitle — text updates per step -->
//     <p class="demo-synced-text"
//        data-step-0="Step 0 subtitle"
//        data-step-1="Step 1 subtitle"
//        data-step-2="Step 2 subtitle"></p>
//   </div>
//
// stepDefs: array of { num, label, onEnter(slotEl) }
// onEnter receives the slot DOM element — run your GSAP timeline inside it.
//
// Design law: each onEnter should animate (1) one hero element first,
// (2) supporting elements with stagger delay, (3) one breakout element last.
// Read references/product-demo-hero.md before writing these callbacks.
function initHeroDemoStepper(wrapperSel, stepDefs, intervalMs) {
  const wrapper = document.querySelector(wrapperSel);
  if (!wrapper) return;
  intervalMs = intervalMs || 3200;

  const slots    = wrapper.querySelectorAll('.demo-slot');
  const numEl    = wrapper.querySelector('.demo-step-num');
  const labelEl  = wrapper.querySelector('.demo-step-label');
  const dots     = wrapper.querySelectorAll('.step-dot');
  const syncText = wrapper.querySelector('.demo-synced-text');

  let current = -1;
  let timer   = null;

  function updateBadge(idx) {
    const def = stepDefs[idx];
    if (numEl) {
      gsap.to(numEl, { opacity: 0, y: -6, duration: 0.18, onComplete: () => {
        numEl.textContent = def.num;
        gsap.to(numEl, { opacity: 1, y: 0, duration: 0.22 });
      }});
    }
    if (labelEl) {
      gsap.to(labelEl, { opacity: 0, duration: 0.15, onComplete: () => {
        labelEl.textContent = def.label;
        gsap.to(labelEl, { opacity: 1, duration: 0.2 });
      }});
    }
    if (syncText) {
      gsap.to(syncText, { opacity: 0, y: 4, duration: 0.18, onComplete: () => {
        syncText.textContent = syncText.dataset['step' + idx] || '';
        gsap.to(syncText, { opacity: 1, y: 0, duration: 0.25 });
      }});
    }
    dots.forEach((d, i) => d.classList.toggle('active', i === idx));
  }

  function enterSlot(slot, idx) {
    gsap.set(slot, { display: 'block', opacity: 0 });
    gsap.to(slot, { opacity: 1, duration: 0.22 });
    if (stepDefs[idx].onEnter) stepDefs[idx].onEnter(slot);
  }

  function goTo(idx) {
    const prev = current;
    current = idx;
    updateBadge(idx);
    if (prev >= 0 && slots[prev]) {
      gsap.to(slots[prev], { opacity: 0, duration: 0.2, onComplete: () => {
        gsap.set(slots[prev], { display: 'none' });
        enterSlot(slots[idx], idx);
      }});
    } else {
      enterSlot(slots[idx], idx);
    }
  }

  function startTimer() {
    clearInterval(timer);
    timer = setInterval(() => goTo((current + 1) % stepDefs.length), intervalMs);
  }

  dots.forEach((dot, i) => {
    dot.addEventListener('click', () => { clearInterval(timer); goTo(i); startTimer(); });
  });

  // Start on viewport entry, pause on exit, reset when re-entering
  const io = new IntersectionObserver((entries) => {
    entries.forEach(({ isIntersecting }) => {
      if (isIntersecting) {
        slots.forEach(s => gsap.set(s, { display: 'none', opacity: 0 }));
        current = -1;
        goTo(0);
        startTimer();
      } else {
        clearInterval(timer);
      }
    });
  }, { threshold: 0.3 });

  io.observe(wrapper);
}
// Example:
// initHeroDemoStepper(".demo-wrapper", [
//   { num: "01", label: "Setup",   onEnter(slot) { /* gsap animations */ } },
//   { num: "02", label: "Running", onEnter(slot) { animateCount(slot.querySelector('.big-num'), 4200, 1.5); } },
//   { num: "03", label: "Result",  onEnter(slot) { /* gsap animations */ } },
// ]);


// ─── 8. ANIMATED COUNT (use inside initHeroDemoStepper onEnter) ─
// Counts from 0 → target inside an element. Shows velocity and scale.
function animateCount(el, target, duration, suffix) {
  if (!el) return;
  suffix   = suffix   || '';
  duration = duration || 1.6;
  const obj = { val: 0 };
  gsap.to(obj, {
    val: target,
    duration: duration,
    ease: 'power3.out',
    onUpdate: () => { el.textContent = Math.round(obj.val).toLocaleString() + suffix; },
  });
}
// Example: animateCount(slot.querySelector('.views-num'), 84201, 1.8)
// Example: animateCount(slot.querySelector('.pct'), 96, 1.2, '%')

#!/usr/bin/env python3
from __future__ import annotations

import re
import sys
from pathlib import Path

START_RE = re.compile(r"^\s*<!--\s*@@VARIANT:([A-Za-z0-9_]+)\s*-->\s*$")
END_RE = re.compile(r"^\s*<!--\s*@@/VARIANT:([A-Za-z0-9_]+)\s*-->\s*$")
STYLE_OPEN_RE = re.compile(r"^\s*<style\b[^>]*>\s*$", re.IGNORECASE)
STYLE_CLOSE_RE = re.compile(r"^\s*</style>\s*$", re.IGNORECASE)


def fail(message: str) -> None:
    print(f"Error: {message}", file=sys.stderr)
    print("Usage: python3 extract_variant.py <file> <variant>", file=sys.stderr)
    print("Example: python3 extract_variant.py hero-variants.html A", file=sys.stderr)
    print("Example: python3 extract_variant.py conversion-variants.html PRICING", file=sys.stderr)
    raise SystemExit(1)


def resolve_path(raw_path: str) -> Path:
    candidate = Path(raw_path).expanduser()
    if candidate.exists():
        return candidate.resolve()

    script_dir = Path(__file__).resolve().parent
    fallbacks = [
        script_dir.parent / "sections" / raw_path,
        script_dir / raw_path,
        Path.cwd() / raw_path,
    ]
    for fallback in fallbacks:
        if fallback.exists():
            return fallback.resolve()

    fail(f"file not found: {raw_path}")


def parse_segments(lines: list[str]) -> tuple[list[tuple[int, int]], list[dict[str, object]]]:
    style_blocks: list[tuple[int, int]] = []
    segments: list[dict[str, object]] = []
    inside_style = False
    style_block_id = -1
    current: dict[str, object] | None = None

    for idx, line in enumerate(lines):
        if STYLE_OPEN_RE.search(line):
            inside_style = True
            style_block_id += 1
            style_blocks.append((idx, -1))

        start_match = START_RE.match(line)
        if start_match:
            if current is not None:
                fail("nested variant markers are not supported")
            current = {
                "variant": start_match.group(1).upper(),
                "start_marker": idx,
                "content_start": idx + 1,
                "inside_style": inside_style,
                "style_block_id": style_block_id if inside_style else None,
            }
            continue

        end_match = END_RE.match(line)
        if end_match:
            if current is None:
                fail(f"unexpected closing marker for {end_match.group(1)}")
            if current["variant"] != end_match.group(1).upper():
                fail(
                    f"marker mismatch: expected {current['variant']} but found {end_match.group(1).upper()}"
                )
            current["end_marker"] = idx
            current["content_end"] = idx
            segments.append(current)
            current = None
            continue

        if STYLE_CLOSE_RE.search(line):
            if style_block_id < 0:
                fail("found </style> before <style>")
            start_idx, _ = style_blocks[style_block_id]
            style_blocks[style_block_id] = (start_idx, idx)
            inside_style = False

    if current is not None:
        fail(f"unterminated variant marker for {current['variant']}")

    unresolved = [block for block in style_blocks if block[1] == -1]
    if unresolved:
        fail("unterminated <style> block")

    return style_blocks, segments


def build_style_output(lines, style_blocks, segments, variant):
    outputs = []

    full_style_segments = [
        segment
        for segment in segments
        if segment["variant"] == variant
        and "<style" in "".join(lines[segment["content_start"]:segment["content_end"]])
    ]
    for segment in full_style_segments:
        content = "".join(lines[segment["content_start"]:segment["content_end"]]).strip()
        if content:
            outputs.append((int(segment["start_marker"]), content))

    style_segment_groups = {}
    for segment in segments:
        if segment["variant"] != variant:
            continue
        if not segment["inside_style"]:
            continue
        content = "".join(lines[segment["content_start"]:segment["content_end"]])
        if "<style" in content:
            continue
        style_segment_groups.setdefault(int(segment["style_block_id"]), []).append(segment)

    block_segments = {}
    for segment in segments:
        if segment["inside_style"] and segment["style_block_id"] is not None:
            block_segments.setdefault(int(segment["style_block_id"]), []).append(segment)

    for block_id in style_segment_groups:
        start_idx, end_idx = style_blocks[block_id]
        all_block_segments = block_segments.get(block_id, [])
        marker_lines = {int(segment["start_marker"]) for segment in all_block_segments} | {
            int(segment["end_marker"]) for segment in all_block_segments
        }
        occupied_lines = {}
        for segment in all_block_segments:
            for line_idx in range(int(segment["content_start"]), int(segment["content_end"])):
                occupied_lines[line_idx] = str(segment["variant"])

        rendered = []
        for line_idx in range(start_idx, end_idx + 1):
            if line_idx in marker_lines:
                continue
            owner = occupied_lines.get(line_idx)
            if owner is not None and owner != variant:
                continue
            rendered.append(lines[line_idx])

        content = "".join(rendered).strip()
        if content:
            outputs.append((start_idx, content))

    outputs.sort(key=lambda item: item[0])
    return outputs


def build_markup_output(lines, segments, variant):
    outputs = []
    for segment in segments:
        if segment["variant"] != variant:
            continue
        content = "".join(lines[segment["content_start"]:segment["content_end"]])
        stripped = content.strip()
        if not stripped:
            continue
        if STYLE_OPEN_RE.match(stripped.splitlines()[0]):
            continue
        if segment["inside_style"]:
            continue
        outputs.append((int(segment["start_marker"]), stripped))

    outputs.sort(key=lambda item: item[0])
    return outputs


def main():
    if len(sys.argv) != 3:
        fail("expected a file path and a variant name")

    file_path = resolve_path(sys.argv[1])
    variant = sys.argv[2].strip().upper()
    if not variant:
        fail("variant name cannot be empty")

    lines = file_path.read_text().splitlines(keepends=True)
    style_blocks, segments = parse_segments(lines)

    if not any(segment["variant"] == variant for segment in segments):
        fail(f"variant not found: {variant}")

    style_outputs = [content for _, content in build_style_output(lines, style_blocks, segments, variant)]
    markup_outputs = [content for _, content in build_markup_output(lines, segments, variant)]

    parts = [part for part in style_outputs + markup_outputs if part.strip()]
    if not parts:
        fail(f"no extractable content found for variant: {variant}")

    sys.stdout.write("\n\n".join(parts).rstrip() + "\n")


if __name__ == "__main__":
    main()

#!/usr/bin/env python3
"""
get_city_tokens.py — Extract color tokens (and optionally texture CSS) for a city.

Usage:
  python3 get_city_tokens.py "京都"           # color tokens (shell eval-friendly)
  python3 get_city_tokens.py "Kyoto"          # case-insensitive, Chinese or English
  python3 get_city_tokens.py "京都" --texture  # print only the CSS texture block

Color output (one token per line, for shell eval):
  CITY_BG=#f7f0e6
  CITY_SURFACE=#ede4d6
  CITY_INK=#2a1f14
  CITY_MUTED=#7a6655
  CITY_ACCENT=#8b4513

Exit 0 on success, 1 if city not found.
"""

import sys
import re
from pathlib import Path

CITY_STYLES = Path(__file__).parent.parent.parent / "references" / "city-styles.md"

# Map CSS variable names → output key names
VAR_MAP = {
    "--bg":         "CITY_BG",
    "--bg-surface": "CITY_SURFACE",
    "--ink":        "CITY_INK",
    "--ink-muted":  "CITY_MUTED",
    "--accent":     "CITY_ACCENT",
}


def find_city_section(text: str, query: str) -> str | None:
    """Return the markdown text of the matching city section, or None."""
    query_lower = query.lower().strip()
    # Split on ## headings (city sections)
    sections = re.split(r"\n(?=## \d+\.)", text)
    for section in sections:
        first_line = section.split("\n")[0]
        if query_lower in first_line.lower():
            return section
    return None


def extract_colors(section: str) -> dict:
    """Parse the ### Colors block and return {VAR_MAP key: value}."""
    result = {}
    in_colors = False
    for line in section.splitlines():
        if re.match(r"^### Colors", line):
            in_colors = True
            continue
        if in_colors and re.match(r"^### ", line):
            break  # next subsection
        if in_colors:
            for css_var, out_key in VAR_MAP.items():
                # Match: --bg:    #xxx  or  --bg:  rgba(...)
                pattern = rf"^\s*{re.escape(css_var)}\s*:\s*([#\w(),.\s%]+)"
                m = re.match(pattern, line)
                if m:
                    value = m.group(1).split("/*")[0].strip().rstrip(",")
                    result[out_key] = value
    return result


def extract_texture(section: str) -> str:
    """Return the CSS inside the ### Texture code block, or empty string."""
    m = re.search(r"### Texture.*?```css\s*(.*?)```", section, re.S)
    return m.group(1).strip() if m else ""


def main():
    if len(sys.argv) < 2:
        print("Usage: get_city_tokens.py <city-name> [--texture]", file=sys.stderr)
        sys.exit(1)

    query = sys.argv[1]
    want_texture = "--texture" in sys.argv

    text = CITY_STYLES.read_text(encoding="utf-8")
    section = find_city_section(text, query)

    if not section:
        print(f"City not found: {query}", file=sys.stderr)
        sys.exit(1)

    if want_texture:
        css = extract_texture(section)
        if css:
            print(css)
        else:
            print(f"No texture block found for '{query}'", file=sys.stderr)
            sys.exit(1)
        return

    colors = extract_colors(section)

    missing = [k for k in VAR_MAP.values() if k not in colors]
    if missing:
        print(f"Warning: could not parse {missing} for '{query}'", file=sys.stderr)

    for key in VAR_MAP.values():
        if key in colors:
            print(f"{key}={colors[key]}")


if __name__ == "__main__":
    main()

"""
One-shot HTTP server for citycraft localhost bridge.

Serves options-preview.html at GET /
Receives the user's selection via POST /submit → writes /tmp/citycraft_selection.json → shuts down

Usage:
  python3 receiver.py [port] [html_path] [output_path]

Defaults:
  port        17432
  html_path   ./options-preview.html
  output_path /tmp/citycraft_selection.json
"""

import sys
import threading
from http.server import ThreadingHTTPServer, BaseHTTPRequestHandler
from pathlib import Path

PORT        = int(sys.argv[1])  if len(sys.argv) > 1 else 17432
HTML_PATH   = Path(sys.argv[2]) if len(sys.argv) > 2 else Path("options-preview.html")
OUTPUT_PATH = Path(sys.argv[3]) if len(sys.argv) > 3 else Path("/tmp/citycraft_selection.json")


class Handler(BaseHTTPRequestHandler):

    def _cors(self):
        self.send_header("Access-Control-Allow-Origin", "*")
        self.send_header("Access-Control-Allow-Methods", "GET,POST,OPTIONS")
        self.send_header("Access-Control-Allow-Headers", "Content-Type")

    def do_OPTIONS(self):
        self.send_response(204)
        self._cors()
        self.end_headers()

    def do_GET(self):
        if self.path != "/":
            self.send_response(404)
            self._cors()
            self.end_headers()
            return
        body = HTML_PATH.read_bytes()
        self.send_response(200)
        self._cors()
        self.send_header("Content-Type", "text/html; charset=utf-8")
        self.send_header("Content-Length", str(len(body)))
        self.end_headers()
        self.wfile.write(body)

    def do_POST(self):
        if self.path != "/submit":
            self.send_response(404)
            self._cors()
            self.end_headers()
            return
        length = int(self.headers.get("Content-Length", "0"))
        body = self.rfile.read(length)
        OUTPUT_PATH.write_bytes(body)
        self.send_response(200)
        self._cors()
        self.send_header("Content-Type", "application/json; charset=utf-8")
        self.end_headers()
        self.wfile.write(b'{"ok":true}')
        threading.Thread(target=self.server.shutdown, daemon=True).start()

    def log_message(self, format, *args):
        pass


if __name__ == "__main__":
    server = ThreadingHTTPServer(("127.0.0.1", PORT), Handler)
    server.serve_forever()

<#
.SYNOPSIS
    Windows PowerShell preview launcher for citycraft.

.DESCRIPTION
    Substitutes __KEY__ placeholders in the template, serves the filled HTML
    on localhost, opens the default browser, waits for POST /submit, and
    prints the result JSON to stdout.

    Requires: PowerShell 5.1+ (Windows built-in) or PowerShell 7+.
    No external dependencies — uses System.Net.HttpListener from .NET.

.PARAMETER Template
    Path to the HTML template file.

.PARAMETER Output
    Path to write the filled HTML.

.PARAMETER Port
    HTTP port to listen on (default: 17432).

.PARAMETER Result
    Path to write the submitted JSON (default: %TEMP%\citycraft_result.json).

.PARAMETER Timeout
    Seconds to wait for submission (default: 300).

.PARAMETER Sub
    One or more KEY=VALUE substitution pairs. Replaces __KEY__ in the template.
    Repeat the flag for multiple pairs:  -Sub "K1=V1" -Sub "K2=V2"

.EXAMPLE
    .\run_preview.ps1 `
        -Template "$env:USERPROFILE\.agents\skills\citycraft\assets\style-preview-template.html" `
        -Output   .\style-preview.html `
        -Port     17433 `
        -Timeout  300 `
        -Sub "PRODUCT_NAME=My Product" `
        -Sub "PRODUCT_HEADLINE=Build faster" `
        -Sub "RECEIVER_PORT=17433"
#>
param(
    [Parameter(Mandatory)][string]   $Template,
    [Parameter(Mandatory)][string]   $Output,
    [int]      $Port    = 17432,
    [string]   $Result  = (Join-Path $env:TEMP "citycraft_result.json"),
    [int]      $Timeout = 300,
    [string[]] $Sub     = @()
)

Set-StrictMode -Version Latest
$ErrorActionPreference = "Stop"

# ── 1. Template substitution ──────────────────────────────────────────────────
$templateFull = (Resolve-Path $Template).Path
$content = [System.IO.File]::ReadAllText($templateFull, [System.Text.Encoding]::UTF8)

foreach ($pair in $Sub) {
    $idx = $pair.IndexOf("=")
    if ($idx -lt 1) { continue }
    $key   = "__$($pair.Substring(0, $idx).Trim())__"
    $value = $pair.Substring($idx + 1)
    $content = $content.Replace($key, $value)
}

$outputFull = Join-Path (Get-Location) $Output
[System.IO.File]::WriteAllText($outputFull, $content, [System.Text.Encoding]::UTF8)

# ── 2. Start HTTP listener ────────────────────────────────────────────────────
$listener = [System.Net.HttpListener]::new()
$listener.Prefixes.Add("http://localhost:$Port/")
$listener.Start()

# ── 3. Open browser ───────────────────────────────────────────────────────────
Start-Process "http://localhost:$Port"

# ── 4. Request loop ───────────────────────────────────────────────────────────
$startTime  = [DateTime]::UtcNow
$submitted  = $false
$htmlBytes  = $null   # lazy-load on first GET

try {
    while ($listener.IsListening) {
        $elapsed = ([DateTime]::UtcNow - $startTime).TotalSeconds
        if ($elapsed -ge $Timeout) { break }

        # Non-blocking wait: up to 1 s per iteration
        $async = $listener.BeginGetContext($null, $null)
        if (-not $async.AsyncWaitHandle.WaitOne(1000)) { continue }

        $ctx  = $listener.EndGetContext($async)
        $req  = $ctx.Request
        $resp = $ctx.Response

        $resp.Headers.Add("Access-Control-Allow-Origin",  "*")
        $resp.Headers.Add("Access-Control-Allow-Methods", "GET,POST,OPTIONS")
        $resp.Headers.Add("Access-Control-Allow-Headers", "Content-Type")

        $route = "$($req.HttpMethod) $($req.Url.LocalPath)"

        switch ($route) {
            "OPTIONS /" {
                $resp.StatusCode = 204
            }
            "GET /" {
                if ($null -eq $htmlBytes) {
                    $htmlBytes = [System.IO.File]::ReadAllBytes($outputFull)
                }
                $resp.ContentType     = "text/html; charset=utf-8"
                $resp.ContentLength64 = $htmlBytes.Length
                $resp.OutputStream.Write($htmlBytes, 0, $htmlBytes.Length)
            }
            "POST /submit" {
                $reader = [System.IO.StreamReader]::new(
                    $req.InputStream, [System.Text.Encoding]::UTF8)
                $body = $reader.ReadToEnd()
                [System.IO.File]::WriteAllText(
                    $Result, $body, [System.Text.Encoding]::UTF8)
                $ok = [System.Text.Encoding]::UTF8.GetBytes('{"ok":true}')
                $resp.ContentType     = "application/json; charset=utf-8"
                $resp.ContentLength64 = $ok.Length
                $resp.OutputStream.Write($ok, 0, $ok.Length)
                $submitted = $true
            }
            default {
                $resp.StatusCode = 404
            }
        }

        $resp.Close()
        if ($submitted) { break }
    }
} finally {
    $listener.Stop()
}

# ── 5. Output ─────────────────────────────────────────────────────────────────
if ($submitted) {
    $data = [System.IO.File]::ReadAllText($Result, [System.Text.Encoding]::UTF8)
    Remove-Item $Result -ErrorAction SilentlyContinue
    Write-Output $data
} else {
    Write-Error "No submission in ${Timeout}s. Ask the user to type their choice manually."
    exit 1
}

#!/usr/bin/env python3
"""
run_preview.py — Cross-platform preview launcher for citycraft.

Replaces the sed + receiver.py + shell-polling combo with a single script
that works on macOS, Linux, and Windows (Python 3.6+, stdlib only).

What it does:
  1. Reads the template and substitutes __KEY__ placeholders.
  2. Writes the filled HTML to --output.
  3. Starts a one-shot HTTP server on --port (GET / → HTML, POST /submit → result).
  4. Opens the browser via webbrowser.open() (cross-platform).
  5. Blocks until POST /submit arrives or --timeout seconds elapse.
  6. Prints the submitted JSON to stdout and exits 0.
     On timeout: prints a message to stderr and exits 1.

Usage:
    python3 run_preview.py \\
        --template /path/to/template.html \\
        --output   ./preview.html \\
        --port     17433 \\
        --timeout  300 \\
        PRODUCT_NAME="My Product" \\
        PRODUCT_HEADLINE="Build faster" \\
        RECEIVER_PORT=17433

Each positional KEY=VALUE arg replaces __KEY__ in the template.
"""

import argparse
import os
import sys
import tempfile
import threading
import time
import webbrowser
from http.server import BaseHTTPRequestHandler, ThreadingHTTPServer
from pathlib import Path


def parse_args():
    p = argparse.ArgumentParser(description="citycraft preview launcher")
    p.add_argument("--template", required=True, help="Path to HTML template")
    p.add_argument("--output",   required=True, help="Path to write filled HTML")
    p.add_argument("--port",     type=int, default=17432, help="HTTP port (default 17432)")
    p.add_argument("--result",   default=None,
                   help="Path to write submitted JSON (default: OS temp dir)")
    p.add_argument("--timeout",  type=int, default=300,
                   help="Seconds to wait for submission (default 300)")
    p.add_argument("subs", nargs="*",
                   help="Substitution pairs: KEY=VALUE  (replaces __KEY__ in template)")
    return p.parse_args()


def substitute(template_path, output_path, subs):
    text = Path(template_path).read_text(encoding="utf-8")
    for pair in subs:
        if "=" not in pair:
            continue
        key, _, value = pair.partition("=")
        text = text.replace("__{key}__".format(key=key.strip()), value)
    Path(output_path).write_text(text, encoding="utf-8")


def make_handler(html_path, result_path):
    """Return a BaseHTTPRequestHandler subclass bound to html_path / result_path."""

    class _Handler(BaseHTTPRequestHandler):

        def _cors(self):
            self.send_header("Access-Control-Allow-Origin", "*")
            self.send_header("Access-Control-Allow-Methods", "GET,POST,OPTIONS")
            self.send_header("Access-Control-Allow-Headers", "Content-Type")

        def do_OPTIONS(self):
            self.send_response(204)
            self._cors()
            self.end_headers()

        def do_GET(self):
            if self.path != "/":
                self.send_response(404)
                self._cors()
                self.end_headers()
                return
            body = Path(html_path).read_bytes()
            self.send_response(200)
            self._cors()
            self.send_header("Content-Type", "text/html; charset=utf-8")
            self.send_header("Content-Length", str(len(body)))
            self.end_headers()
            self.wfile.write(body)

        def do_POST(self):
            if self.path != "/submit":
                self.send_response(404)
                self._cors()
                self.end_headers()
                return
            length = int(self.headers.get("Content-Length", "0"))
            body = self.rfile.read(length)
            Path(result_path).write_bytes(body)
            self.send_response(200)
            self._cors()
            self.send_header("Content-Type", "application/json; charset=utf-8")
            self.end_headers()
            self.wfile.write(b'{"ok":true}')
            threading.Thread(target=self.server.shutdown, daemon=True).start()

        def log_message(self, *_):
            pass  # suppress request logs

    return _Handler


def main():
    args = parse_args()

    result_path = Path(
        args.result if args.result
        else os.path.join(tempfile.gettempdir(), "citycraft_result.json")
    )

    # Remove stale result from a previous run
    try:
        result_path.unlink()
    except OSError:
        pass

    # 1. Fill template
    substitute(args.template, args.output, args.subs)

    # 2. Start HTTP server
    html_abs = str(Path(args.output).resolve())
    Handler = make_handler(html_abs, str(result_path))
    server = ThreadingHTTPServer(("127.0.0.1", args.port), Handler)
    threading.Thread(target=server.serve_forever, daemon=True).start()

    # 3. Open browser (cross-platform: macOS / Linux / Windows)
    webbrowser.open("http://localhost:{port}".format(port=args.port))

    # 4. Poll for result
    for _ in range(args.timeout):
        if result_path.exists():
            data = result_path.read_text(encoding="utf-8")
            try:
                result_path.unlink()
            except OSError:
                pass
            server.shutdown()
            print(data)
            return
        time.sleep(1)

    # Timeout
    server.shutdown()
    sys.stderr.write(
        "No submission in {t}s. Ask the user to type their choice manually.\n"
        .format(t=args.timeout)
    )
    sys.exit(1)


if __name__ == "__main__":
    main()

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conversion Sections</title>
<style>
  /* ==========================================================================
     DESIGN SYSTEM & VARIABLES
     ========================================================================== */
  @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:ital,wght@0,400;0,500;1,400&display=swap');

  :root {
    /* Color Palette */
    --bg: #09090b; /* Very dark zinc */
    --bg-surface: #18181b; /* Slightly lighter zinc */
    --bg-surface-elevated: #27272a;
    
    --ink: #ffffff;
    --ink-muted: #a1a1aa;
    
    --accent: #d9f99d; /* Lime/Neon Green */
    --accent-hover: #bef264;
    --accent-soft: rgba(217, 249, 157, 0.1);
    
    --border: #3f3f46;

    /* Typography */
    --font-display: 'Space Grotesk', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;

    /* Spacing & Layout */
    --container: 1280px;
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
  }

  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body {
    background-color: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
  }

  section {
    padding: 8rem 2rem;
    position: relative;
  }

  .container {
    max-width: var(--container);
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }

  /* Typography Utilities */
  .text-display {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
  }

  .text-accent { color: var(--accent); }
  .text-muted { color: var(--ink-muted); }

  /* Base Buttons */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    border-radius: 100px;
    font-family: var(--font-display);
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    border: none;
    font-size: 1.125rem;
  }

  .btn-primary {
    background: var(--accent);
    color: var(--bg);
  }

  .btn-primary:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(217, 249, 157, 0.4);
  }

  .btn-outline {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--border);
  }

  .btn-outline:hover {
    border-color: var(--ink);
    background: var(--bg-surface-elevated);
  }

  <!-- @@VARIANT:PRICING -->
  /* ==========================================================================
     SECTION A: PRICING TIERS
     ========================================================================== */
  .pricing-header {
    text-align: center;
    margin-bottom: 4rem;
  }

  .pricing-header h2 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    margin-bottom: 1.5rem;
  }

  /* Toggle UI */
  .billing-toggle-wrapper {
    display: inline-flex;
    align-items: center;
    background: var(--bg-surface);
    padding: 0.5rem;
    border-radius: 100px;
    border: 1px solid var(--border);
    position: relative;
  }

  .billing-toggle-btn {
    padding: 0.75rem 1.5rem;
    border-radius: 100px;
    border: none;
    background: transparent;
    color: var(--ink-muted);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1rem;
    cursor: pointer;
    transition: color 0.3s;
    position: relative;
    z-index: 2;
  }

  .billing-toggle-btn.active {
    color: var(--bg);
  }

  .toggle-indicator {
    position: absolute;
    top: 0.5rem;
    bottom: 0.5rem;
    left: 0.5rem;
    width: calc(50% - 0.5rem);
    background: var(--accent);
    border-radius: 100px;
    transition: transform 0.4s cubic-bezier(0.85, 0, 0.15, 1);
    z-index: 1;
  }

  [data-billing="annual"] .toggle-indicator {
    transform: translateX(100%);
  }

  /* Pricing Grid */
  .pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
  }

  @media (min-width: 992px) {
    .pricing-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
    }
  }

  .pricing-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 3rem 2rem;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.3s ease;
  }

  .pricing-card:not(.pro) {
    z-index: 1;
  }

  @media (min-width: 992px) {
    .pricing-card:first-child { border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; }
    .pricing-card:last-child { border-left: none; border-top-left-radius: 0; border-bottom-left-radius: 0; }
  }

  /* Pro Tier Overlay */
  .pricing-card.pro {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
    transform: translateY(-20px) scale(1.02);
    z-index: 10;
    box-shadow: 0 30px 60px -12px rgba(217, 249, 157, 0.15);
    border-radius: var(--radius-xl);
    padding: 4rem 2.5rem;
    overflow: hidden;
  }

  .pricing-card.pro .text-muted { color: rgba(9, 9, 11, 0.6); }
  .pricing-card.pro .btn { background: var(--bg); color: var(--ink); }
  .pricing-card.pro .btn:hover { background: var(--bg-surface-elevated); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); }
  .pricing-card.pro .feature-icon { stroke: var(--bg); background: rgba(9, 9, 11, 0.1); }

  /* Ribbon */
  .ribbon-wrapper {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 120px;
    height: 120px;
    overflow: hidden;
  }
  .ribbon {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: center;
    transform: rotate(45deg);
    position: relative;
    padding: 8px 0;
    left: -5px;
    top: 25px;
    width: 170px;
    background-color: var(--bg);
    color: var(--accent);
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  }

  /* Card Content */
  .plan-name {
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-variant: small-caps;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
    font-weight: 700;
  }

  .price-wrapper {
    display: flex;
    align-items: baseline;
    margin-bottom: 0.5rem;
  }

  .price-currency {
    font-size: 1.5rem;
    font-weight: 500;
    margin-right: 0.25rem;
    transform: translateY(-1.5rem);
  }

  .price-amount {
    font-family: var(--font-display);
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
  }

  .price-period {
    margin-left: 0.5rem;
    font-size: 1rem;
  }

  .plan-desc {
    font-size: 1rem;
    margin-bottom: 2.5rem;
    min-height: 3rem;
  }

  .feature-list {
    list-style: none;
    margin-bottom: 3rem;
    flex-grow: 1;
  }

  .feature-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1rem;
    font-size: 1rem;
  }

  .feature-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    stroke: var(--accent);
    padding: 4px;
  }

  .pricing-card .btn { width: 100%; }

  <!-- @@/VARIANT:PRICING -->

  <!-- @@VARIANT:TESTIMONIALS -->
  /* ==========================================================================
     SECTION B: QUOTE WALL / TESTIMONIALS
     ========================================================================== */
  .testimonials-header {
    margin-bottom: 4rem;
  }

  .testimonials-header h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    max-width: 600px;
  }

  .bento-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    grid-auto-flow: dense;
  }

  @media (min-width: 768px) {
    .bento-grid { grid-template-columns: repeat(2, 1fr); }
  }

  @media (min-width: 1024px) {
    .bento-grid { grid-template-columns: repeat(4, 1fr); }
  }

  .testimonial-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: border-color 0.3s;
    position: relative;
    overflow: hidden;
  }

  .testimonial-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(800px circle at var(--mouse-x, 0) var(--mouse-y, 0), rgba(217, 249, 157, 0.06), transparent 40%);
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
    z-index: 0;
  }

  .testimonial-card:hover::before { opacity: 1; }
  .testimonial-card:hover { border-color: rgba(217, 249, 157, 0.3); }

  .testimonial-content { position: relative; z-index: 1; }

  /* Asymmetric Layout Rules */
  @media (min-width: 1024px) {
    .tc-1 { grid-column: span 2; }
    .tc-2 { grid-row: span 2; display: flex; flex-direction: column; }
    .tc-3 { grid-column: span 1; }
    .tc-4 { grid-column: span 1; }
    .tc-featured { grid-column: span 2; }
  }

  .quote-mark {
    position: absolute;
    top: -1rem;
    left: -1rem;
    font-family: var(--font-display);
    font-size: 6rem;
    line-height: 1;
    color: var(--bg-surface-elevated);
    z-index: 0;
    opacity: 0.5;
  }

  .pull-quote {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1.1rem, 1.5vw, 1.4rem);
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 2rem;
    position: relative;
    z-index: 1;
  }

  .tc-2 .pull-quote { font-size: clamp(1.3rem, 2vw, 1.8rem); margin-top: auto; margin-bottom: auto; }

  .testimonial-card.featured {
    background: var(--accent);
    color: var(--bg);
    border: none;
  }

  .testimonial-card.featured .quote-mark { color: rgba(9, 9, 11, 0.1); }
  .testimonial-card.featured .pull-quote { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 700; letter-spacing: -0.02em; }
  .testimonial-card.featured .text-muted { color: rgba(9, 9, 11, 0.6); }

  .attribution {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 1;
  }

  .avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg-surface-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--ink-muted);
  }

  .testimonial-card.featured .avatar { background: rgba(9, 9, 11, 0.1); color: var(--bg); }

  .author-meta { display: flex; flex-direction: column; }
  .author-name { font-weight: 700; font-size: 1rem; }
  .author-company { font-size: 0.875rem; }

  <!-- @@/VARIANT:TESTIMONIALS -->

  <!-- @@VARIANT:CTA -->
  /* ==========================================================================
     SECTION C: POWER CTA
     ========================================================================== */
  .section-cta {
    padding: 10rem 2rem 8rem;
    clip-path: polygon(0 8vw, 100% 0, 100% 100%, 0 100%);
    background: var(--bg-surface);
    margin-top: -8vw; /* Pull up to overlap */
    overflow: hidden;
  }

  /* Radial Glow */
  .cta-glow {
    position: absolute;
    top: 50%;
    left: 20%;
    width: 80vw;
    height: 80vw;
    background: radial-gradient(circle, rgba(217, 249, 157, 0.15) 0%, rgba(217, 249, 157, 0) 70%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
  }

  .cta-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    align-items: center;
  }

  @media (min-width: 992px) {
    .cta-container {
      grid-template-columns: 1fr 1fr;
      gap: 6rem;
    }
  }

  .cta-text-wrap { position: relative; }

  .cta-headline {
    font-size: clamp(3rem, 6vw, 5.5rem);
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 2;
  }

  .cta-headline span {
    display: block;
  }

  .cta-headline .hl-accent {
    color: var(--accent);
    font-style: italic;
    font-weight: 700;
  }

  .cta-subtext {
    font-size: clamp(1.1rem, 2vw, 1.25rem);
    color: var(--ink-muted);
    max-width: 480px;
    margin-bottom: 0;
    position: relative;
    z-index: 2;
  }

  /* SVG Abstract Arrow */
  .cta-arrow {
    position: absolute;
    right: -100px;
    bottom: -50px;
    width: 200px;
    height: 200px;
    stroke: var(--accent);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    opacity: 0.3;
    pointer-events: none;
    display: none;
  }

  @media (min-width: 992px) {
    .cta-arrow { display: block; }
  }

  .cta-actions-wrap {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: flex-start;
    position: relative;
    z-index: 2;
  }

  .cta-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
  }

  @media (min-width: 576px) {
    .cta-actions {
      flex-direction: row;
      align-items: center;
      width: auto;
    }
  }

  .btn-magnetic {
    position: relative;
    display: inline-flex;
    padding: 1.25rem 3rem;
    font-size: 1.25rem;
  }

  .btn-ghost {
    color: var(--ink-muted);
    text-decoration: none;
    font-weight: 500;
    position: relative;
    transition: color 0.3s;
  }

  .btn-ghost::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--ink-muted);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
  }

  .btn-ghost:hover { color: var(--ink); }
  .btn-ghost:hover::after {
    transform: scaleX(1);
    transform-origin: left;
    background: var(--ink);
  }

  <!-- @@/VARIANT:CTA -->
</style>
</head>
<body>

<!-- @@VARIANT:PRICING -->
<!-- GSAP: target class .js-pricing-card stagger -->
<!-- FEATURE: Interactive Pricing Tier logic switching Monthly/Annual values -->
<section class="section-pricing" id="pricing">
  <div class="container">
    <div class="pricing-header">
      <h2 class="text-display">Transparent pricing.<br><span class="text-accent">Zero surprises.</span></h2>
      
      <div class="billing-toggle-wrapper js-billing-toggle" data-billing="monthly">
        <div class="toggle-indicator"></div>
        <button class="billing-toggle-btn active" data-target="monthly">Monthly</button>
        <button class="billing-toggle-btn" data-target="annual">Annually (Save 20%)</button>
      </div>
    </div>

    <div class="pricing-grid">
      <!-- Tier 1 -->
      <div class="pricing-card js-pricing-card">
        <div class="plan-name text-muted">Hobbyist</div>
        <div class="price-wrapper">
          <span class="price-currency">$</span>
          <span class="price-amount" data-monthly="0" data-annual="0">0</span>
          <span class="price-period text-muted">/mo</span>
        </div>
        <p class="plan-desc text-muted">Perfect for individuals experimenting with the platform.</p>
        
        <ul class="feature-list">
          <li>
            <svg class="feature-icon" viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
            <span>Up to 3 active projects</span>
          </li>
          <li>
            <svg class="feature-icon" viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
            <span>Community support</span>
          </li>
          <li>
            <svg class="feature-icon" viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
            <span>Basic analytics export</span>
          </li>
        </ul>
        <button class="btn btn-outline">Start for free</button>
      </div>

      <!-- Tier 2 (Pro) -->
      <div class="pricing-card pro js-pricing-card">
        <div class="ribbon-wrapper"><div class="ribbon">Popular</div></div>
        <div class="plan-name text-muted">Professional</div>
        <div class="price-wrapper">
          <span class="price-currency">$</span>
          <span class="price-amount" data-monthly="49" data-annual="39">49</span>
          <span class="price-period text-muted">/mo</span>
        </div>
        <p class="plan-desc text-muted">Everything you need to scale your production workflow.</p>
        
        <ul class="feature-list">
          <li>
            <svg class="feature-icon" viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
            <span>Unlimited active projects</span>
          </li>
          <li>
            <svg class="feature-icon" viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
            <span>Priority 24/7 email support</span>
          </li>
          <li>
            <svg class="feature-icon" viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
            <span>Advanced custom API access</span>
          </li>
          <li>
            <svg class="feature-icon" viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
            <span>Custom domain mapping</span>
          </li>
        </ul>
        <button class="btn btn-primary">Upgrade to Pro</button>
      </div>

      <!-- Tier 3 -->
      <div class="pricing-card js-pricing-card">
        <div class="plan-name text-muted">Scale</div>
        <div class="price-wrapper">
          <span class="price-currency">$</span>
          <span class="price-amount" data-monthly="199" data-annual="159">199</span>
          <span class="price-period text-muted">/mo</span>
        </div>
        <p class="plan-desc text-muted">Dedicated infrastructure for massive throughput.</p>
        
        <ul class="feature-list">
          <li>
            <svg class="feature-icon" viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
            <span>Dedicated account manager</span>
          </li>
          <li>
            <svg class="feature-icon" viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
            <span>SAML SSO integration</span>
          </li>
          <li>
            <svg class="feature-icon" viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
            <span>99.99% Uptime SLA</span>
          </li>
        </ul>
        <button class="btn btn-outline">Contact Sales</button>
      </div>
    </div>
  </div>
</section>
<!-- USAGE NOTE: Toggle logic is wired in JS below. Uses data-attributes to swap values. -->


<!-- @@/VARIANT:PRICING -->

<!-- @@VARIANT:TESTIMONIALS -->
<!-- GSAP: target class .js-testimonial with grid stagger and autoAlpha -->
<!-- FEATURE: Hover tracking glow effect on cards (CSS variable mapping via JS) -->
<section class="section-testimonials">
  <div class="container">
    <div class="testimonials-header">
      <h2 class="text-display">Don't just take our word for it.</h2>
    </div>

    <div class="bento-grid" id="testimonial-grid">
      <!-- Card 1 -->
      <div class="testimonial-card tc-1 js-testimonial">
        <div class="quote-mark">"</div>
        <div class="testimonial-content">
          <p class="pull-quote">Since switching over, our deployment times have dropped by 40%. The CLI is just brutally fast and stays out of my way.</p>
          <div class="attribution">
            <div class="avatar">SJ</div>
            <div class="author-meta">
              <span class="author-name">Sarah Jenkins</span>
              <span class="author-company text-muted">Lead Engineer, Vercel</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Card 2 (Tall) -->
      <div class="testimonial-card tc-2 js-testimonial">
        <div class="quote-mark">"</div>
        <div class="testimonial-content">
          <p class="pull-quote">It genuinely feels like having an extra senior developer on the team reviewing architecture before we ship.</p>
          <div class="attribution">
            <div class="avatar">MK</div>
            <div class="author-meta">
              <span class="author-name">Marcus King</span>
              <span class="author-company text-muted">CTO, Nexus</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Card 3 -->
      <div class="testimonial-card tc-3 js-testimonial">
        <div class="quote-mark">"</div>
        <div class="testimonial-content">
          <p class="pull-quote">The cleanest API documentation I have seen in a decade. Integrated it in an afternoon.</p>
          <div class="attribution">
            <div class="avatar">AL</div>
            <div class="author-meta">
              <span class="author-name">Aisha Lin</span>
              <span class="author-company text-muted">Founder, Dataflow</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Card 4 -->
      <div class="testimonial-card tc-4 js-testimonial">
        <div class="quote-mark">"</div>
        <div class="testimonial-content">
          <p class="pull-quote">No more fighting with config files. It just works out of the box.</p>
          <div class="attribution">
            <div class="avatar">DR</div>
            <div class="author-meta">
              <span class="author-name">David Ross</span>
              <span class="author-company text-muted">DevOps, Stripe</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Card 5 (Featured) -->
      <div class="testimonial-card featured tc-featured js-testimonial">
        <div class="quote-mark">"</div>
        <div class="testimonial-content">
          <p class="pull-quote">We calculated the ROI after month one and immediately upgraded to Enterprise. The reduction in server costs alone pays for the platform tenfold. An absolute no-brainer for scaleups.</p>
          <div class="attribution">
            <div class="avatar">EM</div>
            <div class="author-meta">
              <span class="author-name">Elena Martinez</span>
              <span class="author-company text-muted">VP of Engineering, Shopify</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- USAGE NOTE: Masonry effect achieved via CSS Grid spanning. JS adds dynamic radial hover glow. -->


<!-- @@/VARIANT:TESTIMONIALS -->

<!-- @@VARIANT:CTA -->
<!-- GSAP: target class .js-cta-section for clip-path reveal and internal text scrub -->
<!-- FEATURE: Magnetic button interaction and diagonal cut layout -->
<section class="section-cta js-cta-section">
  <div class="cta-glow"></div>
  <div class="container">
    <div class="cta-container">
      
      <div class="cta-text-wrap">
        <h2 class="text-display cta-headline">
          <span>Stop tweaking.</span>
          <span class="hl-accent">Start shipping.</span>
        </h2>
        <p class="cta-subtext">Join 10,000+ developers who have already ditched legacy infrastructure for the modern edge.</p>
        
        <!-- Abstract SVG Swoosh pointing to button -->
        <svg class="cta-arrow" viewBox="0 0 200 200">
          <path d="M 20,20 C 100,20 180,80 160,160" />
          <path d="M 120,160 L 160,160 L 160,120" />
        </svg>
      </div>

      <div class="cta-actions-wrap">
        <div class="cta-actions">
          <button class="btn btn-primary btn-magnetic js-magnetic">Deploy your first app</button>
          <a href="#docs" class="btn-ghost">or read the docs</a>
        </div>
      </div>

    </div>
  </div>
</section>
<!-- USAGE NOTE: The diagonal top edge overlaps the previous section. Make sure previous section has adequate bottom padding. -->


<!-- @@/VARIANT:CTA -->

<script>
  document.addEventListener('DOMContentLoaded', () => {
    
    // --- SECTION A: Pricing Toggle Logic ---
    const toggleWrapper = document.querySelector('.js-billing-toggle');
    const toggleBtns = document.querySelectorAll('.billing-toggle-btn');
    const priceAmounts = document.querySelectorAll('.price-amount');
    const pricePeriods = document.querySelectorAll('.price-period');

    if(toggleWrapper && toggleBtns.length) {
      toggleBtns.forEach(btn => {
        btn.addEventListener('click', () => {
          // Update active state
          toggleBtns.forEach(b => b.classList.remove('active'));
          btn.classList.add('active');
          
          const billingType = btn.getAttribute('data-target');
          toggleWrapper.setAttribute('data-billing', billingType);

          // Animate numbers
          priceAmounts.forEach(el => {
            const targetVal = el.getAttribute(`data-${billingType}`);
            // Simple fade out/in effect for number change
            el.style.opacity = 0;
            setTimeout(() => {
              el.textContent = targetVal;
              el.style.opacity = 1;
            }, 150);
          });
          
          // Update period text logic (optional, kept /mo for both per SaaS standard, but could change to /yr)
        });
      });
    }

    // --- SECTION B: Testimonial Hover Glow ---
    const cards = document.querySelectorAll('.js-testimonial:not(.featured)');
    
    cards.forEach(card => {
      card.addEventListener('mousemove', e => {
        const rect = card.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;
        card.style.setProperty('--mouse-x', `${x}px`);
        card.style.setProperty('--mouse-y', `${y}px`);
      });
    });

    // --- SECTION C: Magnetic Button ---
    const magneticBtns = document.querySelectorAll('.js-magnetic');
    
    magneticBtns.forEach(btn => {
      btn.addEventListener('mousemove', (e) => {
        const rect = btn.getBoundingClientRect();
        const h = rect.width / 2;
        const v = rect.height / 2;
        
        // Calculate distance from center
        const x = e.clientX - rect.left - h;
        const y = e.clientY - rect.top - v;
        
        // Apply transform (move max 15px)
        const moveX = (x / h) * 15;
        const moveY = (y / v) * 15;
        
        btn.style.transform = `translate(${moveX}px, ${moveY}px)`;
      });
      
      btn.addEventListener('mouseleave', () => {
        // Reset with a spring-like ease via CSS transition
        btn.style.transform = `translate(0px, 0px)`;
      });
    });

  });
</script>

<!-- @@VARIANT:FAQ_A -->
<!-- ================================================================= -->
<!-- FAQ VARIANT A: 编辑排版型 (Editorial — sticky anchor + accordion) -->
<!-- ================================================================= -->
<!-- Left col: massive "FAQ" as visual anchor. Right col: accordion list.
     GSAP: initLineReveal() on heading; section reveal with ScrollTrigger.
     accordion handled by inline JS (data-open toggle). -->
<style>
.faq-section { font-family: var(--font-body); color: var(--ink); box-sizing: border-box; }
.faq-section *, .faq-section *::before, .faq-section *::after { box-sizing: inherit; }

.variant-a { background-color: var(--bg); padding: 6rem 5vw; }
.v-a-container { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 4rem; }
@media (min-width: 900px) { .v-a-container { grid-template-columns: 4fr 6fr; gap: 8vw; } }
.v-a-title {
  font-family: var(--font-display);
  font-size: clamp(4rem, 10vw, 9rem);
  line-height: 0.9; font-weight: 400; margin: 0;
  letter-spacing: -0.02em; color: var(--ink);
  position: sticky; top: 6rem;
}
.v-a-right { display: flex; flex-direction: column; }
.v-a-item { border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
.v-a-item:last-child { border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
.v-a-trigger {
  width: 100%; background: transparent; border: none;
  padding: 2.5rem 0; display: flex; justify-content: space-between;
  align-items: center; cursor: pointer; color: var(--ink); text-align: left; gap: 2rem;
}
.v-a-trigger:hover .v-a-question { transform: translateX(10px); color: var(--accent); }
.v-a-question {
  font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 400;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), color 0.3s ease;
}
.v-a-icon { width: 24px; height: 24px; flex-shrink: 0; color: var(--ink); }
.v-a-icon line { stroke: currentColor; stroke-width: 1.5; transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), opacity 0.4s ease; transform-origin: center; }
.v-a-item[data-open="true"] .v-a-icon .vertical { transform: rotate(90deg); opacity: 0; }
.v-a-item[data-open="true"] .v-a-icon .horizontal { transform: rotate(180deg); }
.v-a-content-grid { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s cubic-bezier(0.16,1,0.3,1); }
.v-a-item[data-open="true"] .v-a-content-grid { grid-template-rows: 1fr; }
.v-a-content-inner { overflow: hidden; }
.v-a-answer { font-size: clamp(1rem,1.2vw,1.125rem); color: var(--ink-muted); line-height: 1.6; padding-bottom: 2.5rem; margin: 0; max-width: 85%; }
</style>

<!-- @@/VARIANT:FAQ_A -->

<!-- @@VARIANT:FAQ_A -->
<section class="faq-section variant-a">
  <div class="v-a-container">
    <div>
      <h2 class="v-a-title js-hero-title">FAQ</h2>
    </div>
    <div class="v-a-right">
      <div class="v-a-item js-faq-item" data-open="false">
        <button class="v-a-trigger" aria-expanded="false">
          <span class="v-a-question">How does pricing work?</span>
          <svg class="v-a-icon" viewBox="0 0 24 24" fill="none"><line class="horizontal" x1="4" y1="12" x2="20" y2="12"/><line class="vertical" x1="12" y1="4" x2="12" y2="20"/></svg>
        </button>
        <div class="v-a-content-grid"><div class="v-a-content-inner">
          <p class="v-a-answer">Replace with your pricing explanation. Mention seat-based, usage-based, or flat monthly billing as appropriate.</p>
        </div></div>
      </div>
      <div class="v-a-item js-faq-item" data-open="false">
        <button class="v-a-trigger" aria-expanded="false">
          <span class="v-a-question">Is there a free trial?</span>
          <svg class="v-a-icon" viewBox="0 0 24 24" fill="none"><line class="horizontal" x1="4" y1="12" x2="20" y2="12"/><line class="vertical" x1="12" y1="4" x2="12" y2="20"/></svg>
        </button>
        <div class="v-a-content-grid"><div class="v-a-content-inner">
          <p class="v-a-answer">Replace with trial details — duration, whether a credit card is required, what features are included.</p>
        </div></div>
      </div>
      <div class="v-a-item js-faq-item" data-open="false">
        <button class="v-a-trigger" aria-expanded="false">
          <span class="v-a-question">Can I cancel anytime?</span>
          <svg class="v-a-icon" viewBox="0 0 24 24" fill="none"><line class="horizontal" x1="4" y1="12" x2="20" y2="12"/><line class="vertical" x1="12" y1="4" x2="12" y2="20"/></svg>
        </button>
        <div class="v-a-content-grid"><div class="v-a-content-inner">
          <p class="v-a-answer">Replace with cancellation policy. Mention refund windows, data export options, and how long data is retained after cancellation.</p>
        </div></div>
      </div>
      <div class="v-a-item js-faq-item" data-open="false">
        <button class="v-a-trigger" aria-expanded="false">
          <span class="v-a-question">Is my data secure?</span>
          <svg class="v-a-icon" viewBox="0 0 24 24" fill="none"><line class="horizontal" x1="4" y1="12" x2="20" y2="12"/><line class="vertical" x1="12" y1="4" x2="12" y2="20"/></svg>
        </button>
        <div class="v-a-content-grid"><div class="v-a-content-inner">
          <p class="v-a-answer">Replace with security details — encryption standards, compliance certifications, and data residency options.</p>
        </div></div>
      </div>
      <div class="v-a-item js-faq-item" data-open="false">
        <button class="v-a-trigger" aria-expanded="false">
          <span class="v-a-question">Do you offer team or enterprise plans?</span>
          <svg class="v-a-icon" viewBox="0 0 24 24" fill="none"><line class="horizontal" x1="4" y1="12" x2="20" y2="12"/><line class="vertical" x1="12" y1="4" x2="12" y2="20"/></svg>
        </button>
        <div class="v-a-content-grid"><div class="v-a-content-inner">
          <p class="v-a-answer">Replace with team/enterprise plan details — volume discounts, SSO, admin controls, dedicated support, SLA guarantees.</p>
        </div></div>
      </div>
    </div>
  </div>
</section>

<!-- @@/VARIANT:FAQ_A -->

<!-- @@VARIANT:FAQ_B -->
<!-- ================================================================= -->
<!-- FAQ VARIANT B: 全宽焦点型 (Centered grid cards — expand in place) -->
<!-- ================================================================= -->
<!-- Full-width centered. 2-col card grid on desktop.
     Each card expands in place on click. Plus rotates to X on open.
     Bottom: "Still have questions?" CTA row. -->
<style>
.variant-b { background-color: var(--bg); padding: 6rem 5vw; }
.v-b-container { max-width: 1200px; margin: 0 auto; }
.v-b-header { text-align: center; margin-bottom: 5rem; }
.v-b-eyebrow { display: block; font-size: clamp(0.75rem,1vw,0.875rem); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); margin-bottom: 1rem; }
.v-b-title { font-family: var(--font-display); font-size: clamp(2.5rem,5vw,4.5rem); font-weight: 500; margin: 0; line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); }
.v-b-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 4rem; }
@media (min-width: 768px) { .v-b-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; } }
.v-b-card {
  background-color: var(--bg-surface);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, currentColor 8%, transparent);
  overflow: hidden;
  transition: border-color 0.3s ease;
}
.v-b-card:hover { border-color: color-mix(in srgb, currentColor 18%, transparent); }
.v-b-trigger {
  width: 100%; background: transparent; border: none;
  padding: 2rem; display: flex; justify-content: space-between;
  align-items: flex-start; cursor: pointer; color: var(--ink); text-align: left; gap: 1rem;
}
.v-b-question { font-size: clamp(1.125rem,1.5vw,1.25rem); font-weight: 500; line-height: 1.4; }
.v-b-icon-wrap {
  width: 32px; height: 32px; border-radius: 50%;
  background-color: color-mix(in srgb, var(--ink) 8%, transparent);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: var(--ink); transition: background-color 0.3s, color 0.3s;
}
.v-b-card[data-open="true"] .v-b-icon-wrap { background-color: var(--accent); color: var(--bg); }
.v-b-icon { width: 14px; height: 14px; transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1); }
.v-b-card[data-open="true"] .v-b-icon { transform: rotate(45deg); }
.v-b-content-grid { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s cubic-bezier(0.25,1,0.5,1); }
.v-b-card[data-open="true"] .v-b-content-grid { grid-template-rows: 1fr; }
.v-b-content-inner { overflow: hidden; }
.v-b-answer { font-size: clamp(0.95rem,1.1vw,1.05rem); color: var(--ink-muted); line-height: 1.6; padding: 0 2rem 2rem; margin: 0; }
.v-b-cta { text-align: center; padding-top: 4rem; border-top: 1px solid color-mix(in srgb, currentColor 8%, transparent); }
.v-b-cta-text { font-size: clamp(1.125rem,1.5vw,1.25rem); margin-bottom: 1.5rem; font-weight: 500; color: var(--ink); }
.v-b-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background-color: var(--accent); color: var(--bg);
  padding: 1rem 2.25rem; border-radius: 99px; text-decoration: none;
  font-weight: 600; font-size: 0.9rem;
  transition: transform 0.2s, filter 0.2s;
}
.v-b-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
</style>

<!-- @@/VARIANT:FAQ_B -->

<!-- @@VARIANT:FAQ_B -->
<section class="faq-section variant-b">
  <div class="v-b-container">
    <div class="v-b-header">
      <span class="v-b-eyebrow">Frequently Asked</span>
      <h2 class="v-b-title js-hero-title">Everything you need to know.</h2>
    </div>
    <div class="v-b-grid">
      <div class="v-b-card js-faq-item" data-open="false">
        <button class="v-b-trigger" aria-expanded="false">
          <span class="v-b-question">What is the onboarding process like?</span>
          <span class="v-b-icon-wrap"><svg class="v-b-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></span>
        </button>
        <div class="v-b-content-grid"><div class="v-b-content-inner"><p class="v-b-answer">Replace with onboarding details — guided setup, dedicated onboarding call, time to first value.</p></div></div>
      </div>
      <div class="v-b-card js-faq-item" data-open="false">
        <button class="v-b-trigger" aria-expanded="false">
          <span class="v-b-question">How does pricing scale with usage?</span>
          <span class="v-b-icon-wrap"><svg class="v-b-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></span>
        </button>
        <div class="v-b-content-grid"><div class="v-b-content-inner"><p class="v-b-answer">Replace with pricing scale details — prorated seats, usage overages, volume discounts.</p></div></div>
      </div>
      <div class="v-b-card js-faq-item" data-open="false">
        <button class="v-b-trigger" aria-expanded="false">
          <span class="v-b-question">Do you support single sign-on (SSO)?</span>
          <span class="v-b-icon-wrap"><svg class="v-b-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></span>
        </button>
        <div class="v-b-content-grid"><div class="v-b-content-inner"><p class="v-b-answer">Replace with SSO details — SAML 2.0, OIDC, supported identity providers, which plans include it.</p></div></div>
      </div>
      <div class="v-b-card js-faq-item" data-open="false">
        <button class="v-b-trigger" aria-expanded="false">
          <span class="v-b-question">Can I export my data?</span>
          <span class="v-b-icon-wrap"><svg class="v-b-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></span>
        </button>
        <div class="v-b-content-grid"><div class="v-b-content-inner"><p class="v-b-answer">Replace with export details — formats (JSON/CSV), how to trigger an export, data retention after cancellation.</p></div></div>
      </div>
      <div class="v-b-card js-faq-item" data-open="false">
        <button class="v-b-trigger" aria-expanded="false">
          <span class="v-b-question">What is your uptime SLA?</span>
          <span class="v-b-icon-wrap"><svg class="v-b-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></span>
        </button>
        <div class="v-b-content-grid"><div class="v-b-content-inner"><p class="v-b-answer">Replace with SLA details — uptime percentage, credit policy for downtime, status page link.</p></div></div>
      </div>
      <div class="v-b-card js-faq-item" data-open="false">
        <button class="v-b-trigger" aria-expanded="false">
          <span class="v-b-question">Do you offer discounts for startups or non-profits?</span>
          <span class="v-b-icon-wrap"><svg class="v-b-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></span>
        </button>
        <div class="v-b-content-grid"><div class="v-b-content-inner"><p class="v-b-answer">Replace with discount policy — eligibility criteria, discount amount, how to apply.</p></div></div>
      </div>
    </div>
    <div class="v-b-cta">
      <p class="v-b-cta-text">Still have questions? We're here to help.</p>
      <a href="#" class="v-b-btn">Contact Support</a>
    </div>
  </div>
</section>

<!-- @@/VARIANT:FAQ_B -->

<script>
  /* FAQ accordion — works for both Variant A and B */
  document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.js-faq-item').forEach(item => {
      const trigger = item.querySelector('button');
      trigger.addEventListener('click', () => {
        const isOpen = item.getAttribute('data-open') === 'true';
        item.setAttribute('data-open', !isOpen);
        trigger.setAttribute('aria-expanded', !isOpen);
        /* Close siblings in same container (optional — comment out for independent expand) */
        if (!isOpen) {
          item.parentElement.querySelectorAll('.js-faq-item').forEach(sib => {
            if (sib !== item) { sib.setAttribute('data-open','false'); sib.querySelector('button').setAttribute('aria-expanded','false'); }
          });
        }
      });
    });
  });
</script>
<!-- @@VARIANT:COMPARE_PRICING -->
<!-- CONVERSION: 对比定价表 -->
<style>
  .pricing-section {
    font-family: var(--font-body);
    color: var(--ink);
    background-color: var(--bg);
    padding: clamp(4rem, 8vw, 6rem) clamp(1rem, 5vw, 2rem);
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .pricing-header {
    text-align: center;
    max-width: 600px;
    margin-bottom: clamp(3rem, 5vw, 4rem);
  }

  .pricing-header h2 {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    line-height: 1.1;
    margin: 0 0 1rem 0;
    letter-spacing: -0.02em;
  }

  .pricing-header p {
    font-size: clamp(1.125rem, 2vw, 1.25rem);
    color: var(--ink-muted);
    margin: 0;
    line-height: 1.6;
  }

  .billing-toggle-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
    font-weight: 500;
  }

  .toggle-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 32px;
  }

  .toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  .toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--bg-surface);
    border: 2px solid var(--ink-muted);
    transition: .3s;
    border-radius: 34px;
  }

  .toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: var(--ink);
    transition: .3s;
    border-radius: 50%;
  }

  input:checked + .toggle-slider {
    border-color: var(--accent);
  }

  input:checked + .toggle-slider:before {
    transform: translateX(28px);
    background-color: var(--accent);
  }

  .save-badge {
    background-color: var(--accent);
    color: var(--bg);
    padding: 0.25rem 0.5rem;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    width: 100%;
    max-width: 1200px;
    align-items: stretch;
  }

  .pricing-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--ink-muted);
    border-radius: 24px;
    padding: clamp(2rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .pricing-card:hover {
    transform: translateY(-5px);
  }

  .pricing-card.pro-card {
    border: 2px solid var(--accent);
    background-color: var(--ink);
    color: var(--bg);
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.2);
  }

  .pricing-card.pro-card .plan-desc,
  .pricing-card.pro-card .price-period {
    color: var(--bg-surface);
    opacity: 0.8;
  }

  .popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--accent);
    color: var(--bg);
    padding: 0.25rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  .plan-name {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    margin: 0 0 0.5rem 0;
  }

  .plan-desc {
    color: var(--ink-muted);
    font-size: 0.9375rem;
    margin: 0 0 2rem 0;
    min-height: 2.8rem;
  }

  .plan-price-wrapper {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 2rem;
  }

  .price-symbol {
    font-size: 1.5rem;
    font-weight: 600;
  }

  .price-amount {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    line-height: 1;
    font-weight: 700;
  }

  .price-period {
    color: var(--ink-muted);
    font-size: 0.875rem;
  }

  .feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2.5rem 0;
    flex-grow: 1;
  }

  .feature-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
    font-size: clamp(0.9375rem, 1.5vw, 1rem);
    line-height: 1.4;
  }

  .feature-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
  }

  .icon-check { stroke: var(--accent); }
  .icon-dash { stroke: var(--ink-muted); opacity: 0.5; }
  .pro-card .icon-dash { stroke: var(--bg-surface); opacity: 0.4; }

  .feature-excluded {
    color: var(--ink-muted);
    text-decoration: line-through;
    opacity: 0.7;
  }

  .pro-card .feature-excluded {
    color: var(--bg-surface);
    opacity: 0.5;
  }

  .pricing-cta {
    display: block;
    width: 100%;
    padding: 1rem;
    text-align: center;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    font-size: 1.0625rem;
    transition: all 0.2s ease;
    cursor: pointer;
  }

  .btn-outline {
    background-color: transparent;
    color: var(--ink);
    border: 1px solid var(--ink);
  }

  .btn-outline:hover {
    background-color: var(--ink);
    color: var(--bg);
  }

  .btn-primary {
    background-color: var(--accent);
    color: var(--bg);
    border: 1px solid var(--accent);
  }

  .btn-primary:hover {
    filter: brightness(1.1);
  }

  .pricing-bottom-row {
    margin-top: 4rem;
    width: 100%;
    max-width: 1000px;
    border-top: 1px solid var(--ink-muted);
    padding-top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }

  .bottom-row-title {
    font-weight: 600;
    font-size: 1.125rem;
  }

  .bottom-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
  }

  .bottom-feature {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    color: var(--ink-muted);
  }

  .bottom-feature svg {
    width: 18px;
    height: 18px;
    stroke: var(--ink);
  }

  @media (max-width: 768px) {
    .pricing-grid { max-width: 400px; }
    .bottom-features { flex-direction: column; gap: 1rem; align-items: flex-start; }
  }
</style>

<!-- @@/VARIANT:COMPARE_PRICING -->

<!-- @@VARIANT:COMPARE_PRICING -->
<section class="pricing-section">
  <div class="pricing-header">
    <h2>Plans that scale with you</h2>
    <p>Simple, transparent pricing. Always know what you'll pay.</p>
    
    <div class="billing-toggle-wrapper">
      <span id="label-monthly">Monthly</span>
      <label class="toggle-switch">
        <input type="checkbox" id="pricing-toggle-checkbox">
        <span class="toggle-slider"></span>
      </label>
      <span id="label-yearly">Annually</span>
      <span class="save-badge">Save 20%</span>
    </div>
  </div>

  <div class="pricing-grid">
    <div class="pricing-card js-conversion-item">
      <h3 class="plan-name">Hobby</h3>
      <p class="plan-desc">Perfect for side projects and personal experiments.</p>
      
      <div class="plan-price-wrapper">
        <span class="price-symbol">$</span>
        <span class="price-amount" data-monthly="0" data-yearly="0">0</span>
        <span class="price-period">/mo</span>
      </div>

      <ul class="feature-list">
        <li class="feature-item">
          <svg class="feature-icon icon-check" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
          Up to 3 active projects
        </li>
        <li class="feature-item">
          <svg class="feature-icon icon-check" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
          Basic analytics
        </li>
        <li class="feature-item">
          <svg class="feature-icon icon-check" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
          Community support
        </li>
        <li class="feature-item feature-excluded">
          <svg class="feature-icon icon-dash" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round"><line x1="5" y1="12" x2="19" y2="12"></line></svg>
          Custom domains
        </li>
        <li class="feature-item feature-excluded">
          <svg class="feature-icon icon-dash" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round"><line x1="5" y1="12" x2="19" y2="12"></line></svg>
          Team collaboration
        </li>
      </ul>

      <a href="#" class="pricing-cta btn-outline">Start for free</a>
    </div>

    <div class="pricing-card pro-card js-conversion-item">
      <div class="popular-badge">Most Popular</div>
      <h3 class="plan-name">Professional</h3>
      <p class="plan-desc">For creators and small teams ready to accelerate.</p>
      
      <div class="plan-price-wrapper">
        <span class="price-symbol">$</span>
        <span class="price-amount" data-monthly="29" data-yearly="24">29</span>
        <span class="price-period">/mo per user</span>
      </div>

      <ul class="feature-list">
        <li class="feature-item">
          <svg class="feature-icon icon-check" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
          Unlimited projects
        </li>
        <li class="feature-item">
          <svg class="feature-icon icon-check" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
          Advanced analytics dashboard
        </li>
        <li class="feature-item">
          <svg class="feature-icon icon-check" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
          Priority email support
        </li>
        <li class="feature-item">
          <svg class="feature-icon icon-check" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
          Custom domains
        </li>
        <li class="feature-item">
          <svg class="feature-icon icon-check" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
          Team collaboration tools
        </li>
      </ul>

      <a href="#" class="pricing-cta btn-primary">Start 14-day trial</a>
    </div>

    <div class="pricing-card js-conversion-item">
      <h3 class="plan-name">Enterprise</h3>
      <p class="plan-desc">Custom security, compliance, and dedicated support.</p>
      
      <div class="plan-price-wrapper" style="align-items: center;">
        <span class="price-amount" style="font-size: clamp(1.8rem, 3vw, 2.5rem);">Custom</span>
      </div>

      <ul class="feature-list">
        <li class="feature-item">
          <svg class="feature-icon icon-check" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
          Everything in Professional
        </li>
        <li class="feature-item">
          <svg class="feature-icon icon-check" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
          SSO & Advanced Security
        </li>
        <li class="feature-item">
          <svg class="feature-icon icon-check" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
          Dedicated Success Manager
        </li>
        <li class="feature-item">
          <svg class="feature-icon icon-check" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
          Custom SLA
        </li>
        <li class="feature-item">
          <svg class="feature-icon icon-check" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
          Audit logs
        </li>
      </ul>

      <a href="#" class="pricing-cta btn-outline">Contact Sales</a>
    </div>
  </div>

  <div class="pricing-bottom-row">
    <div class="bottom-row-title">All plans include:</div>
    <div class="bottom-features">
      <div class="bottom-feature">
        <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
        Bank-grade security
      </div>
      <div class="bottom-feature">
        <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>
        99.9% Uptime guarantee
      </div>
      <div class="bottom-feature">
        <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
        Community forum access
      </div>
      <div class="bottom-feature">
        <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.2 15c.7-1.2 1-2.5.7-3.9-.6-2-2.4-3.5-4.4-3.5h-1.2c-.7-3-3.2-5.2-6.2-5.6-3-.3-5.9 1.3-7.3 4-1.2 2.5-1 6.5.5 8.8m8.7-1.6V21"></path><path d="M16 16l-4-4-4 4"></path></svg>
        Daily automated backups
      </div>
    </div>
  </div>
</section>

<!-- @@/VARIANT:COMPARE_PRICING -->

<!-- @@VARIANT:BRAND_WALL -->
<!-- CONVERSION: 品牌墙 -->
<style>
  .logo-wall-section {
    font-family: var(--font-body);
    background-color: var(--bg);
    color: var(--ink);
    padding: clamp(4rem, 5vw, 6rem) clamp(1rem, 5vw, 2rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
  }

  .logo-wall-header {
    text-align: center;
    margin-bottom: clamp(3rem, 5vw, 4rem);
    width: 100%;
  }

  .eyebrow-text {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    margin-bottom: 0.75rem;
    display: block;
  }

  .logo-wall-header h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }

  .logo-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: clamp(2rem, 4vw, 4rem);
    max-width: 1100px;
    margin-bottom: clamp(4rem, 6vw, 6rem);
  }

  .logo-item {
    height: 40px;
    opacity: 0.4;
    filter: grayscale(100%);
    transition: all 0.4s ease;
    cursor: default;
  }

  .logo-item:hover {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.05);
  }

  .logo-item svg {
    height: 100%;
    width: auto;
    fill: var(--ink);
  }

  .testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: clamp(1.5rem, 3vw, 2rem);
    width: 100%;
    max-width: 1200px;
  }

  .testimonial-card {
    background-color: var(--bg-surface);
    padding: clamp(2rem, 3vw, 2.5rem);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .testimonial-card.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .quote-icon {
    width: 32px;
    height: 32px;
    fill: var(--accent);
    opacity: 0.2;
    margin-bottom: 1.5rem;
  }

  .quote-text {
    font-size: clamp(1.125rem, 1.5vw, 1.25rem);
    line-height: 1.5;
    font-style: italic;
    margin: 0 0 2rem 0;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .author-block {
    display: flex;
    align-items: center;
    gap: 1rem;
    border-top: 1px solid var(--ink-muted);
    padding-top: 1.5rem;
  }

  .author-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--ink);
    color: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-family: var(--font-display);
    font-size: 1.125rem;
    flex-shrink: 0;
  }

  .author-info {
    display: flex;
    flex-direction: column;
  }

  .author-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--ink);
  }

  .author-title {
    font-size: 0.875rem;
    color: var(--ink-muted);
    margin-top: 0.125rem;
  }
</style>

<!-- @@/VARIANT:BRAND_WALL -->

<!-- @@VARIANT:BRAND_WALL -->
<section class="logo-wall-section">
  <div class="logo-wall-header">
    <span class="eyebrow-text">Industry Proven</span>
    <h2>Trusted by forward-thinking teams</h2>
  </div>

  <div class="logo-grid">
    <div class="logo-item" aria-label="Acme Corp">
      <svg viewBox="0 0 120 40" xmlns="http://www.w3.org/2000/svg">
        <rect x="0" y="5" width="30" height="30" fill="none" stroke="currentColor" stroke-width="3"/>
        <text x="40" y="28" font-family="sans-serif" font-weight="900" font-size="24" fill="currentColor" letter-spacing="1">ACME</text>
      </svg>
    </div>
    <div class="logo-item" aria-label="Globex">
      <svg viewBox="0 0 150 40" xmlns="http://www.w3.org/2000/svg">
        <circle cx="20" cy="20" r="15" fill="none" stroke="currentColor" stroke-width="4" stroke-dasharray="10 5"/>
        <text x="45" y="28" font-family="sans-serif" font-weight="800" font-size="22" fill="currentColor">GLOBEX</text>
      </svg>
    </div>
    <div class="logo-item" aria-label="Initech">
      <svg viewBox="0 0 160 40" xmlns="http://www.w3.org/2000/svg">
        <polygon points="20,5 35,35 5,35" fill="currentColor"/>
        <text x="45" y="28" font-family="sans-serif" font-weight="700" font-size="24" fill="currentColor" letter-spacing="-1">INITECH</text>
      </svg>
    </div>
    <div class="logo-item" aria-label="Soyuz">
      <svg viewBox="0 0 140 40" xmlns="http://www.w3.org/2000/svg">
        <line x1="0" y1="20" x2="30" y2="20" stroke="currentColor" stroke-width="6"/>
        <line x1="15" y1="5" x2="15" y2="35" stroke="currentColor" stroke-width="6"/>
        <text x="45" y="28" font-family="serif" font-weight="bold" font-size="24" fill="currentColor">SOYUZ</text>
      </svg>
    </div>
    <div class="logo-item" aria-label="Umbrella">
      <svg viewBox="0 0 170 40" xmlns="http://www.w3.org/2000/svg">
        <path d="M5,20 Q20,0 35,20 L5,20" fill="currentColor"/>
        <text x="45" y="28" font-family="sans-serif" font-weight="900" font-size="22" fill="currentColor" letter-spacing="2">UMBRELLA</text>
      </svg>
    </div>
    <div class="logo-item" aria-label="Massive Dynamic">
      <svg viewBox="0 0 160 40" xmlns="http://www.w3.org/2000/svg">
        <rect x="0" y="10" width="10" height="20" fill="currentColor"/>
        <rect x="15" y="5" width="10" height="25" fill="currentColor"/>
        <rect x="30" y="15" width="10" height="15" fill="currentColor"/>
        <text x="50" y="28" font-family="sans-serif" font-weight="800" font-size="24" fill="currentColor">MASSIVE</text>
      </svg>
    </div>
    <div class="logo-item" aria-label="Stark Industries">
      <svg viewBox="0 0 130 40" xmlns="http://www.w3.org/2000/svg">
        <polygon points="0,5 20,5 10,20 30,20 0,35" fill="currentColor"/>
        <text x="40" y="28" font-family="sans-serif" font-weight="900" font-size="26" fill="currentColor" font-style="italic">STARK</text>
      </svg>
    </div>
    <div class="logo-item" aria-label="Wayne Enterprises">
      <svg viewBox="0 0 150 40" xmlns="http://www.w3.org/2000/svg">
        <path d="M0,10 L15,30 L30,10 L20,30 L15,20 L10,30 Z" fill="currentColor"/>
        <text x="40" y="28" font-family="serif" font-weight="400" font-size="24" fill="currentColor" letter-spacing="3">WAYNE</text>
      </svg>
    </div>
  </div>

  <div class="testimonial-grid">
    <div class="testimonial-card js-conversion-item" style="transition-delay: 0.1s;">
      <svg class="quote-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/></svg>
      <p class="quote-text">"This platform entirely removed our infrastructure bottlenecks. Our deployment velocity increased by 40% in just two months."</p>
      <div class="author-block">
        <div class="author-avatar" style="background-color: var(--accent);">SJ</div>
        <div class="author-info">
          <span class="author-name">Sarah Jenkins</span>
          <span class="author-title">VP of Engineering, INITECH</span>
        </div>
      </div>
    </div>

    <div class="testimonial-card js-conversion-item" style="transition-delay: 0.2s;">
      <svg class="quote-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/></svg>
      <p class="quote-text">"The intuitive interface meant our non-technical team members were onboarding themselves without creating support tickets."</p>
      <div class="author-block">
        <div class="author-avatar">MR</div>
        <div class="author-info">
          <span class="author-name">Marcus Reed</span>
          <span class="author-title">Product Lead, GLOBEX</span>
        </div>
      </div>
    </div>

    <div class="testimonial-card js-conversion-item" style="transition-delay: 0.3s;">
      <svg class="quote-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/></svg>
      <p class="quote-text">"We evaluated five different vendors. Only this tool provided the enterprise-grade compliance features we absolutely required."</p>
      <div class="author-block">
        <div class="author-avatar" style="background-color: var(--accent);">EC</div>
        <div class="author-info">
          <span class="author-name">Elena Chen</span>
          <span class="author-title">CTO, MASSIVE DYNAMIC</span>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- @@/VARIANT:BRAND_WALL -->
</body>
</html>