/* SiteChat landing — redesigned */
body { margin: 0; }

.landing {
  --ink: #0c1222;
  --ink-soft: #334155;
  --muted: #55607a;
  --line: rgba(12, 18, 34, 0.08);
  --teal: #0d9488;
  --teal-bright: #14b8a6;
  --cyan: #06b6d4;
  --surface: #ffffff;
  --surface-2: #f4f7f6;
  --glow: rgba(13, 148, 136, 0.12);
  --font: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--surface-2);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.landing *, .landing *::before, .landing *::after { box-sizing: border-box; }
.landing a { color: inherit; text-decoration: none; }

.landing .wrap {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2rem);
}

/* OSS top banner */
.landing-oss-banner {
  position: relative;
  z-index: 60;
  overflow: hidden;
  background: linear-gradient(90deg, #0f172a 0%, #134e4a 40%, #0e7490 100%);
  border-bottom: 1px solid rgba(20, 184, 166, 0.2);
}

.landing-oss-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 100% at 50% 50%, rgba(20, 184, 166, 0.12), transparent 70%);
  pointer-events: none;
}

.landing-oss-banner-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.6rem 1rem;
  flex-wrap: wrap;
}

.landing-oss-banner-text {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(226, 232, 240, 0.85);
  letter-spacing: 0.01em;
}

.landing-oss-banner-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5eead4;
  background: rgba(20, 184, 166, 0.12);
  border: 1px solid rgba(20, 184, 166, 0.3);
  padding: 0.2rem 0.6rem;
  border-radius: 100px;
  flex-shrink: 0;
}

.landing-oss-banner-pill-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #2dd4bf;
  animation: landing-pulse 2.5s ease-in-out infinite;
}

.landing-oss-banner a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 0.25rem 0.75rem;
  border-radius: 100px;
  transition: background 0.2s, border-color 0.2s;
  white-space: nowrap;
  text-decoration: none;
}

.landing-oss-banner a:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.28);
}

.landing-oss-banner a svg {
  flex-shrink: 0;
}

/* Nav GitHub icon */
.landing-nav-github {
  display: flex;
  align-items: center;
  opacity: 0.7;
  transition: opacity 0.15s;
}

.landing-nav-github:hover {
  opacity: 1;
}

/* Demo notice — amber warning strip */
.landing-demo-banner {
  position: relative;
  z-index: 60;
  overflow: hidden;
  background: #92400e;
  color: #fef3c7;
  border-bottom: 1px solid #78350f;
}

.landing-demo-banner-sheen { display: none; }

.landing-demo-banner-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem 0.75rem;
  padding: 0.6rem 0;
  flex-wrap: wrap;
}

.landing-demo-pill {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.25rem 0.55rem;
  border-radius: 5px;
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.35);
}

.landing-demo-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: #fbbf24;
}

.landing-demo-copy {
  flex: 1;
  min-width: min(100%, 260px);
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.landing-demo-title {
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.4;
  color: #fef3c7;
  white-space: nowrap;
}

.landing-demo-body {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.4;
  color: rgba(254, 243, 199, 0.8);
}

.landing-demo-body strong {
  font-weight: 700;
  color: #fef3c7;
}

.landing-demo-cta {
  flex-shrink: 0;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.8125rem;
  padding: 0.35rem 0.85rem;
  border-radius: 7px;
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.35);
  transition: background 0.15s, color 0.15s;
}

.landing-demo-cta:hover {
  background: rgba(251, 191, 36, 0.25);
  color: #fef3c7;
}

.landing-demo-cta:active {
  transform: scale(0.98);
}

@media (max-width: 640px) {
  .landing-demo-banner-inner {
    padding: 0.6rem 0;
    gap: 0.5rem;
  }

  .landing-demo-cta {
    margin-left: 0;
  }
}

/* Ambient background */
.landing-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 100% 80% at 10% -30%, rgba(20, 184, 166, 0.14), transparent 50%),
    radial-gradient(ellipse 80% 60% at 90% 10%, rgba(6, 182, 212, 0.1), transparent 45%),
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(13, 148, 136, 0.06), transparent 50%);
}

.landing-grid-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.45;
  background-image:
    linear-gradient(rgba(12, 18, 34, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12, 18, 34, 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, black 0%, black 40%, transparent 85%);
}

.landing > .landing-header,
.landing > main,
.landing > footer {
  position: relative;
  z-index: 1;
  top:10px;
}

/* ——— Header ——— */
.landing-header {
  position: sticky;
  top: 0;
  z-index: 80;
  transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  border-bottom: 1px solid transparent;
}

.landing-header--scrolled {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}

.landing-header-inner {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.landing-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.landing-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.03em;
}

.landing-logo-text { color: var(--ink); }
.landing-logo-text span { color: var(--teal); }

.landing-logo--footer .landing-logo-mark { opacity: 0.7; }

/* Desktop: logo left; links + GitHub + auth CTA grouped on the right (see min-width: 900px). */
.landing-nav-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(0.65rem, 2vw, 1.25rem);
}

.landing-nav-primary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(1rem, 3vw, 2rem);
}

.landing-nav-primary > a:not(.btn) {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.2s;
}

.landing-nav-primary > a:not(.btn):hover { color: var(--ink); }

.landing-nav-cta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.landing-nav-overlay { display: none; }
body.landing-nav-open {
  overflow: hidden;
}

.landing .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.15rem;
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s, color 0.2s;
}

.landing .btn:active { transform: scale(0.98); }

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

.landing .btn-ghost:hover { background: rgba(12, 18, 34, 0.06); }

.landing .btn-primary {
  background: linear-gradient(145deg, var(--teal-bright), #0891b2);
  color: #fff;
  box-shadow: 0 4px 20px var(--glow), 0 1px 0 rgba(255, 255, 255, 0.15) inset;
}

.landing .btn-primary:hover {
  box-shadow: 0 8px 28px rgba(13, 148, 136, 0.28);
}

.landing .btn-lg {
  padding: 0.9rem 1.6rem;
  font-size: 0.95rem;
  border-radius: 12px;
}

.landing .btn-outline {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.landing .btn-outline:hover {
  border-color: rgba(13, 148, 136, 0.35);
  color: var(--teal);
}

.landing .btn-ghost-light {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.landing .btn-ghost-light:hover {
  background: rgba(255, 255, 255, 0.18);
}

.landing-nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.landing-nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
  border-radius: 1px;
}

@media (min-width: 900px) {
  .landing-nav-toggle {
    display: none !important;
  }

  .landing-nav-overlay {
    display: none !important;
  }

  .landing-nav-links {
    position: static !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    flex: 0 1 auto !important;
    padding: 0 !important;
    margin: 0 0 0 auto !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    gap: clamp(0.75rem, 2vw, 1.5rem) !important;
  }

  .landing-nav-primary {
    flex-wrap: nowrap !important;
  }

  .landing-nav-primary > a:not(.btn),
  .landing-nav-primary .landing-nav-github {
    padding: 0 !important;
    border: none !important;
  }

  .landing-nav-cta {
    flex-direction: row !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    width: auto !important;
  }

  .landing-nav-cta .btn {
    width: auto !important;
  }
}

@media (max-width: 899px) {
  .landing-nav-toggle {
    display: flex;
    position: relative;
    z-index: 220;
  }

  .landing-nav-links {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 100dvh;
    height: 100dvh;
    background: var(--surface);
    flex-direction: column;
    align-items: stretch;
    padding: calc(72px + env(safe-area-inset-top, 0px)) 1.25rem calc(20px + env(safe-area-inset-bottom, 0px));
    gap: 0;
    box-shadow: -12px 0 48px rgba(0, 0, 0, 0.08);
    /* Closed: a full-viewport panel must NOT translate off-canvas (translateX(100%) pushes its
       box to [100vw,200vw] and inflates page width). Hide it in place; the inner content slides. */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0s linear 0.3s;
    z-index: 210;
    max-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .landing-nav-links > * {
    transform: translateX(24px);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  }
  [dir="rtl"] .landing-nav-links > * { transform: translateX(-24px); }

  .landing-nav-primary {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
  }

  .landing-nav-links.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease, visibility 0s;
  }
  .landing-nav-links.is-open > * { transform: none; }

  .landing-nav-primary > a:not(.btn),
  .landing-nav-primary .landing-nav-github {
    padding: 1rem 0;
    border-bottom: 1px solid var(--line);
  }

  .landing-nav-cta {
    flex-direction: column;
    margin-left: 0;
    margin-top: 1rem;
    width: 100%;
  }

  .landing-nav-cta .btn { width: 100%; justify-content: center; }

  .landing-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(12, 18, 34, 0.45);
    z-index: 200;
  }

  .landing-nav-overlay.is-open { display: block; }

  /* The menu panel lives inside the sticky header (its own z-index:80 stacking context),
     so its z-index can't beat the root-level overlay (z-index:200). Lift the header above the
     overlay only while the menu is open, so the panel paints on top. */
  body.landing-nav-open .landing-header { z-index: 210; }
}

@media (max-width: 640px) {
  .landing-nav-github {
    display: none !important;
  }
}

/* ——— Hero ——— */
.landing-hero {
  padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(3rem, 8vw, 5rem);
}

.landing-hero-grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 960px) {
  .landing-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 1.05fr);
    gap: 3rem;
  }
}

.landing-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--teal);
  margin-bottom: 1.5rem;
  letter-spacing: 0.02em;
  background: rgba(13, 148, 136, 0.07);
  border: 1px solid rgba(13, 148, 136, 0.18);
  padding: 0.35rem 0.75rem 0.35rem 0.5rem;
  border-radius: 100px;
}

.landing-eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal-bright);
  box-shadow: 0 0 0 3px var(--glow);
  animation: landing-pulse 2.5s ease-in-out infinite;
}

@keyframes landing-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.05); }
}

.landing-hero-title {
  font-family: var(--font);
  font-size: clamp(2rem, 4.2vw, 3rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.022em;
  max-width: min(100%, 24rem);
  margin: 0 0 1.35rem;
}

@media (min-width: 960px) {
  .landing-hero-title {
    max-width: 22em;
    letter-spacing: -0.026em;
  }
}

/* Inline accent: same metrics as headline (gradient can skew WebKit line boxes) */
.landing-gradient-text {
  display: inline;
  font-size: inherit;
  font-weight: 700;
  line-height: inherit;
  letter-spacing: inherit;
  color: #0f766e;
}

@supports (-webkit-background-clip: text) {
  .landing-gradient-text {
    background: linear-gradient(120deg, #14b8a6, #0891b2);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

.landing-hero-lead {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 36rem;
  margin: 0 0 1.75rem;
}

.landing-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.landing-hero-meta {
  font-size: 0.875rem;
  color: var(--muted);
  margin: 1.25rem 0 2rem;
  line-height: 1.5;
}

.landing-link-arrow {
  color: var(--teal);
  font-weight: 600;
  transition: color 0.2s;
}

.landing-link-arrow:hover { color: var(--ink); }

.landing-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.landing-stat {
  flex: 1;
  min-width: 120px;
  padding-right: 1.5rem;
  border-right: 1px solid var(--line);
  margin-right: 1.5rem;
}

.landing-stat:last-child {
  border-right: none;
  padding-right: 0;
  margin-right: 0;
}

.landing-stat strong {
  display: block;
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.2rem;
}

.landing-stat span {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.4;
}

/* Product visual */
.landing-hero-visual-wrap {
  position: relative;
  perspective: 1200px;
}

.landing-hero-glow {
  position: absolute;
  inset: -20% -10% -10% -10%;
  background: radial-gradient(ellipse at center, rgba(20, 184, 166, 0.2), transparent 65%);
  filter: blur(40px);
  z-index: 0;
}

.landing-browser {
  position: relative;
  z-index: 1;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow:
    0 32px 64px -24px rgba(12, 18, 34, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.9) inset;
  transform: none;
  transition: transform 0.5s ease, box-shadow 0.35s ease;
}

@media (min-width: 960px) {
  .landing-browser {
    transform: rotateX(2deg) rotateY(-2.5deg);
  }

  @media (hover: hover) {
    .landing-hero-visual-wrap:hover .landing-browser {
      transform: rotateX(0deg) rotateY(0deg) translateY(-4px);
      box-shadow:
        0 40px 72px -28px rgba(12, 18, 34, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.9) inset;
    }
  }
}

.landing-browser-chrome {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  background: linear-gradient(180deg, #f8fafc, #f1f5f9);
  border-bottom: 1px solid var(--line);
  border-radius: 14px 14px 0 0;
}

.landing-browser-dots {
  display: flex;
  gap: 6px;
}

.landing-browser-dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e2e8f0;
}

.landing-browser-dots i:nth-child(1) { background: #fb7185; }
.landing-browser-dots i:nth-child(2) { background: #fbbf24; }
.landing-browser-dots i:nth-child(3) { background: #4ade80; }

.landing-browser-url {
  flex: 1;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--muted);
}

.landing-browser-body {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 240px;
}

@media (min-width: 520px) {
  .landing-browser-body {
    grid-template-columns: 1fr minmax(200px, 42%);
    min-height: 280px;
  }
}

.landing-browser-page {
  padding: 1.25rem;
  background: linear-gradient(180deg, #fafbfc, #f1f5f9);
}

.landing-skel {
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(90deg, #e2e8f0, #f1f5f9, #e2e8f0);
  background-size: 200% 100%;
  animation: landing-shimmer 2.5s ease infinite;
  margin-bottom: 0.65rem;
}

.landing-skel-title { height: 14px; width: 45%; margin-bottom: 1rem; }
.landing-skel-line { width: 100%; }
.landing-skel-line.short { width: 72%; }

@keyframes landing-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.landing-browser-chat {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-top: 1px solid var(--line);
  overflow: hidden;
}

@media (min-width: 520px) {
  .landing-browser-chat {
    border-top: none;
    border-left: 1px solid var(--line);
  }
}

/* scrollable message list */
.landing-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-height: 0;
}

.landing-chat-messages::-webkit-scrollbar { width: 3px; }
.landing-chat-messages::-webkit-scrollbar-thumb { background: rgba(13,148,136,0.2); border-radius: 2px; }

.landing-chat-bubble {
  max-width: 95%;
  padding: 0.65rem 0.85rem;
  border-radius: 14px;
  font-size: 0.8125rem;
  line-height: 1.45;
}

.landing-chat-bubble.user {
  align-self: flex-end;
  background: linear-gradient(145deg, var(--teal), #0f766e);
  color: #fff;
  border-radius: 14px 14px 4px 14px;
}

.landing-chat-bubble.bot {
  background: #f1f5f9;
  color: var(--ink);
  border-radius: 14px 14px 14px 4px;
}

.landing-chat-bubble.bot cite {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.65rem;
  font-style: normal;
  color: var(--teal);
  font-family: var(--mono);
}

/* input row */
.landing-chat-input-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.75rem;
  border-top: 1px solid var(--line);
  background: #fff;
  flex-shrink: 0;
}

.landing-chat-input {
  flex: 1;
  border: 1px solid rgba(13, 148, 136, 0.2);
  border-radius: 100px;
  padding: 0.42rem 0.85rem;
  font-size: 0.78rem;
  font-family: var(--font-body);
  color: var(--ink);
  background: #f8fafc;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.landing-chat-input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.1);
  background: #fff;
}

.landing-chat-input::placeholder { color: #94a3b8; }

.landing-chat-input:disabled { opacity: 0.5; }

.landing-chat-send {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--cyan));
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  transition: opacity 0.15s, transform 0.15s;
}

.landing-chat-send:hover { opacity: 0.88; transform: scale(1.05); }
.landing-chat-send:active { transform: scale(0.96); }

/* Trust strip */
.landing-trust {
  padding: 2.25rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.65);
}

.landing-trust-label {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--muted);
  margin: 0 0 1.1rem;
}

.landing-trust-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem 0.6rem;
}

.landing-trust-list li {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 0.35rem 0.85rem 0.35rem 0.65rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 100px;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.landing-trust-list li::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal-bright);
  flex-shrink: 0;
  opacity: 0.8;
}

/* Section heads */
.landing-section-head {
  text-align: center;
  max-width: 36rem;
  margin: 0 auto 2.75rem;
}

.landing-section-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--teal);
  margin-bottom: 0.75rem;
}

.landing-section-title {
  font-family: var(--font);
  font-size: clamp(1.75rem, 3.5vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0 0 0.75rem;
}

.landing-section-sub {
  margin: 0;
  font-size: 1.05rem;
  color: var(--muted);
  line-height: 1.55;
}

.landing-section-head--light .landing-section-tag { color: var(--teal-bright); }
.landing-section-head--light .landing-section-title { color: #fff; }
.landing-section-head--light .landing-section-sub {
  color: rgba(226, 232, 240, 0.72);
  margin-top: 0.5rem;
}

/* Bento features */
.landing-features {
  padding: clamp(4rem, 10vw, 6rem) 0;
}

.landing-bento {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .landing-bento {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
  }

  .landing-bento-featured {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    min-height: 100%;
  }
}

.landing-bento-card {
  padding: 1.5rem 1.65rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}

.landing-bento-card:hover {
  border-color: rgba(13, 148, 136, 0.28);
  box-shadow: 0 12px 40px -16px rgba(13, 148, 136, 0.18);
  transform: translateY(-1px);
}

.landing-bento-featured {
  background: linear-gradient(155deg, #ecfdf5 0%, #f0fdfa 30%, #fff 70%);
  border-color: rgba(13, 148, 136, 0.2);
  box-shadow: 0 4px 24px -8px rgba(13, 148, 136, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.landing-bento-featured:hover {
  border-color: rgba(13, 148, 136, 0.35);
  box-shadow: 0 16px 48px -20px rgba(13, 148, 136, 0.22);
  transform: translateY(-2px);
}

.landing-bento-featured h3 {
  font-size: 1.4rem;
  margin-bottom: 0.65rem;
  letter-spacing: -0.025em;
}

.landing-bento-featured p {
  font-size: 1rem;
  max-width: 32rem;
  line-height: 1.6;
}

.landing-bento-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(20, 184, 166, 0.15), rgba(6, 182, 212, 0.1));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal);
  margin-bottom: 1.1rem;
}

.landing-bento-icon.sm {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  margin-bottom: 0.9rem;
}

.landing-bento-card h3 {
  font-family: var(--font);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  letter-spacing: -0.02em;
}

.landing-bento-card p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
}

.landing-bento-meta {
  margin-top: auto;
  padding-top: 1.25rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--teal);
  letter-spacing: 0.04em;
}

/* Code block */
.landing-code {
  padding: clamp(3.5rem, 8vw, 5rem) 0;
  background: var(--ink);
  color: #e2e8f0;
}

.landing-code-inner {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 880px) {
  .landing-code-inner {
    grid-template-columns: 1fr 1.1fr;
    gap: 3rem;
  }
}

.landing-code-copy h2 {
  font-family: var(--font);
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 0.75rem;
  color: #fff;
}

.landing-code-copy p {
  margin: 0 0 1.5rem;
  color: rgba(226, 232, 240, 0.75);
  line-height: 1.6;
  max-width: 28rem;
}

.landing-code-block {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.35);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.25);
}

.landing-code-header {
  padding: 0.5rem 1rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.45);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.landing-code-pre {
  margin: 0;
  padding: 1.15rem 1.25rem;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.65;
}

.landing-code-pre .tok-p { color: #94a3b8; }
.landing-code-pre .tok-a { color: #7dd3fc; }
.landing-code-pre .tok-s { color: #86efac; }

/* Dark timeline */
.landing-dark {
  padding: clamp(4rem, 10vw, 5.5rem) 0;
  background: linear-gradient(180deg, #0f172a 0%, #0c1222 100%);
  color: #e2e8f0;
}

.landing-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2rem;
}

@media (min-width: 768px) {
  .landing-timeline {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    position: relative;
  }

  .landing-timeline::before {
    content: "";
    position: absolute;
    top: 26px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(20, 184, 166, 0.5) 20%, rgba(20, 184, 166, 0.5) 80%, transparent);
    z-index: 0;
    pointer-events: none;
  }
}

.landing-timeline-item {
  position: relative;
  padding-top: 0.5rem;
  z-index: 1;
}

.landing-timeline-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(20, 184, 166, 0.22), rgba(6, 182, 212, 0.14));
  border: 1px solid rgba(20, 184, 166, 0.4);
  box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.07), inset 0 1px 0 rgba(255,255,255,0.08);
  font-family: var(--font);
  font-weight: 800;
  font-size: 0.85rem;
  color: #5eead4;
  margin-bottom: 1.25rem;
  letter-spacing: 0.02em;
}

.landing-timeline-item h3 {
  font-family: var(--font);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: #fff;
}

.landing-timeline-item p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(226, 232, 240, 0.65);
}

/* CTA */
.landing-cta {
  padding: clamp(3rem, 8vw, 4.5rem) 0;
}

.landing-cta-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(2rem, 4vw, 2.75rem) clamp(1.75rem, 4vw, 3rem);
  border-radius: 20px;
  background: linear-gradient(135deg, #0d9488 0%, #0891b2 60%, #0e7490 100%);
  color: #fff;
  box-shadow:
    0 28px 56px -20px rgba(13, 148, 136, 0.45),
    0 0 0 1px rgba(255,255,255,0.08) inset,
    0 1px 0 rgba(255,255,255,0.18) inset;
  position: relative;
  overflow: hidden;
}

.landing-cta-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(255,255,255,0.07), transparent 60%);
  pointer-events: none;
}

.landing-cta-text h2 {
  font-family: var(--font);
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 0.35rem;
}

.landing-cta-text p {
  margin: 0;
  opacity: 0.9;
  font-size: 0.95rem;
}

.landing-cta-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.landing-cta .btn-primary {
  background: #fff;
  color: #0f766e;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.landing-cta .btn-primary:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}

/* Footer */
.landing-footer {
  padding: 2.75rem 0 2rem;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.landing-footer-top {
  display: grid;
  gap: 2rem;
  margin-bottom: 2rem;
}

@media (min-width: 640px) {
  .landing-footer-top {
    grid-template-columns: 1.4fr 1fr;
    align-items: start;
  }
}

.landing-footer-brand p {
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.55;
  max-width: 300px;
}

.landing-footer-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.landing-footer-cols h4 {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin: 0 0 0.85rem;
}

.landing-footer-cols ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.landing-footer-cols li { margin-bottom: 0.5rem; }

.landing-footer-cols a {
  font-size: 0.875rem;
  color: var(--ink-soft);
  transition: color 0.2s;
  font-weight: 500;
}

.landing-footer-cols a:hover { color: var(--teal); }

.landing-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--muted);
}

.landing-footer-bottom a:hover { color: var(--teal); }

/* ——— Hero badge ——— */
.landing-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--teal);
  background: rgba(13, 148, 136, 0.07);
  border: 1px solid rgba(13, 148, 136, 0.2);
  padding: 0.35rem 0.75rem;
  border-radius: 100px;
  margin-bottom: 1.5rem;
  transition: background 0.2s, border-color 0.2s;
}

.landing-hero-badge:hover {
  background: rgba(13, 148, 136, 0.12);
  border-color: rgba(13, 148, 136, 0.35);
}

.landing-hero-badge-arrow {
  opacity: 0.6;
  font-size: 0.75rem;
}

/* ——— Hero stats divider ——— */
.landing-stat-divider {
  width: 1px;
  background: var(--line);
  align-self: stretch;
  margin: 0 1.5rem;
}

/* ——— Typing indicator ——— */
.landing-chat-typing {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 0.55rem 0.85rem;
  background: #f1f5f9;
  border-radius: 14px 14px 14px 4px;
  width: fit-content;
}

.landing-chat-typing[style*="flex"] {
  display: flex !important;
}

.landing-chat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #94a3b8;
  animation: landing-typing 1.4s ease-in-out infinite;
}

.landing-chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.landing-chat-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes landing-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-5px); opacity: 1; }
}

/* ——— Trust bar with SVG checks ——— */
.landing-trust-list li::before { display: none; }

.landing-trust-list li svg {
  flex-shrink: 0;
  color: var(--teal);
}

/* ——— Pain / Solution ——— */
.landing-pain {
  padding: clamp(4rem, 10vw, 6rem) 0;
  background: var(--surface-2);
}

.landing-pain-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 768px) {
  .landing-pain-grid {
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: 0;
  }
}

.landing-pain-col {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}

.landing-pain-col-head {
  padding: 0.85rem 1.5rem;
  border-bottom: 1px solid var(--line);
}

.landing-pain-label {
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.landing-pain-label.before { color: #ef4444; }
.landing-pain-label.after { color: var(--teal); }

.landing-pain-before { border-color: rgba(239, 68, 68, 0.2); }
.landing-pain-before .landing-pain-col-head { background: rgba(239, 68, 68, 0.03); border-color: rgba(239, 68, 68, 0.15); }

.landing-pain-after { border-color: rgba(13, 148, 136, 0.25); }
.landing-pain-after .landing-pain-col-head { background: rgba(13, 148, 136, 0.04); border-color: rgba(13, 148, 136, 0.15); }

.landing-pain-list {
  list-style: none;
  margin: 0;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.landing-pain-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.landing-pain-before .landing-pain-list svg { color: #ef4444; flex-shrink: 0; margin-top: 1px; }
.landing-pain-after .landing-pain-list svg { color: var(--teal); flex-shrink: 0; margin-top: 1px; }

.landing-pain-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem;
  gap: 0.5rem;
}

@media (max-width: 767px) {
  .landing-pain-divider {
    flex-direction: row;
    padding: 0;
  }

  .landing-pain-divider-icon svg {
    transform: rotate(90deg);
  }
}

.landing-pain-divider-line {
  flex: 1;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, transparent, var(--line) 30%, var(--line) 70%, transparent);
  min-height: 24px;
  min-width: 1px;
}

@media (max-width: 767px) {
  .landing-pain-divider-line {
    width: 100%;
    height: 1px;
    min-height: 1px;
  }
}

.landing-pain-divider-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal);
  flex-shrink: 0;
}

/* ——— Bento tags (replaces bento-meta) ——— */
.landing-bento-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 1.25rem;
}

.landing-bento-tags span {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--teal);
  background: rgba(13, 148, 136, 0.08);
  border: 1px solid rgba(13, 148, 136, 0.18);
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
}

/* ——— Timeline tags ——— */
.landing-timeline-content h3 { margin-bottom: 0.5rem; }
.landing-timeline-content p { margin-bottom: 0.85rem; }

.landing-timeline-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.landing-timeline-tags span {
  font-family: var(--mono);
  font-size: 0.65rem;
  color: rgba(94, 234, 212, 0.9);
  background: rgba(20, 184, 166, 0.1);
  border: 1px solid rgba(20, 184, 166, 0.25);
  padding: 0.18rem 0.5rem;
  border-radius: 5px;
}

/* ——— Code copy button ——— */
.landing-code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.landing-code-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.landing-code-copy-btn:hover {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.12);
}

/* ——— Code section tag ——— */
.landing-code-copy .landing-section-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--teal-bright);
  margin-bottom: 0.6rem;
}

/* ——— Why SiteChat comparison ——— */
.landing-why {
  padding: clamp(4rem, 10vw, 6rem) 0;
  background: var(--surface);
}

.landing-compare {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: 0 4px 24px -8px rgba(12, 18, 34, 0.08);
}

.landing-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  min-width: 560px;
}

.landing-compare-table th,
.landing-compare-table td {
  padding: 0.9rem 1.25rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.landing-compare-table tbody tr:last-child td {
  border-bottom: none;
}

.landing-compare-table thead th {
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: var(--surface-2);
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.landing-compare-table thead th small {
  display: block;
  font-size: 0.7rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  margin-top: 0.2rem;
  color: var(--muted);
  opacity: 0.7;
}

.landing-compare-table th:first-child,
.landing-compare-table td:first-child {
  font-weight: 600;
  color: var(--ink);
  width: 30%;
}

.landing-compare-table tbody tr:hover td {
  background: rgba(13, 148, 136, 0.02);
}

.landing-compare-them {
  color: var(--muted);
  background: rgba(239, 68, 68, 0.02);
}

.landing-compare-us {
  background: rgba(13, 148, 136, 0.03);
}

.landing-compare-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal);
  background: rgba(13, 148, 136, 0.1);
  border: 1px solid rgba(13, 148, 136, 0.2);
  padding: 0.15rem 0.45rem;
  border-radius: 5px;
  margin-left: 0.4rem;
  vertical-align: middle;
}

