<!DOCTYPE html>
<html lang="{{locale_code}}" dir="{{locale_dir}}">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{t:meta.title}}</title>
  <meta name="description" content="{{t:meta.description}}">
  <meta name="keywords" content="{{t:meta.keywords}}">
  <meta property="og:title" content="{{t:meta.og_title}}">
  <meta property="og:description" content="{{t:meta.og_description}}">
  <meta property="og:type" content="website">
  <meta property="og:url" content="{{locale_home_url}}">
  <meta property="og:site_name" content="WebBrain">
  <meta property="og:locale" content="{{locale_bcp47}}">
  <meta property="og:image" content="https://webbrain.one/og-image.svg">
  <meta property="og:image:secure_url" content="https://webbrain.one/og-image.svg">
  <meta property="og:image:type" content="image/svg+xml">
  <meta property="og:image:alt" content="{{t:meta.image_alt}}">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="{{t:meta.twitter_title}}">
  <meta name="twitter:description" content="{{t:meta.twitter_description}}">
  <meta name="twitter:image" content="https://webbrain.one/og-image.svg">
  <meta name="twitter:image:alt" content="{{t:meta.image_alt}}">
  <meta name="robots" content="index, follow">
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
  <link rel="canonical" href="{{locale_home_url}}">
{{hreflang_links}}
  <!-- JSON-LD Structured Data -->
  <script type="application/ld+json">
{{software_jsonld}}
  </script>
  <script type="application/ld+json">
{{faq_jsonld}}
  </script>
  <style>
    /* ================================================================
       RESET & BASE
       ================================================================ */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    :root {
      --bg: #0b0e17;
      --bg-card: #111827;
      --bg-card-hover: #1a2233;
      --surface: #161d2e;
      --border: rgba(255,255,255,0.07);
      --text: #e4e4ec;
      --text-dim: #8b8fa4;
      --accent: #6c63ff;
      --accent-glow: rgba(108,99,255,0.25);
      --accent2: #a78bfa;
      --success: #34d399;
      --warning: #fbbf24;
      --radius: 16px;
      --radius-sm: 10px;
      --max-w: 1100px;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.6;
      overflow-x: hidden;
    }

    a { color: var(--accent2); text-decoration: none; }
    a:hover { text-decoration: underline; }

    /* ================================================================
       GLOW BACKGROUND
       ================================================================ */
    .glow-bg {
      position: fixed;
      inset: 0;
      z-index: -1;
      overflow: hidden;
    }
    .glow-bg::before {
      content: '';
      position: absolute;
      width: 600px; height: 600px;
      top: -120px; left: 50%;
      transform: translateX(-50%);
      background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
      filter: blur(80px);
    }
    .glow-bg::after {
      content: '';
      position: absolute;
      width: 400px; height: 400px;
      bottom: 10%; inset-inline-end: -100px;
      background: radial-gradient(circle, rgba(167,139,250,0.12) 0%, transparent 70%);
      filter: blur(60px);
    }

    /* ================================================================
       NAV
       ================================================================ */
    nav {
      position: sticky;
      top: 0;
      z-index: 100;
      backdrop-filter: blur(20px);
      background: rgba(11,14,23,0.8);
      border-bottom: 1px solid var(--border);
    }
    .nav-inner {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 14px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .nav-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 20px;
      font-weight: 800;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .nav-brand span.emoji { -webkit-text-fill-color: initial; font-size: 22px; }
    .nav-links { display: flex; gap: 28px; align-items: center; }
    .nav-links a {
      color: var(--text-dim);
      font-size: 14px;
      font-weight: 500;
      transition: color 0.2s;
    }
    .nav-links a:hover { color: var(--text); text-decoration: none; }
    .lang-dropdown {
      background: rgba(255,255,255,0.05);
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 6px 10px;
      font-size: 13px;
    }
    .lang-dropdown:focus { outline: 2px solid var(--accent-glow); outline-offset: 1px; }
    /* Windows/Linux render <option> with OS defaults — without this rule the
       dropdown panel comes up white-on-white and the items are invisible.
       macOS/Safari ignore option styling, so this is a no-op there. */
    .lang-dropdown option {
      background-color: #1a2233;
      color: var(--text);
    }
    .lang-dropdown option:checked,
    .lang-dropdown option:hover {
      background-color: var(--accent);
      color: #fff;
    }
    .nav-cta {
      background: var(--accent) !important;
      color: #fff !important;
      -webkit-text-fill-color: initial !important;
      padding: 8px 20px;
      border-radius: 8px;
      font-weight: 600;
      font-size: 13px;
      transition: background 0.2s, transform 0.1s;
    }
    .nav-cta:hover { background: #5a52d5 !important; transform: translateY(-1px); text-decoration: none !important; }

    /* GitHub stars pill — populated via JS on load, cached in localStorage. */
    .gh-stars {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 10px 5px 8px;
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--border);
      border-radius: 999px;
      color: var(--text);
      -webkit-text-fill-color: initial;
      font-size: 12px;
      font-weight: 600;
      line-height: 1;
      transition: background 0.2s, border-color 0.2s, transform 0.1s;
    }
    .gh-stars:hover {
      background: rgba(255,255,255,0.08);
      border-color: var(--accent);
      text-decoration: none;
      transform: translateY(-1px);
    }
    .gh-stars svg { width: 14px; height: 14px; flex-shrink: 0; }
    .gh-stars .gh-icon { color: var(--text-dim); }
    .gh-stars .gh-star { color: var(--warning); }
    .gh-stars .gh-count {
      color: var(--text);
      font-variant-numeric: tabular-nums;
      min-width: 1ch;
    }
    .gh-stars[data-loading="1"] .gh-count { color: var(--text-dim); }

    /* ================================================================
       HERO
       ================================================================ */
    .hero {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 100px 24px 80px;
      text-align: center;
    }
    @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

    .hero h1 {
      font-size: clamp(40px, 6vw, 68px);
      font-weight: 800;
      line-height: 1.1;
      margin-bottom: 20px;
      letter-spacing: -1.5px;
    }
    .hero h1 .gradient {
      background: linear-gradient(135deg, var(--accent), var(--accent2), #e879f9);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .hero p {
      font-size: 18px;
      color: var(--text-dim);
      max-width: 600px;
      margin: 0 auto 36px;
      line-height: 1.7;
    }
    .hero-actions {
      display: flex;
      gap: 14px;
      justify-content: center;
      flex-wrap: wrap;
    }
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 14px 28px;
      border-radius: var(--radius-sm);
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      border: none;
      transition: all 0.2s;
    }
    .btn-primary {
      background: var(--accent);
      color: #fff;
      box-shadow: 0 4px 24px var(--accent-glow);
    }
    .btn-primary:hover { background: #5a52d5; transform: translateY(-2px); text-decoration: none; color: #fff; }
    .btn-secondary {
      background: var(--surface);
      color: var(--text);
      border: 1px solid var(--border);
    }
    .btn-secondary:hover { background: var(--bg-card-hover); transform: translateY(-2px); text-decoration: none; }
    .btn svg { width: 18px; height: 18px; }

    /* Hero screenshot mockup */
    .hero-visual {
      margin-top: 60px;
      position: relative;
    }
    .browser-mockup {
      max-width: 820px;
      margin: 0 auto;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: 0 24px 80px rgba(0,0,0,0.4);
    }
    .browser-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 16px;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
    }
    .browser-dots { display: flex; gap: 6px; }
    .browser-dots span {
      width: 10px; height: 10px;
      border-radius: 50%;
    }
    .browser-dots span:nth-child(1) { background: #ef4444; }
    .browser-dots span:nth-child(2) { background: #fbbf24; }
    .browser-dots span:nth-child(3) { background: #34d399; }
    .browser-url {
      flex: 1;
      margin-inline-start: 12px;
      background: rgba(0,0,0,0.3);
      border-radius: 6px;
      padding: 5px 12px;
      font-size: 12px;
      color: var(--text-dim);
    }
    .browser-body {
      display: flex;
      min-height: 380px;
    }
    .browser-page {
      flex: 1;
      padding: 24px;
      font-size: 13px;
      color: var(--text-dim);
      line-height: 1.8;
    }
    .browser-page h3 { color: var(--text); margin-bottom: 8px; font-size: 16px; }
    .browser-page .placeholder-line {
      height: 10px;
      background: rgba(255,255,255,0.04);
      border-radius: 4px;
      margin-bottom: 8px;
    }
    .browser-page .placeholder-line:nth-child(odd) { width: 90%; }
    .browser-page .placeholder-line:nth-child(even) { width: 70%; }

    /* Side panel mockup */
    .side-panel {
      width: 300px;
      border-inline-start: 1px solid var(--border);
      background: #1a1a2e;
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
    }
    .sp-header {
      padding: 10px 14px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .sp-header .sp-brand {
      font-size: 14px;
      font-weight: 700;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .sp-header .sp-brand .sp-domain {
      font-weight: 500;
      opacity: 1;
      background: none;
      -webkit-text-fill-color: rgba(228,228,236,0.75);
    }
    .sp-status {
      width: 7px; height: 7px;
      background: var(--success);
      border-radius: 50%;
    }
    .sp-messages {
      flex: 1;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      overflow: hidden;
    }
    .sp-msg {
      padding: 8px 12px;
      border-radius: 10px;
      font-size: 12px;
      line-height: 1.5;
      max-width: 90%;
      animation: fadeUp 0.4s ease both;
    }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .sp-msg.user {
      background: var(--accent);
      color: #fff;
      align-self: flex-end;
      animation-delay: 0.2s;
    }
    .sp-msg.assistant {
      background: #16213e;
      border: 1px solid rgba(255,255,255,0.06);
      align-self: flex-start;
      animation-delay: 0.5s;
    }
    .sp-msg .step {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 10px;
      color: var(--text-dim);
      margin-bottom: 4px;
    }
    .sp-msg .step .check { color: var(--success); }
    .sp-input {
      padding: 10px;
      border-top: 1px solid var(--border);
    }
    .sp-input-box {
      display: flex;
      align-items: center;
      background: #1e2746;
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 8px 12px;
      font-size: 11px;
      color: var(--text-dim);
    }

    /* ================================================================
       FEATURES
       ================================================================ */
    .section {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 80px 24px;
    }
    .section-label {
      text-align: center;
      font-size: 13px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: var(--accent);
      margin-bottom: 12px;
    }
    .section-title {
      text-align: center;
      font-size: clamp(28px, 4vw, 42px);
      font-weight: 700;
      margin-bottom: 16px;
      letter-spacing: -0.5px;
    }
    .section-subtitle {
      text-align: center;
      color: var(--text-dim);
      max-width: 560px;
      margin: 0 auto 48px;
      font-size: 16px;
    }

    .features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 20px;
    }
    .feature-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 28px;
      transition: all 0.25s;
    }
    .feature-card:hover {
      background: var(--bg-card-hover);
      border-color: rgba(108,99,255,0.2);
      transform: translateY(-4px);
      box-shadow: 0 12px 40px rgba(0,0,0,0.3);
    }
    .feature-icon {
      width: 44px; height: 44px;
      background: var(--accent-glow);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      margin-bottom: 16px;
    }
    .feature-card h3 {
      font-size: 17px;
      font-weight: 600;
      margin-bottom: 8px;
    }
    .feature-card p {
      color: var(--text-dim);
      font-size: 14px;
      line-height: 1.6;
    }

    /* ================================================================
       PROVIDERS — constellation layout

       A central WebBrain core orbited by provider nodes connected via
       SVG lines. The container is sized as a fixed aspect-ratio canvas
       (a square on small screens, wide rectangle on desktop). Each node
       is positioned with --x/--y CSS variables in % so the SVG line ends
       and node centers stay aligned across viewports.
       ================================================================ */
    .provider-constellation {
      position: relative;
      max-width: 880px;
      margin: 56px auto 0;
      aspect-ratio: 16 / 9;
      isolation: isolate;
    }
    .constellation-lines {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      overflow: visible;
      z-index: 0;
    }
    .constellation-lines line {
      stroke: var(--border);
      stroke-width: 1;
      stroke-dasharray: 3 5;
      opacity: 0.9;
      transition: stroke 0.25s, opacity 0.25s;
    }
    .constellation-lines line.is-active {
      stroke: var(--accent);
      stroke-dasharray: none;
      opacity: 1;
    }

    .constellation-center {
      position: absolute;
      left: 50%; top: 50%;
      width: 96px; height: 96px;
      transform: translate(-50%, -50%);
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .cc-core {
      width: 76px; height: 76px;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, var(--accent2), var(--accent) 60%, #4f46c4);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 36px;
      box-shadow: 0 0 0 6px rgba(108,99,255,0.12), 0 12px 40px rgba(108,99,255,0.35);
      position: relative;
      z-index: 1;
    }
    .cc-ring {
      position: absolute;
      inset: -10px;
      border: 1px solid rgba(167,139,250,0.35);
      border-radius: 50%;
      animation: cc-pulse 4s ease-in-out infinite;
    }
    .cc-ring-2 {
      inset: -28px;
      border-color: rgba(108,99,255,0.18);
      animation-delay: 1s;
    }
    @keyframes cc-pulse {
      0%, 100% { transform: scale(1); opacity: 0.8; }
      50%      { transform: scale(1.08); opacity: 0.35; }
    }

    .provider-node {
      position: absolute;
      left: var(--x); top: var(--y);
      transform: translate(-50%, -50%);
      z-index: 3;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      animation: pn-float 6s ease-in-out infinite;
      animation-delay: var(--d, 0s);
      text-decoration: none;
      color: inherit;
    }
    @keyframes pn-float {
      0%, 100% { transform: translate(-50%, calc(-50% - 4px)); }
      50%      { transform: translate(-50%, calc(-50% + 4px)); }
    }
    .pn-bubble {
      width: 56px; height: 56px;
      border-radius: 50%;
      background: var(--bg-card);
      border: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s, background 0.25s;
    }
    .provider-node:hover .pn-bubble,
    .provider-node:focus-visible .pn-bubble {
      transform: scale(1.12);
      border-color: var(--accent);
      background: var(--bg-card-hover);
      box-shadow: 0 8px 28px rgba(108,99,255,0.35);
    }
    .pn-label {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-dim);
      letter-spacing: 0.2px;
      transition: color 0.25s;
      white-space: nowrap;
    }
    .provider-node:hover .pn-label,
    .provider-node:focus-visible .pn-label { color: var(--text); }
    .pn-bubble.local { background: rgba(52,211,153,0.12); color: var(--success); border-color: rgba(52,211,153,0.25); }
    .pn-bubble.ollama { background: rgba(38,121,255,0.12); color: #2679ff; border-color: rgba(38,121,255,0.25); }
    .pn-bubble.openai { background: rgba(16,163,127,0.12); color: #10a37f; border-color: rgba(16,163,127,0.25); }
    .pn-bubble.anthropic { background: rgba(204,149,96,0.12); color: #cc9560; border-color: rgba(204,149,96,0.25); }
    .pn-bubble.openrouter { background: rgba(108,99,255,0.12); color: var(--accent2); border-color: rgba(108,99,255,0.3); }
    .pn-bubble.studiolm { background: rgba(245,158,11,0.12); color: #f59e0b; border-color: rgba(245,158,11,0.25); }
    .pn-bubble.vllm { background: rgba(99,102,241,0.12); color: #6366f1; border-color: rgba(99,102,241,0.25); }
    .pn-bubble.grok { background: rgba(255,255,255,0.06); color: #e5e5e5; border-color: rgba(255,255,255,0.2); }
    .pn-bubble.gemini { background: rgba(66,133,244,0.12); color: #4285f4; border-color: rgba(66,133,244,0.25); }
    .pn-bubble.deepseek { background: rgba(72,191,255,0.12); color: #48bfff; border-color: rgba(72,191,255,0.25); }
    .pn-bubble.mistral { background: rgba(255,127,80,0.12); color: #ff7f50; border-color: rgba(255,127,80,0.25); }

    /* Reduced-motion: kill the float + ring pulse so users on
       prefers-reduced-motion see a static layout. */
    @media (prefers-reduced-motion: reduce) {
      .provider-node { animation: none; transform: translate(-50%, -50%); }
      .cc-ring, .cc-ring-2 { animation: none; }
    }

    /* ================================================================
       MODES
       ================================================================ */
    .modes-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      max-width: 760px;
      margin: 0 auto;
    }
    .mode-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 32px;
      text-align: center;
      transition: all 0.25s;
    }
    .mode-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 40px rgba(0,0,0,0.3);
    }
    .mode-card.ask { border-top: 3px solid var(--accent); }
    .mode-card.act { border-top: 3px solid var(--warning); }
    .mode-card .mode-icon { font-size: 36px; margin-bottom: 16px; }
    .mode-card h3 { font-size: 20px; margin-bottom: 8px; }
    .mode-card p { color: var(--text-dim); font-size: 14px; }

    /* ================================================================
       DOWNLOAD / INSTALL
       ================================================================ */
    .download-section {
      text-align: center;
    }
    .download-cards {
      display: flex;
      justify-content: center;
      align-items: stretch;
      gap: 20px;
      flex-wrap: nowrap;
      margin-top: 40px;
      max-width: 820px;
      margin-left: auto;
      margin-right: auto;
    }
    .download-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 32px 28px;
      text-align: center;
      flex: 1 1 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: all 0.25s;
    }
    .download-card:hover {
      border-color: var(--accent);
      transform: translateY(-4px);
      box-shadow: 0 12px 40px rgba(0,0,0,0.3);
    }
    .download-card .browser-icon { font-size: 38px; margin-bottom: 14px; }
    .download-card h3 { font-size: 18px; margin-bottom: 6px; }
    .download-card p { color: var(--text-dim); font-size: 13px; margin-bottom: 20px; }
    .download-card-actions {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: auto;
    }
    .download-card .btn { width: 100%; justify-content: center; }
    /* Chrome is the more popular browser so the Chrome card gets ~25% more
       horizontal real estate than Firefox via flex-grow. Both cards stay
       on a single row at all desktop/tablet widths; the mobile breakpoint
       below stacks them. */
    .download-card-chrome {
      flex-grow: 1.25;
      padding: 38px 32px;
      border-color: rgba(0, 212, 255, 0.45);
    }
    .download-card-chrome .browser-icon { font-size: 46px; }
    .download-card-chrome h3 { font-size: 20px; }

    /* ================================================================
       OPEN SOURCE
       ================================================================ */
    .oss-banner {
      max-width: 760px;
      margin: 0 auto;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 40px;
      text-align: center;
    }
    .oss-banner h3 { font-size: 24px; margin-bottom: 12px; }
    .oss-banner p { color: var(--text-dim); font-size: 15px; margin-bottom: 24px; max-width: 500px; margin-left: auto; margin-right: auto; }
    .share-row {
      display: flex;
      gap: 12px;
      justify-content: center;
      flex-wrap: wrap;
    }
    .share-row .btn { gap: 8px; }
    /* Footer share icons sit just before the text links; visually a small
       row of two glyphs that stays out of the way. */
    .footer-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 6px;
      color: var(--text-dim);
      transition: color 0.15s, background 0.15s;
    }
    .footer-icon:hover { color: var(--text); background: rgba(255,255,255,0.05); text-decoration: none; }
    .footer-icon svg { display: block; }

    /* ================================================================
       FOOTER
       ================================================================ */
    footer {
      border-top: 1px solid var(--border);
      padding: 32px 24px;
      text-align: center;
      color: var(--text-dim);
      font-size: 13px;
    }
    footer a { color: var(--text-dim); }
    footer a:hover { color: var(--text); }
    .footer-inner {
      max-width: var(--max-w);
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
    }
    .footer-links { display: flex; gap: 20px; }

    .safety-note {
      max-width: var(--max-w);
      margin: 0 auto 24px;
      background: rgba(251,191,36,0.1);
      border: 1px solid rgba(251,191,36,0.35);
      border-radius: var(--radius-sm);
      padding: 18px 20px;
      color: var(--text);
      text-align: start;
      line-height: 1.55;
      font-size: 13px;
    }
    .safety-note h4 {
      font-size: 14px;
      margin-bottom: 8px;
      letter-spacing: 0.4px;
      text-transform: uppercase;
      color: var(--warning);
    }
    .safety-note ul {
      margin: 0;
      padding-inline-start: 18px;
    }
    .safety-note li { margin-bottom: 6px; }
    .safety-note li:last-child { margin-bottom: 0; }

    /* ================================================================
       COMPARISON TABLE
       ================================================================ */
    .compare-table-wrap {
      overflow-x: auto;
      max-width: 920px;
      margin: 0 auto;
    }
    .compare-table {
      width: 100%;
      border-collapse: collapse;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      overflow: hidden;
      font-size: 14px;
    }
    .compare-table th,
    .compare-table td {
      padding: 12px 16px;
      text-align: start;
      border-bottom: 1px solid var(--border);
    }
    .compare-table thead th {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-dim);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      background: var(--surface);
    }
    .compare-table thead th.highlight {
      color: var(--accent);
    }
    .compare-table td.highlight {
      color: var(--accent2);
      font-weight: 600;
    }
    .compare-table tbody tr {
      transition: background 0.15s;
    }
    .compare-table tbody tr:hover {
      background: rgba(108,99,255,0.04);
    }

    /* ================================================================
       FAQ
       ================================================================ */
    .faq-list {
      max-width: 760px;
      margin: 32px auto 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .faq-item {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      overflow: hidden;
      transition: border-color 0.2s;
    }
    .faq-item[open] {
      border-color: rgba(108,99,255,0.25);
    }
    .faq-item summary {
      padding: 16px 20px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: color 0.2s;
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after {
      content: '+';
      font-size: 20px;
      color: var(--text-dim);
      flex-shrink: 0;
      margin-inline-start: 16px;
      transition: transform 0.2s;
    }
    .faq-item[open] summary::after {
      content: '−';
      color: var(--accent);
    }
    .faq-item summary:hover { color: var(--accent2); }
    .faq-item p {
      padding: 0 20px 16px;
      color: var(--text-dim);
      font-size: 14px;
      line-height: 1.7;
    }
    .faq-item p a {
      color: var(--accent2);
    }

    /* ================================================================
       DEMO VIDEO
       ================================================================ */
    .video-showcase {
      max-width: 900px;
      margin: 0 auto;
    }
    .video-frame {
      position: relative;
      width: 100%;
      padding-bottom: 56.25%;
      border-radius: var(--radius);
      overflow: hidden;
      border: 1px solid var(--border);
      background: #000;
      box-shadow: 0 20px 40px rgba(0,0,0,0.35);
    }
    .video-frame iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }

    /* ================================================================
       RESPONSIVE
       ================================================================ */
    @media (max-width: 768px) {
      .browser-body { flex-direction: column; }
      .side-panel { width: 100%; border-inline-start: none; border-top: 1px solid var(--border); min-height: 260px; }
      .modes-grid { grid-template-columns: 1fr; }
      .nav-links a:not(.nav-cta) { display: none; }
      .gh-stars { display: none; }
      .provider-constellation { aspect-ratio: 4 / 5; max-width: 420px; }
      .pn-bubble { width: 46px; height: 46px; font-size: 18px; }
      .pn-label { font-size: 11px; }
      .cc-core { width: 64px; height: 64px; font-size: 28px; }
      .video-showcase { max-width: 380px; }
      .video-frame { padding-bottom: 177.78%; }
    }
    @media (max-width: 560px) {
      /* Stack the install cards on small phones — squeezing two side-by-side
         below this width makes the buttons too cramped to tap reliably. */
      .download-cards { flex-wrap: wrap; max-width: 360px; }
      .download-card,
      .download-card-chrome { flex: 1 1 100%; }
    }
    @media (max-width: 480px) {
      .hero { padding: 60px 16px 50px; }
      .hero-actions { flex-direction: column; align-items: center; }
      .btn { width: 100%; justify-content: center; }
    }
  </style>

  <!-- Privacy-friendly analytics by Plausible -->
  <script async src="https://plausible.io/js/pa-yWGfwxkkKSVs-eTuaKYpy.js"></script>
  <script>
    window.plausible=window.plausible||function(){(plausible.q=plausible.q||[]).push(arguments)},plausible.init=plausible.init||function(i){plausible.o=i||{}};
    plausible.init()
  </script>
</head>
<body>

<div class="glow-bg"></div>

<!-- NAV -->
<nav>
  <div class="nav-inner">
    <a href="{{locale_home_url}}" class="nav-brand" style="text-decoration:none;">
      <span class="emoji">🧠</span> WebBrain<span style="opacity:0.5; font-weight:400;">.one</span>
    </a>
    <div class="nav-links">
      <a href="#features">{{t:nav.features}}</a>
      <a href="#compare">{{t:nav.compare}}</a>
      <a href="#download">{{t:nav.download}}</a>
      <a href="#faq">{{t:nav.faq}}</a>
      <a href="/blog">{{t:nav.blog}}</a>
      <select class="lang-dropdown" id="lang-dropdown" aria-label="{{t:nav.language_aria}}" data-current="{{locale_code}}">
        <option value="en">English</option>
        <option value="es">Español</option>
        <option value="fr">Français</option>
        <option value="tr">Türkçe</option>
        <option value="zh">中文</option>
        <option value="ru">Русский</option>
        <option value="uk">Українська</option>
        <option value="ar">العربية</option>
        <option value="ja">日本語</option>
        <option value="ko">한국어</option>
        <option value="id">Bahasa Indonesia</option>
        <option value="th">ไทย</option>
        <option value="ms">Bahasa Melayu</option>
        <option value="tl">Filipino</option>
      </select>
      <a href="https://github.com/esokullu/webbrain/stargazers" class="gh-stars" target="_blank" rel="noopener" id="gh-stars" data-loading="1" aria-label="{{t:nav.github_stars_aria}}">
        <svg class="gh-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/></svg>
        <svg class="gh-star" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l2.99 6.36L22 9.4l-5 4.96L18.18 22 12 18.5 5.82 22 7 14.36 2 9.4l7.01-1.04L12 2z"/></svg>
        <span class="gh-count">—</span>
      </a>
      <a href="https://github.com/esokullu/webbrain" class="nav-cta" target="_blank">{{t:nav.github}}</a>
    </div>
  </div>
</nav>

<!-- HERO -->
<section class="hero">
  <h1>{{t-html:hero.h1_html}}</h1>
  <p>{{t:hero.description}}</p>
  <div class="hero-actions">
    <a href="#download" class="btn btn-primary">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
      {{t:hero.cta.install}}
    </a>
    <a href="https://github.com/esokullu/webbrain" target="_blank" class="btn btn-secondary">
      <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/></svg>
      {{t:hero.cta.github}}
    </a>
  </div>

  <!-- Browser mockup -->
  <div class="hero-visual">
    <div class="browser-mockup">
      <div class="browser-bar">
        <div class="browser-dots">
          <span></span><span></span><span></span>
        </div>
        <div class="browser-url">{{t:hero.mockup.url}}</div>
      </div>
      <div class="browser-body">
        <div class="browser-page">
          <h3>{{t:hero.mockup.page_title}}</h3>
          <div class="placeholder-line"></div>
          <div class="placeholder-line"></div>
          <div class="placeholder-line"></div>
          <div class="placeholder-line"></div>
          <div class="placeholder-line"></div>
          <div class="placeholder-line"></div>
          <div class="placeholder-line"></div>
          <div class="placeholder-line"></div>
          <div class="placeholder-line"></div>
          <div class="placeholder-line"></div>
        </div>
        <div class="side-panel">
          <div class="sp-header">
            <span class="sp-brand">🧠 WebBrain<span class="sp-domain">.one</span></span>
            <span class="sp-status"></span>
          </div>
          <div class="sp-messages">
            <div class="sp-msg user">{{t:hero.mockup.user_prompt}}</div>
            <div class="sp-msg assistant">
              <div class="step"><span class="check">&#10003;</span> {{t:hero.mockup.step_reading}}</div>
              <div class="step"><span class="check">&#10003;</span> {{t:hero.mockup.step_extracting}}</div>
              <div style="margin-top:6px;">{{t-html:hero.mockup.result_html}}</div>
              <div style="margin-top:4px; font-size:11px; color: var(--text-dim);">
                1. Widget Pro — $29.99<br>
                2. Super Gadget — $49.99<br>
                3. MegaTool X — $19.99<br>
                <span style="color:var(--accent2);">{{t:hero.mockup.result_more}}</span>
              </div>
            </div>
          </div>
          <div class="sp-input">
            <div class="sp-input-box">{{t:hero.mockup.input_placeholder}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- DEMO VIDEO -->
<section class="section" id="demo" style="padding-top: 30px;">
  <div class="section-label">{{t:demo.label}}</div>
  <h2 class="section-title">{{t:demo.title}}</h2>
  <p class="section-subtitle">{{t:demo.subtitle}}</p>
  <div class="video-showcase">
    <div class="video-frame">
      <iframe id="demo-video" src="https://www.youtube.com/embed/3eFAQ-b65J0" data-desktop-src="https://www.youtube.com/embed/3eFAQ-b65J0" data-mobile-src="https://www.youtube.com/embed/Nov3sw7FE_Q?playsinline=1" title="{{t:demo.iframe_title}}" loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    </div>
  </div>
</section>

<!-- FEATURES -->
<section class="section" id="features">
  <div class="section-label">{{t:features.label}}</div>
  <h2 class="section-title">{{t:features.title}}</h2>
  <p class="section-subtitle">{{t:features.subtitle}}</p>

  <div class="features-grid">
    <div class="feature-card">
      <div class="feature-icon">📖</div>
      <h3>{{t:features.page_understanding.title}}</h3>
      <p>{{t:features.page_understanding.desc}}</p>
    </div>
    <div class="feature-card">
      <div class="feature-icon">🤖</div>
      <h3>{{t:features.agent.title}}</h3>
      <p>{{t:features.agent.desc}}</p>
    </div>
    <div class="feature-card">
      <div class="feature-icon">📊</div>
      <h3>{{t:features.extraction.title}}</h3>
      <p>{{t:features.extraction.desc}}</p>
    </div>
    <div class="feature-card">
      <div class="feature-icon">🔌</div>
      <h3>{{t:features.multi_provider.title}}</h3>
      <p>{{t:features.multi_provider.desc}}</p>
    </div>
    <div class="feature-card">
      <div class="feature-icon">🛡️</div>
      <h3>{{t:features.privacy.title}}</h3>
      <p>{{t:features.privacy.desc}}</p>
    </div>
    <div class="feature-card">
      <div class="feature-icon">⚡</div>
      <h3>{{t:features.smart_context.title}}</h3>
      <p>{{t:features.smart_context.desc}}</p>
    </div>
    <div class="feature-card">
      <div class="feature-icon">👁️</div>
      <h3>{{t:features.vision.title}}</h3>
      <p>{{t:features.vision.desc}}</p>
    </div>

    <div class="feature-card">
      <div class="feature-icon">👤</div>
      <h3>{{t:features.profile.title}}</h3>
      <p>{{t:features.profile.desc}}</p>
    </div>
    <div class="feature-card">
      <div class="feature-icon">🍪</div>
      <h3>{{t:features.cookies.title}}</h3>
      <p>{{t:features.cookies.desc}}</p>
    </div>
    <div class="feature-card">
      <div class="feature-icon">🧩</div>
      <h3>{{t:features.captcha.title}}</h3>
      <p>{{t-html:features.captcha.desc}}</p>
    </div>
    <div class="feature-card">
      <div class="feature-icon">🌐</div>
      <h3>{{t:features.multilingual.title}}</h3>
      <p>{{t:features.multilingual.desc}}</p>
    </div>
    <div class="feature-card">
      <div class="feature-icon">💰</div>
      <h3>{{t:features.token_conscious.title}}</h3>
      <p>{{t:features.token_conscious.desc}}</p>
    </div>
  </div>
</section>

<!-- PROVIDERS -->
<section class="section" id="providers" style="padding-top: 40px;">
  <div class="section-label">{{t:providers.label}}</div>
  <h2 class="section-title">{{t:providers.title}}</h2>
  <p class="section-subtitle">{{t:providers.subtitle}}</p>

  <!-- Constellation: central WebBrain core, 11 provider nodes orbiting on
       two arcs (5 above, 6 below). Connection lines drawn in SVG (viewBox
       is in % units via a 0–100 coordinate space so the line endpoints
       follow the % values used to position each node). The node order
       matches the line order so JS can map a hovered node → its line for
       highlight. Local runtimes (llama.cpp, Ollama, LM Studio, vLLM) are
       on the left edges of each arc; cloud providers fan out toward the
       right. Grok / Gemini / DeepSeek / Mistral are reached via the
       OpenAI-compatible config — any OpenAI-style endpoint works. -->
  <div class="provider-constellation" aria-label="{{t:providers.title}}">
    <svg class="constellation-lines" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
      <!-- order: llama.cpp, ollama, openai, anthropic, openrouter, lmstudio, vllm, grok, gemini, deepseek, mistral -->
      <line x1="50" y1="50" x2="10" y2="28"></line>
      <line x1="50" y1="50" x2="28" y2="12"></line>
      <line x1="50" y1="50" x2="50" y2="6"></line>
      <line x1="50" y1="50" x2="72" y2="12"></line>
      <line x1="50" y1="50" x2="90" y2="28"></line>
      <line x1="50" y1="50" x2="8" y2="72"></line>
      <line x1="50" y1="50" x2="24" y2="88"></line>
      <line x1="50" y1="50" x2="40" y2="95"></line>
      <line x1="50" y1="50" x2="60" y2="95"></line>
      <line x1="50" y1="50" x2="76" y2="88"></line>
      <line x1="50" y1="50" x2="92" y2="72"></line>
    </svg>

    <div class="constellation-center" aria-hidden="true">
      <div class="cc-ring cc-ring-2"></div>
      <div class="cc-ring"></div>
      <div class="cc-core">🧠</div>
    </div>

    <a class="provider-node" href="https://github.com/ggerganov/llama.cpp" target="_blank" rel="noopener" style="--x: 10%; --y: 28%; --d: 0s;" data-line="0">
      <div class="pn-bubble local">🦙</div>
      <div class="pn-label">llama.cpp</div>
    </a>
    <a class="provider-node" href="https://ollama.com" target="_blank" rel="noopener" style="--x: 28%; --y: 12%; --d: 0.6s;" data-line="1">
      <div class="pn-bubble ollama">◉</div>
      <div class="pn-label">Ollama</div>
    </a>
    <a class="provider-node" href="https://platform.openai.com" target="_blank" rel="noopener" style="--x: 50%; --y: 6%; --d: 1.2s;" data-line="2">
      <div class="pn-bubble openai">⬡</div>
      <div class="pn-label">OpenAI</div>
    </a>
    <a class="provider-node" href="https://www.anthropic.com" target="_blank" rel="noopener" style="--x: 72%; --y: 12%; --d: 1.8s;" data-line="3">
      <div class="pn-bubble anthropic">◈</div>
      <div class="pn-label">Claude</div>
    </a>
    <a class="provider-node" href="https://openrouter.ai" target="_blank" rel="noopener" style="--x: 90%; --y: 28%; --d: 2.4s;" data-line="4">
      <div class="pn-bubble openrouter">◆</div>
      <div class="pn-label">OpenRouter</div>
    </a>
    <a class="provider-node" href="https://lmstudio.ai" target="_blank" rel="noopener" style="--x: 8%; --y: 72%; --d: 3.0s;" data-line="5">
      <div class="pn-bubble studiolm">✦</div>
      <div class="pn-label">LM Studio</div>
    </a>
    <a class="provider-node" href="https://docs.vllm.ai" target="_blank" rel="noopener" style="--x: 24%; --y: 88%; --d: 3.6s;" data-line="6">
      <div class="pn-bubble vllm">▣</div>
      <div class="pn-label">vLLM</div>
    </a>
    <a class="provider-node" href="https://x.ai/api" target="_blank" rel="noopener" style="--x: 40%; --y: 95%; --d: 4.2s;" data-line="7">
      <div class="pn-bubble grok">✕</div>
      <div class="pn-label">Grok</div>
    </a>
    <a class="provider-node" href="https://ai.google.dev/gemini-api/docs/openai" target="_blank" rel="noopener" style="--x: 60%; --y: 95%; --d: 4.8s;" data-line="8">
      <div class="pn-bubble gemini">◊</div>
      <div class="pn-label">Gemini</div>
    </a>
    <a class="provider-node" href="https://api-docs.deepseek.com" target="_blank" rel="noopener" style="--x: 76%; --y: 88%; --d: 5.4s;" data-line="9">
      <div class="pn-bubble deepseek">⬣</div>
      <div class="pn-label">DeepSeek</div>
    </a>
    <a class="provider-node" href="https://docs.mistral.ai/api/" target="_blank" rel="noopener" style="--x: 92%; --y: 72%; --d: 6.0s;" data-line="10">
      <div class="pn-bubble mistral">▲</div>
      <div class="pn-label">Mistral</div>
    </a>
  </div>
</section>

<!-- MODES -->
<section class="section" id="modes" style="display:none;">
  <div class="section-label">{{t:modes.label}}</div>
  <h2 class="section-title">{{t:modes.title}}</h2>
  <p class="section-subtitle">{{t:modes.subtitle}}</p>

  <div class="modes-grid">
    <div class="mode-card ask">
      <div class="mode-icon">💬</div>
      <h3>{{t:modes.ask.title}}</h3>
      <p>{{t:modes.ask.desc}}</p>
    </div>
    <div class="mode-card act">
      <div class="mode-icon">⚡</div>
      <h3>{{t:modes.act.title}}</h3>
      <p>{{t:modes.act.desc}}</p>
    </div>
  </div>
</section>

<!-- DOWNLOAD -->
<section class="section download-section" id="download">
  <div class="section-label">{{t:download.label}}</div>
  <h2 class="section-title">{{t:download.title}}</h2>
  <p class="section-subtitle">{{t:download.subtitle}}</p>

  <div class="download-cards">
    <div class="download-card download-card-chrome">
      <div class="browser-icon">🌐</div>
      <h3>{{t:download.chrome.name}}</h3>
      <p>{{t-html:download.chrome.desc_html}}</p>
      <div class="download-card-actions">
        <a href="https://chromewebstore.google.com/detail/webbrain/ljhijonmfahplgbbacgcfnaihbjljhhb" target="_blank" rel="noopener noreferrer" class="btn btn-primary">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
          {{t:download.chrome.install}}
        </a>
        <a href="https://github.com/esokullu/webbrain/tree/main/src/chrome" target="_blank" rel="noopener noreferrer" class="btn btn-secondary">
          {{t:download.chrome.source}}
        </a>
      </div>
    </div>
    <div class="download-card">
      <div class="browser-icon">🦊</div>
      <h3>{{t:download.firefox.name}}</h3>
      <p>{{t-html:download.firefox.desc_html}}</p>
      <div class="download-card-actions">
        <a href="https://addons.mozilla.org/en-US/firefox/addon/webbrain/" target="_blank" rel="noopener noreferrer" class="btn btn-primary" style="background: #ff9800;">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
          {{t:download.firefox.install}}
        </a>
        <a href="https://github.com/esokullu/webbrain/tree/main/src/firefox" target="_blank" rel="noopener noreferrer" class="btn btn-secondary">
          {{t:download.firefox.source}}
        </a>
      </div>
    </div>
  </div>
</section>

<!-- COMPARISON TABLE -->
<section class="section" id="compare">
  <div class="section-label">{{t:compare.label}}</div>
  <h2 class="section-title">{{t:compare.title}}</h2>
  <p class="section-subtitle">{{t:compare.subtitle}}</p>

  <!-- vs Browser Plugins -->
  <h3 style="font-size:16px; color:var(--text-dim); margin-bottom:16px; text-align:center;">{{t:compare.vs_plugins.heading}}</h3>
  <div class="compare-table-wrap">
    <table class="compare-table">
      <thead>
        <tr>
          <th>{{t:compare.col_feature}}</th>
          <th class="highlight">{{t:compare.col_webbrain}}</th>
          <th>{{t:compare.col_claude}}</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>{{t:compare.row.open_source}}</td><td class="highlight">{{t:compare.cell.mit}}</td><td>{{t:compare.cell.proprietary}}</td></tr>
        <tr><td>{{t:compare.row.price}}</td><td class="highlight">{{t:compare.cell.free_forever}}</td><td>{{t:compare.cell.claude_pro}}</td></tr>
        <tr><td>{{t:compare.row.local_llm}}</td><td class="highlight">{{t:compare.cell.local_llm_yes}}</td><td>{{t:compare.cell.local_llm_no}}</td></tr>
        <tr><td>{{t:compare.row.multi_provider}}</td><td class="highlight">{{t:compare.cell.multi_provider_yes}}</td><td>{{t:compare.cell.multi_provider_no}}</td></tr>
        <tr><td>{{t:compare.row.chrome}}</td><td class="highlight">{{t:compare.cell.yes_mv3}}</td><td>{{t:compare.cell.yes}}</td></tr>
        <tr><td>{{t:compare.row.firefox}}</td><td class="highlight">{{t:compare.cell.yes_mv2}}</td><td>{{t:compare.cell.no}}</td></tr>
        <tr><td>{{t:compare.row.side_panel}}</td><td class="highlight">{{t:compare.cell.yes}}</td><td>{{t:compare.cell.yes}}</td></tr>
        <tr><td>{{t:compare.row.ask_act}}</td><td class="highlight">{{t:compare.cell.yes}}</td><td>{{t:compare.cell.similar}}</td></tr>
        <tr><td>{{t:compare.row.offline}}</td><td class="highlight">{{t:compare.cell.offline_yes}}</td><td>{{t:compare.cell.offline_no}}</td></tr>
        <tr><td>{{t:compare.row.self_host}}</td><td class="highlight">{{t:compare.cell.yes}}</td><td>{{t:compare.cell.no}}</td></tr>
      </tbody>
    </table>
  </div>

  <!-- vs Agent Frameworks -->
  <h3 style="font-size:16px; color:var(--text-dim); margin: 40px 0 16px; text-align:center;">{{t-html:compare.vs_frameworks.heading_html}}</h3>
  <div class="compare-table-wrap">
    <table class="compare-table">
      <thead>
        <tr>
          <th>{{t:compare.col_aspect}}</th>
          <th class="highlight">{{t:compare.col_webbrain}}</th>
          <th>{{t:compare.col_frameworks}}</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>{{t:compare.row.what_is_it}}</td><td class="highlight">{{t:compare.cell.extension_end_user}}</td><td>{{t:compare.cell.framework_sdk}}</td></tr>
        <tr><td>{{t:compare.row.target_user}}</td><td class="highlight">{{t:compare.cell.anyone}}</td><td>{{t:compare.cell.developers}}</td></tr>
        <tr><td>{{t:compare.row.install}}</td><td class="highlight">{{t:compare.cell.one_click}}</td><td>{{t:compare.cell.python_docker}}</td></tr>
        <tr><td>{{t:compare.row.ui}}</td><td class="highlight">{{t:compare.cell.builtin_panel}}</td><td>{{t:compare.cell.no_ui}}</td></tr>
        <tr><td>{{t:compare.row.browser_control}}</td><td>{{t:compare.cell.content_script_lightweight}}</td><td>{{t:compare.cell.cdp_full}}</td></tr>
        <tr><td>{{t:compare.row.multi_tab}}</td><td>{{t:compare.cell.per_tab_chats}}</td><td>{{t:compare.cell.programmable_multitab}}</td></tr>
        <tr><td>{{t:compare.row.headless}}</td><td>{{t:compare.cell.headless_no}}</td><td>{{t:compare.cell.headless_yes}}</td></tr>
        <tr><td>{{t:compare.row.extensibility}}</td><td>{{t:compare.cell.custom_providers}}</td><td>{{t:compare.cell.python_sdk}}</td></tr>
        <tr><td>{{t:compare.row.best_for}}</td><td class="highlight">{{t:compare.cell.daily_ai}}</td><td>{{t:compare.cell.scraping_testing}}</td></tr>
      </tbody>
    </table>
  </div>

  <p style="text-align:center; color:var(--text-dim); font-size:13px; margin-top:24px; max-width:600px; margin-left:auto; margin-right:auto;">
    {{t:compare.disclaimer}}
  </p>
</section>

<!-- FAQ -->
<section class="section" id="faq">
  <div class="section-label">{{t:faq.label}}</div>
  <h2 class="section-title">{{t:faq.title}}</h2>

  <div class="faq-list">
    <details class="faq-item">
      <summary>{{t:faq.alt_claude.q}}</summary>
      <p>{{t-html:faq.alt_claude.a_html}}</p>
    </details>

    <details class="faq-item">
      <summary>{{t:faq.vs_frameworks.q}}</summary>
      <p>{{t-html:faq.vs_frameworks.a_html}}</p>
    </details>

    <details class="faq-item">
      <summary>{{t:faq.offline.q}}</summary>
      <p>{{t-html:faq.offline.a_html}}</p>
    </details>

    <details class="faq-item">
      <summary>{{t:faq.models_supported.q}}</summary>
      <p>{{t-html:faq.models_supported.a_html}}</p>
    </details>

    <details class="faq-item">
      <summary>{{t:faq.recommended_model.q}}</summary>
      {{t-html:faq.recommended_model.a_html}}
    </details>

    <details class="faq-item">
      <summary>{{t:faq.cors.q}}</summary>
      {{t-html:faq.cors.a_html}}
    </details>

    <details class="faq-item">
      <summary>{{t:faq.firefox.q}}</summary>
      <p>{{t-html:faq.firefox.a_html}}</p>
    </details>

    <details class="faq-item">
      <summary>{{t:faq.firefox_sidebar_move.q}}</summary>
      <p>{{t-html:faq.firefox_sidebar_move.a_html}}</p>
    </details>

    <details class="faq-item">
      <summary>{{t:faq.safe.q}}</summary>
      <p>{{t-html:faq.safe.a_html}}</p>
    </details>

    <details class="faq-item">
      <summary>{{t:faq.scraping.q}}</summary>
      <p>{{t-html:faq.scraping.a_html}}</p>
    </details>

    <details class="faq-item">
      <summary>{{t:faq.api_mutations.q}}</summary>
      {{t-html:faq.api_mutations.a_html}}
    </details>

    <details class="faq-item">
      <summary>{{t:faq.lm_studio.q}}</summary>
      <p>{{t-html:faq.lm_studio.a_html}}</p>
    </details>

    <details class="faq-item">
      <summary>{{t:faq.tab_switch.q}}</summary>
      {{t-html:faq.tab_switch.a_html}}
    </details>

    <details class="faq-item">
      <summary>{{t:faq.profile.q}}</summary>
      {{t-html:faq.profile.a_html}}
    </details>

    <details class="faq-item">
      <summary>{{t:faq.cookies_paywalls.q}}</summary>
      {{t-html:faq.cookies_paywalls.a_html}}
    </details>

    <details class="faq-item">
      <summary>{{t:faq.multilingual.q}}</summary>
      {{t-html:faq.multilingual.a_html}}
    </details>

    <details class="faq-item">
      <summary>{{t:faq.token_conscious.q}}</summary>
      {{t-html:faq.token_conscious.a_html}}
    </details>

    <details class="faq-item">
      <summary>{{t:faq.contribute.q}}</summary>
      <p>{{t-html:faq.contribute.a_html}}</p>
    </details>
  </div>
</section>

<!-- SPREAD THE WORD / OPEN SOURCE -->
<section class="section">
  <div class="oss-banner">
    <h3>{{t:share.title}}</h3>
    <p>{{t:share.desc}}</p>
    <div class="share-row">
      <a href="https://github.com/esokullu/webbrain" target="_blank" rel="noopener" class="btn btn-primary">
        <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18" aria-hidden="true"><path d="M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.57.1.78-.25.78-.55 0-.27-.01-1-.02-1.97-3.2.7-3.87-1.54-3.87-1.54-.52-1.32-1.27-1.67-1.27-1.67-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.18 1.76 1.18 1.02 1.75 2.69 1.25 3.34.95.1-.74.4-1.25.73-1.54-2.55-.29-5.24-1.28-5.24-5.69 0-1.26.45-2.29 1.18-3.1-.12-.29-.51-1.46.11-3.05 0 0 .97-.31 3.18 1.18.92-.26 1.91-.39 2.9-.39.99 0 1.98.13 2.9.39 2.21-1.49 3.18-1.18 3.18-1.18.62 1.59.23 2.76.11 3.05.74.81 1.18 1.84 1.18 3.1 0 4.42-2.69 5.4-5.25 5.68.41.36.78 1.06.78 2.13 0 1.54-.01 2.79-.01 3.17 0 .31.21.66.79.55C20.21 21.39 23.5 17.08 23.5 12 23.5 5.65 18.35.5 12 .5z"/></svg>
        {{t:share.star_btn}}
      </a>
      <a href="{{t:share.x_intent_url}}" target="_blank" rel="noopener" class="btn btn-secondary">
        <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.45-6.231zm-1.161 17.52h1.833L7.084 4.126H5.117l11.966 15.644z"/></svg>
        {{t:share.x_btn}}
      </a>
      <a href="{{t:share.linkedin_intent_url}}" target="_blank" rel="noopener" class="btn btn-secondary">
        <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18" aria-hidden="true"><path d="M20.45 20.45h-3.555v-5.569c0-1.328-.024-3.038-1.852-3.038-1.853 0-2.136 1.447-2.136 2.94v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.268 2.37 4.268 5.455v6.284zM5.34 7.433a2.062 2.062 0 11.001-4.124 2.062 2.062 0 010 4.124zM7.119 20.45H3.555V9h3.564v11.45zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
        {{t:share.linkedin_btn}}
      </a>
    </div>
  </div>
</section>

<!-- FOOTER -->
<footer>
  <div class="safety-note" id="safety">
    <h4>{{t:safety.heading}}</h4>
    <ul>
      <li>{{t:safety.item_1}}</li>
      <li>{{t:safety.item_2}}</li>
      <li>{{t:safety.item_3}}</li>
    </ul>
  </div>
  <div class="footer-inner">
    <span>{{t-html:footer.copyright_html}}</span>
    <div class="footer-links">
      <a href="{{t:share.x_intent_url}}" target="_blank" rel="noopener" aria-label="{{t:share.x_btn}}" title="{{t:share.x_btn}}" class="footer-icon">
        <svg viewBox="0 0 24 24" fill="currentColor" width="14" height="14" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.45-6.231zm-1.161 17.52h1.833L7.084 4.126H5.117l11.966 15.644z"/></svg>
      </a>
      <a href="{{t:share.linkedin_intent_url}}" target="_blank" rel="noopener" aria-label="{{t:share.linkedin_btn}}" title="{{t:share.linkedin_btn}}" class="footer-icon">
        <svg viewBox="0 0 24 24" fill="currentColor" width="14" height="14" aria-hidden="true"><path d="M20.45 20.45h-3.555v-5.569c0-1.328-.024-3.038-1.852-3.038-1.853 0-2.136 1.447-2.136 2.94v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.268 2.37 4.268 5.455v6.284zM5.34 7.433a2.062 2.062 0 11.001-4.124 2.062 2.062 0 010 4.124zM7.119 20.45H3.555V9h3.564v11.45zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
      </a>
      <a href="/blog">{{t:nav.blog}}</a>
      <a href="#safety">{{t:footer.link_safety}}</a>
      <a href="/privacy">{{t:footer.link_privacy}}</a>
      <a href="https://github.com/esokullu/webbrain/issues" target="_blank" rel="noopener">{{t:footer.link_report_bug}}</a>
      <a href="https://github.com/esokullu/webbrain/blob/main/LICENSE" target="_blank" rel="noopener">{{t:footer.link_license}}</a>
      <a href="https://pressreleases.online/org/webbrain.one" target="_blank" rel="noopener">{{t:footer.link_press_releases}}</a>
    </div>
  </div>
</footer>

<script>
  (function () {
    const demoVideo = document.getElementById('demo-video');
    if (!demoVideo) return;

    const mobileQuery = window.matchMedia('(max-width: 768px)');

    function syncDemoVideoSource(event) {
      const isMobile = event.matches ?? mobileQuery.matches;
      const nextSrc = isMobile ? demoVideo.dataset.mobileSrc : demoVideo.dataset.desktopSrc;
      if (nextSrc && demoVideo.src !== nextSrc) {
        demoVideo.src = nextSrc;
      }
    }

    syncDemoVideoSource(mobileQuery);

    if (typeof mobileQuery.addEventListener === 'function') {
      mobileQuery.addEventListener('change', syncDemoVideoSource);
    } else if (typeof mobileQuery.addListener === 'function') {
      mobileQuery.addListener(syncDemoVideoSource);
    }
  })();
</script>

<!-- Provider constellation: light up each node's connection line on
     hover/focus so the relationship to the central WebBrain core is
     visible at a glance. CSS-only would mean a separate selector for
     every node — this is shorter and keeps the SVG data-driven. -->
<script>
  (function () {
    const lines = document.querySelectorAll('.constellation-lines line');
    const nodes = document.querySelectorAll('.provider-node[data-line]');
    if (!lines.length || !nodes.length) return;
    nodes.forEach(function (node) {
      const idx = parseInt(node.dataset.line, 10);
      const line = lines[idx];
      if (!line) return;
      const on = function () { line.classList.add('is-active'); };
      const off = function () { line.classList.remove('is-active'); };
      node.addEventListener('mouseenter', on);
      node.addEventListener('mouseleave', off);
      node.addEventListener('focus', on);
      node.addEventListener('blur', off);
    });
  })();
</script>

<!-- GitHub stars pill — fetches count from the public unauthenticated
     /repos endpoint, caches it in localStorage for 6h to keep visitors well
     under GitHub's 60-req/hour anonymous limit and to render the cached
     value instantly on revisit. Page works fine if the request fails. -->
<script>
  (function () {
    const el = document.getElementById('gh-stars');
    if (!el) return;
    const countEl = el.querySelector('.gh-count');
    const REPO = 'esokullu/webbrain';
    const CACHE_KEY = 'gh-stars:' + REPO;
    const TTL_MS = 6 * 60 * 60 * 1000; // 6 hours

    function fmt(n) {
      if (n == null || isNaN(n)) return '—';
      if (n >= 1000) return (n / 1000).toFixed(n >= 10000 ? 0 : 1).replace(/\.0$/, '') + 'k';
      return String(n);
    }
    function render(n) {
      countEl.textContent = fmt(n);
      el.removeAttribute('data-loading');
    }

    try {
      const cached = JSON.parse(localStorage.getItem(CACHE_KEY) || 'null');
      if (cached && typeof cached.count === 'number') {
        render(cached.count);
        if (Date.now() - cached.ts < TTL_MS) return; // still fresh
      }
    } catch (_) { /* ignore corrupt cache */ }

    fetch('https://api.github.com/repos/' + REPO, { headers: { Accept: 'application/vnd.github+json' } })
      .then(function (r) { return r.ok ? r.json() : null; })
      .then(function (data) {
        if (!data || typeof data.stargazers_count !== 'number') return;
        render(data.stargazers_count);
        try {
          localStorage.setItem(CACHE_KEY, JSON.stringify({ count: data.stargazers_count, ts: Date.now() }));
        } catch (_) { /* storage full or disabled */ }
      })
      .catch(function () { /* offline / blocked — leave whatever we had */ });
  })();
</script>

<!-- Path-preserving language dropdown. Strips any leading locale segment
     from the current path, then prepends the new one so /es/foo → /fr/foo
     instead of collapsing to the locale homepage. -->
<script>
  (function () {
    const LOCALES = ['en', 'es', 'fr', 'tr', 'zh', 'ru', 'uk', 'ar', 'ja', 'ko', 'id', 'th', 'ms', 'tl'];
    const sel = document.getElementById('lang-dropdown');
    if (!sel) return;
    const current = sel.dataset.current || 'en';
    // Show a "switch to" hint as the visible default — Chinese on the English
    // page, English everywhere else. When the dropdown opens we swap the value
    // back to the page's real locale so the highlight is correct and any pick
    // (including the previously-shown hint) fires `change`.
    const suggested = current === 'en' ? 'zh' : 'en';
    sel.value = suggested;
    sel.addEventListener('focus', function () {
      if (sel.value !== current) sel.value = current;
    });
    sel.addEventListener('blur', function () {
      if (sel.value === current) sel.value = suggested;
    });
    sel.addEventListener('change', function () {
      const target = sel.value;
      if (!LOCALES.includes(target)) return;
      if (target === current) return;
      const { pathname, search, hash } = window.location;
      const parts = pathname.split('/').filter(Boolean);
      if (parts.length && LOCALES.includes(parts[0])) {
        parts.shift(); // drop leading locale
      }
      const rest = parts.length ? '/' + parts.join('/') : '/';
      const next = target === 'en' ? rest : '/' + target + rest;
      window.location.href = next + search + hash;
    });
  })();
</script>

</body>
</html>
