:root {
    /* Light, airy base with subtle violet tint */
    --bg: #f7f5ff;
    --bg-elev: #ffffff;
    --bg-panel: #ffffff;
    --ink: #1a1333;
    --ink-soft: #54486e;
    --ink-muted: #8a819e;
    --line: rgba(106, 77, 234, 0.12);
    --line-strong: rgba(106, 77, 234, 0.22);
    --card: #ffffff;
    --card-solid: #ffffff;

    /* Brand — lifted from logo */
    --violet-50: #efeaff;
    --violet-200: #c9b8ff;
    --violet-300: #a88aff;
    --violet-400: #8b6bff;
    --violet-500: #6a4dea;
    --violet-600: #5939d4;
    --violet-700: #3e1fa3;
    --indigo-800: #2a1572;
    --indigo-900: #1a0b4e;

    --grad-hero: linear-gradient(135deg, #8b6bff 0%, #6a4dea 40%, #3e1fa3 100%);
    --grad-btn: linear-gradient(135deg, #a88aff 0%, #6a4dea 50%, #4823b8 100%);
    --grad-btn-hover: linear-gradient(135deg, #b79bff 0%, #7a5dfa 50%, #5833c8 100%);
    --grad-text: linear-gradient(120deg, #1a1333 0%, #3e1fa3 60%, #6a4dea 100%);
    --glow: 0 0 0 1px rgba(168, 138, 255, 0.2), 0 20px 60px -20px rgba(106, 77, 234, 0.55);

    --radius: 14px;
    --radius-lg: 22px;
    --radius-xl: 32px;

    --font-display: "Instrument Serif", "Times New Roman", serif;
    --font-body: "Inter", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;
  }

  * {
    box-sizing: border-box;
  }

  html,
  body {
    margin: 0;
    padding: 0;
  }

  html {
    scroll-behavior: smooth;
    /* Belt-and-suspenders against horizontal scroll: `clip` stops any stray
       wide descendant from making the whole document scroll sideways, and
       (unlike `hidden`) it does NOT create a scroll container, so the sticky
       nav keeps working. Pairs with `body { overflow-x: hidden }` below. */
    overflow-x: clip;
    max-width: 100%;
  }

  body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    line-height: 1.55;
    overflow-x: hidden;
    position: relative;
  }

  /* Global mesh background */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
      radial-gradient(ellipse 70% 50% at 20% 0%, rgba(168, 138, 255, 0.28), transparent 60%),
      radial-gradient(ellipse 55% 45% at 90% 15%, rgba(139, 107, 255, 0.22), transparent 60%),
      radial-gradient(ellipse 50% 40% at 50% 90%, rgba(106, 77, 234, 0.12), transparent 60%);
    pointer-events: none;
    z-index: 0;
    animation: mesh 22s ease-in-out infinite alternate;
  }

  body::after {
    content: "";
    position: fixed;
    inset: 0;
    background-image:
      linear-gradient(rgba(106, 77, 234, 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(106, 77, 234, 0.05) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
  }

  @keyframes mesh {
    0% {
      transform: translate(0, 0);
    }

    50% {
      transform: translate(-2%, 1%);
    }

    100% {
      transform: translate(2%, -1%);
    }
  }

  main,
  nav,
  footer {
    position: relative;
    z-index: 1;
  }

  .wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 28px;
  }

  /* ===== NAV ===== */
  .nav {
    position: sticky;
    top: 0;
    z-index: 50;
    transition: backdrop-filter .2s ease, background .2s ease, border-color .2s ease;
    border-bottom: 1px solid transparent;
  }

  .nav.scrolled {
    background: rgba(247, 245, 255, 0.82);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-color: var(--line);
  }

  .nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 120px;
    gap: 24px;
    flex-wrap: nowrap;
  }

  .logo {
    flex-shrink: 0;
  }

  .logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--ink);
    flex-shrink: 0;
  }

  .logo img {
    display: block;
    max-height: 110px;
    width: auto;
  }

  footer .logo img {
    height: 48px;
  }

  @media (max-width: 960px) {
    .logo img {
      height: 44px;
    }

    footer .logo img {
      height: 40px;
    }
  }

  .nav-links {
    display: flex;
    gap: 28px;
    align-items: center;
  }

  .nav-links a {
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 450;
    transition: color .15s;
  }

  .nav-links a:hover {
    color: var(--ink);
  }

  .nav-cta {
    display: flex;
    gap: 10px;
    align-items: center;
  }

  /* ===== MOBILE NAV (hamburger + drawer) ===== */
  /* Hidden on desktop; revealed inside the ≤960px media query below. */
  .nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    margin-left: 4px;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 12px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, border-color .15s;
  }

  .nav-toggle:hover {
    background: rgba(106, 77, 234, 0.06);
    border-color: var(--line-strong);
  }

  .nav-toggle-bar {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: var(--ink);
    transition: transform .2s ease, opacity .15s ease;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .mobile-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(247, 245, 255, 0.97);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 48px -24px rgba(60, 55, 100, 0.35);
    max-height: calc(100vh - 100%);
    overflow-y: auto;
  }

  .mobile-menu.open {
    display: block;
  }

  .mobile-menu-inner {
    display: flex;
    flex-direction: column;
    padding: 16px 28px 24px;
    gap: 2px;
  }

  .mobile-menu-inner>a {
    color: var(--ink);
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    padding: 14px 4px;
    border-bottom: 1px solid var(--line);
  }

  .mobile-menu-inner>a:active {
    color: var(--violet-600);
  }

  .mobile-menu-cta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
  }

  .mobile-menu-cta .btn {
    width: 100%;
    justify-content: center;
    padding: 13px 18px;
    font-size: 15px;
  }

  /* ===== BUTTONS ===== */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 999px;
    font: inherit;
    font-weight: 500;
    font-size: 14.5px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: transform .18s ease, background .2s ease, border-color .2s ease, box-shadow .25s ease;
    white-space: nowrap;
    position: relative;
  }

  .btn:active {
    transform: translateY(1px);
  }

  .btn-primary {
    background: var(--grad-btn);
    color: #fff;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 10px 30px -10px rgba(106, 77, 234, 0.7);
  }

  .btn-primary:hover {
    background: var(--grad-btn-hover);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 14px 40px -10px rgba(106, 77, 234, 0.85);
  }

  .btn-ghost {
    background: transparent;
    color: var(--ink);
  }

  .btn-ghost:hover {
    background: rgba(106, 77, 234, 0.08);
  }

  .btn-outline {
    background: #ffffff;
    color: var(--ink);
    border-color: var(--line-strong);
  }

  .btn-outline:hover {
    border-color: var(--violet-500);
    background: #faf8ff;
  }

  .btn-lg {
    padding: 15px 24px;
    font-size: 15.5px;
  }

  /* ===== HERO ===== */
  .hero {
    padding: 32px 0 40px;
    position: relative;
  }

  /* Give the headline column meaningfully more room than the chat preview —
     the title is the visual anchor and needs ~640px to breathe so lines like
     "Your 24/7 assistant." stay on one row. The chat card has a fixed max
     width on the right (~440px) and the gap shrinks accordingly. */
  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(380px, 1fr);
    gap: 56px;
    align-items: center;
  }

  .hero-grid> :first-child {
    min-width: 0;
  }

  .pill {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 6px 14px 6px 8px;
    border-radius: 999px;
    background: #ffffff;
    color: var(--violet-700);
    font-size: 12.5px;
    font-weight: 500;
    border: 1px solid var(--line-strong);
    box-shadow: 0 2px 8px rgba(62, 31, 163, 0.08);
  }

  .pill .tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--grad-btn);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
  }

  h1.display {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(48px, 6vw, 86px);
    line-height: 0.98;
    letter-spacing: -0.035em;
    margin: 22px 0 22px;
    color: var(--ink);
    /* Balance the line-break points so "24/7" can't end a line right before
       "assistant." (the italic 7's slant + gradient text-clip would otherwise
       chop the glyph at the line edge). */
    text-wrap: balance;
  }

  h1.display em {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    background: linear-gradient(120deg, #6a4dea 0%, #8b6bff 60%, #3e1fa3 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -0.01em;
  }

  .lede {
    font-size: 19px;
    color: var(--ink-soft);
    max-width: 540px;
    line-height: 1.55;
    text-wrap: pretty;
  }

  .hero-actions {
    display: flex;
    gap: 12px;
    margin-top: 22px;
    flex-wrap: wrap;
  }

  /* ===== HERO URL TRY-IT FORM ===== */
  .hero-url-form {
    margin-top: 32px;
    max-width: 540px;
    background: #ffffff;
    border: 1px solid var(--line-strong);
    border-radius: 18px;
    padding: 14px 14px 12px;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .6) inset,
      0 10px 30px -14px rgba(62, 31, 163, 0.22);
    position: relative;
    transition: border-color .2s, box-shadow .2s;
  }

  .hero-url-form:focus-within {
    border-color: var(--violet-400);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .6) inset,
      0 0 0 4px rgba(168, 138, 255, 0.18),
      0 14px 36px -14px rgba(62, 31, 163, 0.32);
  }

  .hero-url-form.has-error {
    border-color: oklch(0.62 0.18 25);
  }

  .hero-url-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--violet-700);
    padding: 0 4px 8px;
  }

  .hero-url-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--grad-btn);
    box-shadow: 0 0 0 3px rgba(168, 138, 255, 0.25);
    animation: heroPulse 2s ease-in-out infinite;
    flex-shrink: 0;
  }

  @keyframes heroPulse {

    0%,
    100% {
      box-shadow: 0 0 0 3px rgba(168, 138, 255, 0.25);
    }

    50% {
      box-shadow: 0 0 0 5px rgba(168, 138, 255, 0.10);
    }
  }

  .hero-url-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    background: #faf8ff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 5px 5px 5px 12px;
    transition: border-color .2s, background .2s;
  }

  .hero-url-form:focus-within .hero-url-row {
    background: #ffffff;
    border-color: var(--violet-300);
  }

  .hero-url-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--violet-500);
    flex-shrink: 0;
  }

  .hero-url-input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 15px;
    color: var(--ink);
    padding: 10px 4px;
    outline: 0;
    font-family: var(--font-body);
  }

  .hero-url-input::placeholder {
    color: var(--ink-muted);
  }

  .hero-url-submit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--grad-btn);
    color: #fff;
    border: 0;
    border-radius: 9px;
    padding: 0 18px;
    font: inherit;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
    box-shadow: 0 6px 18px -6px rgba(106, 77, 234, 0.55);
    flex-shrink: 0;
  }

  .hero-url-submit:hover {
    background: var(--grad-btn-hover);
    transform: translateY(-1px);
  }

  .hero-url-submit:active {
    transform: translateY(0);
  }

  .hero-url-submit:disabled {
    opacity: 0.7;
    cursor: progress;
  }

  .hero-url-foot {
    padding: 9px 4px 1px;
    font-size: 12px;
    line-height: 1.4;
    min-height: 18px;
  }

  .hero-url-caption {
    color: var(--ink-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .hero-url-error {
    color: oklch(0.52 0.18 25);
    font-weight: 500;
  }

  @media (max-width: 560px) {
    .hero-url-row {
      flex-wrap: wrap;
      padding: 6px;
    }

    .hero-url-icon {
      padding-left: 8px;
    }

    .hero-url-input {
      flex-basis: 100%;
      padding: 8px 10px;
    }

    .hero-url-submit {
      width: 100%;
      padding: 12px 18px;
      justify-content: center;
    }
  }

  .hero-trust {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 540px;
  }

  .hero-trust .trust-box {
    background: #fff;
    border: 1px solid var(--ink-line);
    border-radius: 14px;
    padding: 14px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 6px 18px -10px rgba(60, 55, 100, 0.18);
  }

  .hero-trust .trust-num {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.02em;
    background: var(--grad-btn);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
  }

  .hero-trust .trust-label {
    font-size: 11.5px;
    color: var(--ink-muted);
    line-height: 1.35;
    font-weight: 500;
  }

  /* ===== CHAT CARD (matches the live ovebot widget) ===== */
  .chat-stack {
    position: relative;
    perspective: 1400px;
  }

  /* Theme toggle that sits above the chat card */
  .theme-toggle {
    display: inline-flex;
    background: #ffffff;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
    margin-bottom: 14px;
    box-shadow: 0 4px 14px -6px rgba(62, 31, 163, 0.25);
    position: relative;
    z-index: 3;
  }

  .theme-toggle button {
    border: 0;
    background: transparent;
    padding: 7px 14px;
    border-radius: 999px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink-soft);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .2s, color .2s;
  }

  .theme-toggle button:hover {
    color: var(--ink);
  }

  .theme-toggle button.active {
    background: var(--grad-btn);
    color: #fff;
    box-shadow: 0 4px 12px -4px rgba(106, 77, 234, 0.5);
  }

  .theme-toggle svg {
    width: 14px;
    height: 14px;
  }

  .chat-card {
    /* Real widget palette — purple-tinted dark default, matches oklch tokens in widget */
    --w-accent: oklch(0.68 0.17 280);
    --w-accent-2: oklch(0.74 0.16 280);
    --w-bg-1: oklch(0.19 0.022 280);
    --w-bg-2: oklch(0.23 0.022 280);
    --w-surface: oklch(0.30 0.025 280);
    --w-surface-2: oklch(0.36 0.028 280);
    --w-line: oklch(0.42 0.025 280);
    --w-line-soft: oklch(0.46 0.022 280 / 0.4);
    --w-line-strong: oklch(0.46 0.022 280);
    --w-text: oklch(0.96 0.005 280);
    --w-muted: oklch(0.72 0.012 280);
    --w-subtle: oklch(0.55 0.015 280);

    background: var(--w-bg-1);
    border: 1px solid var(--w-line);
    border-radius: 16px;
    box-shadow:
      0 14px 36px oklch(0 0 0 / 0.45),
      0 4px 10px oklch(0 0 0 / 0.30);
    overflow: hidden;
    position: relative;
    transform: rotate(-1deg);
    color: var(--w-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }

  .chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--w-bg-2);
    border-bottom: 1px solid var(--w-line);
  }

  .chat-head .who {
    color: var(--w-text);
  }

  .chat-head .status {
    color: var(--w-muted);
  }

  .chat-head-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  .avatar {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid oklch(1 0 0 / 0.15);
    background: var(--w-accent);
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
  }

  .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .chat-card.light .chat-head .who {
    color: oklch(0.18 0.01 270);
  }

  .chat-card .chat-head .who {
    color: var(--w-text);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
  }

  .chat-card.light .chat-head .status .status-dot {
    background: oklch(0.62 0.15 145);
  }

  .status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: oklch(0.72 0.16 145);
    margin-right: 5px;
    vertical-align: 1px;
    box-shadow: 0 0 0 3px oklch(0.72 0.16 145 / 0.18);
  }

  .chat-head .status {
    font-size: 12px;
    color: var(--w-muted);
    margin-top: 2px;
    line-height: 1.2;
  }

  .chat-head .x-btn {
    background: none;
    border: 0;
    color: var(--w-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
  }

  .chat-body {
    padding: 14px;
    height: 420px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    background: var(--w-bg-1);
  }

  .msg-wrap {
    display: flex;
    width: 100%;
  }

  .msg-wrap.user {
    justify-content: flex-end;
  }

  .msg-wrap.bot {
    justify-content: flex-start;
  }

  .bubble {
    max-width: 82%;
    border-radius: 8px;
    padding: 9px 13px;
    font-size: 14px;
    line-height: 1.5;
    animation: rise .4s cubic-bezier(.2, .7, .2, 1) both;
    color: #fff;
  }

  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(8px) scale(.98);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  .bubble p {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
  }

  .bubble.bot {
    background: var(--w-surface);
    color: var(--w-text);
    border: 1px solid var(--w-line);
    box-shadow: 0 1px 2px oklch(0 0 0 / 0.18);
  }

  .bubble.user {
    background: var(--w-accent);
    color: oklch(1 0 0);
  }

  .bubble .ts {
    font-size: 10px;
    color: var(--w-subtle);
    margin-top: 4px;
    display: block;
  }

  .chat-card.light .bubble.user {
    color: oklch(1 0 0);
  }

  .chat-card.light .bubble.user .ts {
    color: oklch(1 0 0 / 0.7);
  }

  .bubble .rag-badge {
    display: inline-block;
    background: linear-gradient(135deg, #10b981, #059669);
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 999px;
    margin-left: 6px;
    color: #fff;
  }

  .bubble.typing {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    padding: 11px 14px;
  }

  .bubble.typing span {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #cbd5e1;
    animation: ocwBounce 1.4s infinite ease-in-out both;
  }

  .bubble.typing span:nth-child(1) {
    animation-delay: -.32s;
  }

  .bubble.typing span:nth-child(2) {
    animation-delay: -.16s;
  }

  @keyframes ocwBounce {

    0%,
    80%,
    100% {
      transform: scale(0);
    }

    40% {
      transform: scale(1);
    }
  }

  /* ===== Product list — vertical rows (real widget v1-row) ===== */
  .v1-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 2px;
    align-self: stretch;
    margin-top: 2px;
  }

  .v1-row {
    display: flex;
    gap: 12px;
    padding: 10px;
    background: var(--w-surface);
    border: 1px solid var(--w-line);
    border-radius: 12px;
    cursor: pointer;
    transition: all .18s ease;
    align-items: stretch;
    text-decoration: none;
  }

  .v1-row:hover {
    border-color: var(--w-accent);
    box-shadow: 0 4px 14px oklch(0.55 0.18 280 / 0.10);
    transform: translateY(-1px);
  }

  .v1-thumb {
    width: 76px;
    height: 76px;
    border-radius: 9px;
    background: var(--w-bg-1) center/cover no-repeat;
    flex-shrink: 0;
    border: 1px solid var(--w-line-soft);
  }

  .v1-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .v1-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.01em;
    color: var(--w-text);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .v1-meta-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--w-muted);
    flex-wrap: wrap;
  }

  .v1-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 4px;
    gap: 8px;
  }

  .v1-price {
    font-size: 15px;
    font-weight: 700;
    color: var(--w-text);
    letter-spacing: -.015em;
  }

  .v1-price-cur {
    font-size: 11px;
    font-weight: 500;
    color: var(--w-muted);
    margin-left: 2px;
  }

  .v1-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--w-accent);
    padding: 5px 10px;
    border-radius: 8px;
    background: color-mix(in oklch, var(--w-accent) 14%, transparent);
    transition: background .15s, transform .15s;
  }

  .v1-row:hover .v1-action {
    background: color-mix(in oklch, var(--w-accent) 22%, transparent);
  }

  .v1-action svg {
    width: 11px;
    height: 11px;
    transition: transform .18s;
  }

  .v1-row:hover .v1-action svg {
    transform: translateX(2px);
  }

  /* Stock pill — matches widget */
  .ocw-stock {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    letter-spacing: .01em;
  }

  .ocw-stock::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
  }

  .chat-card.light .ocw-stock-in {
    background: oklch(0.95 0.04 145);
    color: oklch(0.45 0.13 145);
  }

  .chat-card.light .ocw-stock-pre {
    background: oklch(0.96 0.04 55);
    color: oklch(0.50 0.16 55);
  }

  .chat-card.light .ocw-stock-out {
    background: oklch(0.95 0.04 25);
    color: oklch(0.50 0.18 25);
  }

  .ocw-stock-in {
    background: oklch(0.32 0.07 145 / 0.55);
    color: oklch(0.78 0.16 145);
  }

  .ocw-stock-pre {
    background: oklch(0.35 0.08 55 / 0.55);
    color: oklch(0.80 0.16 55);
  }

  .ocw-stock-out {
    background: oklch(0.35 0.09 25 / 0.55);
    color: oklch(0.74 0.18 25);
  }

  /* Filter chips above product list */
  .v1-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 0 2px;
    margin-bottom: 2px;
  }

  .v1-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 500;
    padding: 6px 11px;
    border-radius: 999px;
    background: var(--w-surface);
    border: 1px solid var(--w-line);
    color: var(--w-text);
    cursor: pointer;
    transition: all .15s ease;
  }

  .v1-chip:hover {
    border-color: var(--w-accent);
    background: color-mix(in oklch, var(--w-accent) 12%, transparent);
  }

  .v1-chip.active {
    background: var(--w-accent);
    border-color: var(--w-accent);
    color: #fff;
  }

  .v1-chip svg {
    width: 12px;
    height: 12px;
  }

  /* See-all strip */
  .v1-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    background: var(--w-surface);
    border: 1px solid var(--w-line);
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: all .15s ease;
    margin-top: 4px;
  }

  .v1-strip:hover {
    border-color: var(--w-accent);
    background: color-mix(in oklch, var(--w-accent) 8%, transparent);
  }

  .v1-strip-thumbs {
    display: flex;
    flex-shrink: 0;
  }

  .v1-strip-thumb {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--w-bg-1);
    margin-left: -8px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 1px 2px oklch(0 0 0 / 0.15);
  }

  .v1-strip-thumb:first-child {
    margin-left: 0;
  }

  .v1-strip-thumb-more {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--w-text);
    color: var(--w-bg-1);
    font-size: 9.5px;
    font-weight: 700;
    margin-left: -8px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--w-bg-1);
  }

  .v1-strip-text {
    flex: 1;
    font-size: 12.5px;
    line-height: 1.25;
    min-width: 0;
  }

  .v1-strip-text strong {
    color: var(--w-text);
    font-weight: 600;
    display: block;
  }

  .v1-strip-text span {
    color: var(--w-muted);
    font-size: 11px;
    font-weight: 500;
  }

  .v1-strip-arrow {
    color: var(--w-accent);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    transition: transform .18s;
  }

  .v1-strip:hover .v1-strip-arrow {
    transform: translateX(2px);
  }

  .v1-strip-arrow svg {
    width: 16px;
    height: 16px;
  }

  /* Legacy carousel (kept hidden — superseded by v1-row) */
  .carousel-wrap {
    display: none;
    position: relative;
    margin: 6px 4px;
    overflow: visible;
    animation: rise .4s cubic-bezier(.2, .7, .2, 1) both;
  }

  .carousel-arrow {
    position: absolute;
    top: 30%;
    transform: translateY(-50%);
    background: var(--w-accent);
    border: 0;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 5;
    color: #fff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
  }

  .carousel-arrow:hover {
    transform: translateY(-50%) scale(1.12);
  }

  .carousel-arrow.left {
    left: -15px;
  }

  .carousel-arrow.right {
    right: -15px;
  }

  .carousel-arrow svg {
    width: 16px;
    height: 16px;
  }

  .products-grid {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
  }

  .products-grid::-webkit-scrollbar {
    display: none;
  }

  .product-card {
    background: var(--w-surface);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--w-line-soft);
    flex: 0 0 calc(50% - 5px);
    display: flex;
    flex-direction: column;
    transition: border-color .3s, box-shadow .3s, transform .3s;
  }

  .product-card.center {
    border-color: var(--w-line-strong);
    box-shadow: 0 8px 16px oklch(0 0 0 / 0.35);
  }

  .product-card .product-img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
    background: var(--w-bg-1);
  }

  .product-body {
    padding: 8px;
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .product-card .name {
    color: var(--w-text);
    font-weight: 600;
    font-size: 13px;
    line-height: 1.3;
    margin: 0 0 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .product-card .ref {
    color: var(--w-subtle);
    font-size: 9px;
    font-family: var(--font-mono);
    margin: 0 0 3px;
  }

  .product-card .price {
    color: var(--w-text);
    font-weight: 700;
    font-size: 13px;
    margin: 0 0 4px;
  }

  .product-card .desc {
    color: var(--w-muted);
    font-size: 11px;
    line-height: 1.3;
    flex: 1;
    margin: 0 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
    margin-top: auto;
  }

  .stock-badge {
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 4px;
    background: oklch(0.32 0.07 145 / 0.6);
    color: oklch(0.78 0.16 145);
    white-space: nowrap;
  }

  .stock-badge.out {
    background: oklch(0.35 0.09 25 / 0.6);
    color: oklch(0.74 0.18 25);
  }

  .buy-btn {
    background: var(--w-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 500;
    padding: 4px 9px;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    border: 0;
    cursor: pointer;
    font-family: inherit;
  }

  /* Input */
  .chat-input-wrapper {
    background: var(--w-bg-2);
    border-top: 1px solid var(--w-line);
    padding: 10px;
    color: var(--w-text);
  }

  .chat-input-row {
    display: flex;
    gap: 8px;
    align-items: center;
  }

  .chat-input-row textarea {
    flex: 1;
    background: var(--w-surface);
    color: var(--w-text);
    border: 1.5px solid var(--w-accent);
    border-radius: 22px;
    padding: 10px 18px;
    resize: none;
    font: inherit;
    font-size: 14px;
    outline: 0;
    height: 44px;
    line-height: 1.4;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .chat-input-row textarea::placeholder {
    color: var(--w-subtle);
  }

  .chat-input-row textarea:focus {
    border-color: var(--w-accent);
    box-shadow: 0 0 0 3px oklch(0.68 0.17 280 / 0.18);
  }

  .send-btn {
    background: #615ED6;
    color: #ffffff;
    border: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
  }

  .send-btn:hover:not(:disabled) {
    background: oklch(from #615ED6 calc(l - 0.05) c h);
    transform: scale(1.05);
  }

  .send-btn:disabled {
    background: rgba(97, 94, 214, 0.18);
    color: #615ED6;
    cursor: not-allowed;
  }

  .send-btn svg {
    width: 18px;
    height: 18px;
    pointer-events: none;
  }

  .meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 2px 2px;
    gap: 8px;
  }

  .chat-card.light .powered {
    color: var(--w-muted);
  }

  .chat-card.light .powered b {
    color: var(--w-text);
  }

  .chat-card.light .char-count {
    color: var(--w-subtle);
  }

  .powered {
    font-size: 11px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .powered a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: inherit;
    text-decoration: none;
  }

  .powered img {
    width: 70px;
    display: block;
    border-radius: 2px;
  }

  .powered b {
    color: #94a3b8;
    font-weight: 600;
  }

  .char-count {
    font-size: 11px;
    color: #64748b;
  }

  /* ===== Task CTA card (opens form drawer) ===== */
  .task-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--w-surface);
    border: 1px solid var(--w-line);
    border-radius: 14px;
    padding: 12px 14px;
    margin: 6px 0 4px;
    text-align: left;
    width: 100%;
    cursor: pointer;
    transition: all .18s ease;
  }

  .task-cta:hover {
    border-color: var(--w-accent);
    background: color-mix(in oklch, var(--w-accent) 8%, transparent);
    transform: translateY(-1px);
  }

  .task-cta-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: color-mix(in oklch, var(--w-accent) 14%, transparent);
    color: var(--w-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .task-cta-icon svg {
    width: 18px;
    height: 18px;
  }

  .task-cta-text {
    flex: 1;
    min-width: 0;
  }

  .task-cta-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--w-text);
    display: block;
    line-height: 1.3;
    letter-spacing: -.01em;
  }

  .task-cta-sub {
    font-size: 11.5px;
    color: var(--w-muted);
    display: block;
    line-height: 1.35;
    margin-top: 2px;
  }

  .task-cta-arrow {
    color: var(--w-accent);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    transition: transform .18s ease;
  }

  .task-cta-arrow svg {
    width: 16px;
    height: 16px;
  }

  .task-cta:hover .task-cta-arrow {
    transform: translateX(2px);
  }

  .task-cta.done {
    border-color: oklch(0.65 0.15 145);
    background: oklch(0.97 0.02 145);
  }

  .chat-card.light .task-cta.done {
    background: oklch(0.97 0.02 145);
  }

  .task-cta.done .task-cta-icon {
    background: oklch(0.65 0.15 145);
    color: #fff;
  }

  .task-cta.done .task-cta-title {
    color: oklch(0.32 0.10 145);
  }

  .task-cta.done .task-cta-arrow {
    display: none;
  }

  /* ===== Drawer (slides over chat body for forms) ===== */
  .chat-card {
    position: relative;
  }

  .v1-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 17, 28, 0.42);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 5;
  }

  .v1-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }

  .v1-drawer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 70%;
    max-height: 360px;
    background: var(--w-bg-1);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    z-index: 6;
    transform: translateY(100%);
    transition: transform .32s cubic-bezier(.22, .9, .3, 1.1);
    display: flex;
    flex-direction: column;
    box-shadow: 0 -10px 40px -10px rgba(0, 0, 0, .35);
    overflow: hidden;
  }

  .v1-drawer.open {
    transform: translateY(0);
  }

  .v1-drawer-handle {
    width: 36px;
    height: 4px;
    background: var(--w-line);
    border-radius: 999px;
    margin: 8px auto 0;
    flex-shrink: 0;
  }

  .v1-drawer-header {
    padding: 6px 14px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--w-line);
    flex-shrink: 0;
  }

  .v1-drawer-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.015em;
    margin: 0;
    color: var(--w-text);
  }

  .v1-drawer-title-sub {
    font-size: 11.5px;
    color: var(--w-muted);
    margin: 1px 0 0;
  }

  .v1-drawer-close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: var(--w-surface-2);
    color: var(--w-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
  }

  .v1-drawer-body {
    padding: 12px 14px 14px;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .v1-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .v1-field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--w-text);
    letter-spacing: -.005em;
  }

  .v1-field input,
  .v1-field textarea,
  .v1-field select {
    background: var(--w-surface);
    border: 1px solid var(--w-line);
    border-radius: 9px;
    padding: 8px 11px;
    color: var(--w-text);
    font-size: 13px;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
  }

  .v1-field input:focus,
  .v1-field textarea:focus {
    outline: none;
    border-color: var(--w-accent);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--w-accent) 18%, transparent);
  }

  .v1-typed-cursor {
    display: inline-block;
    width: 1px;
    height: 14px;
    background: var(--w-accent);
    margin-left: 1px;
    animation: blink 1s infinite step-end;
    vertical-align: -2px;
  }

  @keyframes blink {
    50% {
      opacity: 0;
    }
  }

  .v1-submit {
    margin-top: 2px;
    padding: 9px 14px;
    border-radius: 10px;
    border: 0;
    background: var(--w-accent);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
  }

  .v1-submit:hover {
    filter: brightness(1.1);
  }

  .v1-otp-help {
    text-align: center;
    font-size: 12px;
    color: var(--w-muted);
    padding: 4px 0 8px;
  }

  .v1-otp-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 4px 0 8px;
  }

  .v1-otp-cell {
    width: 38px;
    height: 44px;
    border-radius: 10px;
    border: 1.5px solid var(--w-line);
    background: var(--w-surface);
    color: var(--w-text);
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .18s ease;
  }

  .v1-otp-cell.filled {
    border-color: var(--w-accent);
    background: var(--w-surface);
    color: var(--w-text);
  }

  .v1-otp-cell.active {
    border-color: var(--w-accent);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--w-accent) 18%, transparent);
  }

  .v1-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 16px;
    gap: 10px;
  }

  .v1-success .check-mark {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: oklch(0.65 0.15 145);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 28px -8px oklch(0.65 0.15 145 / .6);
  }

  .v1-success .check-mark svg {
    width: 26px;
    height: 26px;
  }

  .v1-success h4 {
    margin: 4px 0 0;
    font-size: 15px;
    color: var(--w-text);
    letter-spacing: -.01em;
  }

  .v1-success p {
    margin: 0;
    font-size: 12.5px;
    color: var(--w-muted);
  }

  /* ===== Light theme overrides (real widget palette — oklch tokens) ===== */
  .chat-card.light {
    --w-accent: oklch(0.55 0.18 280);
    --w-accent-2: oklch(0.49 0.18 280);
    --w-bg-1: oklch(1 0 0);
    --w-bg-2: oklch(0.985 0.005 280);
    --w-surface: oklch(1 0 0);
    --w-surface-2: oklch(0.97 0.005 280);
    --w-line: oklch(0.92 0.008 280);
    --w-line-soft: oklch(0.92 0.008 280 / 0.6);
    --w-line-strong: oklch(0.88 0.01 280);
    --w-text: oklch(0.22 0.02 270);
    --w-muted: oklch(0.50 0.015 270);
    --w-subtle: oklch(0.65 0.012 270);
    background: var(--w-bg-1);
    color: var(--w-text);
    border-color: var(--w-line);
    box-shadow:
      0 12px 32px oklch(0 0 0 / 0.10),
      0 4px 8px oklch(0 0 0 / 0.04);
  }

  .chat-card.light .stock-badge {
    background: oklch(0.95 0.04 145);
    color: oklch(0.45 0.13 145);
  }

  .chat-card.light .stock-badge.out {
    background: oklch(0.95 0.04 25);
    color: oklch(0.50 0.18 25);
  }

  .chat-card.light .chat-input-row textarea:focus {
    box-shadow: 0 0 0 2px oklch(0.55 0.18 280 / 0.20);
  }

  /* Light variant for the demo right pane — uses the same oklch tokens as .chat-card.light */
  .demo-right.light {
    --w-accent: oklch(0.55 0.18 280);
    --w-accent-2: oklch(0.49 0.18 280);
    --w-accent-mid: oklch(0.55 0.18 280 / 0.20);
    --w-bg-1: oklch(0.99 0.005 280);
    --w-bg-2: oklch(0.97 0.008 280);
    --w-surface: oklch(1 0 0);
    --w-line: oklch(0.90 0.012 280);
    --w-line-soft: oklch(0.92 0.010 280);
    --w-line-strong: oklch(0.84 0.014 280);
    --w-text: oklch(0.20 0.012 280);
    --w-muted: oklch(0.46 0.015 280);
    --w-subtle: oklch(0.62 0.013 280);
    background: var(--w-bg-1);
    color: var(--w-text);
  }

  /* Theme toggle inside the demo-left column */
  .demo-theme-toggle {
    display: inline-flex;
    background: #ffffff;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
    margin-top: 18px;
    align-self: flex-start;
  }

  .demo-theme-toggle button {
    border: 0;
    background: transparent;
    padding: 6px 12px;
    border-radius: 999px;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-soft);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .2s, color .2s;
  }

  .demo-theme-toggle button.active {
    background: var(--grad-btn);
    color: #fff;
  }

  .demo-theme-toggle svg {
    width: 13px;
    height: 13px;
  }

  .floating-chip {
    position: absolute;
    background: #ffffff;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 10px 16px;
    font-size: 12.5px;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 20px 40px -12px rgba(62, 31, 163, 0.25);
    animation: float 6s ease-in-out infinite;
  }

  .floating-chip strong {
    color: var(--violet-700);
  }

  .floating-chip .dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--grad-btn);
    box-shadow: 0 0 10px var(--violet-400);
  }

  .chip-a {
    top: 6px;
    right: -8px;
    animation-delay: -1s;
    transform: rotate(3deg);
    z-index: 4;
  }

  .chip-b {
    bottom: -36px;
    left: -16px;
    animation-delay: -3s;
    transform: rotate(-2deg);
    z-index: 4;
  }

  @keyframes float {

    0%,
    100% {
      transform: translateY(0) rotate(var(--r, 0deg));
    }

    50% {
      transform: translateY(-10px) rotate(var(--r, 0deg));
    }
  }

  /* ===== SECTIONS ===== */
  section {
    padding: 16px 0;
    position: relative;
  }

  #how {
    padding: 24px 0 8px;
  }

  #features {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  #use-cases {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  #demo {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  #workspace {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  #configurator {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  #languages.lang-section {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .cta-block {
    padding: 40px 52px;
  }

  .sec-head {
    max-width: 760px;
    margin-bottom: 44px;
  }

  .sec-head.center {
    margin: 0 auto 44px;
    text-align: center;
  }

  /* ===== LANGUAGES ===== */
  .lang-section {
    background: linear-gradient(180deg, transparent 0%, rgba(168, 138, 255, 0.04) 50%, transparent 100%);
  }

  .lang-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    max-width: 980px;
    margin: 0 auto;
  }

  .lang-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink);
    transition: border-color .2s, transform .2s, box-shadow .2s;
  }

  .lang-chip:hover {
    border-color: var(--violet-500);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -8px rgba(106, 77, 234, 0.25);
  }

  .lang-flag {
    font-size: 18px;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08));
  }

  .lang-flag-img {
    width: 22px;
    height: 16px;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
    display: block;
  }

  .lang-foot {
    text-align: center;
    margin-top: 28px;
    font-size: 14px;
    color: var(--ink-soft);
  }

  .lang-foot strong {
    color: var(--violet-700);
  }

  .sec-eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--violet-700);
    margin-bottom: 16px;
    padding: 5px 12px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid var(--line-strong);
  }

  h2.sec-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(36px, 4.4vw, 58px);
    line-height: 1.02;
    letter-spacing: -0.03em;
    margin: 0 0 20px;
    color: var(--ink);
  }

  h2.sec-title em {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    background: linear-gradient(120deg, #6a4dea, #3e1fa3);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .sec-lede {
    font-size: 17px;
    color: var(--ink-soft);
    text-wrap: pretty;
    max-width: 620px;
  }

  .sec-head.center .sec-lede {
    margin: 0 auto;
  }

  /* ===== LOGO STRIP ===== */
  .logo-strip {
    padding: 30px 0;
  }

  .logo-strip-label {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-muted);
    text-align: center;
    margin-bottom: 24px;
  }

  .logo-strip-inner {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    align-items: center;
  }

  .fake-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--ink-soft);
    letter-spacing: -0.01em;
    opacity: .55;
    transition: opacity .2s;
    padding: 8px;
  }

  .fake-logo.mono {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
  }

  .fake-logo:hover {
    opacity: 1;
  }

  /* ===== METRICS STRIP ===== */
  .metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line-strong);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-top: 30px;
    box-shadow: 0 10px 30px -15px rgba(62, 31, 163, 0.2);
  }

  .metric {
    background: #ffffff;
    padding: 32px 28px;
    text-align: left;
  }

  .metric .num {
    font-family: var(--font-display);
    font-size: 52px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.02em;
    background: linear-gradient(120deg, #3e1fa3, #6a4dea);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .metric .label {
    color: var(--ink-soft);
    font-size: 14px;
    margin-top: 8px;
  }

  /* ===== HOW IT WORKS ===== */
  .steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .step {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    padding: 32px;
    position: relative;
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
    box-shadow: 0 2px 4px rgba(62, 31, 163, 0.04);
  }

  .step:hover {
    border-color: var(--line-strong);
    transform: translateY(-3px);
    box-shadow: 0 20px 40px -18px rgba(62, 31, 163, 0.25);
  }

  .step-num {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--violet-700);
    letter-spacing: 0.15em;
    margin-bottom: 24px;
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(106, 77, 234, 0.08);
    border: 1px solid var(--line-strong);
  }

  .step h3 {
    font-size: 22px;
    margin: 0 0 10px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink);
  }

  .step p {
    color: var(--ink-soft);
    margin: 0;
    font-size: 15px;
  }

  .step .illus {
    margin-top: 28px;
    height: 160px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: radial-gradient(ellipse at 50% 50%, rgba(168, 138, 255, 0.1), transparent 70%), #faf8ff;
    display: grid;
    place-items: center;
    overflow: hidden;
    position: relative;
  }

  /* ===== FEATURES ===== */
  .features-bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
  }

  .feat {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    padding: 32px;
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(62, 31, 163, 0.04);
  }

  .feat:hover {
    border-color: var(--line-strong);
    transform: translateY(-3px);
    box-shadow: 0 20px 40px -18px rgba(62, 31, 163, 0.25);
  }

  .feat .ico {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #efeaff, #e4dcff);
    border: 1px solid var(--line-strong);
    display: grid;
    place-items: center;
    margin-bottom: 22px;
    color: var(--violet-700);
  }

  .feat h3 {
    font-size: 20px;
    margin: 0 0 8px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink);
  }

  .feat p {
    color: var(--ink-soft);
    margin: 0;
    font-size: 14.5px;
  }

  .feat.span-6 {
    grid-column: span 6;
  }

  .feat.span-4 {
    grid-column: span 4;
  }

  .feat.span-8 {
    grid-column: span 8;
  }

  .feat-hero {
    background:
      radial-gradient(ellipse at 85% 10%, rgba(168, 138, 255, 0.35), transparent 60%),
      linear-gradient(180deg, #ffffff, #f4f0ff);
    border-color: var(--line-strong);
    min-height: 280px;
    display: flex;
    flex-direction: column;
  }

  .feat-hero .feat-viz {
    margin-top: auto;
  }

  /* Bars viz */
  .bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 80px;
    margin-top: 24px;
  }

  .bars .bar {
    flex: 1;
    border-radius: 4px 4px 0 0;
    background: var(--grad-btn);
    opacity: 0.85;
    animation: growBar 1.8s ease infinite alternate;
  }

  .bars .bar:nth-child(1) {
    height: 40%;
    animation-delay: 0s;
  }

  .bars .bar:nth-child(2) {
    height: 65%;
    animation-delay: .2s;
  }

  .bars .bar:nth-child(3) {
    height: 90%;
    animation-delay: .4s;
  }

  .bars .bar:nth-child(4) {
    height: 75%;
    animation-delay: .6s;
  }

  .bars .bar:nth-child(5) {
    height: 55%;
    animation-delay: .8s;
  }

  .bars .bar:nth-child(6) {
    height: 45%;
    animation-delay: 1.0s;
  }

  .bars .bar:nth-child(7) {
    height: 30%;
    animation-delay: 1.2s;
  }

  @keyframes growBar {
    from {
      transform: scaleY(.8);
    }

    to {
      transform: scaleY(1);
    }
  }

  /* Lang pills viz */
  .lang-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
  }

  .lang-pill {
    padding: 6px 12px;
    border-radius: 999px;
    background: #faf8ff;
    border: 1px solid var(--line);
    font-size: 12.5px;
    color: var(--ink-soft);
    font-family: var(--font-mono);
  }

  .lang-pill.hot {
    background: rgba(106, 77, 234, 0.1);
    border-color: var(--violet-400);
    color: var(--violet-700);
  }

  /* Handoff viz */
  .handoff-viz {
    margin-top: 22px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    background: #faf8ff;
    border: 1px solid var(--line);
  }

  .handoff-viz .av {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    flex-shrink: 0;
    background: var(--grad-btn);
    border: 2px solid var(--bg-panel);
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
  }

  .handoff-viz .av.h {
    background: linear-gradient(135deg, #ff9e7a, #c85d3d);
  }

  .handoff-viz .msg {
    font-size: 13px;
    color: var(--ink-soft);
  }

  .handoff-viz .arrow {
    color: var(--violet-300);
  }

  /* ===== USE CASES ===== */
  .use-cases {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .uc {
    border-radius: var(--radius-xl);
    padding: 40px;
    position: relative;
    overflow: hidden;
    min-height: 440px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line-strong);
  }

  .uc.a {
    background: #ffffff;
    box-shadow: 0 10px 30px -18px rgba(62, 31, 163, 0.18);
  }

  .uc.a h3,
  .uc.a p {
    color: var(--ink);
  }

  .uc.a p {
    color: var(--ink-soft);
  }

  .uc.b {
    background: var(--grad-hero);
    color: #fff;
  }

  .uc.b::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 100% 0%, rgba(255, 255, 255, 0.2), transparent 60%);
    pointer-events: none;
  }

  .uc-tag {
    align-self: flex-start;
    position: relative;
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    background: #faf8ff;
    color: var(--violet-700);
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    margin-bottom: 26px;
  }

  .uc.b .uc-tag {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
  }

  .uc h3 {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 14px;
    position: relative;
  }

  .uc p {
    font-size: 15.5px;
    opacity: .85;
    margin: 0 0 22px;
    max-width: 440px;
    position: relative;
  }

  .uc ul {
    list-style: none;
    padding: 0;
    margin: auto 0 0;
    display: grid;
    gap: 10px;
    position: relative;
  }

  .uc li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14.5px;
  }

  .uc li svg {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--violet-600);
  }

  .uc.b li svg {
    color: #fff;
  }

  /* ===== DEMO ===== */
  .demo-wrap {
    background: #ffffff;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-xl);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    min-height: 580px;
    box-shadow: 0 30px 60px -20px rgba(62, 31, 163, 0.25);
  }

  .demo-left {
    padding: 44px;
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
  }

  .demo-left h3 {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 32px;
    line-height: 1.1;
    margin: 16px 0 12px;
    letter-spacing: -0.02em;
    color: var(--ink);
  }

  .demo-left p {
    color: var(--ink-soft);
    font-size: 15.5px;
  }

  .persona-picker {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 24px;
  }

  .persona {
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: #ffffff;
    color: var(--ink-soft);
    font: inherit;
    font-size: 13.5px;
    cursor: pointer;
    transition: all .2s ease;
  }

  .persona:hover {
    border-color: var(--violet-500);
    color: var(--ink);
  }

  .persona.active {
    background: var(--grad-btn);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 18px -6px rgba(106, 77, 234, 0.5);
  }

  .suggest {
    margin-top: auto;
    padding-top: 28px;
    border-top: 1px dashed var(--line-strong);
  }

  .suggest-label {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-muted);
    margin-bottom: 12px;
  }

  .suggest-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .chip {
    padding: 9px 13px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: #faf8ff;
    color: var(--ink-soft);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: all .2s ease;
    text-align: left;
  }

  .chip:hover {
    border-color: var(--violet-500);
    color: var(--violet-700);
    background: rgba(168, 138, 255, 0.12);
  }

  /* Demo right side wears the same skin as the live widget */
  .demo-right {
    --w-accent: oklch(0.68 0.17 280);
    --w-accent-2: oklch(0.74 0.16 280);
    --w-bg-1: oklch(0.19 0.022 280);
    --w-bg-2: oklch(0.23 0.022 280);
    --w-surface: oklch(0.30 0.025 280);
    --w-surface-2: oklch(0.36 0.028 280);
    --w-line: oklch(0.42 0.025 280);
    --w-line-soft: oklch(0.46 0.022 280 / 0.4);
    --w-line-strong: oklch(0.46 0.022 280);
    --w-text: oklch(0.96 0.005 280);
    --w-muted: oklch(0.74 0.012 280);
    --w-subtle: oklch(0.58 0.015 280);
    display: flex;
    flex-direction: column;
    background: var(--w-bg-1);
    color: var(--w-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }

  .demo-right .chat-head {
    background: var(--w-bg-2);
    border-bottom: 1px solid var(--w-line);
    padding: 14px 16px;
  }

  .demo-right .chat-head .who {
    color: var(--w-text);
  }

  .demo-right .chat-head .status {
    color: var(--w-muted);
  }

  .demo-right .chat-head .status::before {
    display: none;
  }

  .demo-thread {
    flex: 1;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    max-height: 460px;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--w-line-strong) transparent;
  }

  .demo-thread::-webkit-scrollbar {
    width: 4px;
  }

  .demo-thread::-webkit-scrollbar-thumb {
    background: var(--w-line-strong);
    border-radius: 4px;
  }

  .system-notif {
    display: flex;
    justify-content: center;
    padding: 4px 0;
    width: 100%;
    animation: rise .4s cubic-bezier(.2, .7, .2, 1) both;
  }

  .system-notif span {
    background: var(--w-bg-2);
    border: 1px solid var(--w-line);
    color: var(--w-muted);
    font-size: 11px;
    font-style: italic;
    padding: 4px 16px;
    border-radius: 8px;
  }

  .demo-form {
    background: var(--w-bg-2);
    border-top: 1px solid var(--w-line);
    padding: 10px;
    color: var(--w-text);
  }

  .demo-form-row {
    display: flex;
    gap: 8px;
    align-items: center;
  }

  .demo-form input {
    flex: 1;
    background: var(--w-surface);
    color: var(--w-text);
    border: 1.5px solid var(--w-accent);
    border-radius: 22px;
    padding: 10px 18px;
    font: inherit;
    font-size: 14px;
    outline: 0;
    height: 44px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .demo-form input::placeholder {
    color: var(--w-subtle);
  }

  .demo-form input:focus {
    border-color: var(--w-accent);
    box-shadow: 0 0 0 3px oklch(0.68 0.17 280 / 0.18);
  }

  .demo-right.light .demo-form input:focus {
    box-shadow: 0 0 0 3px oklch(0.55 0.18 280 / 0.18);
  }

  .demo-form button {
    background: #615ED6;
    color: #ffffff;
    border: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
  }

  .demo-form button:hover:not(:disabled) {
    background: oklch(from #615ED6 calc(l - 0.05) c h);
    transform: scale(1.05);
  }

  .demo-form button:disabled {
    background: rgba(97, 94, 214, 0.18);
    color: #615ED6;
    cursor: not-allowed;
  }

  .demo-form button svg {
    width: 18px;
    height: 18px;
    pointer-events: none;
  }

  .demo-form .meta-row {
    padding-top: 6px;
  }

  /* Demo-right inherits widget styling through tokens — ensure the bubble/product variants match the chat-card too */
  .demo-right .bubble.bot {
    background: var(--w-surface);
    color: var(--w-text);
    border: 1px solid var(--w-line);
    box-shadow: 0 1px 2px oklch(0 0 0 / 0.18);
  }

  .demo-right .bubble.user {
    background: var(--w-accent);
    color: oklch(1 0 0);
  }

  .demo-right .bubble .ts {
    color: var(--w-subtle);
  }

  .demo-right .bubble.typing span {
    background: var(--w-subtle);
  }

  .demo-right .product-card {
    background: var(--w-surface);
    border-color: var(--w-line);
  }

  .demo-right .product-card.center {
    border-color: var(--w-line-strong);
  }

  .demo-right .product-card .name {
    color: var(--w-text);
  }

  .demo-right .product-card .ref {
    color: var(--w-subtle);
  }

  .demo-right .product-card .price {
    color: var(--w-text);
  }

  .demo-right .product-card .desc {
    color: var(--w-muted);
  }

  .demo-right .powered {
    color: var(--w-muted);
  }

  .demo-right .powered b {
    color: var(--w-text);
  }

  .demo-right .char-count {
    color: var(--w-subtle);
  }

  /* ===== KNOWLEDGE BASE viz ===== */
  .kb-viz {
    margin-top: 22px;
    display: grid;
    gap: 8px;
  }

  .kb-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 10px;
    background: #faf8ff;
    border: 1px solid var(--line);
  }

  .kb-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d1c8ee;
  }

  .kb-status.on {
    background: #22c775;
    box-shadow: 0 0 0 3px rgba(34, 199, 117, 0.18);
  }

  .kb-status.off {
    background: #c8c0e0;
  }

  .kb-title {
    font-size: 13.5px;
    color: var(--ink);
    font-weight: 500;
  }

  .kb-muted {
    color: var(--ink-muted);
    font-weight: 400;
  }

  .kb-tag {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--violet-700);
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(106, 77, 234, 0.08);
  }

  /* ===== AGENT MEMORY viz ===== */
  .memory-viz {
    margin-top: 18px;
  }

  .mem-prop {
    padding: 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, #faf7ff, #f3edff);
    border: 1px solid var(--line);
  }

  .mem-text {
    font-size: 13.5px;
    color: var(--ink);
    line-height: 1.5;
    font-style: italic;
  }

  .mem-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
  }

  .mem-btn {
    flex: 1;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #fff;
    cursor: pointer;
    transition: 120ms;
    color: var(--ink);
  }

  .mem-btn.ok {
    background: var(--grad-btn);
    color: #fff;
    border-color: transparent;
  }

  .mem-btn.no {
    color: var(--ink-soft);
  }

  .mem-btn:hover {
    transform: translateY(-1px);
  }

  /* ===== OTP viz ===== */
  .otp-viz {
    margin-top: 18px;
    padding: 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, #faf7ff, #f3edff);
    border: 1px solid var(--line);
    text-align: center;
  }

  .otp-digits {
    display: flex;
    gap: 6px;
    justify-content: center;
  }

  .otp-digits span {
    width: 28px;
    height: 36px;
    display: grid;
    place-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 700;
    color: var(--violet-700);
  }

  .otp-label {
    margin-top: 10px;
    font-size: 11.5px;
    color: var(--ink-muted);
    font-family: var(--font-mono);
  }

  /* ===== CATALOG viz ===== */
  .catalog-viz {
    margin-top: 18px;
    display: grid;
    gap: 8px;
  }

  .catalog-viz.chat-card {
    transform: none;
  }

  .cat-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    background: #faf8ff;
    border: 1px solid var(--line);
    border-radius: 10px;
  }

  .cat-thumb {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, #efeaff, #d8ccff);
  }

  .cat-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .cat-name {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--violet-700);
    font-weight: 600;
  }

  .cat-price {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
  }

  .cat-stock {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 999px;
    font-weight: 600;
  }

  .cat-stock.ok {
    background: rgba(34, 199, 117, 0.12);
    color: #138a52;
  }

  .cat-stock.low {
    background: rgba(245, 158, 11, 0.14);
    color: #a96b06;
  }

  .feat-pill {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(106, 77, 234, 0.1);
    color: var(--violet-700);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  /* ===== WIDGET CONFIGURATOR ===== */
  .cfg-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: start;
  }

  /* Let grid items shrink below their content's intrinsic width. Without this,
     the embed-snippet <pre> (a long unbroken line) sets a huge min-content size
     on its 1fr track and blows the grid past the viewport — horizontal scroll. */
  .cfg-grid>* {
    min-width: 0;
  }

  .cfg-controls {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 26px;
    box-shadow: 0 2px 4px rgba(62, 31, 163, 0.04);
  }

  .cfg-row {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 16px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
  }

  .cfg-row:last-of-type {
    border-bottom: 0;
  }

  .cfg-row label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
  }

  .cfg-input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-family: var(--font-sans);
    font-size: 13.5px;
    color: var(--ink);
    background: #faf8ff;
  }

  .cfg-input:focus {
    outline: 2px solid var(--violet-300);
    border-color: transparent;
    background: #fff;
  }

  .seg {
    display: inline-flex;
    padding: 3px;
    background: #f1ecff;
    border-radius: 8px;
  }

  .seg button {
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-soft);
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
  }

  .seg button.on {
    background: #fff;
    color: var(--violet-700);
    box-shadow: 0 1px 2px rgba(62, 31, 163, 0.08);
  }

  .swatches {
    display: flex;
    gap: 8px;
  }

  .sw {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--line);
    transition: 120ms;
  }

  .sw.on {
    box-shadow: 0 0 0 2px var(--ink);
  }

  .sw:hover {
    transform: scale(1.1);
  }

  .toggle {
    width: 44px;
    height: 26px;
    border-radius: 999px;
    background: #e0d8f4;
    border: 0;
    cursor: pointer;
    padding: 3px;
    position: relative;
    transition: 200ms;
  }

  .toggle .dot {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: 200ms;
  }

  .toggle.on {
    background: var(--grad-btn);
  }

  .toggle.on .dot {
    transform: translateX(18px);
  }

  .cfg-snippet {
    margin-top: 18px;
    background: #1a0e3a;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #2a1d52;
  }

  .cfg-snippet-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: #120930;
    color: rgba(255, 255, 255, 0.65);
    font-family: var(--font-mono);
    font-size: 11.5px;
  }

  .cfg-snippet-head button {
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(168, 138, 255, 0.25);
    background: rgba(168, 138, 255, 0.1);
    color: #d4c8ff;
    font-family: var(--font-mono);
    font-size: 11px;
    cursor: pointer;
    font-weight: 600;
  }

  .cfg-snippet-head button:hover {
    background: rgba(168, 138, 255, 0.2);
  }

  .cfg-snippet pre {
    margin: 0;
    padding: 16px;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.6;
    color: #d4c8ff;
  }

  .cfg-preview {
    position: relative;
    height: 480px;
    border-radius: 18px;
    overflow: hidden;
    background: #f5f1ff;
    border: 1px solid var(--line);
  }

  .cfg-preview.dark .cfg-win-body,
  .cfg-preview.dark .cfg-win-input {
    background: #1a0e3a;
    color: #ece5ff;
  }

  .cfg-preview.dark .cfg-msg.bot {
    background: #2a1d52;
    color: #ece5ff;
    border-color: #2a1d52;
  }

  .cfg-preview.dark .cfg-win-input span {
    color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.15);
  }

  .cfg-preview-bg {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 80% 20%, rgba(106, 77, 234, 0.12), transparent 50%),
      radial-gradient(circle at 20% 80%, rgba(255, 90, 95, 0.08), transparent 50%);
  }

  .cfg-bubble {
    position: absolute;
    right: 24px;
    bottom: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    box-shadow: 0 16px 40px rgba(62, 31, 163, 0.35);
    cursor: pointer;
    z-index: 2;
  }

  .cfg-bubble svg {
    width: 22px;
    height: 22px;
  }

  .cfg-proactive {
    position: absolute;
    right: 70px;
    bottom: 14px;
    white-space: nowrap;
    background: #fff;
    color: var(--ink);
    padding: 8px 14px;
    border-radius: 14px;
    border: 1px solid var(--line);
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 8px 20px rgba(62, 31, 163, 0.12);
  }

  .cfg-window {
    position: absolute;
    right: 24px;
    bottom: 96px;
    width: 320px;
    height: 360px;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(62, 31, 163, 0.25);
    display: flex;
    flex-direction: column;
    z-index: 1;
    border: 1px solid var(--line);
  }

  .cfg-win-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    color: #fff;
  }

  .cfg-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 14px;
  }

  .cfg-meta {
    line-height: 1.2;
  }

  .cfg-meta .cfg-title {
    font-weight: 600;
    font-size: 14px;
  }

  .cfg-meta .cfg-sub {
    font-size: 11.5px;
    opacity: 0.9;
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .cfg-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: oklch(0.72 0.16 145);
    box-shadow: 0 0 0 3px oklch(0.72 0.16 145 / 0.22);
    flex-shrink: 0;
  }

  .cfg-preview.light .cfg-dot {
    background: oklch(0.62 0.15 145);
    box-shadow: 0 0 0 3px oklch(0.62 0.15 145 / 0.18);
  }

  .cfg-x {
    opacity: 0.7;
    font-size: 18px;
    cursor: pointer;
  }

  .cfg-win-body {
    flex: 1;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #faf8ff;
    overflow-y: auto;
  }

  .cfg-msg {
    padding: 8px 12px;
    border-radius: 14px;
    font-size: 12.5px;
    max-width: 80%;
    line-height: 1.45;
  }

  .cfg-msg.bot {
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--line);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
  }

  .cfg-msg.user {
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
  }

  .cfg-typing {
    display: flex;
    gap: 4px;
    padding: 6px 0;
  }

  .cfg-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--violet-300);
    animation: cfgDot 1.2s infinite ease-in-out;
  }

  .cfg-typing span:nth-child(2) {
    animation-delay: 0.2s;
  }

  .cfg-typing span:nth-child(3) {
    animation-delay: 0.4s;
  }

  @keyframes cfgDot {

    0%,
    60%,
    100% {
      opacity: 0.3;
      transform: scale(0.85);
    }

    30% {
      opacity: 1;
      transform: scale(1);
    }
  }

  .cfg-win-input {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--line);
    background: #fff;
  }

  .cfg-win-input span {
    flex: 1;
    padding: 8px 14px;
    border: 1.5px solid var(--violet-500);
    border-radius: 22px;
    font-size: 12.5px;
    color: var(--ink-muted);
    background: #fff;
  }

  .cfg-send {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .cfg-send svg {
    width: 16px;
    height: 16px;
  }

  /* ===== WORKSPACE DASHBOARD ===== */
  .ws-shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: 0 24px 60px -28px rgba(62, 31, 163, 0.18);
    min-height: 540px;
  }

  .ws-side {
    background: #faf7ff;
    border-right: 1px solid var(--line);
    padding: 22px 14px;
  }

  .ws-side-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 8px 18px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 14px;
    font-size: 12.5px;
    color: var(--ink-muted);
    font-weight: 600;
  }

  .ws-side-logo {
    height: 28px;
    width: 28px;
    object-fit: contain;
  }

  .ws-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .ws-nav a {
    display: grid;
    grid-template-columns: 18px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 9px 10px;
    border-radius: 8px;
    cursor: default;
    color: var(--ink-soft);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
  }

  .ws-nav a svg {
    width: 16px;
    height: 16px;
    opacity: 0.7;
  }

  .ws-nav a:hover {
    background: rgba(106, 77, 234, 0.06);
    color: var(--ink);
  }

  .ws-nav a.active {
    background: rgba(106, 77, 234, 0.12);
    color: var(--violet-700);
  }

  .ws-nav a.active svg {
    opacity: 1;
  }

  .ws-pill {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--grad-btn);
    color: #fff;
  }

  .ws-pill.warn {
    background: linear-gradient(135deg, #ff9e7a, #ff5a5f);
  }

  .ws-main {
    padding: 20px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .ws-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .ws-search {
    flex: 1;
    max-width: 360px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #faf7ff;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 13px;
    color: var(--ink-muted);
  }

  .ws-actions {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .ws-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(34, 199, 117, 0.1);
    color: #138a52;
    font-weight: 600;
  }

  .ws-toggle .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c775;
    box-shadow: 0 0 0 3px rgba(34, 199, 117, 0.25);
  }

  .ws-user {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff9e7a, #c85d3d);
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
  }

  .ws-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }

  .ws-stat {
    padding: 14px 16px;
    background: #faf7ff;
    border: 1px solid var(--line);
    border-radius: 12px;
  }

  .ws-stat-label {
    font-size: 12px;
    color: var(--ink-muted);
    font-weight: 500;
  }

  .ws-stat-num {
    margin-top: 6px;
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    font-feature-settings: 'tnum' 1;
    letter-spacing: -0.01em;
  }

  .ws-stat-trend {
    margin-top: 4px;
    font-size: 11.5px;
    font-family: var(--font-mono);
    color: var(--ink-muted);
  }

  .ws-stat-trend.up {
    color: #138a52;
  }

  .ws-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 14px;
    flex: 1;
  }

  .ws-card {
    padding: 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .ws-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .ws-card-head h4 {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
  }

  .ws-muted {
    font-size: 11px;
    color: var(--ink-muted);
    font-family: var(--font-mono);
  }

  .ws-bars {
    height: 130px;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 0 4px;
  }

  .ws-bar {
    flex: 1;
    background: var(--grad-btn);
    border-radius: 4px 4px 0 0;
    min-height: 6px;
    opacity: 0.85;
  }

  .ws-bar:last-child {
    background: linear-gradient(135deg, #ff9e7a, #ff5a5f);
    opacity: 1;
  }

  .ws-live {
    gap: 10px;
  }

  .ws-session {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px;
    border-radius: 10px;
    background: #faf7ff;
    border: 1px solid var(--line);
  }

  .ws-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }

  .ws-dot.live {
    background: #22c775;
    box-shadow: 0 0 0 3px rgba(34, 199, 117, 0.25);
    animation: livePulse 1.6s infinite ease-in-out;
  }

  .ws-dot.human {
    background: #6a4dea;
    box-shadow: 0 0 0 3px rgba(106, 77, 234, 0.25);
  }

  @keyframes livePulse {

    0%,
    100% {
      box-shadow: 0 0 0 3px rgba(34, 199, 117, 0.25);
    }

    50% {
      box-shadow: 0 0 0 5px rgba(34, 199, 117, 0.15);
    }
  }

  .ws-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
  }

  .ws-snip {
    font-size: 11.5px;
    color: var(--ink-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 230px;
  }

  .ws-take {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 600;
    background: var(--grad-btn);
    color: #fff;
    border: 0;
    cursor: pointer;
  }

  .ws-take.ghost {
    background: transparent;
    color: var(--violet-700);
    border: 1px solid var(--line);
  }

  /* extended steps grid for 5 columns */
  .steps-5 {
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
  }

  .steps-5 .step h3 {
    font-size: 17px;
  }

  .steps-5 .step p {
    font-size: 13.5px;
  }

  /* ===== FAQ ===== */
  .faq {
    max-width: 840px;
    margin: 0 auto;
  }

  .faq-item {
    border: 1px solid var(--line);
    border-radius: 16px;
    margin-bottom: 10px;
    background: #ffffff;
    transition: border-color .2s, box-shadow .2s;
    box-shadow: 0 2px 4px rgba(62, 31, 163, 0.04);
  }

  .faq-item[open] {
    border-color: var(--line-strong);
  }

  .faq-item:hover {
    border-color: var(--line-strong);
  }

  .faq-q {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    list-style: none;
    padding: 22px 26px;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ink);
  }

  .faq-q::-webkit-details-marker {
    display: none;
  }

  .faq-q .plus {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 300;
    line-height: 1;
    color: var(--ink-soft);
    transition: transform .25s ease, background .25s, color .25s;
    flex-shrink: 0;
  }

  .faq-q .plus::before {
    content: "+";
    display: block;
    line-height: 1;
    transform: translateY(-0.5px);
  }

  details[open] .faq-q .plus {
    transform: rotate(45deg);
    background: var(--grad-btn);
    color: #fff;
    border-color: transparent;
  }

  .faq-a {
    padding: 0 26px 24px;
    color: var(--ink-soft);
    font-size: 15px;
    line-height: 1.65;
  }

  /* ===== CONTACT ===== */
  .contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 60px;
    align-items: start;
  }

  .contact-info h2.sec-title {
    margin-bottom: 22px;
  }

  .contact-info .line {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px 0;
    border-top: 1px solid var(--line);
  }

  .contact-info .line:last-child {
    border-bottom: 1px solid var(--line);
  }

  .contact-info .line .label {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-muted);
    width: 90px;
    flex-shrink: 0;
    padding-top: 2px;
  }

  .contact-info .line .val {
    font-size: 15.5px;
    color: var(--ink);
  }

  .contact-info .line .val a {
    color: var(--violet-300);
    text-decoration: none;
  }

  .contact-info .line .val a:hover {
    text-decoration: underline;
  }

  .form-card {
    background: #ffffff;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-xl);
    padding: 36px;
    box-shadow: 0 30px 60px -24px rgba(62, 31, 163, 0.28);
    position: relative;
    overflow: hidden;
  }

  .form-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--violet-400), transparent);
    opacity: 0.6;
  }

  .field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 20px;
  }

  .field label {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-soft);
  }

  .field label .req {
    color: var(--violet-300);
  }

  .field input,
  .field textarea,
  .field select {
    padding: 13px 15px;
    border-radius: 12px;
    border: 1px solid var(--line-strong);
    background: #faf8ff;
    font: inherit;
    font-size: 15px;
    color: var(--ink);
    outline: 0;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
  }

  .field input::placeholder,
  .field textarea::placeholder {
    color: var(--ink-muted);
  }

  .field textarea {
    resize: vertical;
    min-height: 130px;
    font-family: inherit;
  }

  .field input:focus,
  .field textarea:focus,
  .field select:focus {
    border-color: var(--violet-500);
    box-shadow: 0 0 0 3px rgba(106, 77, 234, 0.12);
    background: #ffffff;
  }

  .field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%2354486e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
  }

  .field.error input,
  .field.error textarea {
    border-color: #d94848;
  }

  .field .err-msg {
    font-size: 12.5px;
    color: #c14444;
  }

  .field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .form-submit-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    gap: 16px;
    flex-wrap: wrap;
  }

  .form-note {
    font-size: 12.5px;
    color: var(--ink-muted);
    max-width: 280px;
    line-height: 1.45;
  }

  /* Cloudflare Turnstile mount — takes the place of .form-note. The widget
     renders at ~300×65px; if the form is narrow it stacks above the button. */
  .form-turnstile {
    min-height: 65px;
  }

  .form-turnstile:empty {
    display: none;
  }

  @media (max-width: 520px) {
    .form-submit-row {
      flex-direction: column;
      align-items: stretch;
    }

    .form-submit-row .btn {
      width: 100%;
      justify-content: center;
    }
  }

  .send-error {
    margin: 4px 0 16px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #fff0f0;
    border: 1px solid #f4c1c1;
    color: #b82a2a;
    font-size: 13.5px;
  }

  .btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
  }

  .success-card {
    padding: 40px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .success-card .ok-mark {
    width: 64px;
    height: 64px;
    border-radius: 999px;
    background: var(--grad-btn);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 10px 30px -10px rgba(106, 77, 234, 0.7);
  }

  .success-card h3 {
    font-family: var(--font-body);
    font-size: 28px;
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.02em;
    color: var(--ink);
  }

  .success-card p {
    color: var(--ink-soft);
    margin: 0;
    max-width: 400px;
  }

  /* ===== FOOTER ===== */
  footer {
    background: #ffffff;
    border-top: 1px solid var(--line);
    padding: 70px 0 32px;
    margin-top: 40px;
    position: relative;
    z-index: 1;
  }

  .foot-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 50px;
    padding-bottom: 50px;
    border-bottom: 1px solid var(--line);
  }

  .foot-tag {
    color: var(--ink-muted);
    font-size: 14.5px;
    max-width: 340px;
    margin-top: 18px;
    line-height: 1.55;
  }

  .foot-col h4 {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--violet-700);
    margin: 0 0 18px;
    font-weight: 500;
  }

  .foot-col a {
    display: block;
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 14.5px;
    padding: 5px 0;
    transition: color .15s;
  }

  .foot-col a:hover {
    color: var(--ink);
  }

  .foot-base {
    padding-top: 28px;
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--ink-muted);
  }

  /* ===== CTA BLOCK ===== */
  .cta-block {
    border-radius: var(--radius-xl);
    padding: 64px 52px;
    background:
      radial-gradient(ellipse at 0% 0%, rgba(255, 255, 255, 0.25), transparent 60%),
      radial-gradient(ellipse at 100% 100%, rgba(0, 0, 0, 0.15), transparent 60%),
      var(--grad-hero);
    border: 1px solid var(--line-strong);
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 30px 60px -20px rgba(62, 31, 163, 0.4);
    color: #fff;
  }

  .cta-block h2 {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(32px, 3.6vw, 48px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin: 0 0 16px;
    color: #fff;
  }

  .cta-block h2 em {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    color: #e9deff;
  }

  .cta-block p {
    color: rgba(255, 255, 255, 0.85);
    max-width: 520px;
    margin: 0 auto 28px;
    font-size: 17px;
  }

  .cta-block .btn-primary {
    background: #ffffff;
    color: var(--violet-700);
  }

  .cta-block .btn-primary:hover {
    background: #f8f5ff;
  }

  .cta-block-actions {
    display: inline-flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .cta-block .btn-ghost,
  .cta-block .cta-block-secondary {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.32);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  .cta-block .btn-ghost:hover,
  .cta-block .cta-block-secondary:hover {
    background: rgba(255, 255, 255, 0.20);
    border-color: rgba(255, 255, 255, 0.5);
  }

  .cta-block .btn-ghost svg,
  .cta-block .cta-block-secondary svg {
    color: #ffffff;
  }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 960px) {
    .hero-grid {
      grid-template-columns: 1fr;
      gap: 60px;
    }

    .steps {
      grid-template-columns: 1fr;
    }

    .steps-5 {
      grid-template-columns: 1fr;
    }

    .features-bento {
      grid-template-columns: 1fr;
    }

    .feat.span-6,
    .feat.span-4,
    .feat.span-8 {
      grid-column: span 1;
    }

    .use-cases {
      grid-template-columns: 1fr;
    }

    .demo-wrap {
      grid-template-columns: 1fr;
    }

    .demo-left {
      border-right: 0;
      border-bottom: 1px solid var(--line);
    }

    .ints {
      grid-template-columns: 1fr 1fr;
    }

    .metrics {
      grid-template-columns: 1fr 1fr;
    }

    .contact-grid {
      grid-template-columns: 1fr;
      gap: 40px;
    }

    .foot-grid {
      grid-template-columns: 1fr 1fr;
      gap: 30px;
    }

    .nav-links {
      display: none;
    }

    /* Hide the inline login/sign-up buttons; they move into the drawer.
       The language switcher stays in the bar next to the hamburger. */
    .nav-cta .btn {
      display: none;
    }

    .nav-toggle {
      display: flex;
    }

    .nav-inner {
      min-height: 76px;
      gap: 12px;
    }

    section {
      padding: 70px 0;
    }

    .logo-strip-inner {
      grid-template-columns: repeat(3, 1fr);
    }

    .field-row {
      grid-template-columns: 1fr;
    }

    .cta-block {
      padding: 44px 24px;
    }

    .chip-a {
      right: 0;
      top: -16px;
    }

    .chip-b {
      left: 0;
      bottom: 20px;
    }

    /* configurator */
    .cfg-grid {
      grid-template-columns: 1fr;
    }

    .cfg-preview {
      height: 520px;
    }

    /* workspace dashboard */
    .ws-shell {
      grid-template-columns: 1fr;
    }

    .ws-side {
      display: none;
    }

    .ws-stats {
      grid-template-columns: 1fr 1fr;
    }

    .ws-grid {
      grid-template-columns: 1fr;
    }
  }

  /* ===== CONFIGURATOR — phones =====
     On narrow screens the 320px fixed-width chat window and the two-column
     control rows (130px label + content) overflow their containers. Stack the
     rows and let the preview window fill the frame instead of clipping out. */
  @media (max-width: 600px) {
    .cfg-controls {
      padding: 20px 18px;
    }

    .cfg-row {
      grid-template-columns: 1fr;
      gap: 8px;
      align-items: start;
    }

    .seg,
    .swatches {
      flex-wrap: wrap;
    }

    /* Wrap the embed snippet instead of forcing a horizontal scrollbar. */
    .cfg-snippet pre {
      white-space: pre-wrap;
      word-break: break-word;
    }

    .cfg-preview {
      height: 460px;
    }

    .cfg-window {
      left: 16px;
      right: 16px;
      width: auto;
      bottom: 88px;
      height: auto;
      max-height: calc(100% - 108px);
    }

    .cfg-proactive {
      white-space: normal;
      max-width: 280px;
      min-width: 200px;
    }
  }

  /* ===== Language switcher chrome ===== */
  .lang-switch {
    position: relative;
    display: inline-flex;
  }

  /* Nav variant: minimal, borderless — clearly a chooser, not a CTA button.
       Flag carries the visual identity; subtle text + chevron signal "menu". */
  .lang-switch-nav .lang-switch-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 6px;
    border-radius: 10px;
    background: transparent;
    border: 0;
    color: var(--ink-soft);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background .15s, color .15s;
    margin-right: 2px;
  }

  .lang-switch-nav .lang-switch-btn:hover {
    background: rgba(106, 77, 234, 0.08);
    color: var(--violet-700);
  }

  .lang-switch-nav .lang-switch-btn[aria-expanded="true"] {
    background: rgba(106, 77, 234, 0.10);
    color: var(--violet-700);
  }

  .lang-switch-nav .lang-switch-flag {
    width: 22px;
    height: 16px;
    border-radius: 3px;
  }

  .lang-switch-nav .lang-switch-btn svg {
    opacity: 0.55;
    transition: transform .18s ease, opacity .15s;
  }

  .lang-switch-nav .lang-switch-btn:hover svg {
    opacity: 0.9;
  }

  .lang-switch-nav .lang-switch-btn[aria-expanded="true"] svg {
    transform: rotate(180deg);
    opacity: 0.9;
  }

  /* Footer variant keeps the original pill chrome (it sits alone, no CTA next to it) */
  .lang-switch-footer .lang-switch-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid var(--line-strong);
    color: var(--ink);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s, background .15s;
  }

  .lang-switch-footer .lang-switch-btn:hover {
    border-color: var(--violet-500);
    background: #faf8ff;
  }

  .lang-code {
    letter-spacing: 0.06em;
  }

  .lang-switch-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #ffffff;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 20px 50px -12px rgba(62, 31, 163, 0.25);
    z-index: 80;
    max-height: 360px;
    overflow-y: auto;
    min-width: 200px;
    display: grid;
    gap: 1px;
  }

  .lang-switch-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: transparent;
    border: 0;
    font: inherit;
    font-size: 13px;
    color: var(--ink-soft);
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: background .12s, color .12s;
  }

  .lang-switch-item:hover {
    background: rgba(106, 77, 234, 0.08);
    color: var(--ink);
  }

  .lang-switch-item.active {
    background: rgba(106, 77, 234, 0.12);
    color: var(--violet-700);
    font-weight: 600;
  }

  .lang-switch-flag {
    width: 20px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
    display: block;
  }

  .lang-switch-code {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--violet-700);
    min-width: 24px;
  }

  .lang-switch-native {
    flex: 1;
  }

  .lang-switch-footer .lang-switch-menu {
    top: auto;
    bottom: calc(100% + 6px);
  }

  @media (max-width: 720px) {
    .lang-switch-nav .lang-switch-btn {
      padding: 5px 6px 5px 5px;
      font-size: 12px;
      gap: 6px;
    }

    .lang-switch-nav .lang-switch-flag {
      width: 20px;
      height: 15px;
    }
  }


  /* ============================================================
   WORKSPACE — real dashboard screenshot replacement
   ============================================================ */
  .ws-screenshot {
    background: #ffffff;
    border: 1px solid var(--line-strong);
    border-radius: 22px;
    overflow: hidden;
    box-shadow:
      0 30px 80px -30px rgba(62, 31, 163, 0.35),
      0 10px 24px -16px rgba(62, 31, 163, 0.18);
    position: relative;
    margin-top: 28px;
  }

  .ws-screenshot::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(168, 138, 255, 0.45) 0%, rgba(106, 77, 234, 0) 30%, rgba(106, 77, 234, 0) 70%, rgba(168, 138, 255, 0.35) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }

  .ws-screenshot-chrome {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: linear-gradient(180deg, #faf8ff 0%, #f5f1ff 100%);
    border-bottom: 1px solid var(--line);
  }

  .ws-screenshot-dots {
    display: flex;
    gap: 7px;
    flex-shrink: 0;
  }

  .ws-screenshot-dots span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06);
  }

  .ws-screenshot-url {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 14px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-muted);
    max-width: 480px;
    margin: 0 auto;
  }

  .ws-screenshot-url svg {
    color: var(--violet-500);
    flex-shrink: 0;
  }

  .ws-screenshot-spacer {
    width: 60px;
    flex-shrink: 0;
  }

  .ws-screenshot-img {
    display: block;
    width: 100%;
    height: auto;
  }

  @media (max-width: 720px) {
    .ws-screenshot-chrome {
      padding: 10px 12px;
      gap: 10px;
    }

    .ws-screenshot-dots span {
      width: 9px;
      height: 9px;
    }

    .ws-screenshot-url {
      font-size: 10.5px;
      padding: 5px 10px;
      max-width: none;
    }

    .ws-screenshot-spacer {
      display: none;
    }
  }


  /* ============================================================
   PRICING SECTION
   ============================================================ */
  .pricing-section {
    padding: 64px 0 56px;
  }

  .pricing-toggle-row {
    margin-top: 26px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .pricing-currency {
    display: inline-flex;
    background: #ffffff;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
    box-shadow: 0 6px 18px -10px rgba(62, 31, 163, 0.18);
  }

  .pricing-currency button {
    appearance: none;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ink-soft);
    padding: 8px 16px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .2s, color .2s, box-shadow .2s;
    font-family: var(--font-mono);
  }

  .pricing-currency button:hover {
    color: var(--ink);
  }

  .pricing-currency button.on {
    background: var(--grad-btn);
    color: #fff;
    box-shadow: 0 4px 12px -4px rgba(106, 77, 234, 0.6);
  }

  .pricing-billed {
    display: inline-block;
    margin-top: 22px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }

  .pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin: 44px 0 24px;
    align-items: stretch;
  }

  @media (max-width: 980px) {
    .pricing-grid {
      grid-template-columns: 1fr;
      max-width: 480px;
      margin-left: auto;
      margin-right: auto;
    }
  }

  .pricing-card {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-xl);
    padding: 32px 28px 26px;
    display: flex;
    flex-direction: column;
    transition: border-color .25s, transform .25s, box-shadow .25s;
  }

  .pricing-card:hover {
    border-color: var(--violet-300);
    transform: translateY(-2px);
    box-shadow: 0 24px 60px -28px rgba(62, 31, 163, 0.28);
  }

  .pricing-card.popular {
    border-color: transparent;
    background:
      linear-gradient(#ffffff, #ffffff) padding-box,
      linear-gradient(135deg, #6a4dea 0%, #a88aff 50%, #6a4dea 100%) border-box;
    border: 2px solid transparent;
    box-shadow:
      0 20px 50px -20px rgba(106, 77, 234, 0.45),
      0 0 0 1px rgba(106, 77, 234, 0.12);
    padding: 32px 28px 26px;
  }

  .pricing-card.popular:hover {
    transform: translateY(-3px);
    box-shadow:
      0 28px 60px -22px rgba(106, 77, 234, 0.55),
      0 0 0 1px rgba(106, 77, 234, 0.18);
  }

  .pricing-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--grad-btn);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 999px;
    box-shadow: 0 8px 18px -6px rgba(106, 77, 234, 0.5);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
  }

  .pricing-badge span {
    color: #ffe27a;
    font-size: 12px;
    line-height: 1;
  }

  .pricing-tier-name {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 32px;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--violet-700);
    line-height: 1;
  }

  .pricing-tier-tag {
    margin-top: 6px;
    font-size: 13.5px;
    color: var(--ink-soft);
    font-weight: 500;
    letter-spacing: -0.005em;
  }

  .pricing-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 22px 0 4px;
    padding-bottom: 18px;
    border-bottom: 1px dashed var(--line);
  }

  .pricing-price-amount {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 44px;
    letter-spacing: -0.03em;
    color: var(--ink);
    line-height: 1;
  }

  .pricing-price-period {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .pricing-quota {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .pricing-quota-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 14.5px;
    color: var(--ink);
  }

  .pricing-quota-row.muted {
    color: var(--ink-soft);
  }

  .pricing-quota-num {
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.01em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }

  .pricing-quota-row.muted .pricing-quota-num {
    color: var(--ink-soft);
  }

  .pricing-quota-label {
    font-size: 13.5px;
    color: var(--ink-soft);
  }

  .pricing-quota-zero {
    font-size: 13.5px;
    color: var(--ink-muted);
    font-style: italic;
  }

  .pricing-desc {
    margin: 18px 0 22px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-soft);
    text-wrap: pretty;
    flex: 1;
  }

  .pricing-cta {
    width: 100%;
    justify-content: center;
  }

  .pricing-highlight {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--violet-700);
    text-align: center;
    justify-content: center;
  }

  .pricing-highlight-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--grad-btn);
    box-shadow: 0 0 0 3px rgba(168, 138, 255, 0.18);
    flex-shrink: 0;
  }

  /* ===== Features grid ===== */
  .pricing-features {
    margin-top: 56px;
    background: #ffffff;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-xl);
    padding: 36px 40px;
    position: relative;
    overflow: hidden;
  }

  .pricing-features::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -10%;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle at center, rgba(168, 138, 255, 0.12), transparent 70%);
    pointer-events: none;
  }

  .pricing-features-head {
    position: relative;
    text-align: center;
    margin-bottom: 24px;
  }

  .pricing-features-head h3 {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(20px, 2.2vw, 26px);
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 6px;
  }

  .pricing-features-head p {
    margin: 0;
    font-size: 14.5px;
    color: var(--ink-soft);
  }

  .pricing-features-list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 32px;
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
  }

  .pricing-features-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14.5px;
    color: var(--ink);
    line-height: 1.45;
    letter-spacing: -0.005em;
  }

  .pricing-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(106, 77, 234, 0.12);
    color: var(--violet-700);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    margin-top: 1px;
  }

  @media (max-width: 720px) {
    .pricing-features-list {
      grid-template-columns: 1fr;
    }

    .pricing-features {
      padding: 28px 22px;
    }
  }

  /* ===== Enterprise band ===== */
  .pricing-enterprise {
    margin-top: 24px;
    background: linear-gradient(135deg, #1d1632 0%, #2a1f55 60%, #3e2790 100%);
    border-radius: var(--radius-xl);
    padding: 36px 44px;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 32px;
    align-items: center;
    color: #fff;
    position: relative;
    overflow: hidden;
  }

  .pricing-enterprise::after {
    content: "";
    position: absolute;
    top: -40%;
    right: -10%;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle at center, rgba(168, 138, 255, 0.4), transparent 60%);
    pointer-events: none;
  }

  .pricing-enterprise-body {
    position: relative;
  }

  .pricing-enterprise-tag {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #c9b8ff;
    margin-bottom: 12px;
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
  }

  .pricing-enterprise h3 {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(24px, 2.6vw, 30px);
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0 0 10px;
    line-height: 1.15;
  }

  .pricing-enterprise p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
    max-width: 500px;
    text-wrap: pretty;
  }

  .pricing-enterprise-actions {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
  }

  .pricing-enterprise-actions .btn-primary {
    background: #ffffff;
    color: var(--violet-700);
    border-color: #ffffff;
  }

  .pricing-enterprise-actions .btn-primary:hover {
    background: #f4eeff;
    border-color: #f4eeff;
  }

  .pricing-enterprise-note {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.62);
    max-width: 360px;
    text-align: right;
    line-height: 1.55;
  }

  @media (max-width: 820px) {
    .pricing-enterprise {
      grid-template-columns: 1fr;
      padding: 28px 24px;
    }

    .pricing-enterprise-actions {
      align-items: stretch;
    }

    .pricing-enterprise-actions .btn {
      width: 100%;
      justify-content: center;
    }

    .pricing-enterprise-note {
      text-align: left;
      max-width: none;
    }
  }