.cmp-yes {
  color: #0f766e;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.cmp-yes::before {
  content: "✓";
  font-size: 0.85rem;
  color: var(--teal);
}

.cmp-no {
  color: #9ca3af;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.cmp-no::before {
  content: "✕";
  font-size: 0.85rem;
  color: #ef4444;
  opacity: 0.7;
}

.cmp-partial {
  color: #92400e;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.cmp-partial::before {
  content: "~";
  font-size: 1rem;
  color: #d97706;
}

/* ——— FAQ ——— */
.landing-faq {
  padding: clamp(4rem, 10vw, 6rem) 0;
  background: var(--surface-2);
}

.landing-faq-grid {
  display: grid;
  gap: 0.75rem;
  max-width: 840px;
  margin: 0 auto;
}

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

.landing-faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.2s;
}

.landing-faq-item[open] {
  border-color: rgba(13, 148, 136, 0.3);
}

.landing-faq-item summary {
  padding: 1.1rem 1.25rem;
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.925rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--ink);
  transition: color 0.2s;
  user-select: none;
}

.landing-faq-item summary::-webkit-details-marker { display: none; }

.landing-faq-item summary::after {
  content: "+";
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--teal);
  flex-shrink: 0;
  line-height: 1;
  transition: transform 0.2s;
}

.landing-faq-item[open] summary::after {
  content: "−";
}

.landing-faq-item summary:hover { color: var(--teal); }

.landing-faq-item p {
  margin: 0;
  padding: 0 1.25rem 1.1rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 0.9rem;
}

/* ——— CTA glow ——— */
.landing-cta-card { position: relative; }
.landing-cta-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 80% at 15% 50%, rgba(255,255,255,0.08), transparent 55%);
  pointer-events: none;
}

/* ——— Responsive footer cols ——— */
@media (min-width: 640px) {
  .landing-footer-cols {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ——— Btn icon alignment ——— */
.landing .btn svg { flex-shrink: 0; margin-right: 0.35rem; }

/* =====================================================
   Widget overrides — match landing page palette
   ===================================================== */

/* Font — swap Inter → DM Sans */
.sitechat-widget * {
  font-family: "DM Sans", system-ui, sans-serif !important;
}

/* Toggle — teal shadow, rounded-square to match landing cards */
.sitechat-toggle {
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(13, 148, 136, 0.45), 0 2px 8px rgba(12, 18, 34, 0.12) !important;
}

.sitechat-toggle:hover {
  box-shadow: 0 6px 28px rgba(13, 148, 136, 0.6), 0 2px 8px rgba(12, 18, 34, 0.15) !important;
}

/* Chat window — rounder, landing-card shadow + teal border */
.sitechat-window {
  border-radius: 20px !important;
  border: 1px solid rgba(13, 148, 136, 0.14) !important;
  box-shadow:
    0 32px 64px -20px rgba(12, 18, 34, 0.2),
    0 8px 24px -8px rgba(12, 18, 34, 0.1) !important;
}

/* Header — sharper font, icon style */
.sitechat-header {
  background: linear-gradient(135deg, #0d9488 0%, #0891b2 100%) !important;
}

.sitechat-header-text h3 {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: -0.02em !important;
}

.sitechat-header-text p {
  font-size: 12px !important;
  opacity: 0.85 !important;
}

.sitechat-header-icon {
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.18) !important;
}

/* Welcome / messages area — landing surface-2 */
.sitechat-welcome {
  background: linear-gradient(160deg, #f0faf9 0%, #e6f4f3 100%) !important;
}

.sitechat-welcome h4 {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  color: #0c1222 !important;
}

.sitechat-welcome p {
  color: #55607a !important;
}

.sitechat-welcome-icon {
  background: linear-gradient(135deg, rgba(13,148,136,0.12), rgba(8,145,178,0.1)) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(13, 148, 136, 0.18) !important;
}

/* Suggestion chips */
.sitechat-suggestion {
  border-radius: 12px !important;
  border: 1px solid rgba(13, 148, 136, 0.2) !important;
  color: #0c1222 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(12, 18, 34, 0.06) !important;
}

.sitechat-suggestion:hover {
  border-color: rgba(13, 148, 136, 0.45) !important;
  background: rgba(13, 148, 136, 0.04) !important;
  color: #0d9488 !important;
}

/* Messages area */
.sitechat-messages {
  background: linear-gradient(180deg, #f4f7f6 0%, #edf3f2 100%) !important;
}

.sitechat-messages::-webkit-scrollbar-thumb {
  background: rgba(13, 148, 136, 0.2) !important;
}

/* Bot messages */
.sitechat-message.bot {
  background: #ffffff !important;
  color: #0c1222 !important;
  border: 1px solid rgba(13, 148, 136, 0.1) !important;
  box-shadow: 0 1px 4px rgba(12, 18, 34, 0.06) !important;
}

.sitechat-message.bot strong { color: #0c1222 !important; }
.sitechat-message.bot code {
  background: rgba(13, 148, 136, 0.08) !important;
  border-radius: 5px !important;
}

/* Avatars */
.sitechat-avatar.user {
  background: linear-gradient(135deg, #1e293b, #0c1222) !important;
}

/* Input area */
.sitechat-input-area {
  background: #ffffff !important;
  border-top: 1px solid rgba(13, 148, 136, 0.1) !important;
}

.sitechat-input {
  font-family: "DM Sans", system-ui, sans-serif !important;
  border-radius: 12px !important;
  border: 1px solid rgba(13, 148, 136, 0.18) !important;
  background: #f8fbfa !important;
  color: #0c1222 !important;
}

.sitechat-input:focus {
  border-color: rgba(13, 148, 136, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.09) !important;
  outline: none !important;
  background: #ffffff !important;
}

.sitechat-input::placeholder { color: #8896aa !important; }

/* Send button */
.sitechat-send {
  border-radius: 12px !important;
  background: linear-gradient(135deg, #0d9488, #0891b2) !important;
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.3) !important;
}

/* Branding */
.sitechat-branding {
  font-size: 12px !important;
  color: #8896aa !important;
}

/* Source citations */
.sitechat-source-link {
  border-radius: 8px !important;
  font-size: 11.5px !important;
}

/* Nudge bubble */
.sitechat-nudge {
  border-radius: 16px !important;
  border: 1px solid rgba(13, 148, 136, 0.15) !important;
  box-shadow: 0 8px 24px -8px rgba(12, 18, 34, 0.14) !important;
}

/* Scrollbar track */
.sitechat-messages::-webkit-scrollbar-track {
  background: transparent !important;
}

/* ── Injected header buttons ── */

/* Push header actions to the right */
.sitechat-header {
  flex-wrap: nowrap !important;
}

.sitechat-header-text {
  flex: 1 !important;
  min-width: 0 !important;
}

/* Header actions row (live agent + close) — must stay visible inside overflow:hidden panel */
.sitechat-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative;
  z-index: 2;
}

/* Close button */
.sitechat-close-btn,
.sitechat-header-close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}

.sitechat-close-btn:hover,
.sitechat-header-close:hover {
  background: rgba(255, 255, 255, 0.28);
}

/* ── Handoff button — toggle pill ── */
.sitechat-handoff-btn {
  position: relative;
  flex-shrink: 0;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  padding: 0.35rem 0.8rem !important;
  width: auto !important;
  height: auto !important;
  min-height: 32px !important;
  border-radius: 100px !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  background: rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  cursor: pointer !important;
  transition: background 0.2s, border-color 0.2s, transform 0.15s !important;
  white-space: nowrap !important;
}

.sitechat-handoff-btn:hover {
  background: rgba(255, 255, 255, 0.24) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

.sitechat-handoff-btn:active {
  transform: scale(0.96) !important;
}

.sitechat-handoff-btn span {
  line-height: 1 !important;
}

/* Idle state — green pulsing dot */
.sitechat-handoff-btn[data-state="idle"]::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.3);
  animation: landing-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

/* Requesting state — amber pulsing dot */
.sitechat-handoff-btn[data-state="requesting"] {
  background: rgba(251, 191, 36, 0.2) !important;
  border-color: rgba(251, 191, 36, 0.5) !important;
}

.sitechat-handoff-btn[data-state="requesting"]::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fbbf24;
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.35);
  animation: landing-pulse 1s ease-in-out infinite;
  flex-shrink: 0;
}

/* Connected state — solid green */
.sitechat-handoff-btn[data-state="connected"] {
  background: rgba(74, 222, 128, 0.2) !important;
  border-color: rgba(74, 222, 128, 0.5) !important;
}

.sitechat-handoff-btn[data-state="connected"]::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0;
}

/* Tooltip */
.sitechat-handoff-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #0c1222;
  color: #fff;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  padding: 0.35rem 0.65rem;
  border-radius: 7px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 100;
}

.sitechat-handoff-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #0c1222;
}

.sitechat-handoff-btn:hover .sitechat-handoff-tip {
  opacity: 1;
}

/* ——— Live demo section ——— */
.landing-demo-section {
  padding: clamp(4rem, 10vw, 6rem) 0;
  background: var(--surface);
}

.landing-demo-frame {
  max-width: 680px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 24px 64px -24px rgba(12, 18, 34, 0.16);
}

.landing-demo-site-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  background: linear-gradient(180deg, #f8fafc, #f1f5f9);
  border-bottom: 1px solid var(--line);
}

.landing-demo-site-url {
  flex: 1;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--muted);
}

.landing-demo-live-pill {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: #059669;
  background: #d1fae5;
  border: 1px solid #a7f3d0;
  padding: 0.2rem 0.6rem;
  border-radius: 100px;
}

.landing-demo-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  animation: landing-pulse 2s ease-in-out infinite;
}

.landing-demo-site-body {
  background: linear-gradient(160deg, #f8fafc, #f1f5f9);
  padding: 2rem;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.landing-demo-site-content {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.landing-demo-hint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.825rem;
  color: var(--teal);
  background: rgba(13, 148, 136, 0.06);
  border: 1px solid rgba(13, 148, 136, 0.18);
  padding: 0.65rem 1rem;
  border-radius: 10px;
  font-weight: 500;
}

.landing-demo-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
}

/* ===================== HOW IT WORKS ===================== */
.landing-hiw {
  padding: 5rem 0 6rem;
  background: var(--surface-2);
  position: relative;
  overflow: hidden;
}

.landing-hiw::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(13, 148, 136, 0.06), transparent 70%);
  pointer-events: none;
}

/* ---- Steps list (vertical timeline) ---- */
.landing-hiw-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  z-index: 1;
}

/* each step: full-width row */
.landing-hiw-step {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  padding: 3rem 0;
  border-bottom: 1px solid var(--line);
}

.landing-hiw-step:last-child {
  border-bottom: none;
}

/* left: step number column + body */
.landing-hiw-step-content {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.landing-hiw-step-num {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  padding-top: 0.15rem;
}

.landing-hiw-step-num > span {
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--teal);
  background: rgba(13, 148, 136, 0.1);
  border: 1px solid rgba(13, 148, 136, 0.2);
  border-radius: 100px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.landing-hiw-step-line {
  width: 1px;
  flex: 1;
  min-height: 2rem;
  margin-top: 0.5rem;
  background: linear-gradient(to bottom, rgba(13, 148, 136, 0.25), transparent);
}

.landing-hiw-step:last-child .landing-hiw-step-line {
  display: none;
}

.landing-hiw-step-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

.landing-hiw-step-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(13, 148, 136, 0.1) 0%, rgba(6, 182, 212, 0.08) 100%);
  border: 1px solid rgba(13, 148, 136, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal);
  flex-shrink: 0;
}

.landing-hiw-step-body h3 {
  font-family: var(--font);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  line-height: 1.25;
}

.landing-hiw-step-body p {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.7;
  margin: 0;
}

.landing-hiw-step-bullets {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.landing-hiw-step-bullets li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-weight: 500;
}

.landing-hiw-step-bullets li svg {
  color: var(--teal);
  flex-shrink: 0;
}

/* right: visual mock */
.landing-hiw-step-visual {
  background: #fff;
  border: 1px solid rgba(13, 148, 136, 0.1);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 32px rgba(13, 148, 136, 0.08), 0 1px 6px rgba(0,0,0,0.04);
}

.landing-hiw-step-visual--dark {
  background: #0f172a;
  border-color: rgba(255, 255, 255, 0.06);
}

.hiw-visual-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
  letter-spacing: 0.01em;
}

/* ---- Visual: crawl rows ---- */
.hiw-crawl-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid rgba(13, 148, 136, 0.06);
}

.hiw-crawl-row--active {
  background: rgba(13, 148, 136, 0.03);
}

.hiw-crawl-row--pending {
  opacity: 0.45;
}

.hiw-crawl-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.hiw-crawl-dot.done    { background: #10b981; }
.hiw-crawl-dot.active  { background: var(--teal); animation: hiw-dot-pulse 1.4s ease-in-out infinite; }
.hiw-crawl-dot.pending { background: #cbd5e1; }

@keyframes hiw-dot-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

.hiw-crawl-url {
  font-size: 0.76rem;
  font-family: var(--mono);
  color: #475569;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hiw-crawl-status {
  font-size: 0.67rem;
  font-weight: 600;
  color: #10b981;
  white-space: nowrap;
}

.hiw-crawl-status--pending { color: #94a3b8; }

.hiw-crawl-bar {
  height: 5px;
  background: rgba(13, 148, 136, 0.1);
  border-radius: 100px;
  overflow: hidden;
  width: 80px;
}

.hiw-crawl-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--teal), var(--cyan));
  border-radius: 100px;
}

.hiw-crawl-bar-fill--anim {
  animation: hiw-fill-grow 2s ease-in-out infinite alternate;
}

@keyframes hiw-fill-grow {
  from { width: 52%; }
  to   { width: 78%; }
}

.hiw-crawl-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1rem;
  font-size: 0.72rem;
  color: var(--muted);
  background: #f8fafc;
  gap: 0.4rem;
}

.hiw-crawl-footer > span:first-child {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: #475569;
}

.hiw-crawl-pill {
  font-size: 0.64rem;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: 100px;
  background: rgba(251, 191, 36, 0.15);
  color: #b45309;
  border: 1px solid rgba(251, 191, 36, 0.3);
}

/* ---- Visual: code block ---- */
.hiw-code-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1rem;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.hiw-code-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.hiw-code-file {
  font-size: 0.7rem;
  font-family: var(--mono);
  color: rgba(255, 255, 255, 0.3);
  margin-left: 0.3rem;
}

.hiw-code-body {
  margin: 0;
  padding: 1.25rem 1rem;
  font-size: 0.82rem;
  font-family: var(--mono);
  line-height: 1.8;
  color: #94a3b8;
  overflow-x: auto;
}

.hiw-code-body code { font-family: inherit; }

.hiw-tok-p { color: #7dd3fc; }
.hiw-tok-a { color: #86efac; }
.hiw-tok-s { color: #fda4af; }

.hiw-code-footer {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1rem;
  font-size: 0.72rem;
  color: #4ade80;
  background: rgba(74, 222, 128, 0.06);
  border-top: 1px solid rgba(74, 222, 128, 0.08);
}

/* ---- Visual: conversation dashboard ---- */
.hiw-review-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid rgba(13, 148, 136, 0.06);
}

.hiw-review-row--active {
  background: rgba(251, 191, 36, 0.04);
  border-left: 3px solid #fbbf24;
  padding-left: calc(1rem - 1px);
}

.hiw-review-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.hiw-review-dot--ok  { background: #10b981; }
.hiw-review-dot--gap { background: #fbbf24; animation: hiw-dot-pulse 1.4s ease-in-out infinite; }

.hiw-review-q {
  flex: 1;
  font-size: 0.8rem;
  color: #334155;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hiw-review-badge {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.18rem 0.55rem;
  border-radius: 100px;
  flex-shrink: 0;
}

.hiw-review-badge--answered {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.hiw-review-badge--gap {
  background: rgba(251, 191, 36, 0.15);
  color: #b45309;
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.hiw-review-inline-actions {
  display: flex;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: rgba(251, 191, 36, 0.03);
  border-bottom: 1px solid rgba(13, 148, 136, 0.06);
}

.hiw-review-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.32rem 0.75rem;
  border-radius: 100px;
  border: none;
  cursor: default;
}

.hiw-review-btn--fix {
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
  border: 1px solid rgba(99, 102, 241, 0.2);
}

.hiw-review-btn--assign {
  background: rgba(13, 148, 136, 0.1);
  color: var(--teal);
  border: 1px solid rgba(13, 148, 136, 0.2);
}

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .landing-hiw-step {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 2rem 0;
  }

  .landing-hiw-step-num > span {
    width: 30px;
    height: 30px;
    font-size: 0.65rem;
  }

  .landing-hiw-step-body h3 {
    font-size: 1.15rem;
  }
}

/* ---------------------------------------------------------
   Mobile polish (landing)
   --------------------------------------------------------- */
@media (max-width: 900px) {
  .landing .wrap {
    padding: 0 1rem;
  }

  .landing-hero-grid,
  .landing-proof-grid,
  .landing-feature-grid,
  .landing-ops-grid,
  .landing-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }

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

@media (max-width: 640px) {
  .landing {
    font-size: 15px;
  }

  .landing-section {
    padding: 2.5rem 0;
  }

  .landing-hero {
    padding-top: 1rem;
  }

  .landing-hero-title {
    font-size: clamp(1.75rem, 7vw, 2.15rem);
    line-height: 1.1;
  }

  .landing-hero-subtitle {
    font-size: 0.98rem;
  }

  .landing-hero-cta {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  .landing-hero-cta .btn,
  .landing-hero-cta a {
    width: 100%;
    justify-content: center;
  }

  #landing-nav-menu,
  .landing-nav-links {
    max-height: calc(100vh - 72px);
    overflow-y: auto;
  }

  .landing-code,
  .landing-embed-card,
  .landing-live-card {
    border-radius: 12px;
  }

  .landing-code pre,
  .landing-code code {
    font-size: 12px;
    white-space: pre;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .landing-chat-window {
    min-height: 420px;
  }
}

/* Extra mobile-friendly overrides (landing) */
@media (max-width: 640px) {
  .landing-hero-grid { gap: 1rem; }
  .landing-hero-stats { grid-template-columns: 1fr; gap: .5rem; }
  .landing-browser { border-radius: 14px; }
  .landing-browser-chat { min-height: 320px; }
  .landing-nav-links { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}

/* Very small phones */
@media (max-width: 375px) {
  .landing .wrap {
    padding: 0 0.85rem;
  }

  .landing-hero-title {
    font-size: clamp(1.5rem, 8.5vw, 1.9rem);
  }

  .landing-hero-actions {
    flex-direction: column;
  }

  .landing-hero-actions .btn {
    width: 100%;
  }

  .landing-stat {
    min-width: 100%;
    padding-right: 0;
    margin-right: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .landing-stat:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .landing-demo-site-body {
    padding: 1.25rem;
  }
}

/* Tablet portrait pass */
@media (min-width: 768px) and (max-width: 1024px) {
  .landing .wrap {
    max-width: 920px;
  }

  .landing-hero-grid {
    gap: 2rem;
  }

  .landing-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .landing-bento-featured {
    grid-column: span 2;
    grid-row: auto;
  }

  .landing-code-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}


/* ============================================================
   LANDING HERO — bilingual + product demo + light/dark themes
   Scoped to .landing-hero--dark / .language-switcher / .theme-toggle only.
   Theme is driven by [data-hero-theme] on body.landing. No global tokens touched.
   ============================================================ */

/* ---- DARK theme (default): brighter, breathable navy/indigo/blue-purple ---- */
.landing-hero--dark {
  --hero-bg-gradient: linear-gradient(160deg, #2b3556 0%, #342f68 55%, #3f347b 100%);
  --hero-header-bg: #2b3556;
  --hero-ink: #f8f7ff;
  --hero-muted: rgba(248, 247, 255, 0.72);
  --hero-border: rgba(255, 255, 255, 0.15);
  --hero-surface: rgba(255, 255, 255, 0.08);
  --hero-card: rgba(255, 255, 255, 0.075);
  --hero-card-2: rgba(255, 255, 255, 0.06);
  --hero-track: rgba(255, 255, 255, 0.11);
  --hero-browser-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.045));
  --hero-chat-bg: rgba(42, 48, 82, 0.4);
  --hero-input-bg: rgba(255, 255, 255, 0.08);
  --hero-float-bg: rgba(41, 47, 84, 0.88);
  --hero-teal: #2dd4bf;
  --hero-cyan: #38bdf8;
  --hero-purple: #a78bfa;
  --hero-success: #34d399;
  --hero-title-grad: linear-gradient(180deg, #ffffff 0%, #dcd8ff 100%);
  --hero-grid-line: rgba(255, 255, 255, 0.028);
  --hero-card-shadow: 0 40px 90px -30px rgba(8, 10, 30, 0.7);
  --hero-card-elev: none;
  --hero-on-accent: #04121a;
  --hero-hover: rgba(255, 255, 255, 0.12);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--hero-bg-gradient);
  color: var(--hero-ink);
  padding: clamp(2.75rem, 6vw, 4.5rem) 0 clamp(3.5rem, 8vw, 5.5rem);
  transition: background 0.3s ease, color 0.3s ease;
}

/* ---- LIGHT theme: clean white / very light gray, soft blue-cyan ---- */
.landing[data-hero-theme="light"] .landing-hero--dark {
  --hero-bg-gradient: linear-gradient(165deg, #ffffff 0%, #f4f8ff 55%, #eef1fb 100%);
  --hero-header-bg: #ffffff;
  --hero-ink: #0c1222;
  --hero-muted: #55607a;
  --hero-border: rgba(12, 18, 34, 0.10);
  --hero-surface: #ffffff;
  --hero-card: #ffffff;
  --hero-card-2: #f6f9fe;
  --hero-track: rgba(12, 18, 34, 0.08);
  --hero-browser-bg: #ffffff;
  --hero-chat-bg: #f8fafc;
  --hero-input-bg: #ffffff;
  --hero-float-bg: rgba(255, 255, 255, 0.96);
  --hero-teal: #0d9488;
  --hero-cyan: #0891b2;
  --hero-purple: #7c3aed;
  --hero-success: #059669;
  --hero-title-grad: linear-gradient(170deg, #0c1222 0%, #0d5b56 130%);
  --hero-grid-line: rgba(12, 18, 34, 0.045);
  --hero-card-shadow: 0 40px 80px -34px rgba(30, 41, 90, 0.28);
  --hero-card-elev: 0 1px 3px rgba(30, 41, 90, 0.06), 0 10px 24px -14px rgba(30, 41, 90, 0.18);
  --hero-on-accent: #ffffff;
  --hero-hover: rgba(12, 18, 34, 0.05);
}

/* radial accent glows */
.landing-hero__bg {
  position: absolute;
  inset: -20% -10% 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 55% at 18% 8%, rgba(45, 212, 191, 0.18), transparent 60%),
    radial-gradient(ellipse 50% 60% at 88% 12%, rgba(56, 189, 248, 0.15), transparent 55%),
    radial-gradient(ellipse 60% 55% at 78% 95%, rgba(167, 139, 250, 0.20), transparent 60%);
}
.landing[data-hero-theme="light"] .landing-hero__bg {
  background:
    radial-gradient(ellipse 55% 55% at 16% 4%, rgba(13, 148, 136, 0.10), transparent 60%),
    radial-gradient(ellipse 50% 60% at 90% 8%, rgba(8, 145, 178, 0.11), transparent 55%),
    radial-gradient(ellipse 60% 55% at 82% 98%, rgba(124, 58, 237, 0.07), transparent 60%);
}

/* subtle masked grid (softer / lower contrast) */
.landing-hero__grid-mask {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    linear-gradient(var(--hero-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--hero-grid-line) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 25%, black, transparent 80%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 25%, black, transparent 80%);
}

.landing-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2.25rem, 5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 960px) {
  .landing-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(360px, 1.08fr); }
}

/* ---- left content ---- */
.landing-hero__content { min-width: 0; }

.landing-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: var(--hero-surface);
  border: 1px solid var(--hero-border);
  color: var(--hero-ink);
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: var(--hero-card-elev);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.landing-hero__badge svg { color: var(--hero-cyan); }

.landing-hero__title {
  margin: 1.15rem 0 0;
  font-family: var(--font);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(2.5rem, 5.4vw, 4.6rem);
  color: var(--hero-ink);
  background: var(--hero-title-grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

.landing-hero__subtitle {
  margin: 1.15rem 0 0;
  max-width: 34em;
  font-size: clamp(1.05rem, 1.4vw, 1.32rem);
  line-height: 1.6;
  color: var(--hero-muted);
}

.landing-hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin: 1.8rem 0 0; }

.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.6rem;
  border-radius: 12px;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.hero-btn:active { transform: scale(0.98); }
.hero-btn--primary {
  color: var(--hero-on-accent);
  background: linear-gradient(135deg, var(--hero-teal), var(--hero-cyan));
  box-shadow: 0 10px 30px rgba(20, 184, 166, 0.32), 0 1px 0 rgba(255, 255, 255, 0.25) inset;
}
.hero-btn--primary:hover { box-shadow: 0 14px 40px rgba(34, 211, 238, 0.4); transform: translateY(-1px); }
.hero-btn--ghost {
  color: var(--hero-ink);
  background: var(--hero-surface);
  border-color: var(--hero-border);
}
.hero-btn--ghost svg { color: var(--hero-cyan); }
.hero-btn--ghost:hover { background: var(--hero-hover); border-color: var(--hero-teal); }

.landing-hero__microcopy { margin: 1.15rem 0 0; font-size: 0.9rem; color: var(--hero-muted); }

/* ============================================================
   PRODUCT DEMO (right column)
   ============================================================ */
.landing-hero__visual { min-width: 0; position: relative; }
.hero-demo { position: relative; }

.hero-demo__browser {
  position: relative;
  z-index: 2;
  border-radius: 28px;
  border: 1px solid var(--hero-border);
  background: var(--hero-browser-bg);
  box-shadow: var(--hero-card-shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}
.hero-demo__chrome {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--hero-border);
  background: var(--hero-card-2);
}
.hero-demo__dots { display: inline-flex; gap: 6px; }
.hero-demo__dots i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.hero-demo__dots i:nth-child(1) { background: #fb7185; }
.hero-demo__dots i:nth-child(2) { background: #fbbf24; }
.hero-demo__dots i:nth-child(3) { background: #34d399; }
.hero-demo__url {
  flex: 1;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--hero-muted);
  background: var(--hero-track);
  border: 1px solid var(--hero-border);
  border-radius: 8px;
  padding: 0.3rem 0.75rem;
}

.hero-demo__body { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 14px; }
@media (min-width: 1180px) { .hero-demo__body { grid-template-columns: 0.92fr 1.08fr; } }

/* ---- LEFT: scan panel ---- */
.scan-panel {
  border-radius: 18px;
  border: 1px solid var(--hero-border);
  background: var(--hero-card);
  box-shadow: var(--hero-card-elev);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.scan-panel__head { display: flex; flex-direction: column; gap: 3px; }
.scan-panel__eyebrow { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hero-cyan); }
.scan-panel__title { font-family: var(--font); font-weight: 700; font-size: 0.95rem; color: var(--hero-ink); }
.scan-panel__url {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--hero-muted);
  background: var(--hero-track);
  border: 1px solid var(--hero-border);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  align-self: flex-start;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scan-panel__progress { display: flex; flex-direction: column; gap: 6px; }
.scan-panel__progress-label { font-size: 0.76rem; color: var(--hero-muted); }
.scan-bar { position: relative; height: 6px; border-radius: 999px; background: var(--hero-track); overflow: hidden; }
.scan-bar__fill { position: absolute; inset: 0 30% 0 0; border-radius: 999px; background: linear-gradient(90deg, var(--hero-teal), var(--hero-cyan)); }
.scan-bar__fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: translateX(-100%);
  animation: scanShimmer 1.8s ease-in-out infinite;
}
.scan-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.scan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0.5rem 0.7rem;
  border-radius: 10px;
  background: var(--hero-card-2);
  border: 1px solid var(--hero-border);
  animation: rowPulse 3s ease-in-out infinite;
}
.scan-row:nth-child(2) { animation-delay: 0.4s; }
.scan-row:nth-child(3) { animation-delay: 0.8s; }
.scan-row:nth-child(4) { animation-delay: 1.2s; }
.scan-row__path { font-family: var(--mono); font-size: 0.74rem; color: var(--hero-ink); opacity: 0.85; }
.scan-row__status {
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--hero-success);
  background: color-mix(in srgb, var(--hero-success) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--hero-success) 35%, transparent);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  white-space: nowrap;
}
.scan-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.scan-stat { border-radius: 12px; background: var(--hero-card-2); border: 1px solid var(--hero-border); padding: 0.55rem 0.7rem; display: flex; flex-direction: column; gap: 2px; }
.scan-stat strong { font-family: var(--font); font-size: 1.15rem; font-weight: 800; color: var(--hero-ink); line-height: 1; }
.scan-stat span { font-size: 0.66rem; color: var(--hero-muted); }
.scan-stat--ok strong { color: var(--hero-success); }

/* ---- RIGHT: chat demo ---- */
.chat-demo {
  border-radius: 18px;
  border: 1px solid var(--hero-border);
  background: var(--hero-chat-bg);
  box-shadow: var(--hero-card-elev);
  display: flex;
  flex-direction: column;
  min-height: 380px;
  overflow: hidden;
}
.chat-demo__head { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--hero-border); background: var(--hero-card-2); }
.chat-demo__avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; color: var(--hero-on-accent); background: linear-gradient(135deg, var(--hero-teal), var(--hero-cyan)); }
.chat-demo__id { display: flex; flex-direction: column; gap: 1px; line-height: 1.2; }
.chat-demo__id strong { font-family: var(--font); font-size: 0.9rem; color: var(--hero-ink); }
.chat-demo__status { display: inline-flex; align-items: center; gap: 5px; font-size: 0.7rem; color: var(--hero-muted); }
.chat-demo__status i { width: 7px; height: 7px; border-radius: 50%; background: var(--hero-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hero-success) 18%, transparent); }

.chat-demo__messages { flex: 1; min-height: 0; max-height: 300px; overflow-y: auto; padding: 0.9rem; display: flex; flex-direction: column; gap: 0.7rem; }
.chat-demo__messages::-webkit-scrollbar { width: 4px; }
.chat-demo__messages::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--hero-cyan) 40%, transparent); border-radius: 3px; }

.chat-msg { display: flex; flex-direction: column; gap: 4px; max-width: 88%; }
.chat-msg--user { align-self: flex-end; align-items: flex-end; }
.chat-msg--bot { align-self: flex-start; align-items: flex-start; }
.chat-bubble { font-size: 0.83rem; line-height: 1.5; padding: 0.6rem 0.8rem; border-radius: 14px; }
.chat-msg--bot .chat-bubble { background: var(--hero-card); border: 1px solid var(--hero-border); color: var(--hero-ink); border-top-left-radius: 5px; }
.chat-msg--user .chat-bubble { background: linear-gradient(135deg, var(--hero-teal), var(--hero-cyan)); color: var(--hero-on-accent); font-weight: 600; border-top-right-radius: 5px; }
[dir="rtl"] .chat-msg--bot .chat-bubble { border-top-left-radius: 14px; border-top-right-radius: 5px; }
[dir="rtl"] .chat-msg--user .chat-bubble { border-top-right-radius: 14px; border-top-left-radius: 5px; }

.source-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.64rem;
  font-weight: 600;
  color: var(--hero-cyan);
  background: color-mix(in srgb, var(--hero-cyan) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--hero-cyan) 32%, transparent);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  animation: pillFade 0.4s ease both;
}
.source-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--hero-cyan); }

.chat-typing { display: inline-flex; gap: 4px; padding: 0.7rem 0.85rem; background: var(--hero-card); border: 1px solid var(--hero-border); border-radius: 14px; border-top-left-radius: 5px; }
.chat-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--hero-muted); animation: typingDot 1.2s infinite ease-in-out; }
.chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing span:nth-child(3) { animation-delay: 0.4s; }

.chat-demo__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0.9rem 0.6rem; }
.question-chip {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--hero-ink);
  background: var(--hero-card);
  border: 1px solid var(--hero-border);
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}
.question-chip:hover { background: color-mix(in srgb, var(--hero-cyan) 14%, transparent); border-color: color-mix(in srgb, var(--hero-cyan) 45%, transparent); }
.question-chip:active { transform: scale(0.97); }

.chat-demo__inputrow { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 0.9rem; border-top: 1px solid var(--hero-border); background: var(--hero-card-2); }
.chat-demo__input {
  flex: 1;
  min-width: 0;
  background: var(--hero-input-bg);
  border: 1px solid var(--hero-border);
  border-radius: 999px;
  padding: 0.55rem 0.9rem;
  color: var(--hero-ink);
  font-family: var(--font-body);
  font-size: 0.8rem;
  outline: none;
  transition: border-color 0.18s ease;
}
.chat-demo__input::placeholder { color: var(--hero-muted); opacity: 0.7; }
.chat-demo__input:focus { border-color: var(--hero-cyan); }
.chat-demo__send {
  flex: none;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--hero-on-accent);
  background: linear-gradient(135deg, var(--hero-teal), var(--hero-cyan));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--hero-cyan) 35%, transparent);
  transition: transform 0.14s ease, opacity 0.18s ease;
}
.chat-demo__send:hover { transform: scale(1.06); }
.chat-demo__send:active { transform: scale(0.95); }
[dir="rtl"] .chat-demo__send svg { transform: scaleX(-1); }

/* ---- floating cards ---- */
.hero-float {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.85rem;
  border-radius: 14px;
  background: var(--hero-float-bg);
  border: 1px solid var(--hero-border);
  box-shadow: var(--hero-card-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: floatCard 5s ease-in-out infinite;
}
.hero-float__icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; color: #fff; }
.hero-float--lead .hero-float__icon { background: linear-gradient(135deg, var(--hero-teal), var(--hero-cyan)); color: var(--hero-on-accent); }
.hero-float--handoff .hero-float__icon { background: linear-gradient(135deg, var(--hero-purple), #c4b5fd); color: #fff; }
.hero-float__body { display: flex; flex-direction: column; line-height: 1.25; }
.hero-float__body strong { font-family: var(--font); font-size: 0.78rem; color: var(--hero-ink); }
.hero-float__body span { font-size: 0.7rem; color: var(--hero-muted); }
.hero-float--lead { bottom: -16px; left: -14px; }
.hero-float--handoff { top: -18px; right: -12px; animation-delay: 1.4s; }
[dir="rtl"] .hero-float--lead { left: auto; right: -14px; }
[dir="rtl"] .hero-float--handoff { right: auto; left: -12px; }
@media (max-width: 520px) {
  .hero-float--lead { bottom: -12px; left: 4px; }
  .hero-float--handoff { top: -12px; right: 4px; }
  [dir="rtl"] .hero-float--lead { left: auto; right: 4px; }
  [dir="rtl"] .hero-float--handoff { right: auto; left: 4px; }
}

/* ============================================================
   NAV CONTROLS — language switcher + theme toggle
   Base = "on light surface" (light theme / scrolled nav / mobile menu).
   On-dark override applied only for dark theme at the top (desktop).
   These controls live in the header, so they cannot use hero tokens.
   ============================================================ */
.landing-nav-controls { display: inline-flex; align-items: center; gap: 0.5rem; }

.language-switcher {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(12, 18, 34, 0.04);
  border: 1px solid rgba(13, 148, 136, 0.32);
}
.language-switcher__globe { display: inline-flex; align-items: center; padding-inline: 6px 2px; color: var(--muted); }
.language-switcher__btn {
  border: none;
  background: transparent;
  color: var(--muted);
  font-family: var(--font);
  font-weight: 700;
  font-size: 0.78rem;
  line-height: 1.4;
  padding: 4px 11px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.language-switcher__btn:hover:not(.is-active) { color: var(--ink); }
.language-switcher__btn.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--teal-bright), var(--cyan));
  box-shadow: 0 2px 10px rgba(13, 148, 136, 0.3);
}
.language-switcher__btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  cursor: pointer;
  color: var(--muted);
  background: rgba(12, 18, 34, 0.04);
  border: 1px solid rgba(13, 148, 136, 0.32);
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.theme-toggle:hover { color: var(--ink); border-color: rgba(13, 148, 136, 0.5); }
.theme-toggle:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.theme-toggle svg { width: 17px; height: 17px; }
.landing[data-hero-theme="light"] .theme-toggle .theme-toggle__moon { display: none; }
.landing[data-hero-theme="dark"]  .theme-toggle .theme-toggle__sun  { display: none; }
/* default (no attribute yet) = dark → show moon */
.theme-toggle .theme-toggle__sun { display: none; }
.landing[data-hero-theme="light"] .theme-toggle .theme-toggle__sun { display: inline-flex; }

/* on-dark override: dark theme, top of page, desktop */
@media (min-width: 900px) {
  .landing[data-hero-theme="dark"] .landing-header:not(.landing-header--scrolled) .language-switcher,
  .landing[data-hero-theme="dark"] .landing-header:not(.landing-header--scrolled) .theme-toggle {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(56, 189, 248, 0.4);
  }
  .landing[data-hero-theme="dark"] .landing-header:not(.landing-header--scrolled) .language-switcher__globe,
  .landing[data-hero-theme="dark"] .landing-header:not(.landing-header--scrolled) .language-switcher__btn,
  .landing[data-hero-theme="dark"] .landing-header:not(.landing-header--scrolled) .theme-toggle { color: rgba(246, 244, 255, 0.7); }
  .landing[data-hero-theme="dark"] .landing-header:not(.landing-header--scrolled) .language-switcher__btn:hover:not(.is-active),
  .landing[data-hero-theme="dark"] .landing-header:not(.landing-header--scrolled) .theme-toggle:hover { color: #fff; }
  .landing[data-hero-theme="dark"] .landing-header:not(.landing-header--scrolled) .language-switcher__btn.is-active {
    color: #04121a;
    background: linear-gradient(135deg, #2dd4bf, #38bdf8);
    box-shadow: 0 2px 10px rgba(56, 189, 248, 0.4);
  }
}

/* ============================================================
   NAV LEGIBILITY — dark theme places light text over the dark hero.
   Gated to dark theme; light theme keeps the default dark-on-light nav.
   Scrolled state keeps the existing light glass (untouched).
   ============================================================ */
.landing[data-hero-theme="dark"] .landing-header:not(.landing-header--scrolled) { background: #2b3556; }
.landing[data-hero-theme="dark"] .landing-header:not(.landing-header--scrolled)::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -16px; height: 16px;
  background: #2b3556;
  z-index: -1;
}
.landing[data-hero-theme="dark"] .landing-header:not(.landing-header--scrolled) .landing-logo-text { color: #f6f4ff; }
.landing[data-hero-theme="dark"] .landing-header:not(.landing-header--scrolled) .landing-logo-text span { color: #38bdf8; }

.landing[data-hero-theme="light"] .landing-header:not(.landing-header--scrolled) { background: #ffffff; }
.landing[data-hero-theme="light"] .landing-header:not(.landing-header--scrolled)::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -16px; height: 16px;
  background: #ffffff;
  z-index: -1;
}

@media (min-width: 900px) {
  .landing[data-hero-theme="dark"] .landing-header:not(.landing-header--scrolled) .landing-nav-primary > a:not(.btn) { color: rgba(246, 244, 255, 0.72); }
  .landing[data-hero-theme="dark"] .landing-header:not(.landing-header--scrolled) .landing-nav-primary > a:not(.btn):hover { color: #fff; }
  .landing[data-hero-theme="dark"] .landing-header:not(.landing-header--scrolled) .btn-ghost { color: #f6f4ff; }
  .landing[data-hero-theme="dark"] .landing-header:not(.landing-header--scrolled) .btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }
}

/* mobile hamburger legible on the dark hero top */
@media (max-width: 899px) {
  .landing[data-hero-theme="dark"] .landing-header:not(.landing-header--scrolled) .landing-nav-toggle {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.28);
  }
  .landing[data-hero-theme="dark"] .landing-header:not(.landing-header--scrolled) .landing-nav-toggle span { background: #f6f4ff; }
  /* controls live inside the white mobile menu → keep on-light base, just spacing */
  .landing-nav-controls { align-self: center; margin-top: 1rem; }
}

/* ============================================================
   ANIMATIONS (respect reduced motion)
   ============================================================ */
@keyframes scanShimmer { 100% { transform: translateX(100%); } }
@keyframes rowPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.72; } }
@keyframes typingDot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes pillFade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes floatCard { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

@media (prefers-reduced-motion: reduce) {
  .scan-bar__fill::after,
  .scan-row,
  .chat-typing span,
  .hero-float { animation: none !important; }
  .landing-hero--dark { transition: none; }
}

/* ============================================================
   HEBREW TYPOGRAPHY (Step 3) — Heebo, hero + header scoped only.
   --font / --font-body are redefined LOCALLY on the Hebrew hero,
   so they cascade only to hero descendants (global tokens untouched).
   ============================================================ */
.landing-hero--dark[lang="he"] {
  --font: "Assistant", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Assistant", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.landing-header[lang="he"] {
  font-family: "Assistant", var(--font-body);
}

/* Hebrew needs a touch more line-height and less negative tracking
   so the heading feels bold/premium, not cramped; mixed "AI" stays intentional. */
.landing-hero--dark[lang="he"] .landing-hero__title {
  line-height: 1.14;
  letter-spacing: -0.005em;
  font-weight: 800;
  word-break: keep-all;
}
.landing-hero--dark[lang="he"] .landing-hero__subtitle {
  line-height: 1.75;
  font-size: clamp(1.05rem, 1.4vw, 1.28rem);
}
.landing-hero--dark[lang="he"] .landing-hero__badge,
.landing-hero--dark[lang="he"] .hero-btn {
  letter-spacing: 0;
}
/* Latin fragments inside Hebrew (AI, SiteChat) render in Heebo too → uniform */

/* ============================================================
   CHAT WIDGET — friendly welcome-style redesign (correction pass)
   Fewer, larger suggestions; welcome area; clean input; footer.
   ============================================================ */
.chat-demo__pill {
  margin-inline-start: auto;
  align-self: flex-start;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hero-cyan);
  background: color-mix(in srgb, var(--hero-cyan) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--hero-cyan) 30%, transparent);
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
}

.chat-demo__scroll {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.chat-intro { padding: 1.35rem 1.05rem 0.4rem; }
.chat-intro__title {
  margin: 0;
  font-family: var(--font);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--hero-ink);
}
.chat-intro__text {
  margin: 0.45rem 0 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--hero-muted);
  max-width: 30ch;
}

.chat-suggests { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 1.15rem; }

.suggest-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  width: 100%;
  text-align: start;
  padding: 0.85rem 1rem;
  border-radius: 15px;
  border: 1px solid var(--hero-border);
  background: var(--hero-card);
  box-shadow: var(--hero-card-elev);
  color: var(--hero-ink);
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.14s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.suggest-card svg { width: 16px; height: 16px; flex: none; color: var(--hero-cyan); }
[dir="rtl"] .suggest-card svg { transform: scaleX(-1); }
.suggest-card:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--hero-cyan) 10%, var(--hero-card));
  border-color: color-mix(in srgb, var(--hero-cyan) 45%, transparent);
  box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--hero-cyan) 60%, transparent);
}
.suggest-card:active { transform: scale(0.99); }

.chat-chips-row { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.15rem; }
.suggest-chip {
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--hero-border);
  background: transparent;
  color: var(--hero-muted);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.suggest-chip:hover {
  color: var(--hero-ink);
  border-color: color-mix(in srgb, var(--hero-cyan) 45%, transparent);
  background: color-mix(in srgb, var(--hero-cyan) 8%, transparent);
}

/* conversation view (after first interaction) */
.chat-demo__messages { flex: 1; min-height: 0; max-height: none; overflow-y: auto; padding: 0.9rem; display: flex; flex-direction: column; gap: 0.7rem; }
.chat-demo__messages[hidden] { display: none; }

.chat-demo__footer {
  padding: 0.5rem 0.9rem 0.65rem;
  text-align: center;
  font-size: 0.66rem;
  color: var(--hero-muted);
  opacity: 0.75;
  border-top: 1px solid var(--hero-border);
}
.chat-demo__footer strong { font-weight: 700; color: var(--hero-ink); opacity: 0.9; }

/* scan panel — subtle one-line summary (replaces the indexed URL row list) */
.scan-panel__summary {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--hero-muted);
}
.scan-panel__summary svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--hero-success);
}

/* ============================================================
   SECTION 2 — "What SiteChat does"
   Reuses the hero theme system (data-hero-theme on body.landing) +
   teal/cyan/purple accents. In dark mode it's a LIGHTER band than the
   hero so the page doesn't read as one long dark block.
   ============================================================ */
.section-what {
  /* dark defaults (page default theme = dark), lighter than the hero */
  --sw-bg: linear-gradient(180deg, #3c4470 0%, #363d63 100%);
  --sw-ink: #f8f7ff;
  --sw-muted: rgba(248, 247, 255, 0.68);
  --sw-card: rgba(255, 255, 255, 0.06);
  --sw-card-hover: rgba(255, 255, 255, 0.10);
  --sw-border: rgba(255, 255, 255, 0.13);
  --sw-teal: #2dd4bf;
  --sw-cyan: #38bdf8;
  --sw-purple: #a78bfa;
  --sw-card-shadow: none;
  --sw-card-elev: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  --sw-top-line: rgba(255, 255, 255, 0.10);

  position: relative;
  background: var(--sw-bg);
  color: var(--sw-ink);
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  border-top: 1px solid var(--sw-top-line);
}

.landing[data-hero-theme="light"] .section-what {
  --sw-bg: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
  --sw-ink: #0c1222;
  --sw-muted: #55607a;
  --sw-card: #ffffff;
  --sw-card-hover: #ffffff;
  --sw-border: rgba(12, 18, 34, 0.09);
  --sw-teal: #0d9488;
  --sw-cyan: #0891b2;
  --sw-purple: #7c3aed;
  --sw-card-shadow: 0 1px 3px rgba(30, 41, 90, 0.05), 0 14px 30px -18px rgba(30, 41, 90, 0.2);
  --sw-card-elev: none;
  --sw-top-line: rgba(12, 18, 34, 0.06);
}

/* Hebrew → Heebo, scoped to this section only (local var redefine) */
.section-what[lang="he"] {
  --font: "Assistant", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Assistant", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.section-what__head { max-width: 760px; margin: 0 auto clamp(2.25rem, 4vw, 3.25rem); text-align: center; }
.section-what__title {
  margin: 0;
  font-family: var(--font);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.18;
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  color: var(--sw-ink);
}
.section-what__body {
  margin: 1rem auto 0;
  max-width: 62ch;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.65;
  color: var(--sw-muted);
}
.section-what[lang="he"] .section-what__title { line-height: 1.28; letter-spacing: 0; }
.section-what[lang="he"] .section-what__body { line-height: 1.8; }

.section-what__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.4rem);
}
@media (min-width: 620px)  { .section-what__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px)  { .section-what__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.what-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: clamp(1.35rem, 2vw, 1.75rem);
  border-radius: 18px;
  background: var(--sw-card);
  border: 1px solid var(--sw-border);
  box-shadow: var(--sw-card-shadow), var(--sw-card-elev);
  transition: transform 0.16s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.what-card:hover {
  transform: translateY(-3px);
  background: var(--sw-card-hover);
  border-color: color-mix(in srgb, var(--sw-cyan) 40%, var(--sw-border));
  box-shadow: var(--sw-card-shadow), 0 16px 34px -18px color-mix(in srgb, var(--sw-cyan) 55%, transparent);
}

.what-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
}
.what-card__icon svg { width: 22px; height: 22px; }
.what-card__icon--teal   { color: var(--sw-teal);   background: color-mix(in srgb, var(--sw-teal) 15%, transparent);   border: 1px solid color-mix(in srgb, var(--sw-teal) 30%, transparent); }
.what-card__icon--cyan   { color: var(--sw-cyan);   background: color-mix(in srgb, var(--sw-cyan) 15%, transparent);   border: 1px solid color-mix(in srgb, var(--sw-cyan) 30%, transparent); }
.what-card__icon--purple { color: var(--sw-purple); background: color-mix(in srgb, var(--sw-purple) 15%, transparent); border: 1px solid color-mix(in srgb, var(--sw-purple) 30%, transparent); }

.what-card__title { margin: 0; font-family: var(--font); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em; color: var(--sw-ink); }
.what-card__text  { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--sw-muted); }
.section-what[lang="he"] .what-card__text { line-height: 1.7; }

@media (prefers-reduced-motion: reduce) {
  .what-card, .what-card:hover { transform: none; }
}

/* ============================================================
   SECTION 3 — "How it works" (4 connected steps)
   Reuses the hero theme system + teal/cyan/purple accents.
   Dark mode = a lighter band (consistent with Section 2), light = white.
   ============================================================ */
.section-hiw {
  --hiw-bg: linear-gradient(180deg, #363d63 0%, #3c4470 100%);
  --hiw-ink: #f8f7ff;
  --hiw-muted: rgba(248, 247, 255, 0.68);
  --hiw-card: rgba(255, 255, 255, 0.06);
  --hiw-card-hover: rgba(255, 255, 255, 0.10);
  --hiw-border: rgba(255, 255, 255, 0.13);
  --hiw-teal: #2dd4bf;
  --hiw-cyan: #38bdf8;
  --hiw-purple: #a78bfa;
  --hiw-track: rgba(255, 255, 255, 0.10);
  --hiw-line: rgba(255, 255, 255, 0.16);
  --hiw-ring: #3a4168;
  --hiw-on-accent: #04121a;
  --hiw-card-shadow: none;
  --hiw-mock: rgba(255, 255, 255, 0.05);
  --hiw-top-line: rgba(255, 255, 255, 0.10);

  position: relative;
  background: var(--hiw-bg);
  color: var(--hiw-ink);
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  border-top: 1px solid var(--hiw-top-line);
}
.landing[data-hero-theme="light"] .section-hiw {
  --hiw-bg: linear-gradient(180deg, #f4f8ff 0%, #ffffff 100%);
  --hiw-ink: #0c1222;
  --hiw-muted: #55607a;
  --hiw-card: #ffffff;
  --hiw-card-hover: #ffffff;
  --hiw-border: rgba(12, 18, 34, 0.09);
  --hiw-teal: #0d9488;
  --hiw-cyan: #0891b2;
  --hiw-purple: #7c3aed;
  --hiw-track: rgba(12, 18, 34, 0.08);
  --hiw-line: rgba(12, 18, 34, 0.12);
  --hiw-ring: #ffffff;
  --hiw-on-accent: #ffffff;
  --hiw-card-shadow: 0 1px 3px rgba(30, 41, 90, 0.05), 0 14px 30px -18px rgba(30, 41, 90, 0.2);
  --hiw-mock: #f6f9fe;
  --hiw-top-line: rgba(12, 18, 34, 0.06);
}
.section-hiw[lang="he"] {
  --font: "Assistant", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Assistant", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.section-hiw__head { max-width: 760px; margin: 0 auto clamp(2.5rem, 4vw, 3.5rem); text-align: center; }
.section-hiw__title {
  margin: 0;
  font-family: var(--font);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.18;
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  color: var(--hiw-ink);
}
.section-hiw[lang="he"] .section-hiw__title { line-height: 1.3; letter-spacing: 0; }

.hiw-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 620px)  { .hiw-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.25rem; } }
@media (min-width: 1000px) { .hiw-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } }

.hiw-step { position: relative; display: flex; flex-direction: column; }
.hiw-step__top { position: relative; display: flex; justify-content: center; margin-bottom: 1rem; }

/* connecting animated line between nodes — desktop 4-col only */
@media (min-width: 1000px) {
  .hiw-step__top::before,
  .hiw-step__top::after {
    content: "";
    position: absolute; top: 50%; height: 2px; z-index: 0;
    left: calc(-50% - 1.25rem); right: 50%;
    transform: translateY(-50%);
  }
  .hiw-step__top::before { background: var(--hiw-line); }
  .hiw-step__top::after {
    background: linear-gradient(90deg, transparent 0%, var(--hiw-cyan) 50%, transparent 100%);
    background-size: 250% 100%;
    animation: hiwFlow 2.6s linear infinite;
  }
  [dir="rtl"] .hiw-step__top::before,
  [dir="rtl"] .hiw-step__top::after { left: 50%; right: calc(-50% - 1.25rem); }
  .hiw-step:first-child .hiw-step__top::before,
  .hiw-step:first-child .hiw-step__top::after { display: none; }
}

.hiw-step__node {
  position: relative;
  z-index: 1;
  width: 48px; height: 48px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--hiw-on-accent);
  background: linear-gradient(135deg, var(--hiw-teal), var(--hiw-cyan));
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--hiw-cyan) 60%, transparent), 0 0 0 5px var(--hiw-ring);
}

.hiw-step__card {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: 0.7rem;
  padding: clamp(1.25rem, 1.8vw, 1.65rem);
  border-radius: 18px;
  background: var(--hiw-card);
  border: 1px solid var(--hiw-border);
  box-shadow: var(--hiw-card-shadow);
  transition: transform 0.16s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.hiw-step__card:hover {
  transform: translateY(-3px);
  background: var(--hiw-card-hover);
  border-color: color-mix(in srgb, var(--hiw-cyan) 40%, var(--hiw-border));
  box-shadow: var(--hiw-card-shadow), 0 16px 34px -18px color-mix(in srgb, var(--hiw-cyan) 55%, transparent);
}

.hiw-step__icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; }
.hiw-step__icon svg { width: 20px; height: 20px; }
.hiw-step__icon--teal   { color: var(--hiw-teal);   background: color-mix(in srgb, var(--hiw-teal) 15%, transparent);   border: 1px solid color-mix(in srgb, var(--hiw-teal) 30%, transparent); }
.hiw-step__icon--cyan   { color: var(--hiw-cyan);   background: color-mix(in srgb, var(--hiw-cyan) 15%, transparent);   border: 1px solid color-mix(in srgb, var(--hiw-cyan) 30%, transparent); }
.hiw-step__icon--purple { color: var(--hiw-purple); background: color-mix(in srgb, var(--hiw-purple) 15%, transparent); border: 1px solid color-mix(in srgb, var(--hiw-purple) 30%, transparent); }

.hiw-step__title { margin: 0; font-family: var(--font); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--hiw-ink); }
.hiw-step__text  { margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--hiw-muted); }
.section-hiw[lang="he"] .hiw-step__text { line-height: 1.7; }

.hiw-step__visual { width: 100%; margin-top: 0.5rem; }

/* mini visual: URL field */
.hiw-url {
  display: flex; align-items: center; gap: 0.4rem; justify-content: center;
  font-family: var(--mono); font-size: 0.72rem; color: var(--hiw-muted);
  background: var(--hiw-mock); border: 1px solid var(--hiw-border);
  border-radius: 999px; padding: 0.42rem 0.7rem;
}
.hiw-url svg { width: 13px; height: 13px; flex: none; color: var(--hiw-cyan); }
.hiw-url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* mini visual: scan progress */
.hiw-scan { display: flex; flex-direction: column; gap: 6px; background: var(--hiw-mock); border: 1px solid var(--hiw-border); border-radius: 12px; padding: 0.6rem 0.7rem; }
.hiw-scan__label { font-size: 0.68rem; color: var(--hiw-muted); text-align: start; }
.hiw-scan__bar { position: relative; height: 6px; border-radius: 999px; background: var(--hiw-track); overflow: hidden; }
.hiw-scan__fill { position: absolute; inset: 0 35% 0 0; border-radius: 999px; background: linear-gradient(90deg, var(--hiw-teal), var(--hiw-cyan)); }
[dir="rtl"] .hiw-scan__fill { inset: 0 0 0 35%; }
.hiw-scan__fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent); transform: translateX(-100%); animation: scanShimmer 1.8s ease-in-out infinite; }

/* mini visual: embed code */
.hiw-code { display: block; width: 100%; font-family: var(--mono); font-size: 0.68rem; color: var(--hiw-ink); background: var(--hiw-mock); border: 1px solid var(--hiw-border); border-radius: 10px; padding: 0.5rem 0.6rem; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* mini visual: analytics bars */
.hiw-analytics { display: flex; align-items: flex-end; justify-content: center; gap: 6px; height: 46px; background: var(--hiw-mock); border: 1px solid var(--hiw-border); border-radius: 12px; padding: 0.5rem; }
.hiw-analytics span { width: 12px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--hiw-cyan), var(--hiw-teal)); transform-origin: bottom; animation: hiwBar 2.2s ease-in-out infinite; }
.hiw-analytics span:nth-child(1) { height: 40%; }
.hiw-analytics span:nth-child(2) { height: 72%; animation-delay: 0.2s; }
.hiw-analytics span:nth-child(3) { height: 52%; animation-delay: 0.4s; }
.hiw-analytics span:nth-child(4) { height: 88%; animation-delay: 0.6s; }

@keyframes hiwFlow { 0% { background-position: 250% 0; } 100% { background-position: -250% 0; } }
@keyframes hiwBar { 0%, 100% { transform: scaleY(0.82); } 50% { transform: scaleY(1); } }

@media (prefers-reduced-motion: reduce) {
  .hiw-step__top::after, .hiw-scan__fill::after, .hiw-analytics span { animation: none !important; }
  .hiw-step__card, .hiw-step__card:hover { transform: none; }
}

/* ============================================================
   SHARED LANDING SECTION SYSTEM (Sections 4–10)
   Reuses the hero theme (data-hero-theme). Dark = lighter indigo band,
   light = white/soft. Tokens defined once here, no global overrides.
   ============================================================ */
.lp-sec {
  --c-ink: #f8f7ff;
  --c-muted: rgba(248, 247, 255, 0.7);
  --c-card: rgba(255, 255, 255, 0.06);
  --c-card2: rgba(255, 255, 255, 0.045);
  --c-border: rgba(255, 255, 255, 0.13);
  --c-teal: #2dd4bf;
  --c-cyan: #38bdf8;
  --c-purple: #a78bfa;
  --c-track: rgba(255, 255, 255, 0.1);
  --c-on-accent: #04121a;
  --c-shadow: none;
  --c-elev: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  --c-ring: #3a4168;
  --c-mock: rgba(255, 255, 255, 0.05);
  --c-hover: rgba(255, 255, 255, 0.1);
  --c-top-line: rgba(255, 255, 255, 0.08);
  --band-a: linear-gradient(180deg, #333a5e 0%, #3a4168 100%);
  --band-b: linear-gradient(180deg, #3a4168 0%, #333a5e 100%);

  position: relative;
  color: var(--c-ink);
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  border-top: 1px solid var(--c-top-line);
}
.landing[data-hero-theme="light"] .lp-sec {
  --c-ink: #0c1222;
  --c-muted: #55607a;
  --c-card: #ffffff;
  --c-card2: #f6f9fe;
  --c-border: rgba(12, 18, 34, 0.09);
  --c-teal: #0d9488;
  --c-cyan: #0891b2;
  --c-purple: #7c3aed;
  --c-track: rgba(12, 18, 34, 0.08);
  --c-on-accent: #ffffff;
  --c-shadow: 0 1px 3px rgba(30, 41, 90, 0.05), 0 14px 30px -18px rgba(30, 41, 90, 0.18);
  --c-elev: none;
  --c-ring: #ffffff;
  --c-mock: #f6f9fe;
  --c-hover: rgba(12, 18, 34, 0.03);
  --c-top-line: rgba(12, 18, 34, 0.06);
  --band-a: #ffffff;
  --band-b: linear-gradient(180deg, #f4f8ff 0%, #ffffff 100%);
}
.lp-sec--a { background: var(--band-a); }
.lp-sec--b { background: var(--band-b); }
.lp-sec[lang="he"], .landing-footer[lang="he"] {
  --font: "Assistant", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Assistant", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.landing-footer[lang="he"] { font-family: "Assistant", var(--font-body); }

.wrap.wrap--narrow { max-width: 820px; }

.lp-head { max-width: 780px; margin: 0 auto clamp(2.25rem, 4vw, 3.25rem); text-align: center; }
.lp-title { margin: 0; font-family: var(--font); font-weight: 800; letter-spacing: -0.015em; line-height: 1.18; font-size: clamp(1.6rem, 3.2vw, 2.5rem); color: var(--c-ink); }
.lp-sub { margin: 1rem auto 0; max-width: 64ch; font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.65; color: var(--c-muted); }
.lp-sec[lang="he"] .lp-title { line-height: 1.3; letter-spacing: 0; }
.lp-sec[lang="he"] .lp-sub { line-height: 1.8; }

/* ---- shared reveal ---- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; transition-delay: calc(var(--i, 0) * 90ms); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---- shared button ---- */
.lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.8rem 1.4rem; border-radius: 12px; font-family: var(--font); font-weight: 700; font-size: 0.95rem; cursor: pointer; border: 1px solid transparent; text-decoration: none; transition: transform 0.16s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease; }
.lp-btn:hover { transform: translateY(-2px); }
.lp-btn:active { transform: scale(0.98); }
.lp-btn--primary { color: var(--c-on-accent); background: linear-gradient(135deg, var(--c-teal), var(--c-cyan)); box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--c-cyan) 60%, transparent); }
.lp-btn--primary:hover { box-shadow: 0 14px 34px -10px color-mix(in srgb, var(--c-cyan) 70%, transparent); }
.lp-btn--ghost { color: var(--c-ink); background: var(--c-hover); border-color: var(--c-border); }
.lp-btn--ghost:hover { border-color: var(--c-teal); }
.lp-btn--lg { padding: 0.95rem 1.7rem; font-size: 1rem; }

/* ---- shared grid ---- */
.lp-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 2vw, 1.4rem); }
@media (min-width: 620px) { .lp-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .lp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ============================================================
   SECTION 4 — demo widget (reuses .chat-demo; provides hero tokens)
   ============================================================ */
.lp-demo { max-width: 560px; margin: 0 auto; }
.demo-widget {
  --hero-ink: #f8f7ff; --hero-muted: rgba(248, 247, 255, 0.72);
  --hero-border: rgba(255, 255, 255, 0.15); --hero-surface: rgba(255, 255, 255, 0.08);
  --hero-card: rgba(255, 255, 255, 0.075); --hero-card-2: rgba(255, 255, 255, 0.06);
  --hero-track: rgba(255, 255, 255, 0.11); --hero-chat-bg: rgba(42, 48, 82, 0.4);
  --hero-input-bg: rgba(255, 255, 255, 0.08); --hero-teal: #2dd4bf; --hero-cyan: #38bdf8;
  --hero-success: #34d399; --hero-on-accent: #04121a; --hero-card-elev: none;
  --hero-card-shadow: 0 30px 70px -30px rgba(8, 10, 30, 0.6);
}
.landing[data-hero-theme="light"] .demo-widget {
  --hero-ink: #0c1222; --hero-muted: #55607a;
  --hero-border: rgba(12, 18, 34, 0.1); --hero-surface: #ffffff;
  --hero-card: #ffffff; --hero-card-2: #f6f9fe;
  --hero-track: rgba(12, 18, 34, 0.08); --hero-chat-bg: #f8fafc;
  --hero-input-bg: #ffffff; --hero-teal: #0d9488; --hero-cyan: #0891b2;
  --hero-success: #059669; --hero-on-accent: #ffffff;
  --hero-card-elev: 0 1px 3px rgba(30, 41, 90, 0.06), 0 10px 24px -14px rgba(30, 41, 90, 0.18);
  --hero-card-shadow: 0 30px 60px -30px rgba(30, 41, 90, 0.25);
}
.demo-widget { min-height: 460px; }
.demo-widget .chat-demo__messages { max-height: 340px; }

/* ============================================================
   SECTION 5 — capability cards
   ============================================================ */
.cap-card { display: flex; flex-direction: column; gap: 0.7rem; padding: clamp(1.4rem, 2vw, 1.75rem); border-radius: 18px; background: var(--c-card); border: 1px solid var(--c-border); box-shadow: var(--c-shadow), var(--c-elev); transition: transform 0.16s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; }
.cap-card:hover { transform: translateY(-4px); background: var(--c-card2); border-color: color-mix(in srgb, var(--c-cyan) 40%, var(--c-border)); box-shadow: var(--c-shadow), 0 18px 38px -18px color-mix(in srgb, var(--c-cyan) 55%, transparent); }
.cap-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 13px; transition: box-shadow 0.2s ease; }
.cap-card__icon svg { width: 22px; height: 22px; }
.cap-card__icon--teal { color: var(--c-teal); background: color-mix(in srgb, var(--c-teal) 15%, transparent); border: 1px solid color-mix(in srgb, var(--c-teal) 30%, transparent); }
.cap-card__icon--cyan { color: var(--c-cyan); background: color-mix(in srgb, var(--c-cyan) 15%, transparent); border: 1px solid color-mix(in srgb, var(--c-cyan) 30%, transparent); }
.cap-card__icon--purple { color: var(--c-purple); background: color-mix(in srgb, var(--c-purple) 15%, transparent); border: 1px solid color-mix(in srgb, var(--c-purple) 30%, transparent); }
.cap-card:hover .cap-card__icon { box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 12%, transparent); }
.cap-card__title { margin: 0; font-family: var(--font); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em; color: var(--c-ink); }
.cap-card__text { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--c-muted); }
.lp-sec[lang="he"] .cap-card__text { line-height: 1.7; }
.cap-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 0.4rem; }
.cap-card__tags span { font-size: 0.68rem; font-weight: 500; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--c-mock); border: 1px solid var(--c-border); color: var(--c-muted); transition: color 0.16s ease, border-color 0.16s ease; }
.cap-card__tags span:hover { color: var(--c-cyan); border-color: color-mix(in srgb, var(--c-cyan) 45%, transparent); }

/* ============================================================
   SECTION 6 — deployment cards
   ============================================================ */
.deploy-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 820px) { .deploy-grid { grid-template-columns: 1fr 1fr; } }
.deploy-card { display: flex; flex-direction: column; gap: 0.55rem; padding: clamp(1.6rem, 2.5vw, 2.1rem); border-radius: 22px; background: var(--c-card); border: 1px solid var(--c-border); box-shadow: var(--c-shadow), var(--c-elev); transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; }
.deploy-card:hover { transform: translateY(-4px); box-shadow: var(--c-shadow), 0 22px 46px -20px color-mix(in srgb, var(--c-cyan) 50%, transparent); }
.deploy-card--self { border-color: color-mix(in srgb, var(--c-purple) 30%, var(--c-border)); }
.deploy-card--self:hover { box-shadow: var(--c-shadow), 0 22px 46px -20px color-mix(in srgb, var(--c-purple) 50%, transparent); }
.deploy-card__icon { width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 0.4rem; }
.deploy-card__icon svg { width: 24px; height: 24px; }
.deploy-card__title { margin: 0; font-family: var(--font); font-weight: 800; font-size: 1.35rem; color: var(--c-ink); }
.deploy-card__sub { margin: 0; font-size: 0.95rem; color: var(--c-muted); }
.deploy-card__list { list-style: none; margin: 1rem 0 1.6rem; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; }
.deploy-card__list li { position: relative; padding-inline-start: 1.6rem; font-size: 0.92rem; color: var(--c-ink); }
.deploy-card__list li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--c-teal); font-weight: 700; }
.deploy-card .lp-btn { margin-top: auto; align-self: flex-start; }

/* ============================================================
   SECTION 7 — pricing
   ============================================================ */
.price-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 560px) { .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1120px) { .price-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch; } }
.price-card { position: relative; display: flex; flex-direction: column; gap: 0.9rem; padding: 1.5rem 1.25rem; border-radius: 18px; background: var(--c-card); border: 1px solid var(--c-border); box-shadow: var(--c-shadow), var(--c-elev); transition: transform 0.16s ease, border-color 0.18s ease, box-shadow 0.18s ease; }
.price-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c-cyan) 40%, var(--c-border)); }
.price-card--popular { border-color: color-mix(in srgb, var(--c-cyan) 55%, transparent); animation: priceBreathe 3.8s ease-in-out infinite; }
.price-card__badge { position: absolute; top: -11px; inset-inline-start: 50%; transform: translateX(-50%); font-family: var(--font); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--c-on-accent); background: linear-gradient(135deg, var(--c-teal), var(--c-cyan)); border-radius: 999px; padding: 0.25rem 0.7rem; white-space: nowrap; }
[dir="rtl"] .price-card__badge { transform: translateX(50%); }
.price-card__head { display: flex; flex-direction: column; gap: 0.2rem; }
.price-card__name { font-family: var(--font); font-weight: 800; font-size: 1.2rem; color: var(--c-ink); }
.price-card__tag { font-size: 0.78rem; color: var(--c-muted); }
.price-card__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.price-card__list li { position: relative; padding-inline-start: 1.35rem; font-size: 0.85rem; line-height: 1.45; color: var(--c-muted); }
.price-card__list li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--c-teal); font-weight: 700; }
.price-card .lp-btn { margin-top: 0.4rem; width: 100%; }
.price-note { text-align: center; margin: clamp(1.5rem, 3vw, 2.25rem) auto 0; font-size: 0.9rem; color: var(--c-muted); }

/* ============================================================
   SECTION 8 — before / after
   ============================================================ */
.ba-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 760px) { .ba-grid { grid-template-columns: 1fr 1fr; } }
.ba-col { padding: clamp(1.5rem, 2.2vw, 2rem); border-radius: 18px; border: 1px solid var(--c-border); background: var(--c-card); box-shadow: var(--c-shadow); }
.ba-col--before { background: var(--c-card2); }
.ba-col--after { border-color: color-mix(in srgb, var(--c-teal) 40%, var(--c-border)); }
.ba-col__head { margin: 0 0 1.1rem; font-family: var(--font); font-weight: 800; font-size: 1.2rem; }
.ba-col--before .ba-col__head { color: var(--c-muted); }
.ba-col--after .ba-col__head { color: var(--c-teal); }
.ba-col__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.ba-col__list li { position: relative; padding-inline-start: 1.7rem; font-size: 0.95rem; line-height: 1.5; }
.ba-col--before .ba-col__list li { color: var(--c-muted); }
.ba-col--before .ba-col__list li::before { content: "—"; position: absolute; inset-inline-start: 0; color: var(--c-muted); }
.ba-col--after .ba-col__list li { color: var(--c-ink); }
.ba-col--after .ba-col__list li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--c-teal); font-weight: 700; }

/* ============================================================
   SECTION 9 — FAQ accordion
   ============================================================ */
.faq-list { display: flex; flex-direction: column; gap: 0.6rem; }
.faq-item { border: 1px solid var(--c-border); border-radius: 14px; background: var(--c-card); box-shadow: var(--c-shadow); overflow: hidden; }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.25rem; background: transparent; border: none; cursor: pointer; font-family: var(--font); font-weight: 700; font-size: 0.98rem; color: var(--c-ink); text-align: start; }
.faq-chevron { width: 18px; height: 18px; flex: none; color: var(--c-muted); transition: transform 0.25s ease; }
.faq-item.is-open .faq-chevron { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.28s ease; }
.faq-item.is-open .faq-a { max-height: 340px; }
.faq-a p { margin: 0; padding: 0 1.25rem 1.15rem; font-size: 0.9rem; line-height: 1.6; color: var(--c-muted); }

/* ============================================================
   SECTION 10 — final CTA
   ============================================================ */
.final-cta { position: relative; overflow: hidden; text-align: center; padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem); border-radius: 26px; border: 1px solid var(--c-border); background: var(--c-card); box-shadow: var(--c-shadow); }
.final-cta__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 90% at 50% 0%, color-mix(in srgb, var(--c-cyan) 22%, transparent), transparent 70%); }
.final-cta__title { position: relative; margin: 0; font-family: var(--font); font-weight: 800; letter-spacing: -0.015em; font-size: clamp(1.6rem, 3.4vw, 2.6rem); color: var(--c-ink); }
.final-cta__sub { position: relative; margin: 1rem auto 0; max-width: 54ch; font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.6; color: var(--c-muted); }
.final-cta__btns { position: relative; display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; margin-top: 1.8rem; }
.lp-sec[lang="he"] .final-cta__title { line-height: 1.3; }

/* ---- keyframes ---- */
@keyframes priceBreathe {
  0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-cyan) 40%, transparent), 0 10px 30px -14px color-mix(in srgb, var(--c-cyan) 40%, transparent); }
  50% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-cyan) 65%, transparent), 0 18px 46px -12px color-mix(in srgb, var(--c-cyan) 65%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cap-card, .cap-card:hover, .deploy-card, .deploy-card:hover, .price-card, .price-card:hover, .lp-btn, .lp-btn:hover { transform: none; }
  .price-card--popular { animation: none; }
  .faq-a { transition: none; }
  .faq-chevron { transition: none; }
}

/* ============================================================
   PHASE 1 — GLOBAL VISUAL POLISH
   Adds depth to sections (soft decorative glows), stronger card
   shadows in light mode, and a content z-index fix. Applied to the
   shared section system (Section 2 handled separately in Phase 2).
   ============================================================ */
.lp-sec, .section-hiw { overflow: hidden; }
.lp-sec > .wrap, .section-hiw > .wrap { position: relative; z-index: 1; }

.lp-sec::before, .section-hiw::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 46% 42% at 10% -5%, rgba(56, 189, 248, 0.1), transparent 62%),
    radial-gradient(ellipse 52% 48% at 92% 105%, rgba(167, 139, 250, 0.12), transparent 64%);
}
.landing[data-hero-theme="light"] .lp-sec::before,
.landing[data-hero-theme="light"] .section-hiw::before {
  background:
    radial-gradient(ellipse 46% 42% at 8% -5%, rgba(6, 182, 212, 0.07), transparent 60%),
    radial-gradient(ellipse 52% 48% at 94% 105%, rgba(124, 58, 237, 0.06), transparent 62%);
}

/* stronger, more premium card depth in light mode */
.landing[data-hero-theme="light"] .lp-sec {
  --c-shadow: 0 1px 3px rgba(30, 41, 90, 0.06), 0 18px 42px -20px rgba(30, 41, 90, 0.22);
}
.landing[data-hero-theme="light"] .section-hiw {
  --hiw-card-shadow: 0 1px 3px rgba(30, 41, 90, 0.06), 0 18px 42px -20px rgba(30, 41, 90, 0.22);
}

/* ============================================================
   CORRECTION PASS — depth, motion & AI-product feel
   ============================================================ */

/* ---- animated gradient glow blobs (Part 2.1): replace flat Phase-1 glows ---- */
.lp-sec::before, .lp-sec::after,
.section-hiw::before, .section-hiw::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: 540px;
  height: 540px;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.22;
}
.lp-sec::before, .section-hiw::before {
  top: -140px; inset-inline-start: -110px;
  background: radial-gradient(circle, #38bdf8 0%, transparent 68%);
  animation: blobDriftA 13s ease-in-out infinite;
}
.lp-sec::after, .section-hiw::after {
  bottom: -160px; inset-inline-end: -130px;
  background: radial-gradient(circle, #a78bfa 0%, transparent 68%);
  animation: blobDriftB 16s ease-in-out infinite;
}
.lp-sec--b::before, .section-hiw::before { background: radial-gradient(circle, #2dd4bf 0%, transparent 68%); }
.landing[data-hero-theme="light"] .lp-sec::before,
.landing[data-hero-theme="light"] .lp-sec::after,
.landing[data-hero-theme="light"] .section-hiw::before,
.landing[data-hero-theme="light"] .section-hiw::after { opacity: 0.14; filter: blur(80px); }
@keyframes blobDriftA { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(28px, 24px); } }
@keyframes blobDriftB { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-26px, -22px); } }

/* ---- floating AI nodes (Part 2.2), injected by JS ---- */
.ai-node {
  position: absolute;
  z-index: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--node-c, #38bdf8);
  box-shadow: 0 0 10px 2px color-mix(in srgb, var(--node-c, #38bdf8) 55%, transparent);
  pointer-events: none;
  animation: aiPulse var(--node-dur, 4s) ease-in-out var(--node-delay, 0s) infinite;
}
@keyframes aiPulse { 0%, 100% { transform: scale(1); opacity: 0.55; } 50% { transform: scale(1.15); opacity: 1; } }

/* ---- moving border glow on featured cards (Part 2.6) ---- */
.moving-glow { position: relative; }
.moving-glow::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from 0deg, transparent 0deg, #38bdf8 60deg, #2dd4bf 140deg, transparent 220deg, #a78bfa 320deg, transparent 360deg);
  opacity: 0.38;
  animation: borderSpin 5s linear infinite;
}
@keyframes borderSpin { to { transform: rotate(360deg); } }

/* ---- button micro-interaction (Part 2.8) ---- */
.lp-btn:active { transform: scale(0.97); }

/* ---- AI stack strip (Part 2.10) ---- */
.ai-stack { margin-top: clamp(2rem, 4vw, 3rem); }
.ai-stack__title { text-align: center; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-muted); margin: 0 0 1rem; }
.ai-stack__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem; }
.ai-stack__chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.8rem; font-weight: 600;
  padding: 0.45rem 0.9rem; border-radius: 999px;
  background: var(--c-card); border: 1px solid var(--c-border); color: var(--c-muted);
  transition: color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.ai-stack__chip.is-active {
  color: var(--c-ink);
  border-color: color-mix(in srgb, var(--c-cyan) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-cyan) 40%, transparent), 0 8px 22px -12px color-mix(in srgb, var(--c-cyan) 60%, transparent);
}
.ai-stack__chip.is-active::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-cyan); box-shadow: 0 0 8px 1px var(--c-cyan); }

/* ============================================================
   PART 1 — FINAL CTA + FOOTER theming
   ============================================================ */
.final-cta { overflow: hidden; }
.final-cta__grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
  background-image:
    linear-gradient(color-mix(in srgb, var(--c-cyan) 12%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--c-cyan) 12%, transparent) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 0%, black, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 80% at 50% 0%, black, transparent 75%);
}
.final-cta__title, .final-cta__sub, .final-cta__btns { position: relative; z-index: 2; }

/* Footer: theme-aware, never plain white */
.landing[data-hero-theme="dark"] .landing-footer {
  background: linear-gradient(180deg, #262c4a 0%, #1c2340 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #f8f7ff;
}
.landing[data-hero-theme="dark"] .landing-footer .landing-logo-text { color: #f8f7ff; }
.landing[data-hero-theme="dark"] .landing-footer .landing-logo-text span { color: #38bdf8; }
.landing[data-hero-theme="dark"] .landing-footer-brand p,
.landing[data-hero-theme="dark"] .landing-footer-cols h4,
.landing[data-hero-theme="dark"] .landing-footer-bottom { color: rgba(248, 247, 255, 0.6); }
.landing[data-hero-theme="dark"] .landing-footer-cols a { color: rgba(248, 247, 255, 0.78); }
.landing[data-hero-theme="dark"] .landing-footer-cols a:hover { color: #38bdf8; }
.landing[data-hero-theme="dark"] .landing-footer-bottom { border-top-color: rgba(255, 255, 255, 0.08); }

.landing[data-hero-theme="light"] .landing-footer {
  background: linear-gradient(180deg, #f4f8ff 0%, #eaf1fb 100%);
  border-top: 1px solid rgba(12, 18, 34, 0.07);
}
.landing-footer { position: relative; overflow: hidden; }
.landing-footer::before {
  content: ""; position: absolute; top: -120px; inset-inline-start: 10%;
  width: 380px; height: 380px; border-radius: 50%; filter: blur(80px); opacity: 0.16;
  background: radial-gradient(circle, #38bdf8, transparent 68%); pointer-events: none;
}
.landing-footer .wrap { position: relative; z-index: 1; }

/* ============================================================
   PART 4 — PRICING (new model, toggle, limit rows)
   ============================================================ */
.price-toggle { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0 auto clamp(2rem, 3vw, 2.75rem); padding: 4px; border-radius: 999px; background: var(--c-card); border: 1px solid var(--c-border); box-shadow: var(--c-shadow); }
.price-toggle__wrap { display: flex; justify-content: center; }
.price-toggle__btn { border: none; background: transparent; cursor: pointer; font-family: var(--font); font-weight: 700; font-size: 0.85rem; color: var(--c-muted); padding: 0.5rem 1rem; border-radius: 999px; transition: color 0.18s ease, background 0.18s ease; display: inline-flex; align-items: center; gap: 0.45rem; }
.price-toggle__btn.is-active { color: var(--c-on-accent); background: linear-gradient(135deg, var(--c-teal), var(--c-cyan)); }
.price-toggle__save { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.02em; padding: 0.12rem 0.45rem; border-radius: 999px; background: color-mix(in srgb, var(--c-success, #10b981) 18%, transparent); color: var(--c-success, #10b981); border: 1px solid color-mix(in srgb, var(--c-success, #10b981) 40%, transparent); }
.price-toggle__btn.is-active .price-toggle__save { background: rgba(255,255,255,0.22); color: #fff; border-color: rgba(255,255,255,0.35); }

.price-card__price { display: flex; align-items: baseline; gap: 0.35rem; margin: 0.2rem 0 0; }
.price-card__amount { font-family: var(--font); font-weight: 800; font-size: 1.7rem; color: var(--c-ink); line-height: 1; }
.price-card__per { font-size: 0.78rem; color: var(--c-muted); }
.price-card__annual-note { font-size: 0.68rem; color: var(--c-success, #10b981); min-height: 0.9rem; }
.price-card__limits { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.price-card__limits li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--c-ink); }
.price-card__limits li svg { width: 15px; height: 15px; flex: none; color: var(--c-cyan); }
.price-card__limits .lim-muted { color: var(--c-muted); }
.price-card__limits .lim-val { margin-inline-start: auto; font-weight: 700; font-family: var(--font); }
.price-card__over { margin: 0.3rem 0 0; font-size: 0.7rem; color: var(--c-muted); }
.price-card--popular .price-card__amount { color: var(--c-cyan); }

/* ============================================================
   PART 3 — TECHNOLOGY node-map
   ============================================================ */
.tech-map { position: relative; display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: center; z-index: 1; }
@media (min-width: 920px) { .tech-map { grid-template-columns: 1fr 1.25fr 1fr; gap: 1.5rem; } }
.tech-col { display: flex; flex-direction: column; gap: 0.75rem; }
.tech-core {
  position: relative; text-align: center; padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: 22px; color: var(--c-ink);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-cyan) 12%, var(--c-card)), var(--c-card));
  border: 1px solid color-mix(in srgb, var(--c-cyan) 40%, var(--c-border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-cyan) 20%, transparent), 0 30px 70px -30px color-mix(in srgb, var(--c-cyan) 60%, transparent);
}
.tech-core::before { content: ""; position: absolute; inset: -30px; z-index: -1; border-radius: 40px; background: radial-gradient(circle, color-mix(in srgb, var(--c-cyan) 22%, transparent), transparent 70%); animation: corePulse 3.6s ease-in-out infinite; }
@keyframes corePulse { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }
.tech-core__icon { width: 56px; height: 56px; margin: 0 auto 0.75rem; border-radius: 16px; display: grid; place-items: center; color: var(--c-on-accent); background: linear-gradient(135deg, var(--c-teal), var(--c-cyan)); box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--c-cyan) 70%, transparent); }
.tech-core__icon svg { width: 28px; height: 28px; }
.tech-core__title { margin: 0; font-family: var(--font); font-weight: 800; font-size: 1.2rem; }
.tech-core__sub { margin: 0.35rem 0 0; font-size: 0.85rem; color: var(--c-muted); }

.tech-chip { position: relative; display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.9rem; border-radius: 14px; background: var(--c-card); border: 1px solid var(--c-border); box-shadow: var(--c-shadow); transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; }
.tech-chip:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c-cyan) 50%, var(--c-border)); box-shadow: var(--c-shadow), 0 12px 26px -14px color-mix(in srgb, var(--c-cyan) 55%, transparent); }
.tech-chip__icon { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; color: var(--c-cyan); background: color-mix(in srgb, var(--c-cyan) 14%, transparent); }
.tech-chip__icon svg { width: 16px; height: 16px; }
.tech-chip span { font-size: 0.82rem; font-weight: 600; color: var(--c-ink); }
/* connectors toward the core (desktop only) */
@media (min-width: 920px) {
  .tech-col--left .tech-chip::after, .tech-col--right .tech-chip::before {
    content: ""; position: absolute; top: 50%; width: 1.5rem; height: 2px;
    background: linear-gradient(90deg, transparent, var(--c-cyan)); background-size: 200% 100%;
    animation: lineFlow 2.6s linear infinite;
  }
  .tech-col--left .tech-chip::after { inset-inline-end: -1.5rem; }
  .tech-col--right .tech-chip::before { inset-inline-start: -1.5rem; background: linear-gradient(270deg, transparent, var(--c-cyan)); }
}
@keyframes lineFlow { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.tech-flow { margin-top: clamp(1.75rem, 3vw, 2.5rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; }
.tech-flow__step { font-size: 0.76rem; font-weight: 600; padding: 0.4rem 0.8rem; border-radius: 999px; background: var(--c-card2); border: 1px solid var(--c-border); color: var(--c-muted); transition: color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.tech-flow__step.is-lit { color: var(--c-ink); border-color: color-mix(in srgb, var(--c-teal) 50%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-teal) 35%, transparent); }
.tech-flow__arrow { color: var(--c-muted); display: inline-flex; }
.tech-flow__arrow svg { width: 15px; height: 15px; }
[dir="rtl"] .tech-flow__arrow svg { transform: scaleX(-1); }

/* ============================================================
   PART 8 — SUPPORT analytics preview
   ============================================================ */
.analytics-preview { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.25rem; }
@media (min-width: 680px) { .analytics-preview { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .analytics-preview { grid-template-columns: repeat(3, 1fr); } }
.ap-card { padding: 1.1rem 1.2rem; border-radius: 16px; background: var(--c-card); border: 1px solid var(--c-border); box-shadow: var(--c-shadow); transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; }
.ap-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c-cyan) 45%, var(--c-border)); box-shadow: var(--c-shadow), 0 16px 34px -18px color-mix(in srgb, var(--c-cyan) 55%, transparent); }
.ap-card__head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.85rem; font-family: var(--font); font-weight: 700; font-size: 0.9rem; color: var(--c-ink); }
.ap-card__head svg { width: 17px; height: 17px; color: var(--c-cyan); }
.ap-metric { font-family: var(--font); font-weight: 800; font-size: 1.9rem; color: var(--c-ink); line-height: 1; }
.ap-metric small { font-size: 0.75rem; font-weight: 600; color: var(--c-muted); margin-inline-start: 0.35rem; }
.ap-sub { font-size: 0.76rem; color: var(--c-muted); margin-top: 0.35rem; }
.ap-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.ap-list li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.8rem; color: var(--c-ink); }
.ap-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--c-track); overflow: hidden; }
.ap-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--c-teal), var(--c-cyan)); }
.ap-pct { font-size: 0.72rem; font-weight: 700; color: var(--c-muted); min-width: 2.2rem; text-align: end; }
.ap-conv { display: flex; flex-direction: column; gap: 0.6rem; }
.ap-conv__row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; color: var(--c-ink); }
.ap-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.ap-dot--ok { background: var(--c-success, #10b981); box-shadow: 0 0 6px 1px color-mix(in srgb, var(--c-success, #10b981) 60%, transparent); }
.ap-dot--lead { background: var(--c-cyan); box-shadow: 0 0 6px 1px color-mix(in srgb, var(--c-cyan) 60%, transparent); }
.ap-dot--human { background: var(--c-purple); box-shadow: 0 0 6px 1px color-mix(in srgb, var(--c-purple) 60%, transparent); }
.ap-badge { margin-inline-start: auto; font-size: 0.62rem; font-weight: 700; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--c-card2); border: 1px solid var(--c-border); color: var(--c-muted); }

@media (prefers-reduced-motion: reduce) {
  .lp-sec::before, .lp-sec::after, .section-hiw::before, .section-hiw::after,
  .ai-node, .moving-glow::after, .tech-core::before,
  .tech-col--left .tech-chip::after, .tech-col--right .tech-chip::before { animation: none !important; }
}

/* pricing annual-note visibility (Part 4) */
.price-card__annual-note { visibility: hidden; }
#priceGrid.is-annual .price-card__annual-note[data-annual-note] { visibility: visible; }

/* how-it-works indexed counter (Part 5) */
.hiw-scan__count { font-size: 0.72rem; color: var(--hiw-muted); margin-top: 3px; text-align: start; }
.hiw-scan__count strong { font-family: var(--font); font-weight: 800; color: var(--hiw-cyan); }

/* live-demo state chips (Part 6) */
.lp-demo { position: relative; }
.demo-state { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; font-weight: 600; padding: 0.42rem 0.72rem; border-radius: 999px; background: var(--c-card); border: 1px solid var(--c-border); box-shadow: var(--c-shadow), 0 12px 28px -16px rgba(8,10,30,0.5); color: var(--c-ink); backdrop-filter: blur(8px); animation: floatY 5s ease-in-out infinite; }
.demo-state__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.demo-state--lead { top: -12px; inset-inline-end: 6px; }
.demo-state--lead .demo-state__dot { background: var(--c-cyan); box-shadow: 0 0 8px 1px color-mix(in srgb, var(--c-cyan) 60%, transparent); }
.demo-state--human { bottom: -12px; inset-inline-start: 6px; animation-delay: 1.3s; }
.demo-state--human .demo-state__dot { background: var(--c-purple); box-shadow: 0 0 8px 1px color-mix(in srgb, var(--c-purple) 60%, transparent); }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (max-width: 600px) { .demo-state { display: none; } }
@media (prefers-reduced-motion: reduce) { .demo-state { animation: none; } }

/* ============================================================
   SECTION 3 — capability marquee strip
   ============================================================ */
.cap-strip { position: relative; overflow: hidden; padding: 0.85rem 0; background: linear-gradient(90deg, #0b1020, #11182d 45%, #1a2342); border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); }
.landing[data-hero-theme="light"] .cap-strip { background: linear-gradient(90deg, #0f172a, #1a2342 50%, #283368); }
.cap-strip__mask { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.cap-strip__track { display: inline-flex; align-items: center; gap: 2.5rem; white-space: nowrap; animation: capScroll 34s linear infinite; will-change: transform; }
.cap-strip:hover .cap-strip__track { animation-play-state: paused; }
[dir="rtl"] .cap-strip__track { animation-name: capScrollRtl; }
.cap-strip__item { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font); font-size: 0.85rem; font-weight: 600; color: rgba(234,240,250,0.72); flex: none; }
.cap-strip__item svg { width: 17px; height: 17px; color: #38bdf8; }
.cap-strip__item--brand { color: #eaf0fa; font-family: var(--mono); font-weight: 500; }
.cap-dot { width: 6px; height: 6px; border-radius: 50%; background: #2dd4bf; box-shadow: 0 0 8px 1px rgba(45,212,191,0.6); }
@keyframes capScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes capScrollRtl { from { transform: translateX(0); } to { transform: translateX(50%); } }
@media (prefers-reduced-motion: reduce) { .cap-strip__track { animation: none; transform: none; } }

/* ============================================================
   Section kickers (editorial label above each headline)
   ============================================================ */
.lp-kicker, .section-what__kicker, .section-hiw__kicker {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--c-cyan, var(--sw-cyan, #38bdf8));
  margin: 0 auto 0.85rem;
}
.lp-kicker::before, .section-what__kicker::before, .section-hiw__kicker::before {
  content: ""; width: 22px; height: 1px;
  background: linear-gradient(90deg, transparent, currentColor);
}
.section-what__kicker { color: var(--sw-cyan, #38bdf8); }
.section-hiw__kicker { color: var(--hiw-cyan, #38bdf8); }

/* ============================================================
   SECTION 4 — asymmetric layout (2 large + 4 small) + mini-UIs
   ============================================================ */
.section-hiw .lp-sub { color: var(--hiw-muted); }

.what-feat-row { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 2vw, 1.4rem); margin-top: clamp(1.75rem, 3vw, 2.75rem); }
@media (min-width: 840px) { .what-feat-row { grid-template-columns: 1fr 1fr; } }
.what-mini-row { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 2vw, 1.4rem); margin-top: clamp(1rem, 2vw, 1.4rem); }
@media (min-width: 620px) { .what-mini-row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .what-mini-row { grid-template-columns: repeat(4, 1fr); } }

.what-feat, .what-mini { position: relative; background: var(--sw-card); border: 1px solid var(--sw-border); box-shadow: var(--sw-card-elev); transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; }
.what-feat { display: flex; flex-direction: column; gap: 1.1rem; padding: clamp(1.5rem, 2.2vw, 2rem); border-radius: 20px; }
.what-mini { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.4rem; border-radius: 18px; }
.what-feat:hover, .what-mini:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--sw-cyan) 45%, var(--sw-border)); box-shadow: 0 22px 46px -20px color-mix(in srgb, var(--sw-cyan) 55%, transparent); }
.what-feat:hover .what-card__icon, .what-mini:hover .what-card__icon { box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 12%, transparent); }
.what-feat__body { display: flex; flex-direction: column; gap: 0.7rem; }

/* mini-UI shared */
.what-ui { border-radius: 14px; background: color-mix(in srgb, var(--sw-ink) 4%, transparent); border: 1px solid var(--sw-border); padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; margin-top: auto; }
.landing[data-hero-theme="light"] .what-ui { background: #f6f9fe; }
.wu-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-family: var(--mono); font-size: 0.72rem; color: var(--sw-ink); }
.wu-path { opacity: 0.85; }
.wu-ok { font-size: 0.6rem; font-weight: 700; color: #10b981; background: color-mix(in srgb, #10b981 15%, transparent); border: 1px solid color-mix(in srgb, #10b981 34%, transparent); border-radius: 999px; padding: 0.1rem 0.5rem; white-space: nowrap; }
.wu-ok--live { color: var(--sw-cyan); background: color-mix(in srgb, var(--sw-cyan) 15%, transparent); border-color: color-mix(in srgb, var(--sw-cyan) 34%, transparent); }
.wu-scanbar { position: relative; height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--sw-ink) 12%, transparent); overflow: hidden; }
.wu-scanbar span { position: absolute; inset: 0 42% 0 0; border-radius: 999px; background: linear-gradient(90deg, var(--sw-teal), var(--sw-cyan)); }
[dir="rtl"] .wu-scanbar span { inset: 0 0 0 42%; }
.wu-scanbar span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent); transform: translateX(-100%); animation: scanShimmer 1.8s ease-in-out infinite; }
.wu-bubble { font-size: 0.78rem; line-height: 1.5; color: var(--sw-ink); background: color-mix(in srgb, var(--sw-cyan) 9%, var(--sw-card)); border: 1px solid var(--sw-border); border-radius: 12px; padding: 0.55rem 0.7rem; }
.wu-source { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; font-size: 0.64rem; font-weight: 600; color: var(--sw-cyan); background: color-mix(in srgb, var(--sw-cyan) 12%, transparent); border: 1px solid color-mix(in srgb, var(--sw-cyan) 32%, transparent); border-radius: 999px; padding: 0.18rem 0.55rem; animation: pillFade 0.4s ease both; }
.wu-source i { width: 5px; height: 5px; border-radius: 50%; background: var(--sw-cyan); }
.wu-field { font-size: 0.72rem; color: var(--sw-muted); background: color-mix(in srgb, var(--sw-ink) 6%, transparent); border: 1px solid var(--sw-border); border-radius: 8px; padding: 0.4rem 0.6rem; }
.what-ui--notif { flex-direction: row; align-items: center; gap: 0.55rem; }
.what-ui--notif span:last-child { font-size: 0.74rem; color: var(--sw-ink); }
.wu-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--sw-purple); box-shadow: 0 0 8px 1px color-mix(in srgb, var(--sw-purple) 60%, transparent); animation: aiPulse 2.6s ease-in-out infinite; }
.wu-dot--cyan { background: var(--sw-cyan); box-shadow: 0 0 8px 1px color-mix(in srgb, var(--sw-cyan) 60%, transparent); }
.what-ui--bars { flex-direction: row; align-items: flex-end; gap: 5px; height: 44px; }
.what-ui--bars span { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--sw-cyan), var(--sw-teal)); transform-origin: bottom; animation: hiwBar 2.2s ease-in-out infinite; }
.what-ui--bars span:nth-child(1) { height: 40%; }
.what-ui--bars span:nth-child(2) { height: 68%; animation-delay: 0.15s; }
.what-ui--bars span:nth-child(3) { height: 50%; animation-delay: 0.3s; }
.what-ui--bars span:nth-child(4) { height: 84%; animation-delay: 0.45s; }
.what-ui--bars span:nth-child(5) { height: 60%; animation-delay: 0.6s; }
@media (prefers-reduced-motion: reduce) { .wu-scanbar span::after, .wu-dot, .what-ui--bars span, .wu-source { animation: none; } }

/* active-section nav indicator */
.landing-nav-primary > a.is-current { color: #38bdf8; position: relative; }
.landing-nav-primary > a.is-current::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #2dd4bf, #38bdf8); }
.landing-header--scrolled .landing-nav-primary > a.is-current { color: #0891b2; }

/* mouse-follow spotlight (hero + technology) */
.spotlight-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 0.35s ease; background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(56, 189, 248, 0.16), transparent 70%); }
.spotlight-layer.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .spotlight-layer { display: none; } }

/* final CTA badge + trust line */
.final-cta__badge { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-cyan); background: color-mix(in srgb, var(--c-cyan) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c-cyan) 32%, transparent); border-radius: 999px; padding: 0.32rem 0.85rem; margin-bottom: 1rem; }
.final-cta__trust { position: relative; z-index: 2; margin: 1.1rem 0 0; font-size: 0.82rem; color: var(--c-muted); }

/* footer: 3 columns + animated top border + legal */
.landing-footer-cols { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 560px) { .landing-footer-cols { grid-template-columns: repeat(2, 1fr); } }
.landing-footer-legal { display: inline-flex; gap: 0.4rem; }
.landing[data-hero-theme="dark"] .landing-footer-legal a { color: rgba(248,244,255,0.6); }
.landing-footer-legal a:hover { color: var(--teal); }
.landing-footer::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, #2dd4bf, #38bdf8, #8b5cf6, transparent); background-size: 200% 100%; animation: footBorder 6s linear infinite; opacity: 0.7; }
@keyframes footBorder { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .landing-footer::after { animation: none; } }

/* ============================================================
   BATCH A — global design system: Assistant font, gradient
   headline phrase, kicker removal, softer light backgrounds.
   ============================================================ */
.landing {
  --font: "Assistant", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Assistant", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-family: var(--font-body);
}

/* gradient emphasis for ONE phrase per headline */
.grad {
  background: linear-gradient(90deg, #0F9FA8 0%, #18B6C9 45%, #5B72E8 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
}
.grad--violet { background: linear-gradient(90deg, #19B9C4, #6279EB, #8B5CF6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* remove tiny section kickers (keep Hero badge / Most popular / CTA badge) */
.lp-kicker, .section-what__kicker, .section-hiw__kicker { display: none !important; }

/* softer, tinted light-mode section backgrounds (not pure white) */
.landing[data-hero-theme="light"] .lp-sec { --band-a: linear-gradient(180deg, #F7FAFE, #FFFFFF); --band-b: linear-gradient(180deg, #EEF5FC, #F7FAFE); }
.landing[data-hero-theme="light"] .section-what { --sw-bg: linear-gradient(180deg, #FFFFFF, #F7FAFE); }
.landing[data-hero-theme="light"] .section-hiw { --hiw-bg: linear-gradient(180deg, #F3F0FF, #F7FAFE); }
.landing[data-hero-theme="light"] .lp-sec--b#pricing { --band-b: linear-gradient(180deg, #EEF5FC, #F3F0FF); }

/* stronger subtitle contrast */
.section-what__body { color: #52627E; max-width: 760px; font-size: clamp(1.05rem, 1.4vw, 1.35rem); }
.landing[data-hero-theme="light"] .lp-sub { color: #52627E; }

/* Assistant reads well slightly tighter on headings */
.lp-title, .section-what__title, .section-hiw__title, .final-cta__title, .landing-hero__title { letter-spacing: -0.025em; }

/* BATCH A — Hero light-theme mockup: lighter, not grey/disabled */
.landing[data-hero-theme="light"] .landing-hero--dark {
  --hero-browser-bg: #ffffff;
  --hero-card: #ffffff;
  --hero-card-2: #F8FBFF;
  --hero-border: rgba(109, 130, 165, 0.20);
  --hero-track: #EDF3F9;
  --hero-chat-bg: #FBFDFF;
  --hero-input-bg: #ffffff;
  --hero-card-shadow: 0 28px 70px rgba(37, 61, 107, 0.16);
}

/* Capability strip — light theme: airy SiteChat surface, not a dark navy bar */
.cap-strip__track { gap: 3rem; }
.cap-strip { border-top-color: rgba(255,255,255,0.08); border-bottom: none; }
.landing[data-hero-theme="light"] .cap-strip {
  background: linear-gradient(90deg, rgba(225, 246, 249, 0.96) 0%, rgba(231, 241, 255, 0.96) 50%, rgba(240, 235, 255, 0.96) 100%);
  border-top: 1px solid rgba(24, 182, 201, 0.18);
  border-bottom: 1px solid rgba(91, 114, 232, 0.14);
}
.landing[data-hero-theme="light"] .cap-strip__item { color: #1f2b45; }
.landing[data-hero-theme="light"] .cap-strip__item svg { color: #0f9fa8; }
.landing[data-hero-theme="light"] .cap-strip__item--brand { color: #334155; }
.landing[data-hero-theme="light"] .cap-dot { box-shadow: 0 0 8px 1px rgba(45, 212, 191, 0.45); }

/* Hero internal product-state notification (inside the mockup, one at a time) */
.hero-mock-state {
  position: absolute;
  top: 50px;
  inset-inline-end: 16px;
  z-index: 5;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font); font-size: 0.68rem; font-weight: 700;
  padding: 0.32rem 0.65rem; border-radius: 999px;
  background: var(--hero-card); border: 1px solid var(--hero-border);
  color: var(--hero-ink);
  box-shadow: 0 10px 24px -12px rgba(8, 10, 30, 0.5);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(-5px);
  transition: opacity 0.38s ease, transform 0.38s ease;
  pointer-events: none;
}
.hero-mock-state.is-visible { opacity: 1; transform: none; }
.hero-mock-state__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--hero-success); box-shadow: 0 0 7px 1px color-mix(in srgb, var(--hero-success) 60%, transparent); }
.hero-mock-state--lead .hero-mock-state__dot { background: var(--hero-cyan); box-shadow: 0 0 7px 1px color-mix(in srgb, var(--hero-cyan) 60%, transparent); }
.hero-mock-state--handoff .hero-mock-state__dot { background: var(--hero-purple); box-shadow: 0 0 7px 1px color-mix(in srgb, var(--hero-purple) 60%, transparent); }
@media (prefers-reduced-motion: reduce) { .hero-mock-state { transition: none; } }

/* ============================================================
   B1 — HOW IT WORKS: alternating product-journey rows
   ============================================================ */
.hiw2 { position: relative; margin-top: clamp(2rem, 4vw, 3rem); }
.hiw2__spine { position: absolute; top: 12px; bottom: 12px; inset-inline-start: 50%; transform: translateX(-50%); width: 2px; background: var(--hiw-line); z-index: 0; border-radius: 2px; }
.hiw2__spine-fill { position: absolute; top: 0; left: 0; width: 100%; height: 0%; border-radius: 2px; background: linear-gradient(180deg, var(--hiw-teal), var(--hiw-cyan)); box-shadow: 0 0 12px 1px color-mix(in srgb, var(--hiw-cyan) 55%, transparent); transition: height 0.15s linear; }
@media (max-width: 859px) { .hiw2__spine { inset-inline-start: 21px; transform: none; } }

.hiw2-row { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; padding: clamp(1.5rem, 3vw, 2.75rem) 0; }
@media (min-width: 860px) {
  .hiw2-row { grid-template-columns: 1fr 1fr; column-gap: 5.5rem; }
  .hiw2-row--rev .hiw2-text { order: 2; }
  .hiw2-row--rev .hiw2-visual { order: 1; }
  .hiw2-row:not(.hiw2-row--rev) .hiw2-text { text-align: end; }
  .hiw2-row--rev .hiw2-text { text-align: start; }
  .hiw2-row:not(.hiw2-row--rev) .hiw2-desc { margin-inline-start: auto; }
}

.hiw2-node {
  position: absolute; inset-inline-start: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font); font-weight: 800; font-size: 0.9rem; color: var(--hiw-on-accent);
  background: linear-gradient(135deg, var(--hiw-teal), var(--hiw-cyan));
  box-shadow: 0 0 0 6px var(--hiw-ring); transition: box-shadow 0.35s ease;
}
.hiw2-row.is-active .hiw2-node { box-shadow: 0 0 0 6px var(--hiw-ring), 0 0 24px 4px color-mix(in srgb, var(--hiw-cyan) 60%, transparent); }
@media (max-width: 859px) {
  .hiw2-node { inset-inline-start: 21px; top: 26px; transform: translate(-50%, -50%); width: 42px; height: 42px; }
  .hiw2-row { padding-inline-start: 56px; }
  .hiw2-row--rev .hiw2-text { order: initial; text-align: start; }
  .hiw2-row--rev .hiw2-visual { order: initial; }
  .hiw2-row:not(.hiw2-row--rev) .hiw2-text { text-align: start; }
}

.hiw2-title { margin: 0 0 0.55rem; font-family: var(--font); font-weight: 800; font-size: clamp(1.2rem, 2vw, 1.6rem); letter-spacing: -0.02em; color: var(--hiw-ink); }
.hiw2-desc { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--hiw-muted); max-width: 42ch; }
.section-hiw[lang="he"] .hiw2-desc { line-height: 1.8; }

.hiw2-visual { display: flex; }
.hiw2-row:not(.hiw2-row--rev) .hiw2-visual { justify-content: flex-start; }
.hiw2-row--rev .hiw2-visual { justify-content: flex-end; }
@media (max-width: 859px) { .hiw2-visual { justify-content: flex-start; } }

.hiw-mock {
  width: 100%; max-width: 400px;
  border-radius: 16px; background: var(--hiw-card); border: 1px solid var(--hiw-border);
  box-shadow: var(--hiw-card-shadow, 0 24px 50px -28px rgba(8, 10, 30, 0.6));
  padding: 1rem; display: flex; flex-direction: column; gap: 0.7rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.hiw2-row.is-active .hiw-mock { border-color: color-mix(in srgb, var(--hiw-cyan) 40%, var(--hiw-border)); }

/* Step 1 — URL discovery */
.hium-field { display: flex; align-items: center; gap: 0.5rem; font-family: var(--mono); font-size: 0.8rem; color: var(--hiw-ink); background: var(--hiw-mock); border: 1px solid var(--hiw-border); border-radius: 10px; padding: 0.62rem 0.75rem; }
.hium-field svg { width: 15px; height: 15px; color: var(--hiw-cyan); flex: none; }
.hium-typed { white-space: nowrap; overflow: hidden; }
.hium-caret { width: 2px; height: 15px; background: var(--hiw-cyan); animation: hcaret 1s step-end infinite; }
.hium-status { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; color: var(--hiw-muted); }
.hium-spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--hiw-track); border-top-color: var(--hiw-cyan); animation: hspin 0.9s linear infinite; flex: none; }
.hium-count { font-size: 0.85rem; color: var(--hiw-ink); }
.hium-count strong { font-family: var(--font); font-weight: 800; color: var(--hiw-cyan); font-size: 1.1rem; }
.hium-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hium-chips span { font-family: var(--mono); font-size: 0.7rem; color: var(--hiw-muted); background: var(--hiw-mock); border: 1px solid var(--hiw-border); border-radius: 999px; padding: 0.2rem 0.55rem; }
@keyframes hspin { to { transform: rotate(360deg); } }
@keyframes hcaret { 50% { opacity: 0; } }

/* Step 2 — crawl / index */
.hicm-head { display: flex; align-items: center; justify-content: space-between; font-size: 0.82rem; font-weight: 700; color: var(--hiw-ink); }
.hicm-badge { font-family: var(--mono); font-size: 0.72rem; color: var(--hiw-muted); }
.hicm-badge strong { color: var(--hiw-cyan); }
.hicm-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hicm-rows li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0.45rem 0.6rem; border-radius: 9px; background: var(--hiw-mock); border: 1px solid var(--hiw-border); }
.hicm-path { font-family: var(--mono); font-size: 0.72rem; color: var(--hiw-ink); opacity: 0.85; }
.hicm-ok { font-size: 0.6rem; font-weight: 700; color: var(--hiw-success, #34d399); background: color-mix(in srgb, var(--hiw-success, #34d399) 14%, transparent); border: 1px solid color-mix(in srgb, var(--hiw-success, #34d399) 34%, transparent); border-radius: 999px; padding: 0.1rem 0.5rem; }
.hicm-q { font-size: 0.6rem; font-weight: 700; color: var(--hiw-muted); background: var(--hiw-track); border-radius: 999px; padding: 0.1rem 0.5rem; }
.hicm-bar { position: relative; height: 6px; border-radius: 999px; background: var(--hiw-track); overflow: hidden; }
.hicm-bar span { position: absolute; inset: 0 25% 0 0; border-radius: 999px; background: linear-gradient(90deg, var(--hiw-teal), var(--hiw-cyan)); }
[dir="rtl"] .hicm-bar span { inset: 0 0 0 25%; }
.hicm-bar span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent); transform: translateX(-100%); animation: scanShimmer 1.8s ease-in-out infinite; }
.hicm-foot { display: flex; align-items: center; gap: 0.4rem; font-size: 0.74rem; color: var(--hiw-muted); }
.hicm-foot svg { width: 14px; height: 14px; color: var(--hiw-purple); }

/* Step 3 — code editor */
.hiw-code-mock { padding: 0; overflow: hidden; }
.hcode__bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.8rem; background: var(--hiw-mock); border-bottom: 1px solid var(--hiw-border); }
.hcode__dots { display: inline-flex; gap: 5px; }
.hcode__dots i { width: 9px; height: 9px; border-radius: 50%; }
.hcode__dots i:nth-child(1) { background: #fb7185; }
.hcode__dots i:nth-child(2) { background: #fbbf24; }
.hcode__dots i:nth-child(3) { background: #34d399; }
.hcode__file { font-family: var(--mono); font-size: 0.72rem; color: var(--hiw-muted); }
.hcode__copy { margin-inline-start: auto; font-family: var(--font); font-size: 0.68rem; font-weight: 700; color: var(--hiw-cyan); background: color-mix(in srgb, var(--hiw-cyan) 12%, transparent); border: 1px solid color-mix(in srgb, var(--hiw-cyan) 30%, transparent); border-radius: 7px; padding: 0.22rem 0.6rem; cursor: pointer; transition: all 0.18s ease; }
.hcode__copy.is-copied { color: var(--hiw-success, #34d399); border-color: color-mix(in srgb, var(--hiw-success, #34d399) 40%, transparent); background: color-mix(in srgb, var(--hiw-success, #34d399) 14%, transparent); }
.hcode__body { position: relative; margin: 0; padding: 0.9rem; font-family: var(--mono); font-size: 0.74rem; line-height: 1.75; color: var(--hiw-ink); overflow-x: auto; white-space: pre; }
.hcode__caret { display: inline-block; width: 7px; height: 14px; background: var(--hiw-cyan); vertical-align: middle; animation: hcaret 1s step-end infinite; }
.tok-tag { color: #8b5cf6; } .tok-attr { color: #38bdf8; } .tok-str { color: #14b8a6; }
.hcode__live { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.85rem; border-top: 1px solid var(--hiw-border); font-size: 0.74rem; font-weight: 600; color: var(--hiw-ink); }
.hcode__live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hiw-success, #34d399); box-shadow: 0 0 7px 1px color-mix(in srgb, var(--hiw-success, #34d399) 60%, transparent); }
.hcode__swatches { margin-inline-start: auto; display: inline-flex; gap: 6px; }
.hcode__swatches i { width: 16px; height: 16px; border-radius: 5px; cursor: pointer; opacity: 0.5; transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.hcode__swatches i.is-on { opacity: 1; transform: scale(1.12); box-shadow: 0 0 0 2px var(--hiw-card), 0 0 0 3px currentColor; }

/* Step 4 — dashboard */
.hiw-dash-mock { gap: 0.55rem; }
.hidm-conv { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; color: var(--hiw-ink); background: var(--hiw-mock); border: 1px solid var(--hiw-border); border-radius: 9px; padding: 0.5rem 0.65rem; }
.hidm-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.hidm-dot--ok { background: var(--hiw-success, #34d399); box-shadow: 0 0 6px 1px color-mix(in srgb, var(--hiw-success, #34d399) 55%, transparent); }
.hidm-dot--warn { background: #f59e0b; box-shadow: 0 0 6px 1px rgba(245, 158, 11, 0.5); }
.hidm-src { margin-inline-start: auto; font-family: var(--mono); font-size: 0.68rem; color: var(--hiw-muted); }
.hidm-save { margin-inline-start: auto; font-family: var(--font); font-size: 0.66rem; font-weight: 700; color: var(--hiw-cyan); background: color-mix(in srgb, var(--hiw-cyan) 12%, transparent); border: 1px solid color-mix(in srgb, var(--hiw-cyan) 30%, transparent); border-radius: 7px; padding: 0.18rem 0.55rem; cursor: pointer; }
.hidm-stats { display: flex; align-items: flex-end; gap: 1rem; padding-top: 0.35rem; }
.hidm-chart { flex: 1; display: flex; align-items: flex-end; gap: 5px; height: 52px; }
.hidm-chart span { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--hiw-cyan), var(--hiw-teal)); transform-origin: bottom; animation: hiwBar 2.2s ease-in-out infinite; }
.hidm-chart span:nth-child(1) { height: 38%; }
.hidm-chart span:nth-child(2) { height: 62%; animation-delay: 0.15s; }
.hidm-chart span:nth-child(3) { height: 46%; animation-delay: 0.3s; }
.hidm-chart span:nth-child(4) { height: 80%; animation-delay: 0.45s; }
.hidm-chart span:nth-child(5) { height: 56%; animation-delay: 0.6s; }
.hidm-chart span:nth-child(6) { height: 72%; animation-delay: 0.75s; }
.hidm-kpis { display: flex; gap: 1rem; }
.hidm-kpi { display: flex; flex-direction: column; }
.hidm-kpi strong { font-family: var(--font); font-weight: 800; font-size: 1.2rem; color: var(--hiw-ink); line-height: 1; }
.hidm-kpi span { font-size: 0.66rem; color: var(--hiw-muted); }

@media (prefers-reduced-motion: reduce) {
  .hium-spin, .hium-caret, .hicm-bar span::after, .hidm-chart span, .hcode__caret { animation: none !important; }
  .hiw2__spine-fill { transition: none; }
}

/* ============================================================
   B1 CORRECTIONS — split headline lines + spine gutter for numbers
   ============================================================ */
/* two intentional headline lines */
.section-what__title .hl-line, .lp-title .hl-line, .section-hiw__title .hl-line, .final-cta__title .hl-line { display: block; }
.section-what__title .hl-line + .hl-line { margin-top: 0.15em; }

/* How it works: explicit 3-column grid reserves a gutter for the spine/number */
@media (min-width: 860px) {
  .hiw2-row { grid-template-columns: 1fr 92px 1fr; column-gap: 0; }
  .hiw2-row .hiw2-text { grid-column: 1; }
  .hiw2-row .hiw2-visual { grid-column: 3; }
  .hiw2-row--rev .hiw2-text { grid-column: 3; }
  .hiw2-row--rev .hiw2-visual { grid-column: 1; }
  .hiw2-row:not(.hiw2-row--rev) .hiw2-text { text-align: end; padding-inline-end: 1.75rem; }
  .hiw2-row--rev .hiw2-text { text-align: start; padding-inline-start: 1.75rem; }
  .hiw2-row:not(.hiw2-row--rev) .hiw2-visual { justify-content: flex-start; padding-inline-start: 1.75rem; }
  .hiw2-row--rev .hiw2-visual { justify-content: flex-end; padding-inline-end: 1.75rem; }
  .hiw2-node { inset-inline-start: 50%; }
}
/* Mobile/tablet: number sits in its own gutter column beside the step, never over text */
@media (max-width: 859px) {
  .hiw2-row { grid-template-columns: 50px 1fr; column-gap: 0.9rem; padding-inline-start: 0; align-items: start; }
  .hiw2-node { position: static; grid-column: 1; grid-row: 1; transform: none; inset-inline-start: auto; top: auto; justify-self: center; align-self: start; margin-top: 2px; width: 42px; height: 42px; }
  .hiw2-text { grid-column: 2; grid-row: 1; text-align: start; padding: 0; }
  .hiw2-visual { grid-column: 2; grid-row: 2; }
  .hiw2__spine { inset-inline-start: 25px; }
}

/* ============================================================
   B2 — Interactive live demo: two-column + URL preview + categories
   ============================================================ */
.demo2-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.25rem, 2.5vw, 2rem); align-items: start; }
@media (min-width: 900px) { .demo2-grid { grid-template-columns: 0.82fr 1fr; } }

.demo2-left { display: flex; flex-direction: column; gap: 1.25rem; }
.demo2-try { padding: clamp(1.25rem, 2vw, 1.6rem); border-radius: 18px; background: var(--c-card); border: 1px solid var(--c-border); box-shadow: var(--c-shadow); }
.demo2-try__title { margin: 0 0 0.5rem; font-family: var(--font); font-weight: 800; font-size: 1.1rem; line-height: 1.35; color: var(--c-ink); }
.demo2-try__text { margin: 0 0 1rem; font-size: 0.9rem; line-height: 1.6; color: var(--c-muted); }
.demo2-urlform { position: relative; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.demo2-urlform__icon { position: absolute; inset-inline-start: 0.7rem; top: 1.05rem; transform: translateY(-50%); color: var(--c-cyan); pointer-events: none; }
.demo2-urlform__icon svg { width: 15px; height: 15px; }
.demo2-urlform input { flex: 1; min-width: 150px; font-family: var(--mono); font-size: 0.8rem; color: var(--c-ink); background: var(--c-mock); border: 1px solid var(--c-border); border-radius: 10px; padding: 0.6rem 0.75rem; padding-inline-start: 2.1rem; outline: none; transition: border-color 0.18s ease; }
.demo2-urlform input:focus { border-color: var(--c-cyan); }
.demo2-urlform .lp-btn { flex: none; padding: 0.6rem 1rem; font-size: 0.85rem; }
.demo2-urlerr { margin: 0.55rem 0 0; font-size: 0.76rem; color: #f43f5e; }
.demo2-preview { margin-top: 1rem; padding: 0.85rem; border-radius: 12px; background: color-mix(in srgb, var(--c-cyan) 8%, var(--c-card2)); border: 1px dashed color-mix(in srgb, var(--c-cyan) 42%, var(--c-border)); animation: pillFade 0.4s ease both; }
.demo2-preview__tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--c-cyan); }
.demo2-preview__tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-cyan); box-shadow: 0 0 6px 1px var(--c-cyan); }
.demo2-preview__url { display: block; margin-top: 0.35rem; font-family: var(--mono); font-size: 0.82rem; color: var(--c-ink); word-break: break-all; }
.demo2-preview__note { margin: 0.45rem 0 0; font-size: 0.72rem; line-height: 1.5; color: var(--c-muted); }

.demo2-cats__label { display: block; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 0.6rem; }
.demo2-cats { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.demo2-cat { font-family: var(--font); font-size: 0.82rem; font-weight: 600; color: var(--c-muted); background: var(--c-card); border: 1px solid var(--c-border); border-radius: 999px; padding: 0.45rem 0.95rem; cursor: pointer; transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease; }
.demo2-cat:hover { color: var(--c-ink); border-color: color-mix(in srgb, var(--c-cyan) 40%, transparent); }
.demo2-cat.is-active { color: var(--c-on-accent); background: linear-gradient(135deg, var(--c-teal), var(--c-cyan)); border-color: transparent; }

.demo2-right .demo-widget { max-width: none; min-height: 500px; }
.demo-widget.is-conversing { border-color: color-mix(in srgb, var(--hero-cyan) 40%, var(--hero-border)); }

/* answer-triggered state card inside the chat thread */
.chat-state { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font); font-size: 0.72rem; font-weight: 700; padding: 0.4rem 0.7rem; border-radius: 12px; background: var(--hero-card); border: 1px solid var(--hero-border); color: var(--hero-ink); animation: pillFade 0.4s ease both; }
.chat-state svg { width: 13px; height: 13px; }
.chat-state__dot { width: 7px; height: 7px; border-radius: 50%; }
.chat-state--lead .chat-state__dot { background: var(--hero-cyan); box-shadow: 0 0 7px 1px color-mix(in srgb, var(--hero-cyan) 60%, transparent); }
.chat-state--handoff .chat-state__dot { background: var(--hero-purple); box-shadow: 0 0 7px 1px color-mix(in srgb, var(--hero-purple) 60%, transparent); }
.chat-state--save { cursor: pointer; color: var(--hero-cyan); background: color-mix(in srgb, var(--hero-cyan) 12%, transparent); border-color: color-mix(in srgb, var(--hero-cyan) 32%, transparent); }

/* ============================================================
   B3 — Technology: provider colors, pulses, selected state, proc label
   ============================================================ */
.tech-chip { --prov: var(--c-cyan); }
.tech-chip--prov { cursor: pointer; width: 100%; font: inherit; text-align: inherit; }
.tech-chip--prov[data-provider="openai"]    { --prov: #14B8A6; }
.tech-chip--prov[data-provider="azure"]     { --prov: #4F72E8; }
.tech-chip--prov[data-provider="anthropic"] { --prov: #8B5CF6; }
.tech-chip--prov[data-provider="ollama"]    { --prov: #10B981; }
.tech-chip--prov .tech-chip__icon { color: var(--prov); background: color-mix(in srgb, var(--prov) 15%, transparent); }
.tech-chip--prov:hover { border-color: color-mix(in srgb, var(--prov) 55%, var(--c-border)); }
.tech-chip--prov.is-selected { border-color: var(--prov); box-shadow: 0 0 0 1px var(--prov), 0 12px 26px -14px color-mix(in srgb, var(--prov) 60%, transparent); }
.tech-chip--prov.is-selected .tech-chip__icon { background: color-mix(in srgb, var(--prov) 28%, transparent); }

/* connector pulses travelling toward the centre (per-provider colour) */
@media (min-width: 920px) {
  .tech-col--left .tech-chip::after,
  .tech-col--right .tech-chip::before {
    background: linear-gradient(90deg, transparent 34%, var(--prov, var(--c-cyan)) 50%, transparent 66%);
    background-size: 320% 100%;
    animation: techPulse 2.4s linear infinite;
  }
  .tech-col--right .tech-chip::before { animation-name: techPulseRev; }
}
@keyframes techPulse { 0% { background-position: 320% 0; } 100% { background-position: -40% 0; } }
@keyframes techPulseRev { 0% { background-position: -40% 0; } 100% { background-position: 320% 0; } }

/* "Processing through …" state inside the core */
.tech-core__proc { display: inline-flex; align-items: center; gap: 7px; margin-top: 0.85rem; font-family: var(--mono); font-size: 0.7rem; font-weight: 600; color: var(--c-ink); background: color-mix(in srgb, var(--proc-c, var(--c-cyan)) 12%, transparent); border: 1px solid color-mix(in srgb, var(--proc-c, var(--c-cyan)) 34%, transparent); border-radius: 999px; padding: 0.3rem 0.75rem; animation: pillFade 0.35s ease both; }
.tech-core__proc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--proc-c, var(--c-cyan)); box-shadow: 0 0 7px 1px var(--proc-c, var(--c-cyan)); animation: aiPulse 1.4s ease-in-out infinite; }

/* restrained spotlight (<= 0.14) */
.spotlight-layer { background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(56, 189, 248, 0.13), transparent 70%); }

@media (prefers-reduced-motion: reduce) {
  .tech-col--left .tech-chip::after, .tech-col--right .tech-chip::before, .tech-core__proc-dot { animation: none !important; }
}

/* ============================================================
   B4 — Deployment: architecture panels
   ============================================================ */
.deploy2 { --dep: var(--c-cyan); position: relative; display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.5rem, 2.5vw, 2rem); border-radius: 22px; background: var(--c-card); border: 1px solid var(--c-border); box-shadow: var(--c-shadow); overflow: hidden; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.deploy2--cloud { --dep: #30C5E8; }
.deploy2--self { --dep: #8B5CF6; }
.deploy2::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--dep), transparent 75%); }
.deploy2:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--dep) 45%, var(--c-border)); box-shadow: var(--c-shadow), 0 22px 48px -20px color-mix(in srgb, var(--dep) 50%, transparent); }
.deploy2__badge { align-self: flex-start; font-family: var(--font); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #04121a; background: linear-gradient(135deg, #17B8C8, #30C5E8); border-radius: 999px; padding: 0.3rem 0.75rem; }
.deploy2__head { display: flex; align-items: center; gap: 0.85rem; }
.deploy2__icon { width: 48px; height: 48px; flex: none; border-radius: 14px; display: grid; place-items: center; color: var(--dep); background: color-mix(in srgb, var(--dep) 15%, transparent); border: 1px solid color-mix(in srgb, var(--dep) 30%, transparent); }
.deploy2__icon svg { width: 24px; height: 24px; }
.deploy2__title { margin: 0; font-family: var(--font); font-weight: 800; font-size: 1.3rem; color: var(--c-ink); }
.deploy2__sub { margin: 0.2rem 0 0; font-size: 0.9rem; color: var(--c-muted); }

.deploy-arch { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 1rem; border-radius: 16px; background: var(--c-card2); border: 1px solid var(--c-border); }
.darch-node { width: 100%; display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.8rem; border-radius: 10px; background: var(--c-card); border: 1px solid var(--c-border); font-family: var(--font); font-size: 0.85rem; font-weight: 600; color: var(--c-ink); opacity: 0.6; transition: opacity 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, transform 0.3s ease; }
.deploy2.is-lit .darch-node { opacity: 1; }
.darch-node.is-active { border-color: color-mix(in srgb, var(--dep) 55%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--dep) 32%, transparent), 0 8px 20px -12px color-mix(in srgb, var(--dep) 55%, transparent); }
.darch-ic { width: 28px; height: 28px; flex: none; border-radius: 8px; display: grid; place-items: center; color: var(--dep); background: color-mix(in srgb, var(--dep) 12%, transparent); }
.darch-ic svg { width: 15px; height: 15px; }
.darch-node--accent { background: color-mix(in srgb, var(--dep) 10%, var(--c-card)); border-color: color-mix(in srgb, var(--dep) 35%, transparent); }
.darch-node--accent .darch-ic { color: #fff; background: linear-gradient(135deg, var(--dep), color-mix(in srgb, var(--dep) 55%, #000)); }
.darch-arrow { color: color-mix(in srgb, var(--dep) 55%, var(--c-muted)); display: inline-flex; opacity: 0.7; }
.darch-arrow svg { width: 16px; height: 16px; }

.deploy2__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.deploy2__list li { position: relative; padding-inline-start: 1.5rem; font-size: 0.9rem; color: var(--c-ink); }
.deploy2__list li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--dep); font-weight: 700; }
.deploy2__best { margin: 0.2rem 0 0.2rem; font-size: 0.85rem; color: var(--c-muted); }
.deploy2__best strong { color: var(--c-ink); font-weight: 700; }
.deploy2 .lp-btn { margin-top: auto; align-self: stretch; }
.deploy2--cloud .lp-btn--primary { background: linear-gradient(135deg, #17B8C8, #4F72E8); color: #fff; }

@media (prefers-reduced-motion: reduce) { .deploy2 .darch-node { opacity: 1 !important; transition: none; } }

/* ============================================================
   B5 — Pricing: full comparison, Enterprise callout, mobile snap
   ============================================================ */
.price-card--popular { animation: priceBreathe 3.8s ease-in-out infinite; } /* breathing, no rotation */
.price-compare-wrap { text-align: center; margin-top: 1.5rem; }
.price-compare-btn { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font); font-weight: 700; font-size: 0.85rem; color: var(--c-cyan); background: var(--c-card); border: 1px solid var(--c-border); border-radius: 999px; padding: 0.5rem 1.1rem; cursor: pointer; transition: border-color 0.18s ease, color 0.18s ease; }
.price-compare-btn:hover { border-color: color-mix(in srgb, var(--c-cyan) 45%, transparent); }
.price-compare-btn svg { width: 16px; height: 16px; transition: transform 0.25s ease; }
.price-compare-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.price-compare { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; margin: 0 auto; max-width: 900px; }
.price-compare.is-open { max-height: 760px; margin-top: 1rem; }
.price-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; background: var(--c-card); border: 1px solid var(--c-border); border-radius: 14px; overflow: hidden; }
.price-table th, .price-table td { padding: 0.7rem 0.9rem; text-align: center; border-bottom: 1px solid var(--c-border); color: var(--c-ink); }
.price-table thead th { font-family: var(--font); font-weight: 800; background: var(--c-card2); }
.price-table th:first-child, .price-table td:first-child { text-align: start; color: var(--c-muted); font-weight: 600; }
.price-table .pt-pop { color: var(--c-cyan); background: color-mix(in srgb, var(--c-cyan) 8%, transparent); font-weight: 700; }
.price-table .pt-no { color: var(--c-muted); }
.price-table tr:last-child td { border-bottom: none; }
.price-ent { margin-top: 1.75rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; padding: 1.25rem 1.5rem; border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--c-purple) 10%, var(--c-card)), var(--c-card)); border: 1px solid color-mix(in srgb, var(--c-purple) 25%, var(--c-border)); }
.price-ent__text { margin: 0; font-family: var(--font); font-weight: 700; font-size: 1rem; color: var(--c-ink); text-align: center; }
@media (max-width: 720px) {
  .price-grid { grid-auto-flow: column; grid-auto-columns: 80%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0.85rem; padding-bottom: 0.6rem; -webkit-overflow-scrolling: touch; }
  .price-card { scroll-snap-align: center; }
  .price-table { font-size: 0.7rem; }
  .price-table th, .price-table td { padding: 0.45rem 0.35rem; }
}
@media (prefers-reduced-motion: reduce) { .price-compare { transition: none; } .price-card--popular { animation: none; } }

/* ============================================================
   B6 — Business value: outcome cards + demo-data label
   ============================================================ */
.ba-outcomes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
@media (min-width: 720px) { .ba-outcomes { grid-template-columns: repeat(5, 1fr); } }
.ba-out { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; padding: 1rem 0.8rem; border-radius: 14px; background: var(--c-card); border: 1px solid var(--c-border); box-shadow: var(--c-shadow); transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; }
.ba-out:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c-cyan) 40%, var(--c-border)); box-shadow: var(--c-shadow), 0 14px 30px -16px color-mix(in srgb, var(--c-cyan) 50%, transparent); }
.ba-out__ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; }
.ba-out__ic svg { width: 20px; height: 20px; }
.ba-out__ic--teal { color: var(--c-teal); background: color-mix(in srgb, var(--c-teal) 15%, transparent); }
.ba-out__ic--cyan { color: var(--c-cyan); background: color-mix(in srgb, var(--c-cyan) 15%, transparent); }
.ba-out__ic--purple { color: var(--c-purple); background: color-mix(in srgb, var(--c-purple) 15%, transparent); }
.ba-out__t { font-family: var(--font); font-weight: 700; font-size: 0.85rem; color: var(--c-ink); line-height: 1.3; }
.ba-grid { margin-top: clamp(1.25rem, 2vw, 1.5rem); }
.ba-dash-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: 0.5rem; }
.ba-dash-title { font-family: var(--font); font-weight: 800; font-size: 1.05rem; color: var(--c-ink); }
.ba-demo-tag { flex: none; font-family: var(--mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-muted); background: var(--c-card2); border: 1px solid var(--c-border); border-radius: 999px; padding: 0.22rem 0.6rem; }

/* ============================================================
   B7 — Conversational FAQ
   ============================================================ */
/* ---- FAQ redesign: single premium canvas ---- */
.faq3-canvas { position: relative; max-width: 1220px; margin: 0 auto; border-radius: 28px; border: 1px solid var(--c-border); padding: clamp(1.25rem, 3vw, 2.4rem); overflow: hidden; background: linear-gradient(158deg, color-mix(in srgb, var(--c-cyan) 7%, var(--c-card)) 0%, color-mix(in srgb, #5B72E8 13%, var(--c-card)) 100%); box-shadow: var(--c-shadow), 0 40px 90px -55px color-mix(in srgb, #5B72E8 70%, transparent); }
.faq3-canvas__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 46% 60% at 72% 42%, color-mix(in srgb, var(--c-cyan) 24%, transparent), transparent 72%); }
[dir="rtl"] .faq3-canvas__glow { background: radial-gradient(ellipse 46% 60% at 28% 42%, color-mix(in srgb, var(--c-cyan) 24%, transparent), transparent 72%); }
.faq3-canvas__grid { position: absolute; inset: 0; pointer-events: none; opacity: 0.6; background-image: linear-gradient(color-mix(in srgb, var(--c-ink) 6%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--c-ink) 6%, transparent) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse 85% 80% at 50% 0%, #000 25%, transparent 78%); mask-image: radial-gradient(ellipse 85% 80% at 50% 0%, #000 25%, transparent 78%); }
.faq3-layout { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: clamp(1.25rem, 2.5vw, 2rem); align-items: stretch; }
@media (min-width: 900px) { .faq3-layout { grid-template-columns: 40% 1fr; } }

.faq3-side { display: flex; flex-direction: column; min-width: 0; }
.faq3-main, .faq3-chat.demo-widget, .faq3-chat .chat-demo__scroll, #faqMessages { min-width: 0; }

/* Nested category accordion — questions live directly under their category */
.faq3-acc { display: flex; flex-direction: column; gap: 0.55rem; }
.faq3-acc-item { border: 1px solid var(--c-border); border-radius: 15px; background: color-mix(in srgb, var(--c-card) 66%, transparent); overflow: hidden; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; }
.faq3-acc-item.is-open { border-color: color-mix(in srgb, var(--c-cyan) 45%, var(--c-border)); box-shadow: 0 16px 34px -20px color-mix(in srgb, var(--c-cyan) 55%, transparent); }
.faq3-acc-head { width: 100%; display: flex; align-items: center; gap: 0.65rem; padding: 0.78rem 0.95rem; background: transparent; border: none; cursor: pointer; font-family: var(--font); font-weight: 700; font-size: 0.95rem; color: var(--c-ink); text-align: start; transition: background 0.2s ease; }
.faq3-acc-head__ic { display: inline-flex; color: var(--c-cyan); }
.faq3-acc-head__ic svg { width: 18px; height: 18px; }
.faq3-acc-head__t { flex: 1 1 auto; min-width: 0; }
.faq3-acc-chev { width: 16px; height: 16px; flex: none; color: var(--c-muted); transition: transform 0.28s ease; }
.faq3-acc-item.is-open .faq3-acc-head { background: linear-gradient(135deg, color-mix(in srgb, var(--c-teal) 18%, transparent), color-mix(in srgb, var(--c-cyan) 18%, transparent)); }
.faq3-acc-item.is-open .faq3-acc-chev { transform: rotate(180deg); color: var(--c-cyan); }
.faq3-acc-panel { max-height: 0; overflow: hidden; transition: max-height 0.32s ease; background: color-mix(in srgb, var(--c-cyan) 7%, transparent); }
.faq3-acc-item.is-open .faq3-acc-panel { max-height: 460px; }
.faq3-acc-qs { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.55rem 0.7rem 0.75rem; margin-inline-start: 1rem; border-inline-start: 2px solid color-mix(in srgb, var(--c-cyan) 30%, var(--c-border)); }
.faq3-acc-q { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.5rem 0.65rem; border-radius: 10px; border: 1px solid transparent; background: transparent; cursor: pointer; font-family: var(--font); font-weight: 600; font-size: 0.85rem; color: var(--c-ink); text-align: start; transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease; }
.faq3-acc-q__ic { width: 14px; height: 14px; flex: none; color: var(--c-cyan); }
.faq3-acc-q:hover { background: color-mix(in srgb, var(--c-card) 62%, transparent); transform: translateX(0); }
[dir="ltr"] .faq3-acc-q:hover { transform: translateX(2px); }
[dir="rtl"] .faq3-acc-q:hover { transform: translateX(-2px); }
.faq3-acc-q.is-active { background: color-mix(in srgb, var(--c-cyan) 14%, var(--c-card)); border-color: color-mix(in srgb, var(--c-cyan) 42%, transparent); }
.faq3-cats { display: flex; flex-direction: column; gap: 0.5rem; }
.faq3-cat { display: flex; align-items: center; gap: 0.65rem; width: 100%; text-align: start; font-family: var(--font); font-size: 0.92rem; font-weight: 600; color: var(--c-ink); background: color-mix(in srgb, var(--c-card) 68%, transparent); border: 1px solid var(--c-border); border-radius: 14px; padding: 0.7rem 0.9rem; cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: transform 0.16s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease; }
.faq3-cat__ic { display: inline-flex; color: var(--c-cyan); }
.faq3-cat__ic svg { width: 18px; height: 18px; }
.faq3-cat:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--c-cyan) 45%, var(--c-border)); }
.faq3-cat.is-active { color: #fff; background: linear-gradient(135deg, var(--c-teal), var(--c-cyan)); border-color: transparent; box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--c-cyan) 65%, transparent); }
.faq3-cat.is-active .faq3-cat__ic { color: #fff; }

.faq3-qs { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.9rem; }
.faq3-q { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; text-align: start; font-family: var(--font); font-size: 0.88rem; font-weight: 600; color: var(--c-ink); background: color-mix(in srgb, var(--c-card) 52%, transparent); border: 1px solid var(--c-border); border-radius: 12px; padding: 0.62rem 0.8rem; cursor: pointer; transition: transform 0.16s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease; }
.faq3-q::after { content: "\203A"; color: var(--c-cyan); font-weight: 800; }
[dir="rtl"] .faq3-q::after { content: "\2039"; }
.faq3-q:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--c-cyan) 45%, var(--c-border)); }
.faq3-q.is-active { border-color: var(--c-cyan); background: color-mix(in srgb, var(--c-cyan) 12%, var(--c-card)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-cyan) 35%, transparent); }

.faq3-viewall { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 1.1rem; align-self: flex-start; font-family: var(--font); font-weight: 700; font-size: 0.82rem; color: var(--c-muted); background: transparent; border: 1px dashed color-mix(in srgb, var(--c-cyan) 40%, var(--c-border)); border-radius: 999px; padding: 0.5rem 1rem; cursor: pointer; transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease; }
.faq3-viewall svg { width: 15px; height: 15px; }
.faq3-viewall:hover { color: var(--c-ink); background: color-mix(in srgb, var(--c-cyan) 8%, transparent); border-color: color-mix(in srgb, var(--c-cyan) 60%, var(--c-border)); }

.faq3-main { display: flex; }
.faq3-chat.demo-widget { width: 100%; max-width: none; min-height: clamp(500px, 58vh, 560px); display: flex; flex-direction: column; }
.faq3-chat .chat-demo__scroll { flex: 1 1 auto; }
.faq3-afteractions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.15rem 0 0.2rem; align-self: flex-start; }
.faq3-action { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font); font-size: 0.78rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--c-teal), var(--c-cyan)); border: none; border-radius: 999px; padding: 0.42rem 0.85rem; cursor: pointer; animation: pillFade 0.4s ease both; box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--c-cyan) 70%, transparent); }
.faq3-action svg { width: 14px; height: 14px; }
[dir="rtl"] .faq3-action svg { transform: scaleX(-1); }
.faq3-follow { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font); font-size: 0.76rem; font-weight: 600; color: var(--c-cyan); background: color-mix(in srgb, var(--c-cyan) 10%, transparent); border: 1px solid color-mix(in srgb, var(--c-cyan) 30%, transparent); border-radius: 999px; padding: 0.4rem 0.8rem; cursor: pointer; animation: pillFade 0.4s 0.05s ease both; }
.faq3-follow svg { width: 13px; height: 13px; }

.faq3-cta { max-width: 1220px; margin: 1.25rem auto 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.4rem; border-radius: 18px; background: var(--c-card); border: 1px solid var(--c-border); box-shadow: var(--c-shadow); }
.faq3-cta__t { font-family: var(--font); font-weight: 700; font-size: 1rem; color: var(--c-ink); }
.faq3-cta__btns { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.faq3-cta__btns .lp-btn { padding: 0.6rem 1.15rem; font-size: 0.88rem; }

/* ---- View-all drawer ---- */
.faq3-drawer { position: fixed; inset: 0; z-index: 99998; opacity: 0; transition: opacity 0.3s ease; }
.faq3-drawer[hidden] { display: none; }
.faq3-drawer.is-open { opacity: 1; }
.faq3-drawer__overlay { position: absolute; inset: 0; background: rgba(6, 10, 20, 0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.faq3-drawer__panel { position: absolute; top: 0; inset-inline-end: 0; height: 100%; width: min(460px, 92vw); background: var(--c-card); border-inline-start: 1px solid var(--c-border); box-shadow: -30px 0 80px -40px rgba(0, 0, 0, 0.6); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1); }
[dir="rtl"] .faq3-drawer__panel { transform: translateX(-100%); }
.faq3-drawer.is-open .faq3-drawer__panel { transform: none; }
.faq3-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--c-border); }
.faq3-drawer__title { margin: 0; font-family: var(--font); font-weight: 800; font-size: 1.15rem; color: var(--c-ink); }
.faq3-drawer__x { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--c-border); background: transparent; color: var(--c-muted); border-radius: 10px; cursor: pointer; }
.faq3-drawer__x svg { width: 17px; height: 17px; }
.faq3-drawer__x:hover { color: var(--c-ink); }
.faq3-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: 1rem 1.3rem 2rem; }
.faq3-dgroup { margin-bottom: 1.2rem; }
.faq3-dgroup__t { margin: 0 0 0.5rem; font-family: var(--font); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--c-cyan); }
.faq3-ditem { border: 1px solid var(--c-border); border-radius: 12px; margin-bottom: 0.5rem; overflow: hidden; background: color-mix(in srgb, var(--c-card) 60%, transparent); }
.faq3-ditem__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; text-align: start; font-family: var(--font); font-weight: 600; font-size: 0.9rem; color: var(--c-ink); background: transparent; border: none; padding: 0.75rem 0.9rem; cursor: pointer; }
.faq3-ditem__q svg { width: 16px; height: 16px; flex: none; color: var(--c-muted); transition: transform 0.25s ease; }
.faq3-ditem.is-open .faq3-ditem__q svg { transform: rotate(180deg); }
.faq3-ditem__a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq3-ditem.is-open .faq3-ditem__a { max-height: 340px; }
.faq3-ditem__a p { margin: 0; padding: 0 0.9rem 0.85rem; font-size: 0.86rem; line-height: 1.6; color: var(--c-muted); }
body.faq-drawer-open { overflow: hidden; }
/* while an overlay is open, hide the closed off-canvas mobile nav so it can't extend horizontal scroll */
body.faq-drawer-open .landing-nav-links:not(.is-open), body.cmodal-open .landing-nav-links:not(.is-open) { display: none; }

@media (max-width: 640px) {
  .faq3-cats { flex-direction: row; overflow-x: auto; gap: 0.5rem; padding-bottom: 0.35rem; scrollbar-width: none; }
  .faq3-cats::-webkit-scrollbar { display: none; }
  .faq3-cat { width: auto; flex: 0 0 auto; white-space: nowrap; }
  .faq3-chat.demo-widget { min-height: 62vh; }
  .faq3-drawer__panel { inset-inline: 0; top: auto; bottom: 0; height: min(85vh, 640px); width: 100%; border-radius: 20px 20px 0 0; border-inline-start: none; border-top: 1px solid var(--c-border); transform: translateY(100%); }
  [dir="rtl"] .faq3-drawer__panel { transform: translateY(100%); }
  .faq3-drawer.is-open .faq3-drawer__panel { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .faq3-drawer, .faq3-drawer__panel { transition: none; }
  .faq3-action, .faq3-follow { animation: none; }
}
/* hide floating widget launcher while the FAQ assistant is in view */
body.faq-open .sitechat-toggle, body.faq-open #sitechat-toggle, body.faq-open .sitechat-launcher, body.faq-open #sitechat-widget-button { opacity: 0 !important; pointer-events: none !important; transform: scale(0.85) !important; transition: opacity 0.3s ease, transform 0.3s ease; }

/* ============================================================
   B8 — Final CTA product-state cards + stronger glow, Contact modal
   ============================================================ */

/* ---- Final CTA: extra glow + floating product-state cards ---- */
.final-cta__glow--2 { background: radial-gradient(ellipse 50% 70% at 82% 108%, color-mix(in srgb, var(--c-indigo, #5B72E8) 26%, transparent), transparent 70%); mix-blend-mode: normal; }
.final-cta { box-shadow: var(--c-shadow), 0 0 90px -30px color-mix(in srgb, var(--c-cyan) 55%, transparent); }
.final-cta__cards { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.fcta-card { position: absolute; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.8rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; color: var(--c-ink); background: color-mix(in srgb, var(--c-card) 78%, transparent); border: 1px solid var(--c-border); box-shadow: 0 12px 30px -18px rgba(0,0,0,0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fctaFloat 7s ease-in-out infinite; }
.fcta-card__dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px color-mix(in srgb, #22c55e 25%, transparent); }
.fcta-card__dot--cyan { background: var(--c-cyan); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-cyan) 25%, transparent); }
.fcta-card__dot--indigo { background: var(--c-indigo, #5B72E8); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-indigo, #5B72E8) 25%, transparent); }
.fcta-card--1 { top: 12%; left: 4%; animation-delay: 0s; }
.fcta-card--2 { top: 22%; right: 5%; animation-delay: 1.4s; }
.fcta-card--3 { bottom: 14%; left: 7%; animation-delay: 2.6s; }
[dir="rtl"] .fcta-card--1 { left: auto; right: 4%; }
[dir="rtl"] .fcta-card--2 { right: auto; left: 5%; }
[dir="rtl"] .fcta-card--3 { left: auto; right: 7%; }
@keyframes fctaFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (max-width: 860px) { .final-cta__cards { display: none; } }

/* ---- Contact modal ---- */
.cmodal {
  --m-bg: #0f1626; --m-ink: #f1f5f9; --m-muted: #94a6bf; --m-border: rgba(255,255,255,0.11);
  --m-field: rgba(255,255,255,0.04); --m-field-bd: rgba(255,255,255,0.15); --m-overlay: rgba(6,10,20,0.74);
  --m-teal: #0F9FA8; --m-cyan: #18B6C9; --m-indigo: #5B72E8; --m-danger: #f87171;
  position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center;
  padding: clamp(0.75rem, 3vw, 2rem); opacity: 0; transition: opacity 0.28s ease;
}
body[data-hero-theme="light"] .cmodal {
  --m-bg: #ffffff; --m-ink: #0f172a; --m-muted: #52627a; --m-border: rgba(15,23,42,0.1);
  --m-field: #f5f8fb; --m-field-bd: rgba(15,23,42,0.15); --m-overlay: rgba(15,23,42,0.42); --m-danger: #dc2626;
}
.cmodal[hidden] { display: none; }
.cmodal.is-open { opacity: 1; }
.cmodal__overlay { position: absolute; inset: 0; background: var(--m-overlay); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.cmodal__dialog {
  position: relative; width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto;
  background: var(--m-bg); color: var(--m-ink); border: 1px solid var(--m-border); border-radius: 22px;
  box-shadow: 0 40px 100px -30px rgba(0,0,0,0.7), 0 0 0 1px var(--m-border);
  padding: clamp(1.5rem, 3.5vw, 2.4rem); transform: translateY(16px) scale(0.985); transition: transform 0.3s cubic-bezier(0.22,1,0.36,1);
}
.cmodal.is-open .cmodal__dialog { transform: none; }
.cmodal__x { position: absolute; top: 0.9rem; inset-inline-end: 0.9rem; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--m-border); background: var(--m-field); color: var(--m-muted); border-radius: 10px; cursor: pointer; transition: color 0.2s, background 0.2s; }
.cmodal__x svg { width: 18px; height: 18px; }
.cmodal__x:hover { color: var(--m-ink); background: color-mix(in srgb, var(--m-cyan) 16%, var(--m-field)); }
.cmodal__head { margin-bottom: 1.3rem; }
.cmodal__badge { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; padding: 0.3rem 0.7rem; border-radius: 999px; color: var(--m-cyan); background: color-mix(in srgb, var(--m-cyan) 14%, transparent); border: 1px solid color-mix(in srgb, var(--m-cyan) 30%, transparent); }
.cmodal__title { margin: 0.7rem 0 0; font-family: var(--font); font-weight: 800; letter-spacing: -0.015em; font-size: clamp(1.4rem, 2.6vw, 1.85rem); }
.cmodal__sub { margin: 0.45rem 0 0; color: var(--m-muted); font-size: 0.98rem; line-height: 1.55; }
.cmodal__form { display: flex; flex-direction: column; gap: 0.95rem; }
.cmodal__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.95rem; }
.cmodal__field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.cmodal__label { font-size: 0.85rem; font-weight: 600; color: var(--m-ink); }
.cmodal__form input, .cmodal__form select, .cmodal__form textarea {
  width: 100%; box-sizing: border-box; padding: 0.7rem 0.85rem; border-radius: 12px; border: 1px solid var(--m-field-bd);
  background: var(--m-field); color: var(--m-ink); font-family: var(--font-body, inherit); font-size: 0.95rem; line-height: 1.4;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.cmodal__form textarea { resize: vertical; min-height: 84px; }
.cmodal__form input::placeholder, .cmodal__form textarea::placeholder { color: color-mix(in srgb, var(--m-muted) 80%, transparent); }
.cmodal__form input:focus, .cmodal__form select:focus, .cmodal__form textarea:focus { outline: none; border-color: var(--m-cyan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--m-cyan) 24%, transparent); }
.cmodal__select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a6bf' stroke-width='2.2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-inline-end: 2.2rem; }
[dir="rtl"] .cmodal__select { background-position: left 0.75rem center; }
.cmodal__form .is-invalid { border-color: var(--m-danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--m-danger) 20%, transparent); }
.cmodal__err { color: var(--m-danger); font-size: 0.8rem; font-weight: 600; }
.cmodal__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 0.4rem; }
.cmodal__actions .lp-btn { flex: 1 1 auto; justify-content: center; }
.cmodal__note { margin: 0.2rem 0 0; font-size: 0.8rem; color: var(--m-muted); text-align: center; }
.cmodal__done { text-align: center; padding: 1.5rem 0.5rem 0.5rem; }
.cmodal__done-ic { display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--m-teal), var(--m-cyan), var(--m-indigo)); box-shadow: 0 14px 34px -12px color-mix(in srgb, var(--m-cyan) 70%, transparent); }
.cmodal__done-ic svg { width: 30px; height: 30px; }
.cmodal__done-title { margin: 1rem 0 0; font-family: var(--font); font-weight: 800; font-size: 1.3rem; color: var(--m-ink); }
.cmodal__done-text { margin: 0.55rem auto 1.4rem; max-width: 42ch; color: var(--m-muted); font-size: 0.95rem; line-height: 1.6; }
body.cmodal-open { overflow: hidden; }

/* mobile bottom-sheet */
@media (max-width: 560px) {
  .cmodal { align-items: flex-end; padding: 0; }
  .cmodal__dialog { max-width: none; max-height: 94vh; border-radius: 22px 22px 0 0; transform: translateY(100%); }
  .cmodal.is-open .cmodal__dialog { transform: none; }
  .cmodal__row { grid-template-columns: 1fr; }
  .cmodal__actions { flex-direction: column-reverse; }
}
@media (prefers-reduced-motion: reduce) {
  .cmodal, .cmodal__dialog { transition: none; }
  .cmodal__dialog { transform: none; }
  .fcta-card { animation: none; }
}

/* B8 — modal buttons need brand colors in scope (outside .lp-sec token system) */
.cmodal .lp-btn--primary { color: #ffffff; background: linear-gradient(135deg, var(--m-teal), var(--m-cyan)); box-shadow: 0 12px 30px -12px color-mix(in srgb, var(--m-cyan) 60%, transparent); }
.cmodal .lp-btn--primary:hover { box-shadow: 0 16px 38px -12px color-mix(in srgb, var(--m-cyan) 72%, transparent); }
.cmodal .lp-btn--primary:disabled { opacity: 0.7; cursor: default; }
.cmodal .lp-btn--ghost { color: var(--m-ink); background: transparent; border: 1px solid var(--m-field-bd); }
.cmodal .lp-btn--ghost:hover { background: color-mix(in srgb, var(--m-cyan) 12%, transparent); border-color: color-mix(in srgb, var(--m-cyan) 45%, var(--m-field-bd)); }

/* ============================================================
   Pricing redesign — compact Trial + 2×2 collapsible plan grid
   ============================================================ */
.price2-trial { max-width: 920px; margin: 0 auto 1.15rem; display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; padding: 1rem 1.35rem; border-radius: 16px; border: 1px solid var(--c-border); background: linear-gradient(120deg, color-mix(in srgb, var(--c-teal) 9%, var(--c-card)), color-mix(in srgb, var(--c-cyan) 9%, var(--c-card))); box-shadow: var(--c-shadow); }
.price2-trial__mark { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--c-teal), var(--c-cyan)); flex: none; box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--c-cyan) 65%, transparent); }
.price2-trial__mark svg { width: 20px; height: 20px; }
.price2-trial__info { display: flex; flex-direction: column; gap: 0.15rem; min-width: 190px; flex: 1 1 auto; }
.price2-trial__name { font-family: var(--font); font-weight: 800; font-size: 1.05rem; color: var(--c-ink); }
.price2-trial__desc { font-size: 0.85rem; color: var(--c-muted); line-height: 1.5; }
.price2-trial__limits { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.price2-trial__limits li { font-size: 0.78rem; font-weight: 600; color: color-mix(in srgb, var(--c-cyan) 82%, var(--c-ink)); background: color-mix(in srgb, var(--c-cyan) 10%, transparent); border: 1px solid color-mix(in srgb, var(--c-cyan) 25%, transparent); border-radius: 999px; padding: 0.3rem 0.7rem; }
.price2-trial__cta { flex: none; }

.price2-grid { max-width: 920px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; align-items: start; }
.price2-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--c-border); border-radius: 20px; background: var(--c-card); box-shadow: var(--c-shadow); padding: 1.6rem 1.5rem 1.4rem; overflow: visible; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.price2-card:hover { transform: translateY(-4px); box-shadow: 0 26px 52px -28px color-mix(in srgb, var(--accent) 50%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, var(--c-border)); }
.price2-card__accent { position: absolute; top: 0; inset-inline: 0; height: 4px; border-radius: 20px 20px 0 0; background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.price2-card--popular { border-color: color-mix(in srgb, var(--accent) 55%, var(--c-border)); box-shadow: 0 24px 50px -24px color-mix(in srgb, var(--accent2) 55%, transparent); }
.price2-card__pop { position: absolute; top: 0; inset-inline-end: 1.1rem; transform: translateY(-50%); background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; font-family: var(--font); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; padding: 0.28rem 0.75rem; border-radius: 999px; box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--accent2) 70%, transparent); }
.price2-card__top { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.4rem; }
.price2-card__mark { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--accent) 60%, transparent); flex: none; }
.price2-card__mark svg { width: 21px; height: 21px; }
.price2-card__id { min-width: 0; }
.price2-card__name { margin: 0; font-family: var(--font); font-weight: 800; font-size: 1.3rem; color: var(--c-ink); }
.price2-card__aud { margin: 0.12rem 0 0; font-size: 0.82rem; color: var(--c-muted); line-height: 1.4; }
.price2-card__price { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; margin-top: 1.1rem; }
.price2-card__amt { font-family: var(--font); font-weight: 800; font-size: 2rem; letter-spacing: -0.02em; color: var(--c-ink); }
.price2-card__per { font-size: 0.85rem; color: var(--c-muted); }
.price2-card__annual { width: 100%; height: 0; visibility: hidden; font-size: 0.78rem; font-weight: 600; color: color-mix(in srgb, var(--accent) 75%, var(--c-muted)); }
.price2-grid.is-annual .price2-card__annual { height: auto; visibility: visible; margin-top: 0.15rem; }
.price2-card__key { list-style: none; margin: 1.15rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.price2-card__key li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: 0.86rem; color: var(--c-muted); padding-bottom: 0.5rem; border-bottom: 1px solid color-mix(in srgb, var(--c-border) 70%, transparent); }
.price2-card__key li:last-child { border-bottom: none; padding-bottom: 0; }
.price2-card__key b { color: var(--c-ink); font-weight: 700; }
.price2-card__cta { width: 100%; justify-content: center; margin-top: 1.2rem; }
.price2-card .lp-btn--ghost.price2-card__cta { border-color: color-mix(in srgb, var(--accent) 40%, var(--c-border)); color: color-mix(in srgb, var(--accent) 85%, var(--c-ink)); }
.price2-card .lp-btn--ghost.price2-card__cta:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: var(--accent); }
.price2-card--popular .lp-btn--primary.price2-card__cta { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; }
.price2-card__expand { display: flex; align-items: center; justify-content: center; gap: 0.4rem; width: 100%; margin-top: 0.7rem; padding: 0.5rem; background: transparent; border: none; cursor: pointer; font-family: var(--font); font-weight: 700; font-size: 0.82rem; color: color-mix(in srgb, var(--accent) 82%, var(--c-ink)); }
.price2-card__expand svg { width: 15px; height: 15px; transition: transform 0.28s ease; }
.price2-card.is-expanded .price2-card__expand svg { transform: rotate(180deg); }
.price2-card__details { max-height: 0; overflow: hidden; transition: max-height 0.34s ease; }
.price2-card.is-expanded .price2-card__details { max-height: 460px; }
.price2-card__details-in { margin-top: 0.5rem; padding: 0.9rem 1rem; border-radius: 14px; background: color-mix(in srgb, var(--accent) 9%, var(--c-card)); border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--c-border)); }
.price2-detail { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.price2-detail li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: 0.84rem; color: var(--c-muted); }
.price2-detail b { color: var(--c-ink); font-weight: 700; }
.price2-detail .px-no { color: var(--c-muted); font-weight: 600; }

@media (max-width: 760px) {
  .price2-grid { grid-template-columns: 1fr; max-width: 460px; }
  .price2-trial { max-width: 460px; flex-direction: column; align-items: stretch; }
  .price2-trial__info { min-width: 0; }
  .price2-trial__cta { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .price2-card, .price2-card:hover { transform: none; }
  .price2-card__details, .price2-card__expand svg { transition: none; }
}

/* ============================================================
   Pricing rebuild — segmented switch + Trial + selector cards + shared panel
   ============================================================ */
/* Billing switch */
.pr3-billing { display: flex; justify-content: center; margin-bottom: 1.5rem; }
.pr3-switch { position: relative; display: inline-flex; background: color-mix(in srgb, var(--c-ink) 6%, var(--c-card)); border: 1px solid var(--c-border); border-radius: 999px; padding: 4px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.06); }
.pr3-switch__ind { position: absolute; top: 4px; bottom: 4px; left: 4px; width: 0; border-radius: 999px; background: linear-gradient(135deg, var(--c-teal), var(--c-cyan)); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--c-cyan) 70%, transparent); transition: left 0.28s cubic-bezier(0.22,1,0.36,1), width 0.28s cubic-bezier(0.22,1,0.36,1); z-index: 0; }
.pr3-switch__btn { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 0.45rem; border: none; background: transparent; cursor: pointer; font-family: var(--font); font-weight: 700; font-size: 0.85rem; color: var(--c-muted); padding: 0.55rem 1.15rem; border-radius: 999px; white-space: nowrap; transition: color 0.2s ease; }
.pr3-switch__btn.is-active { color: #fff; }
.pr3-switch__save { font-size: 0.68rem; font-weight: 700; padding: 0.12rem 0.42rem; border-radius: 999px; background: color-mix(in srgb, var(--c-cyan) 16%, transparent); color: color-mix(in srgb, var(--c-cyan) 92%, var(--c-ink)); transition: background 0.2s ease, color 0.2s ease; }
.pr3-switch__btn.is-active .pr3-switch__save { background: rgba(255,255,255,0.24); color: #fff; }

/* Trial banner */
.pr3-trial { max-width: 1080px; margin: 0 auto 1.15rem; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; padding: 0.9rem 1.35rem; border-radius: 15px; border: 1px solid color-mix(in srgb, var(--c-cyan) 24%, var(--c-border)); background: linear-gradient(120deg, color-mix(in srgb, var(--c-teal) 8%, var(--c-card)), color-mix(in srgb, var(--c-cyan) 10%, var(--c-card))); }
.pr3-trial__lead { display: flex; align-items: center; gap: 0.75rem; flex: 1 1 auto; min-width: 230px; }
.pr3-trial__badge { flex: none; font-family: var(--font); font-weight: 800; font-size: 0.8rem; color: #fff; background: linear-gradient(135deg, var(--c-teal), var(--c-cyan)); padding: 0.32rem 0.62rem; border-radius: 8px; box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--c-cyan) 70%, transparent); }
.pr3-trial__desc { margin: 0; font-size: 0.85rem; color: var(--c-muted); line-height: 1.45; }
.pr3-trial__chips { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.45rem; flex-wrap: wrap; }
.pr3-trial__chips li { font-size: 0.76rem; font-weight: 600; color: color-mix(in srgb, var(--c-cyan) 80%, var(--c-ink)); background: color-mix(in srgb, var(--c-cyan) 10%, transparent); border: 1px solid color-mix(in srgb, var(--c-cyan) 24%, transparent); border-radius: 999px; padding: 0.28rem 0.68rem; }
.pr3-trial__cta { flex: none; }

/* Selector cards */
.pr3-cards { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; align-items: stretch; }
.pr3-card { position: relative; display: flex; flex-direction: column; text-align: start; min-height: 300px; background: var(--c-card); border: 1.5px solid var(--c-border); border-radius: 18px; padding: 0 1.25rem 1.15rem; cursor: pointer; overflow: hidden; box-shadow: var(--c-shadow); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; font-family: inherit; }
.pr3-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 42%, var(--c-border)); }
.pr3-card.is-selected { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 22px 48px -22px color-mix(in srgb, var(--accent) 60%, transparent); }
.pr3-card__head { position: relative; display: flex; align-items: center; gap: 0.55rem; margin: 0 -1.25rem 0.9rem; padding: 1.1rem 1.25rem 0.75rem; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, transparent), color-mix(in srgb, var(--accent2) 7%, transparent)); border-bottom: 1px solid color-mix(in srgb, var(--accent) 14%, var(--c-border)); }
.pr3-card.is-selected .pr3-card__head { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent2) 16%, transparent)); }
.pr3-card__ic { flex: none; width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent2)); }
.pr3-card__ic svg { width: 18px; height: 18px; }
.pr3-card__name { font-family: var(--font); font-weight: 800; font-size: 1.1rem; color: var(--c-ink); }
.pr3-card__badge { position: absolute; top: 0.6rem; inset-inline-end: 0.9rem; font-family: var(--font); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent2)); padding: 0.2rem 0.5rem; border-radius: 999px; }
.pr3-card__best { margin: 0 0 0.9rem; font-size: 0.8rem; line-height: 1.45; color: var(--c-muted); min-height: 2.3em; }
.pr3-card__price { display: flex; align-items: baseline; gap: 0.3rem; margin-bottom: 0.85rem; }
.pr3-card__amt { font-family: var(--font); font-weight: 800; font-size: 1.6rem; letter-spacing: -0.02em; color: var(--c-ink); }
.pr3-card__per { font-size: 0.78rem; color: var(--c-muted); }
.pr3-card__key { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.38rem; }
.pr3-card__key li { display: flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; color: var(--c-muted); }
.pr3-card__key li::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.pr3-card__select { margin-top: auto; display: block; text-align: center; font-family: var(--font); font-weight: 700; font-size: 0.85rem; padding: 0.58rem; border-radius: 11px; color: color-mix(in srgb, var(--accent) 88%, var(--c-ink)); border: 1.5px solid color-mix(in srgb, var(--accent) 34%, var(--c-border)); transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease; }
.pr3-card:hover .pr3-card__select { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.pr3-card.is-selected .pr3-card__select { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; border-color: transparent; box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--accent) 60%, transparent); }
.pr3-card__view { display: block; text-align: center; margin-top: 0.5rem; font-size: 0.74rem; font-weight: 600; color: var(--c-muted); text-decoration: underline; text-underline-offset: 2px; }

/* Shared details panel */
.pr3-panel { position: relative; max-width: 1080px; margin: 1.3rem auto 0; border: 1px solid var(--c-border); border-radius: 20px; background: var(--c-card); box-shadow: var(--c-shadow); overflow: hidden; }
.pr3-panel::before { content: ""; position: absolute; top: 0; inset-inline: 0; height: 4px; background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.pr3-panel__head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1.4rem 1.6rem; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 11%, var(--c-card)), color-mix(in srgb, var(--accent2) 8%, var(--c-card))); border-bottom: 1px solid color-mix(in srgb, var(--accent) 15%, var(--c-border)); }
.pr3-panel__ic { flex: none; width: 46px; height: 46px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--accent) 60%, transparent); }
.pr3-panel__ic svg { width: 23px; height: 23px; }
.pr3-panel__id { flex: 1 1 auto; min-width: 190px; }
.pr3-panel__name { margin: 0; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; font-family: var(--font); font-weight: 800; font-size: 1.4rem; color: var(--c-ink); }
.pr3-panel__pop { font-family: var(--font); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent2)); padding: 0.22rem 0.55rem; border-radius: 999px; }
.pr3-panel__best { margin: 0.25rem 0 0; font-size: 0.9rem; color: var(--c-muted); line-height: 1.5; }
.pr3-panel__price { display: flex; align-items: baseline; gap: 0.35rem; flex-wrap: wrap; }
.pr3-panel__amt { font-family: var(--font); font-weight: 800; font-size: 1.95rem; letter-spacing: -0.02em; color: var(--c-ink); }
.pr3-panel__per { font-size: 0.85rem; color: var(--c-muted); }
.pr3-panel__annual { width: 100%; font-size: 0.76rem; font-weight: 600; color: color-mix(in srgb, var(--accent) 72%, var(--c-muted)); }
.pr3-panel__cta { flex: none; }
.pr3-panel .pr3-panel__cta.lp-btn--primary { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--accent) 60%, transparent); }
.pr3-panel__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; padding: 1.6rem; animation: pr3Fade 0.3s ease; }
.pr3-panel__col h4 { margin: 0 0 0.85rem; font-family: var(--font); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; color: color-mix(in srgb, var(--accent) 80%, var(--c-ink)); }
.pr3-plist, .pr3-flist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.pr3-plist li { display: flex; align-items: center; gap: 0.55rem; font-size: 0.87rem; color: var(--c-ink); }
.pr3-plist li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.pr3-flist li { display: flex; align-items: center; gap: 0.55rem; font-size: 0.87rem; color: var(--c-ink); }
.pr3-flist li svg { flex: none; width: 17px; height: 17px; color: var(--accent); }
@keyframes pr3Fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Enterprise callout */
.pr3-ent { max-width: 1080px; margin: 1.5rem auto 0; display: flex; align-items: center; justify-content: space-between; gap: 1.3rem; flex-wrap: wrap; padding: 1.35rem 1.6rem; border-radius: 18px; border: 1px solid var(--c-border); background: color-mix(in srgb, #5B72E8 6%, var(--c-card)); box-shadow: var(--c-shadow); }
.pr3-ent__text { flex: 1 1 340px; }
.pr3-ent__q { margin: 0; font-family: var(--font); font-weight: 800; font-size: 1.05rem; color: var(--c-ink); }
.pr3-ent__sub { margin: 0.35rem 0 0; font-size: 0.87rem; color: var(--c-muted); line-height: 1.55; max-width: 62ch; }
.pr3-ent .lp-btn { flex: none; }

/* Tablet: 2×2 selector when 4-across gets tight */
@media (max-width: 940px) {
  .pr3-cards { grid-template-columns: repeat(2, 1fr); max-width: 560px; }
  .pr3-panel__cols { grid-template-columns: 1fr 1fr; }
}
/* Mobile: swipeable selector row + single-column panel */
@media (max-width: 620px) {
  .pr3-cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0.85rem; padding-bottom: 0.5rem; -webkit-overflow-scrolling: touch; max-width: none; }
  .pr3-card { scroll-snap-align: center; }
  .pr3-panel__cols { grid-template-columns: 1fr; gap: 1.3rem; }
  .pr3-panel__col + .pr3-panel__col { border-top: 1px solid var(--c-border); padding-top: 1.2rem; }
  .pr3-trial, .pr3-ent { flex-direction: column; align-items: stretch; }
  .pr3-trial__cta, .pr3-ent .lp-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .pr3-card, .pr3-card:hover, .pr3-card.is-selected { transform: none; }
  .pr3-switch__ind { transition: none; }
  .pr3-panel__cols { animation: none; }
}

/* ============================================================
   Pricing — Plan Navigator (compact plan list + one large panel)
   ============================================================ */
.pr4 { max-width: 1220px; margin: 0 auto; }
.pr4-top { display: flex; justify-content: center; margin-bottom: 1.4rem; }
.pr4-switch { position: relative; display: inline-flex; background: color-mix(in srgb, var(--c-ink) 6%, var(--c-card)); border: 1px solid var(--c-border); border-radius: 999px; padding: 4px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.06); }
.pr4-switch__ind { position: absolute; top: 4px; bottom: 4px; left: 4px; width: 0; border-radius: 999px; background: linear-gradient(135deg, var(--c-teal), var(--c-cyan)); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--c-cyan) 70%, transparent); transition: left 0.28s cubic-bezier(0.22,1,0.36,1), width 0.28s cubic-bezier(0.22,1,0.36,1); z-index: 0; }
.pr4-switch__btn { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 0.45rem; border: none; background: transparent; cursor: pointer; font-family: var(--font); font-weight: 700; font-size: 0.85rem; color: var(--c-muted); padding: 0.55rem 1.15rem; border-radius: 999px; white-space: nowrap; transition: color 0.2s ease; }
.pr4-switch__btn.is-active { color: #fff; }
.pr4-switch__save { font-size: 0.68rem; font-weight: 700; padding: 0.12rem 0.42rem; border-radius: 999px; background: color-mix(in srgb, var(--c-cyan) 16%, transparent); color: color-mix(in srgb, var(--c-cyan) 92%, var(--c-ink)); transition: background 0.2s ease, color 0.2s ease; }
.pr4-switch__btn.is-active .pr4-switch__save { background: rgba(255,255,255,0.24); color: #fff; }

.pr4-canvas { display: grid; grid-template-columns: 34% 1fr; border: 1px solid var(--c-border); border-radius: 24px; overflow: hidden; background: var(--c-card); box-shadow: var(--c-shadow); min-height: 440px; }

/* Navigator */
.pr4-nav { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.85rem; background: color-mix(in srgb, var(--c-ink) 3%, var(--c-card)); border-inline-end: 1px solid var(--c-border); }
.pr4-row { position: relative; display: flex; flex-direction: column; gap: 0.12rem; text-align: start; padding: 1rem 1.1rem; border-radius: 14px; border: 1px solid transparent; background: transparent; cursor: pointer; font-family: inherit; transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; }
.pr4-row__line { display: flex; align-items: center; gap: 0.5rem; }
.pr4-row__name { font-family: var(--font); font-weight: 800; font-size: 1.05rem; color: var(--c-ink); }
.pr4-row__pop { font-size: 0.57rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent2)); padding: 0.16rem 0.42rem; border-radius: 999px; }
.pr4-row__aud { font-size: 0.78rem; color: var(--c-muted); }
.pr4-row__price { margin-top: 0.28rem; font-size: 0.86rem; font-weight: 700; color: var(--c-ink); }
.pr4-row:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.pr4-row.is-active { background: color-mix(in srgb, var(--accent) 13%, var(--c-card)); border-color: color-mix(in srgb, var(--accent) 42%, var(--c-border)); box-shadow: 0 12px 26px -16px color-mix(in srgb, var(--accent) 60%, transparent); }
.pr4-row.is-active .pr4-row__name { color: color-mix(in srgb, var(--accent) 82%, var(--c-ink)); }
.pr4-row.is-active::after { content: ""; position: absolute; top: 50%; inset-inline-end: -0.92rem; transform: translateY(-50%) rotate(45deg); width: 14px; height: 14px; background: color-mix(in srgb, var(--accent) 13%, var(--c-card)); border-top: 1px solid color-mix(in srgb, var(--accent) 42%, var(--c-border)); border-right: 1px solid color-mix(in srgb, var(--accent) 42%, var(--c-border)); }
[dir="rtl"] .pr4-row.is-active::after { border-top: none; border-right: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 42%, var(--c-border)); border-left: 1px solid color-mix(in srgb, var(--accent) 42%, var(--c-border)); }

/* Main selected-plan panel */
.pr4-main { --pad: 2.1rem; display: flex; flex-direction: column; }
.pr4-main__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding: 2rem var(--pad) 1.5rem; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 13%, var(--c-card)), color-mix(in srgb, var(--accent2) 7%, var(--c-card))); border-bottom: 1px solid color-mix(in srgb, var(--accent) 14%, var(--c-border)); }
.pr4-main__id { flex: 1 1 auto; min-width: 200px; }
.pr4-main__name { margin: 0; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; font-family: var(--font); font-weight: 800; font-size: 1.75rem; letter-spacing: -0.01em; color: var(--c-ink); }
.pr4-main__pop { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent2)); padding: 0.24rem 0.6rem; border-radius: 999px; }
.pr4-main__aud { margin: 0.55rem 0 0; font-size: 0.95rem; line-height: 1.55; color: var(--c-muted); max-width: 46ch; }
.pr4-main__buy { display: flex; flex-direction: column; align-items: flex-start; gap: 0.65rem; }
.pr4-main__price { display: flex; align-items: baseline; gap: 0.45rem; flex-wrap: wrap; }
.pr4-main__amt { font-family: var(--font); font-weight: 800; font-size: 2.4rem; letter-spacing: -0.02em; color: var(--c-ink); }
.pr4-main__ctx { font-size: 0.82rem; font-weight: 600; color: var(--c-muted); }
.pr4-main__cta { min-width: 190px; justify-content: center; }
.pr4-main .pr4-main__cta.lp-btn--primary { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--accent) 60%, transparent); }
.pr4-main__compare { align-self: stretch; text-align: center; padding: 0.55rem 1.1rem; background: transparent; border: 1.5px solid color-mix(in srgb, var(--accent) 38%, var(--c-border)); border-radius: 11px; cursor: pointer; font-family: var(--font); font-weight: 700; font-size: 0.82rem; color: color-mix(in srgb, var(--accent) 85%, var(--c-ink)); transition: background 0.18s ease, border-color 0.18s ease; }
.pr4-main__compare:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: var(--accent); }
.pr4-main__metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.85rem; padding: 1.35rem var(--pad) 1.1rem; animation: pr3Fade 0.32s ease; }
.pr4-tile { display: flex; flex-direction: column; gap: 0.2rem; padding: 1rem; border-radius: 14px; background: color-mix(in srgb, var(--accent) 7%, var(--c-card)); border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--c-border)); }
.pr4-tile__v { font-family: var(--font); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.01em; color: color-mix(in srgb, var(--accent) 80%, var(--c-ink)); }
.pr4-tile__l { font-size: 0.76rem; line-height: 1.3; color: var(--c-muted); }
.pr4-main__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; padding: 0.3rem var(--pad) 1.6rem; animation: pr3Fade 0.32s ease; }
.pr4-main__col h4 { margin: 0 0 0.85rem; font-family: var(--font); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; color: color-mix(in srgb, var(--accent) 80%, var(--c-ink)); }
.pr4-flist, .pr4-blist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.pr4-flist li { display: flex; align-items: center; gap: 0.55rem; font-size: 0.88rem; color: var(--c-ink); }
.pr4-flist li svg { flex: none; width: 17px; height: 17px; color: var(--accent); }
.pr4-blist li { display: flex; align-items: center; gap: 0.55rem; font-size: 0.86rem; color: var(--c-ink); }
.pr4-blist li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* Trial + Enterprise actions */
.pr4-actions { max-width: 1220px; margin: 1.3rem auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pr4-trial, .pr4-ent { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.4rem; border-radius: 16px; }
.pr4-trial { background: linear-gradient(120deg, color-mix(in srgb, var(--c-teal) 8%, var(--c-card)), color-mix(in srgb, var(--c-cyan) 10%, var(--c-card))); border: 1px solid color-mix(in srgb, var(--c-cyan) 24%, var(--c-border)); }
.pr4-ent { background: color-mix(in srgb, #5B72E8 7%, var(--c-card)); border: 1px solid color-mix(in srgb, #5B72E8 24%, var(--c-border)); }
.pr4-trial__q, .pr4-ent__q { margin: 0; font-family: var(--font); font-weight: 800; font-size: 0.95rem; color: var(--c-ink); }
.pr4-trial__desc { margin: 0.25rem 0 0; font-size: 0.82rem; color: var(--c-muted); line-height: 1.45; }
.pr4-actions__cta { flex: none; }

/* Compare-all drawer */
/* Compare-all-plans — wide centered modal */
.pr4-drawer { position: fixed; inset: 0; z-index: 99998; display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 2.5rem); opacity: 0; transition: opacity 0.3s ease; }
.pr4-drawer[hidden] { display: none; }
.pr4-drawer.is-open { opacity: 1; }
.pr4-drawer__overlay { position: absolute; inset: 0; background: rgba(6,10,20,0.62); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.pr4-drawer__panel { position: relative; width: min(1180px, 90vw); max-width: 1180px; max-height: 88vh; background: var(--c-card); border: 1px solid var(--c-border); border-radius: 22px; box-shadow: 0 40px 100px -30px rgba(0,0,0,0.7); display: flex; flex-direction: column; overflow: hidden; transform: translateY(14px) scale(0.985); transition: transform 0.3s cubic-bezier(0.22,1,0.36,1); }
.pr4-drawer.is-open .pr4-drawer__panel { transform: none; }
.pr4-drawer__head { position: relative; display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1.2rem 3.5rem; border-bottom: 1px solid var(--c-border); }
.pr4-drawer__title { margin: 0; font-family: var(--font); font-weight: 800; font-size: 1.25rem; color: var(--c-ink); text-align: center; }
.pr4-drawer__x { position: absolute; top: 50%; inset-inline-end: 1.1rem; transform: translateY(-50%); width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--c-border); background: transparent; color: var(--c-muted); border-radius: 10px; cursor: pointer; transition: color 0.2s ease, background 0.2s ease; }
.pr4-drawer__x:hover { color: var(--c-ink); background: color-mix(in srgb, var(--c-ink) 6%, transparent); }
.pr4-drawer__x svg { width: 18px; height: 18px; }
.pr4-drawer__body { flex: 1 1 auto; overflow: auto; padding: clamp(1.25rem, 2.5vw, 2rem); }
.pr4-cmp { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin: 0 auto; }
.pr4-cmp th, .pr4-cmp td { padding: 0.75rem 1rem; text-align: center; border-bottom: 1px solid var(--c-border); white-space: nowrap; }
.pr4-cmp th:first-child, .pr4-cmp td:first-child { text-align: start; }
.pr4-cmp thead th { position: sticky; top: 0; background: var(--c-card); font-family: var(--font); font-weight: 800; color: var(--c-ink); font-size: 0.98rem; }
.pr4-cmp tbody td { color: var(--c-muted); }
.pr4-cmp th:first-child, .pr4-cmp td:first-child { color: var(--c-ink); font-weight: 600; }
.pr4-cmp .is-pop { color: color-mix(in srgb, var(--c-cyan) 88%, var(--c-ink)); background: color-mix(in srgb, var(--c-cyan) 8%, transparent); font-weight: 700; }
.pr4-cmp thead th.is-pop { border-top: 2px solid var(--c-cyan); border-radius: 8px 8px 0 0; }

@media (max-width: 940px) {
  .pr4-canvas { grid-template-columns: 1fr; min-height: 0; }
  .pr4-nav { flex-direction: row; overflow-x: auto; gap: 0.5rem; border-inline-end: none; border-bottom: 1px solid var(--c-border); scrollbar-width: none; }
  .pr4-nav::-webkit-scrollbar { display: none; }
  .pr4-row { min-width: 180px; flex: 0 0 auto; }
  .pr4-row.is-active::after { display: none; }
  .pr4-main__metrics { grid-template-columns: repeat(2, 1fr); }
  .pr4-main__cols { grid-template-columns: 1fr; gap: 1.2rem; }
  .pr4-actions { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pr4-row { min-width: 150px; }
  .pr4-row__aud { display: none; }
  .pr4-main__head { padding: 1.5rem 1.25rem 1.25rem; }
  .pr4-main__metrics, .pr4-main__cols { padding-inline: 1.25rem; }
  .pr4-main__name { font-size: 1.5rem; }
  .pr4-main__amt { font-size: 2rem; }
  .pr4-trial, .pr4-ent { flex-direction: column; align-items: stretch; text-align: start; }
  .pr4-actions__cta { width: 100%; justify-content: center; }
  .pr4-drawer { padding: 0.75rem; align-items: flex-end; }
  .pr4-drawer__panel { width: 100%; max-width: none; max-height: 90vh; border-radius: 20px; }
  .pr4-drawer__head { padding: 1.1rem 3rem; }
  .pr4-drawer__body { padding: 1rem; }
  .pr4-cmp { font-size: 0.82rem; }
  .pr4-cmp th, .pr4-cmp td { padding: 0.6rem 0.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pr4-switch__ind, .pr4-drawer, .pr4-drawer__panel { transition: none; }
  .pr4-main__metrics, .pr4-main__cols { animation: none; }
}

/* ============================================================
   Feature A — live demo: honeypot + upsell popup
   ============================================================ */
.demo2-hp { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.demo-upsell[hidden] { display: none; }
.demo-upsell { position: fixed; inset: 0; z-index: 99990; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.demo-upsell__overlay { position: absolute; inset: 0; background: rgba(6, 10, 20, 0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.demo-upsell__card { position: relative; width: 100%; max-width: 420px; background: #ffffff; border: 1px solid rgba(15, 23, 42, 0.1); border-radius: 20px; padding: 2rem 1.9rem; text-align: center; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.6); }
.demo-upsell__x { position: absolute; top: 0.7rem; inset-inline-end: 0.85rem; width: 34px; height: 34px; border: none; background: transparent; font-size: 1.5rem; line-height: 1; cursor: pointer; color: #64748b; border-radius: 9px; }
.demo-upsell__x:hover { background: rgba(15, 23, 42, 0.06); }
.demo-upsell__title { margin: 0.3rem 0 0; font-family: var(--font, inherit); font-weight: 800; font-size: 1.45rem; color: #0f172a; }
.demo-upsell__text { margin: 0.6rem 0 1.5rem; color: #52627a; line-height: 1.6; font-size: 0.98rem; }
.demo-upsell__cta { display: inline-flex; justify-content: center; }
.demo-upsell__cta.lp-btn--primary { background: linear-gradient(135deg, #0F9FA8, #18B6C9); color: #fff; box-shadow: 0 14px 30px -12px rgba(24, 182, 201, 0.6); }
body[data-hero-theme="dark"] .demo-upsell__card { background: #131a2b; border-color: rgba(255, 255, 255, 0.12); }
body[data-hero-theme="dark"] .demo-upsell__title { color: #f1f5f9; }
body[data-hero-theme="dark"] .demo-upsell__text { color: #94a6bf; }
body[data-hero-theme="dark"] .demo-upsell__x { color: #94a6bf; }

/* Feature A — live demo: rotating status label next to the typing dots */
.chat-msg--bot .live-status { display: inline-block; margin-inline-start: 0.5rem; font-size: 0.78rem; color: var(--c-muted, #667); vertical-align: middle; }

/* ============================================================
   Pricing v2 — square plan cards + reusable details modal
   (accent/accent2 are set per-plan inline; theme via shared tokens)
   ============================================================ */
.pr-trial { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; max-width: 1180px; margin: 0 auto 1.4rem; padding: 1.05rem 1.5rem; border-radius: 18px; border: 1px solid var(--c-border); background: color-mix(in srgb, var(--c-teal) 6%, var(--c-card)); }
.pr-trial__main { flex: 1 1 260px; }
.pr-trial__name { font-family: var(--font); font-weight: 800; font-size: 1.05rem; color: var(--c-ink); }
.pr-trial__desc { margin: 0.2rem 0 0; font-size: 0.9rem; color: var(--c-muted); }
.pr-trial__list { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; list-style: none; margin: 0; padding: 0; }
.pr-trial__list li { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--c-ink); }
.pr-trial__list li svg { width: 15px; height: 15px; color: var(--c-teal); flex: none; }
.pr-trial__cta { flex: none; }

.pr-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; max-width: 1180px; margin: 0 auto; align-items: stretch; }
.pr-card { position: relative; display: flex; flex-direction: column; min-height: 360px; padding: 1.4rem 1.3rem 1.3rem; border-radius: 18px; border: 1px solid var(--c-border); background: var(--c-card); box-shadow: 0 10px 30px -20px rgba(0,0,0,0.35); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; overflow: hidden; }
.pr-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.pr-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--accent) 55%, rgba(0,0,0,0.4)); border-color: color-mix(in srgb, var(--accent) 34%, var(--c-border)); }
.pr-card--pop { border-color: color-mix(in srgb, var(--accent) 55%, var(--c-border)); box-shadow: 0 22px 46px -22px color-mix(in srgb, var(--accent) 55%, transparent); transform: translateY(-6px); }
.pr-card--pop:hover { transform: translateY(-9px); }
.pr-card__pop { position: absolute; top: 0.85rem; inset-inline-end: 0.85rem; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.02em; padding: 0.24rem 0.6rem; border-radius: 999px; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--accent) 70%, transparent); }
.pr-card__hd { margin-top: 0.3rem; }
.pr-card__name { font-family: var(--font); font-weight: 800; font-size: 1.25rem; color: color-mix(in srgb, var(--accent) 78%, var(--c-ink)); margin: 0; }
.pr-card__aud { margin: 0.3rem 0 0; font-size: 0.82rem; line-height: 1.4; color: var(--c-muted); min-height: 2.3em; }
.pr-card__price { margin: 0.9rem 0 0.2rem; display: flex; align-items: baseline; gap: 0.35rem; flex-wrap: wrap; }
.pr-card__amt { font-family: var(--font); font-weight: 800; font-size: 1.9rem; color: var(--c-ink); }
.pr-card__ctx { font-size: 0.75rem; color: var(--c-muted); }
.pr-card__metrics { list-style: none; margin: 1rem 0 0; padding: 0.9rem 0 0; border-top: 1px solid var(--c-border); display: flex; flex-direction: column; gap: 0.5rem; }
.pr-card__metrics li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--c-ink); }
.pr-card__metrics li svg { width: 15px; height: 15px; flex: none; color: var(--accent); }
.pr-card__foot { margin-top: auto; padding-top: 1.1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.pr-card__cta.lp-btn--primary { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--accent) 60%, transparent); border: none; }
.pr-card__more { border: none; background: transparent; cursor: pointer; font-family: var(--font); font-weight: 700; font-size: 0.82rem; color: color-mix(in srgb, var(--accent) 78%, var(--c-ink)); padding: 0.2rem; }
.pr-card__more:hover { text-decoration: underline; }

.pr-compareRow { text-align: center; margin-top: 1.7rem; }
.pr-compareBtn { border: 1px solid var(--c-border); background: var(--c-card); cursor: pointer; font-family: var(--font); font-weight: 700; font-size: 0.9rem; color: var(--c-ink); padding: 0.6rem 1.3rem; border-radius: 999px; transition: border-color 0.18s ease, background 0.18s ease; }
.pr-compareBtn:hover { border-color: color-mix(in srgb, var(--c-cyan) 45%, var(--c-border)); background: color-mix(in srgb, var(--c-cyan) 7%, var(--c-card)); }

@media (max-width: 980px) { .pr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pr-cards { grid-template-columns: minmax(0, 1fr); } .pr-card { min-height: 0; } .pr-trial { flex-direction: column; align-items: stretch; text-align: center; } .pr-trial__main { flex: 0 0 auto; } .pr-trial__list { justify-content: center; } }

/* Reusable plan-details modal */
.pr-modal { position: fixed; inset: 0; z-index: 99998; display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 2.5rem); opacity: 0; transition: opacity 0.28s ease; }
.pr-modal[hidden] { display: none; }
.pr-modal.is-open { opacity: 1; }
.pr-modal__overlay { position: absolute; inset: 0; background: rgba(8,12,24,0.55); backdrop-filter: blur(3px); }
.pr-modal__card { position: relative; width: min(440px, 100%); max-height: 88vh; overflow-y: auto; background: var(--c-card); border: 1px solid var(--c-border); border-radius: 20px; box-shadow: 0 40px 90px -30px rgba(0,0,0,0.55); transform: translateY(14px) scale(0.98); transition: transform 0.28s cubic-bezier(0.22,1,0.36,1); }
.pr-modal.is-open .pr-modal__card { transform: none; }
.pr-modal__x { position: absolute; top: 0.8rem; inset-inline-end: 0.8rem; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 10px; background: color-mix(in srgb, var(--c-ink) 6%, transparent); color: var(--c-muted); cursor: pointer; z-index: 2; }
.pr-modal__x svg { width: 18px; height: 18px; }
.pr-modal__hd { padding: 1.6rem 1.6rem 1.2rem; border-bottom: 1px solid var(--c-border); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 13%, var(--c-card)), var(--c-card)); }
.pr-modal__idrow { display: flex; align-items: center; gap: 0.6rem; }
.pr-modal__title { font-family: var(--font); font-weight: 800; font-size: 1.25rem; color: var(--c-ink); margin: 0; }
.pr-modal__pop { font-size: 0.62rem; font-weight: 800; padding: 0.2rem 0.55rem; border-radius: 999px; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent2)); }
.pr-modal__aud { margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--c-muted); }
.pr-modal__price { margin-top: 0.7rem; display: flex; align-items: baseline; gap: 0.35rem; }
.pr-modal__amt { font-family: var(--font); font-weight: 800; font-size: 1.7rem; color: var(--c-ink); }
.pr-modal__ctx { font-size: 0.78rem; color: var(--c-muted); }
.pr-modal__rows { list-style: none; margin: 0; padding: 0.6rem 1.6rem; }
.pr-modal__rows li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid color-mix(in srgb, var(--c-border) 60%, transparent); font-size: 0.88rem; }
.pr-modal__rows li:last-child { border-bottom: none; }
.pr-modal__rl { color: var(--c-muted); }
.pr-modal__rv { font-weight: 700; color: var(--c-ink); text-align: end; }
.pr-modal__cta { display: block; margin: 0.7rem 1.6rem 1.6rem; text-align: center; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; border: none; box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--accent) 60%, transparent); }

/* ============================================================
   Floating site-assistant (scw-*) — honest structured knowledge assistant
   ============================================================ */
.scw-launcher { position: fixed; bottom: 20px; inset-inline-end: 20px; z-index: 99990; width: 58px; height: 58px; border-radius: 50%; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--c-teal, #0d9488), var(--c-cyan, #22d3ee)); box-shadow: 0 16px 34px -12px rgba(13,148,136,0.6); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.scw-launcher:hover { transform: translateY(-2px) scale(1.04); }
.scw-launcher svg { width: 26px; height: 26px; }
.scw-launcher__close { display: none; }
.scw-launcher.is-open .scw-launcher__open { display: none; }
.scw-launcher.is-open .scw-launcher__close { display: block; }

.scw-panel { position: fixed; bottom: 90px; inset-inline-end: 20px; z-index: 99991; width: 380px; max-width: calc(100vw - 32px); height: 560px; max-height: calc(100vh - 120px); display: flex; flex-direction: column; background: var(--c-card, #fff); border: 1px solid var(--c-border, #e5e7eb); border-radius: 20px; box-shadow: 0 40px 90px -24px rgba(8,12,24,0.5); overflow: hidden; opacity: 0; transform: translateY(16px) scale(0.98); trans-origin: bottom right; transition: opacity 0.24s ease, transform 0.24s cubic-bezier(0.22,1,0.36,1); pointer-events: none; }
.scw-panel.is-open { opacity: 1; transform: none; pointer-events: auto; }
.scw-panel[hidden] { display: none; }

.scw-head { display: flex; align-items: center; gap: 0.65rem; padding: 0.9rem 1rem; background: linear-gradient(135deg, var(--c-teal, #0d9488), var(--c-cyan, #22d3ee)); color: #fff; }
.scw-head__logo { width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,0.18); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.scw-head__logo svg { width: 19px; height: 19px; }
.scw-head__id { flex: 1; min-width: 0; }
.scw-head__title { font-family: var(--font); font-weight: 800; font-size: 0.95rem; line-height: 1.1; }
.scw-head__status { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; opacity: 0.92; }
.scw-head__status i { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,0.3); }
.scw-head__x { border: none; background: rgba(255,255,255,0.16); color: #fff; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.scw-head__x svg { width: 16px; height: 16px; }

.scw-body { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem; background: color-mix(in srgb, var(--c-ink, #0f172a) 3%, var(--c-card, #fff)); }
.scw-msg { max-width: 86%; padding: 0.6rem 0.85rem; border-radius: 14px; font-size: 0.88rem; line-height: 1.5; white-space: pre-wrap; }
.scw-msg--bot { align-self: flex-start; background: var(--c-card, #fff); border: 1px solid var(--c-border, #e5e7eb); color: var(--c-ink, #0f172a); border-bottom-inline-start-radius: 5px; }
.scw-msg--user { align-self: flex-end; background: linear-gradient(135deg, var(--c-teal, #0d9488), var(--c-cyan, #22d3ee)); color: #fff; border-bottom-inline-end-radius: 5px; }
.scw-typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 0.7rem 0.9rem; background: var(--c-card, #fff); border: 1px solid var(--c-border, #e5e7eb); border-radius: 14px; }
.scw-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--c-muted, #94a3b8); animation: scwbounce 1.2s infinite ease-in-out; }
.scw-typing span:nth-child(2) { animation-delay: 0.15s; } .scw-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes scwbounce { 0%,60%,100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }

.scw-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.4rem; margin-top: -0.2rem; padding: 0.4rem 0.75rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c-cyan, #22d3ee) 40%, var(--c-border, #e5e7eb)); background: color-mix(in srgb, var(--c-cyan, #22d3ee) 8%, var(--c-card, #fff)); color: color-mix(in srgb, var(--c-cyan, #22d3ee) 90%, var(--c-ink, #0f172a)); font-family: var(--font); font-weight: 700; font-size: 0.78rem; cursor: pointer; }
.scw-pill svg { width: 14px; height: 14px; }
.scw-pill:hover { background: color-mix(in srgb, var(--c-cyan, #22d3ee) 15%, var(--c-card, #fff)); }

.scw-suggests { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.scw-chip { border: 1px solid var(--c-border, #e5e7eb); background: var(--c-card, #fff); color: var(--c-ink, #0f172a); border-radius: 999px; padding: 0.4rem 0.75rem; font-family: var(--font); font-weight: 600; font-size: 0.78rem; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; }
.scw-chip:hover { border-color: color-mix(in srgb, var(--c-teal, #0d9488) 45%, var(--c-border, #e5e7eb)); background: color-mix(in srgb, var(--c-teal, #0d9488) 7%, var(--c-card, #fff)); }

.scw-foot { border-top: 1px solid var(--c-border, #e5e7eb); padding: 0.6rem 0.7rem; }
.scw-links { display: flex; gap: 0.5rem; justify-content: center; margin-bottom: 0.45rem; }
.scw-links a { font-size: 0.72rem; color: var(--c-muted, #94a3b8); text-decoration: none; }
.scw-links a:hover { color: var(--c-teal, #0d9488); text-decoration: underline; }
.scw-inputrow { display: flex; gap: 0.4rem; align-items: center; }
.scw-input { flex: 1; border: 1px solid var(--c-border, #e5e7eb); border-radius: 999px; padding: 0.55rem 0.9rem; font-family: var(--font); font-size: 0.85rem; background: var(--c-card, #fff); color: var(--c-ink, #0f172a); outline: none; }
.scw-input:focus { border-color: color-mix(in srgb, var(--c-teal, #0d9488) 55%, var(--c-border, #e5e7eb)); }
.scw-send { flex: none; width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer; color: #fff; background: linear-gradient(135deg, var(--c-teal, #0d9488), var(--c-cyan, #22d3ee)); display: inline-flex; align-items: center; justify-content: center; }
.scw-send svg { width: 17px; height: 17px; }
[dir="rtl"] .scw-send svg { transform: scaleX(-1); }

@media (max-width: 460px) { .scw-panel { inset-inline: 12px; width: auto; bottom: 84px; height: min(560px, calc(100vh - 104px)); } }