/* ==========================================================================
   Wenti Labs — Homepage Revamp Stylesheet
   Design system: "Enterprise Gateway" pattern + "Trust & Authority" style
   Aesthetic: refined enterprise, BuildPass-leaning hierarchy, brand purple
   anchored on a neutral ink palette. Self-contained — no Webflow dependency.
   ========================================================================== */

/* ---- Fonts: Poppins (Wenti Labs brand font) ---- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
  /* Brand */
  --brand: #5e50a0;
  --brand-strong: #4a3f86;
  --brand-soft: #7866cc;
  --brand-tint: #f3f0ff;
  --brand-tint-2: #e7e3fb;
  --brand-ring: rgba(94, 80, 160, 0.35);

  /* Pink — from the logo's pink→purple gradient */
  --pink: #ec4899;
  --pink-strong: #d62f86;
  --pink-soft: #f9a8d4;
  --pink-tint: #fdeef6;
  /* Signature pink→purple brand gradient (logo direction) */
  --brand-gradient: linear-gradient(120deg, #ec4899 0%, #a14bd0 48%, #5e50a0 100%);
  --brand-gradient-deep: linear-gradient(135deg, #c0287e 0%, #7a4bb0 52%, #5e50a0 100%);

  /* Ink / neutrals (purple-tinted near-black for cohesion) */
  --ink: #14121f;
  --ink-2: #2c2940;
  --muted: #5b5870;
  --muted-2: #84819a;
  --line: #e7e6ee;
  --line-strong: #d8d6e4;
  --surface: #ffffff;
  --surface-2: #faf9fd;
  --surface-3: #f4f2fa;

  /* Hi-vis accent — used sparingly (construction context cue) */
  --hivis: #f5853f;
  --hivis-soft: #fff1e6;

  /* Semantic */
  --success: #1f9d6b;

  /* Type */
  --font-display: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-body: 'Poppins', system-ui, -apple-system, sans-serif;

  /* Spacing scale (BuildPass-generous) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Layout */
  --container: 1200px;
  --container-narrow: 880px;
  --gutter: 24px;
  --section-y: 120px;            /* vertical rhythm between sections */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(20, 18, 31, 0.06), 0 1px 3px rgba(20, 18, 31, 0.04);
  --shadow: 0 8px 24px rgba(20, 18, 31, 0.08);
  --shadow-lg: 0 24px 60px rgba(20, 18, 31, 0.14);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 220ms;
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body.wl {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}

p { margin: 0; }

::selection { background: var(--brand-tint-2); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--brand-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ==========================================================================
   3. Layout primitives
   ========================================================================== */
.wl-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wl-narrow { max-width: var(--container-narrow); }

.wl-section { padding-block: var(--section-y); }
.wl-section--tight { padding-block: var(--space-8); }

.wl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
}
.wl-eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--brand);
  border-radius: 2px;
}

.wl-section-head { max-width: 720px; margin-bottom: var(--space-8); }
.wl-section-head.is-center { margin-inline: auto; text-align: center; }
.wl-section-head h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-top: var(--space-4);
}
.wl-section-head p {
  margin-top: var(--space-4);
  font-size: 1.15rem;
  color: var(--muted);
}

/* Solid-colour highlights — pink + purple mix (not a gradient) */
.wl-hl-pink { color: var(--pink); }
.wl-hl-purple { color: var(--brand); }

/* ==========================================================================
   4. Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  padding: 15px 24px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 6px 18px var(--brand-ring);
}
.btn-primary:hover { background: var(--brand-strong); box-shadow: 0 10px 26px var(--brand-ring); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); }

.btn-light { background: #fff; color: var(--brand); }
.btn-light:hover { background: var(--brand-tint); }

.btn svg { width: 18px; height: 18px; }
.btn-link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-weight: 600; color: var(--brand);
}
.btn-link svg { transition: transform var(--dur) var(--ease); }
.btn-link:hover svg { transform: translateX(4px); }

/* ==========================================================================
   5. Navigation
   ========================================================================== */
.wl-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Liquid glass: translucent at rest, frosts up on scroll */
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid rgba(231, 230, 238, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease);
}
.wl-nav.is-scrolled {
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  border-color: var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), var(--shadow-sm);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .wl-nav { background: rgba(255, 255, 255, 0.95); }
}
.wl-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.wl-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }
.wl-brand img { width: 34px; height: 34px; }
.wl-nav-links { display: flex; align-items: center; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.wl-nav-links a { font-weight: 500; color: var(--ink-2); font-size: 0.98rem; transition: color var(--dur) var(--ease); }
.wl-nav-links a:hover, .wl-nav-links a[aria-current="page"] { color: var(--brand); }
.wl-nav-actions { display: flex; align-items: center; gap: var(--space-4); }
.wl-nav-actions .btn { padding: 11px 18px; font-size: 0.95rem; }

.wl-nav-toggle {
  display: none; width: 44px; height: 44px; border: 1px solid var(--line-strong);
  background: #fff; border-radius: 12px; cursor: pointer; position: relative;
}
.wl-nav-toggle span, .wl-nav-toggle span::before, .wl-nav-toggle span::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 2px;
  background: var(--ink); border-radius: 2px; transform: translate(-50%, -50%);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.wl-nav-toggle span::before { content: ""; transform: translate(-50%, -7px); }
.wl-nav-toggle span::after { content: ""; transform: translate(-50%, 5px); }

/* ==========================================================================
   6. Hero
   ========================================================================== */
.wl-hero {
  position: relative;
  padding-block: var(--space-7) var(--space-8);
  overflow: hidden;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.wl-hero::after {
  /* subtle grain for depth */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("../images/grain-p-500.png");
  background-size: 300px; opacity: 0.035; mix-blend-mode: multiply;
}
.wl-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-8);
  align-items: center;
}
.wl-hero-badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 7px 14px 7px 8px; border-radius: var(--radius-pill);
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  font-size: 0.85rem; font-weight: 500; color: var(--ink-2);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.wl-hero-badge:hover { border-color: var(--brand); box-shadow: var(--shadow); transform: translateY(-1px); }
.wl-hero-badge b { color: var(--brand); font-weight: 700; }
.wl-hero-badge .pill {
  background: var(--brand-gradient); color: #fff; font-size: 0.72rem; font-weight: 700;
  padding: 3px 9px; border-radius: var(--radius-pill); letter-spacing: 0.03em;
}
.wl-hero h1 {
  font-size: clamp(2.6rem, 5.4vw, 4.4rem);
  font-weight: 800;
  margin-top: var(--space-5);
}
.wl-hero-sub {
  margin-top: var(--space-5);
  font-size: 1.2rem;
  color: var(--muted);
  max-width: 540px;
}
.wl-hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-7); }
.wl-hero-proof {
  display: flex; align-items: center; gap: var(--space-4);
  margin-top: var(--space-6); font-size: 0.92rem; color: var(--muted);
}
.wl-hero-proof strong { color: var(--ink); }

/* Hero "catch" — staggered reveal on page load */
.wl-hero-copy > * { opacity: 0; animation: wl-rise 0.7s var(--ease) forwards; }
.wl-hero-copy > .wl-hero-badge { animation-delay: 0.05s; }
.wl-hero-copy > h1 { animation-delay: 0.16s; }
.wl-hero-copy > .wl-hero-sub { animation-delay: 0.30s; }
.wl-hero-copy > .wl-hero-cta { animation-delay: 0.44s; }
.wl-hero-copy > .wl-hero-proof { animation-delay: 0.58s; }
@keyframes wl-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes wl-rise-scale { from { opacity: 0; transform: translateY(26px) scale(0.97); } to { opacity: 1; transform: none; } }

/* Hero visual — Remotion-rendered product demo */
.wl-hero-visual { position: relative; opacity: 0; animation: wl-rise-scale 1s var(--ease) 0.4s forwards; }
.wl-hero-video {
  display: block; width: 100%; height: auto;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}
/* Hero phone → chatbot morph (driven by JS scroll progress) */
.wl-hero-video.is-morphing {
  position: fixed; top: 0; left: 0; margin: 0;
  z-index: 96; will-change: transform, opacity;
  transform-origin: top left;
}
/* Hide the chat launcher until the hero phone has "landed" in the corner */
.wl-cb-fab { transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); }
body.wl-premorph .wl-cb-fab { opacity: 0; transform: scale(0.4); pointer-events: none; }
.wl-hero-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.wl-hero-card-bar {
  display: flex; align-items: center; gap: 6px; padding: 14px 18px;
  border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.wl-hero-card-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--line-strong); }
.wl-hero-card-bar i:nth-child(1) { background: #ff5f57; }
.wl-hero-card-bar i:nth-child(2) { background: #febc2e; }
.wl-hero-card-bar i:nth-child(3) { background: #28c840; }
.wl-hero-card-bar span { margin-left: auto; font-size: 0.8rem; color: var(--muted-2); }
.wl-hero-card-body { padding: var(--space-5); display: grid; gap: var(--space-4); }
.wl-chat-row { display: flex; gap: var(--space-3); align-items: flex-start; }
.wl-chat-row.is-me { flex-direction: row-reverse; }
.wl-chat-avatar { width: 36px; height: 36px; border-radius: 50%; flex: none; background: var(--brand-tint); display: grid; place-items: center; color: var(--brand); font-weight: 700; font-size: 0.85rem; }
.wl-chat-bubble {
  padding: 12px 16px; border-radius: 16px; font-size: 0.95rem; max-width: 78%;
  background: var(--surface-3); color: var(--ink-2); line-height: 1.45;
}
.wl-chat-row.is-me .wl-chat-bubble { background: var(--brand); color: #fff; }
.wl-chat-report {
  border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4);
  background: #fff; box-shadow: var(--shadow-sm);
}
.wl-chat-report-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.wl-chat-report-h b { font-family: var(--font-display); font-size: 0.98rem; }
.wl-chip { font-size: 0.72rem; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--hivis-soft); color: var(--hivis); }
.wl-chip.is-ok { background: #e8f7f0; color: var(--success); }
.wl-chat-report ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 0.88rem; display: grid; gap: 4px; }
.wl-hero-float {
  position: absolute; bottom: -22px; left: -28px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 14px 18px; display: flex; align-items: center; gap: 12px;
}
.wl-hero-float .dot { width: 38px; height: 38px; border-radius: 12px; background: var(--success); display: grid; place-items: center; color: #fff; }
.wl-hero-float small { color: var(--muted); font-size: 0.78rem; display: block; }
.wl-hero-float b { font-family: var(--font-display); font-size: 1.05rem; }

/* ==========================================================================
   7. Logo marquee (clients / backers)
   ========================================================================== */
.wl-logos { padding-block: var(--space-8); border-block: 1px solid var(--line); background: var(--surface-2); }
.wl-logos-label { text-align: center; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); margin-bottom: var(--space-6); }
.wl-marquee { position: relative; 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); }
.wl-marquee-track { display: flex; width: max-content; gap: var(--space-9); animation: wl-scroll 38s linear infinite; }
.wl-marquee-group { display: flex; align-items: center; gap: var(--space-9); }
.wl-marquee img { height: 48px; width: auto; object-fit: contain; transition: transform var(--dur) var(--ease); }
.wl-marquee img:hover { transform: scale(1.08); }
@keyframes wl-scroll { to { transform: translateX(calc(-50% - var(--space-9) / 2)); } }

/* ==========================================================================
   8. Feature tabs
   ========================================================================== */
.wl-tabs { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-8); align-items: center; }
.wl-tablist { display: grid; gap: var(--space-3); }
.wl-tab {
  text-align: left; background: transparent; border: 1px solid transparent;
  border-radius: var(--radius); padding: var(--space-5); cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  border-left: 3px solid var(--line);
}
.wl-tab:hover { background: var(--surface-2); }
.wl-tab.is-active { background: #fff; border-color: var(--line); border-left-color: var(--brand); box-shadow: var(--shadow); }
.wl-tab .eyebrow { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand); }
.wl-tab h3 { font-size: 1.3rem; margin-top: 6px; }
.wl-tab p { margin-top: 8px; color: var(--muted); font-size: 0.98rem; max-height: 0; overflow: hidden; opacity: 0; transition: all var(--dur) var(--ease); }
.wl-tab.is-active p { max-height: 120px; opacity: 1; margin-top: 10px; }
.wl-tabpanels { position: relative; }
.wl-tabpanel { display: none; }
.wl-tabpanel.is-active { display: block; animation: wl-fade var(--dur) var(--ease); }
.wl-tabpanel img { width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: var(--shadow-lg); background: #fff; }
@keyframes wl-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   8b. Workflow steps — alternating, continuous capture→analyse→report→loop
   ========================================================================== */
.wl-feat-eyebrow { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand); }

/* ==========================================================================
   Use-case conveyor — rendered scene (Remotion): a site worker packs each
   use case along an isometric belt. Source list kept in DOM (hidden) for
   SEO / chatbot / accessibility.
   ========================================================================== */
/* full-bleed band — no container, belt spans the whole viewport width */
.wl-line-section { padding-block: var(--section-y); overflow: hidden; }
.wl-line { position: relative; width: 100%; }
.wl-line-media { position: relative; width: 100%; line-height: 0; }
/* fade the belt's far ends so they dissolve instead of hard-cutting at the edges */
.wl-line-video {
  display: block; width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}

/* heading sits over the empty top-left of the scene, left-aligned and clear of the belt */
.wl-line-head {
  position: absolute; z-index: 3; top: 9%;
  left: clamp(20px, 6vw, 110px); max-width: min(38%, 440px); text-align: left;
}
.wl-line-head h2 { font-size: clamp(1.6rem, 3vw, 2.7rem); margin-top: var(--space-3); }
.wl-line-head p { margin-top: var(--space-3); font-size: 1.05rem; color: var(--muted); max-width: 26ch; }

@media (max-width: 880px) {
  /* stack: heading above the belt, no overlap */
  .wl-line-head {
    position: static; max-width: none; text-align: center;
    padding-inline: var(--gutter); margin-bottom: var(--space-5);
  }
  .wl-line-head .wl-eyebrow { justify-content: center; }
}


.wl-flow-steps { max-width: 980px; margin: var(--space-8) auto 0; display: flex; flex-direction: column; gap: var(--space-4); }
.wl-step { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
.wl-step.is-reverse .wl-step-anim { order: 2; }
.wl-step-anim {
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-7); min-height: 340px; position: relative; overflow: hidden;
}
.wl-step-anim--video { padding: 0; background: transparent; border: 0; }
.wl-step-video { width: 100%; height: auto; max-height: 380px; display: block; object-fit: contain; }
.wl-step-copy { display: flex; flex-direction: column; gap: var(--space-3); }
.wl-step-num { width: 44px; height: 44px; border-radius: 12px; background: var(--brand); color: #fff; font-family: var(--font-display); font-weight: 800; display: grid; place-items: center; }
.wl-step-copy h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.wl-step-copy p { color: var(--muted); font-size: 1.05rem; line-height: 1.55; }
.wl-step-link { display: flex; justify-content: center; color: var(--line-strong); }
.wl-step-link svg { width: 28px; height: 28px; }

/* phone frame (reused by capture + route-back) */
.wl-ph { width: 188px; height: 360px; border-radius: 30px; background: #14121f; padding: 9px; box-shadow: var(--shadow-lg); position: relative; }
.wl-ph-notch { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 54px; height: 13px; background: #14121f; border-radius: 8px; z-index: 3; }
.wl-ph-screen { width: 100%; height: 100%; border-radius: 22px; background: #ece6dd; overflow: hidden; position: relative; }

/* 01 capture */
.wl-cap { position: absolute; inset: 0; }
.wl-cap-view { position: absolute; inset: 34px 22px 70px; animation: wl-cap-pulse 5s var(--ease) infinite; }
.wl-cap-view .b { position: absolute; width: 22px; height: 22px; border: 3px solid #fff; }
.wl-cap-view .tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.wl-cap-view .tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.wl-cap-view .bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.wl-cap-view .br { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.wl-cap-subject { position: absolute; inset: 28% 26%; background: rgba(94,80,160,0.3); border-radius: 6px; }
.wl-cap-flash { position: absolute; inset: 0; background: #fff; opacity: 0; animation: wl-cap-flash 5s var(--ease) infinite; }
.wl-cap-photo { position: absolute; left: 14px; right: 14px; bottom: 14px; background: #fff; border-radius: 10px; padding: 9px; font-size: 0.7rem; color: var(--ink-2); box-shadow: var(--shadow-sm); opacity: 0; animation: wl-cap-photo 5s var(--ease) infinite; }
@keyframes wl-cap-pulse { 0%, 30% { transform: scale(1); opacity: 0.95; } 41% { transform: scale(0.93); opacity: 1; } 52%, 100% { transform: scale(1); opacity: 0.4; } }
@keyframes wl-cap-flash { 0%, 38% { opacity: 0; } 42% { opacity: 0.9; } 52%, 100% { opacity: 0; } }
@keyframes wl-cap-photo { 0%, 48% { opacity: 0; transform: translateY(20px); } 58%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* 02 analyse */
.wl-analyse { width: 100%; max-width: 300px; display: flex; flex-direction: column; gap: 10px; }
.wl-an-photo { position: relative; height: 86px; border-radius: 10px; background: #cfc8e6; overflow: hidden; display: flex; align-items: flex-end; padding: 8px; font-size: 0.7rem; color: #fff; }
.wl-an-scan { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--brand); box-shadow: 0 0 10px 2px rgba(94,80,160,0.6); animation: wl-scan 5s var(--ease) infinite; }
@keyframes wl-scan { 0%, 8% { top: 0; opacity: 0; } 14% { opacity: 1; } 46% { top: 100%; opacity: 1; } 52%, 100% { opacity: 0; } }
.wl-an-field { display: flex; justify-content: space-between; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 0.8rem; opacity: 0; }
.wl-an-field span { color: var(--muted-2); }
.wl-an-field b { color: var(--ink); }
.f1 { animation: wl-sc-in 5s var(--ease) infinite; animation-delay: 1.4s; }
.f2 { animation: wl-sc-in 5s var(--ease) infinite; animation-delay: 1.9s; }
.f3 { animation: wl-sc-in 5s var(--ease) infinite; animation-delay: 2.4s; }
.wl-an-done { font-size: 0.78rem; font-weight: 700; color: var(--success); opacity: 0; animation: wl-sc-in 5s var(--ease) infinite; animation-delay: 3s; }

/* 04 route back */
.wl-route { position: absolute; inset: 0; padding: 18px 14px; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.wl-route-toast { background: #fff; border-radius: 12px; padding: 10px; display: flex; gap: 9px; align-items: center; box-shadow: var(--shadow-sm); opacity: 0; animation: wl-route-in 5s var(--ease) infinite; }
.wl-route-toast.rt2 { animation-delay: 1.7s; }
.wl-route-toast b { display: block; color: var(--ink); font-size: 0.76rem; }
.wl-route-toast span { color: var(--muted); font-size: 0.68rem; }
.wl-route-ico { font-size: 1.1rem; }
@keyframes wl-route-in { 0%, 10% { opacity: 0; transform: translateY(16px); } 22%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .wl-cap-view, .wl-cap-flash, .wl-an-scan { animation: none !important; }
  .wl-cap-flash { opacity: 0 !important; }
  .wl-cap-photo, .wl-an-field, .wl-an-done, .wl-route-toast { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ==========================================================================
   8b-2. Quote break (abstract image + customer quote)
   ========================================================================== */
.wl-quote-band { padding: 0; }
.wl-quoteblock { display: grid; grid-template-columns: 1fr 1fr; min-height: 480px; }
.wl-quoteblock-media { background: var(--brand-tint); overflow: hidden; }
.wl-quoteblock-media img { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }
.wl-quoteblock-body { background: var(--brand-gradient-deep); color: #fff; padding: var(--space-9) var(--space-8); display: flex; align-items: center; }
.wl-quoteblock-inner { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: var(--space-5); }
.wl-quoteblock-body .wl-eyebrow { color: #fff; }
.wl-quoteblock-body .wl-eyebrow::before { background: #fff; }
.wl-quoteblock-body blockquote { font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.32; margin: 0; color: #fff; }
.wl-quoteblock-author { display: flex; align-items: center; gap: var(--space-3); }
.wl-quoteblock-author .ph { width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--brand); display: grid; place-items: center; font-weight: 700; flex: none; }
.wl-quoteblock-author b { display: block; color: #fff; }
.wl-quoteblock-author span { color: rgba(255,255,255,0.78); font-size: 0.9rem; }

/* ==========================================================================
   8c. Value chain — animated roadmap video
   ========================================================================== */
.wl-roadmap { max-width: 1100px; margin: var(--space-7) auto 0; }
.wl-roadmap-video { display: block; width: 100%; height: auto; }

/* (legacy static chain styles — kept for reference) */
.wl-chain { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: var(--space-4); align-items: stretch; }
.wl-chain-stage {
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface);
  padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.wl-chain-stage:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.wl-chain-step { width: 42px; height: 42px; border-radius: 12px; background: var(--brand-tint); color: var(--brand); font-family: var(--font-display); font-weight: 700; display: grid; place-items: center; }
.wl-chain-stage h3 { font-size: 1.2rem; }
.wl-chain-stage > p { color: var(--muted); font-size: 0.95rem; flex: 1; }
.wl-chain-logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.wl-chain-logos img { height: 24px; width: auto; object-fit: contain; opacity: 0.7; filter: grayscale(1); transition: opacity var(--dur) var(--ease), filter var(--dur) var(--ease); }
.wl-chain-stage:hover .wl-chain-logos img { opacity: 1; filter: none; }
.wl-chain-arrow { display: grid; place-items: center; color: var(--line-strong); }
.wl-chain-arrow svg { width: 26px; height: 26px; }

.wl-chain-band {
  margin-top: var(--space-6); background: var(--wl-deep, var(--brand)); color: #fff;
  border-radius: var(--radius-lg); padding: var(--space-6) var(--space-7);
  display: flex; align-items: center; gap: var(--space-5); box-shadow: var(--shadow-lg);
}
.wl-chain-band-ico { flex: none; width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,0.16); display: grid; place-items: center; }
.wl-chain-band-ico svg { width: 26px; height: 26px; }
.wl-chain-band p { font-size: 1.05rem; line-height: 1.5; color: rgba(255,255,255,0.92); }
.wl-chain-band b { color: #fff; }

/* --- shared scene primitives (light tiles) --- */
.wl-sc { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; height: 100%; }
.wl-sc-msg { padding: 8px 12px; border-radius: 12px; font-size: 0.82rem; max-width: 96%; opacity: 0; background: #fff; border: 1px solid var(--line); color: var(--ink-2); box-shadow: var(--shadow-sm); }
.wl-sc-bot { background: var(--brand-tint); border-color: var(--brand-tint-2); color: var(--ink); }
.wl-sc-card { width: 96%; opacity: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; box-shadow: var(--shadow-sm); }
.wl-sc-card-h { display: flex; align-items: center; justify-content: space-between; font-size: 0.85rem; }
.wl-sc-card-h b { font-family: var(--font-display); }
.wl-sc-badge { font-size: 0.66rem; font-weight: 700; color: var(--success); background: #e8f7f0; padding: 2px 8px; border-radius: var(--radius-pill); }
.wl-sc-bar { height: 5px; border-radius: var(--radius-pill); background: var(--surface-3); margin-top: 8px; overflow: hidden; }
.wl-sc-bar i { display: block; height: 100%; width: 0; background: var(--brand); border-radius: var(--radius-pill); }

@keyframes wl-sc-in { 0%, 8% { opacity: 0; transform: translateY(8px); } 18%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes wl-sc-fill { 0%, 30% { width: 0; } 52%, 90% { width: 100%; } 100% { width: 0; } }
@keyframes wl-sc-chip { 0%, 6% { opacity: 0; transform: translateY(6px); } 16% { opacity: 1; transform: none; } 30%, 90% { opacity: 1; background: var(--brand-tint); border-color: var(--brand-tint-2); color: var(--ink); } 100% { opacity: 0; } }

.sc-a { animation: wl-sc-in 7s var(--ease) infinite; }
.sc-b { animation: wl-sc-in 7s var(--ease) infinite; animation-delay: 0.8s; }
.sc-c { animation: wl-sc-in 7s var(--ease) infinite; animation-delay: 1.7s; }
.wl-sc1 .wl-sc-bar i { animation: wl-sc-fill 7s var(--ease) infinite; animation-delay: 1.7s; }

/* Scene 2 — coordination chips */
.wl-sc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.wl-sc-chip { font-size: 0.78rem; padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: #fff; color: var(--muted); opacity: 0; }
.sc-c1 { animation: wl-sc-chip 7s var(--ease) infinite; animation-delay: 0.6s; }
.sc-c2 { animation: wl-sc-chip 7s var(--ease) infinite; animation-delay: 1.1s; }
.sc-c3 { animation: wl-sc-chip 7s var(--ease) infinite; animation-delay: 1.6s; }

/* Scene 3 — reporting log rows */
.wl-sc-row { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--ink-2); opacity: 0; }
.wl-sc-row i { width: 13px; height: 13px; border-radius: 50%; background: var(--brand-tint); border: 2px solid var(--brand); flex: none; }
.sc-r1 { animation: wl-sc-in 7s var(--ease) infinite; animation-delay: 0.3s; }
.sc-r2 { animation: wl-sc-in 7s var(--ease) infinite; animation-delay: 1.0s; }
.sc-r3 { animation: wl-sc-in 7s var(--ease) infinite; animation-delay: 1.7s; }
.wl-sc-done { margin-top: auto; font-size: 0.8rem; font-weight: 700; color: var(--success); background: #e8f7f0; padding: 6px 12px; border-radius: var(--radius-pill); opacity: 0; }
.sc-d { animation: wl-sc-in 7s var(--ease) infinite; animation-delay: 2.4s; }

/* Reporting — auto-filling spreadsheet with cursor + Joey mascot */
.wl-sheet { position: relative; width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); font-size: 0.78rem; }
.wl-sheet-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.wl-sheet-name { font-weight: 600; color: var(--ink-2); }
.wl-sheet-live { display: inline-flex; align-items: center; gap: 6px; font-size: 0.68rem; font-weight: 700; color: var(--success); }
.wl-sheet-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); animation: wl-blink 1.4s infinite; }
@keyframes wl-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.wl-sheet-row { display: grid; grid-template-columns: 0.7fr 1.1fr 0.9fr 0.9fr; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.wl-sheet-row:last-child { border-bottom: 0; }
.wl-sheet-head { background: var(--surface-3); font-weight: 700; color: var(--muted-2); text-transform: uppercase; font-size: 0.66rem; letter-spacing: 0.05em; }
.wl-sheet-row span { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-sheet-tag { justify-self: start; font-size: 0.68rem; font-weight: 700; color: var(--hivis); background: var(--hivis-soft); padding: 2px 8px; border-radius: var(--radius-pill); }
.wl-sheet-tag.is-ok { color: var(--success); background: #e8f7f0; }
.wl-sheet-bar-cell { height: 7px; border-radius: var(--radius-pill); background: var(--surface-3); overflow: hidden; }
.wl-sheet-bar-cell i { display: block; height: 100%; width: 0; background: var(--brand); border-radius: var(--radius-pill); }

/* rows + bars fill in sequence */
.wl-sheet-row.sh-r1, .wl-sheet-row.sh-r2, .wl-sheet-row.sh-r3 { opacity: 0; }
.sh-r1 { animation: wl-sc-in 8s var(--ease) infinite; animation-delay: 0.4s; }
.sh-r2 { animation: wl-sc-in 8s var(--ease) infinite; animation-delay: 1.6s; }
.sh-r3 { animation: wl-sc-in 8s var(--ease) infinite; animation-delay: 2.8s; }
.sh-r1 .wl-sheet-bar-cell i { animation: wl-sheet-fill 8s var(--ease) infinite; animation-delay: 0.7s; }
.sh-r2 .wl-sheet-bar-cell i { animation: wl-sheet-fill 8s var(--ease) infinite; animation-delay: 1.9s; }
.sh-r3 .wl-sheet-bar-cell i { animation: wl-sheet-fill 8s var(--ease) infinite; animation-delay: 3.1s; }
@keyframes wl-sheet-fill { 0%, 4% { width: 0; } 14%, 88% { width: 100%; } 100% { width: 0; } }

/* cursor + mascot travels down the rows as they fill */
.wl-cursor { position: absolute; left: 64%; top: 64px; display: flex; align-items: flex-start; gap: 4px; animation: wl-cursor-move 8s var(--ease) infinite; }
.wl-cursor-arrow { width: 20px; height: 20px; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.2)); }
.wl-cursor-joey { width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; display: grid; place-items: center; box-shadow: var(--shadow-sm); margin-top: 8px; }
@keyframes wl-cursor-move {
  0%, 6% { top: 40px; opacity: 0; }
  10%, 20% { top: 64px; opacity: 1; }
  34%, 44% { top: 100px; opacity: 1; }
  58%, 80% { top: 136px; opacity: 1; }
  92%, 100% { top: 150px; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .wl-sc * { opacity: 1 !important; transform: none !important; }
  .wl-sc-bar i { width: 100% !important; }
  .wl-sc-chip { background: var(--brand-tint); border-color: var(--brand-tint-2); color: var(--ink); }
  .wl-sheet-row { opacity: 1 !important; animation: none !important; }
  .wl-sheet-bar-cell i { width: 100% !important; animation: none !important; }
  .wl-cursor { display: none; }
}

/* ==========================================================================
   9. Metrics band
   ========================================================================== */
/* Full-bleed band: section spans edge-to-edge, inner container centers content */
.wl-metrics-band { padding: 0; }
.wl-metrics {
  background: var(--ink); color: #fff;
  padding-block: var(--space-8);
  position: relative; overflow: hidden;
  /* liquid-glass sheen: top highlight + faint hairlines */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(255,255,255,0.06);
}
.wl-metrics::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), transparent 22%);
}
.wl-metrics-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-7); }
.wl-metric { transition: transform var(--dur) var(--ease); }
.wl-metric:hover { transform: translateY(-4px); }
.wl-metric .v { font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -0.03em; color: #fff; font-variant-numeric: tabular-nums; }
.wl-metric .v em { font-style: normal; color: var(--brand-soft); }
.wl-metric .l { margin-top: 8px; color: rgba(255,255,255,0.72); font-size: 0.98rem; }

/* ==========================================================================
   10. Value / cards grid
   ========================================================================== */
.wl-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.wl-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-6); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.wl-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
.wl-card-ico { width: 52px; height: 52px; border-radius: 14px; background: var(--brand-tint); color: var(--brand); display: grid; place-items: center; margin-bottom: var(--space-4); }
.wl-card-ico svg { width: 26px; height: 26px; }
.wl-card h3 { font-size: 1.25rem; }
.wl-card p { margin-top: 10px; color: var(--muted); font-size: 0.98rem; }

/* ---- Use-case bento (featured tile + tidy supporting tiles) ---- */
/* ---- Use-cases tiles — fixed grid, one pill breathes open at a time ---- */
/* Layout never reflows: tiles keep a fixed footprint; "open" is pure transform
   + an absolutely-positioned description panel, so neighbours never move. */
/* balanced grid of equal pills + one reserved caption zone below */
.wl-usecases { position: relative; margin-top: var(--space-8); }
.wl-cloud {
  position: relative; z-index: 0;
  display: grid; grid-template-columns: repeat(4, 258px); gap: var(--space-6);
  width: max-content; max-width: 100%; margin: 0 auto;
}
/* closed orthogonal trace looping through every pill — anchored exactly to the grid box */
.wl-flowline {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; overflow: visible; pointer-events: none;
}
.wl-flowline-path {
  opacity: 0.5;
  stroke-dasharray: 10 12; stroke-dashoffset: 0;
  animation: wlFlow 6s linear infinite;
}
@keyframes wlFlow { to { stroke-dashoffset: -220; } }

.wl-cloud-caption { position: relative; z-index: 1; }
.wl-cloud-tile {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: var(--space-3);
  padding: 0 22px; height: 58px; box-sizing: border-box;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease),
              border-color .35s var(--ease), background .35s var(--ease);
}
.wl-cloud-txt { min-width: 0; }
.wl-cloud-txt b {
  font-family: var(--font-display); color: var(--ink); font-weight: 600;
  font-size: 1.04rem; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* per-tile description: hidden from view (kept for screen readers + data source) */
.wl-cloud-txt small {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- active pill (auto-cycled or hovered) --- */
.wl-cloud-tile.is-open {
  transform: scale(1.06);
  border-color: var(--brand-tint-2); box-shadow: var(--shadow);
  background: var(--surface);
}

/* abstract glyph chip */
.wl-glyph {
  flex: none; width: 36px; height: 36px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--brand-tint); color: var(--brand);
  transition: background .35s var(--ease), box-shadow .35s var(--ease);
}
.wl-glyph svg { width: 22px; height: 22px; overflow: visible; }
.wl-glyph svg [class] { stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wl-cloud-tile.is-open .wl-glyph {
  background: var(--brand-strong); color: #fff;
  box-shadow: 0 6px 16px rgba(94, 80, 160, 0.28);
}

/* shared caption — one reserved, centered line that crossfades */
.wl-cloud-caption {
  max-width: 52ch; min-height: 3em; margin: var(--space-6) auto 0;
  text-align: center; color: var(--muted); font-size: 1.05rem; line-height: 1.5;
  opacity: 1; transition: opacity .28s var(--ease);
}
.wl-cloud-caption.is-swapping { opacity: 0; }

/* --- abstract icon animations (subtle, ambient) --- */
.g-pulse .r2 { animation: gPulse 3.2s var(--ease) infinite; transform-origin: center; }
.g-pulse .r3 { animation: gPulse 3.2s var(--ease) infinite .5s; transform-origin: center; }
@keyframes gPulse { 0%,100% { opacity: .9; transform: scale(.92);} 50% { opacity: .35; transform: scale(1.06);} }

.g-check .ck { stroke-dasharray: 16; stroke-dashoffset: 0; animation: gDraw 3.4s var(--ease) infinite; }
@keyframes gDraw { 0%,18% { stroke-dashoffset: 16; } 42%,82% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 16; } }

.g-spin .dash { stroke-dasharray: 6 7; animation: gSpin 9s linear infinite; transform-origin: center; }
@keyframes gSpin { to { transform: rotate(360deg); } }

.g-bars .b1 { animation: gBar 1.8s var(--ease) infinite; transform-origin: center bottom; }
.g-bars .b2 { animation: gBar 1.8s var(--ease) infinite .25s; transform-origin: center bottom; }
.g-bars .b3 { animation: gBar 1.8s var(--ease) infinite .5s; transform-origin: center bottom; }
@keyframes gBar { 0%,100% { transform: scaleY(.55);} 50% { transform: scaleY(1);} }

.g-orbit .ring { animation: gSpin 6s linear infinite; transform-origin: center; }
.g-orbit .sat { fill: currentColor; stroke: none; }
.g-orbit .core { fill: none; }

.g-stack .s2 { animation: gSlide 3s var(--ease) infinite; }
.g-stack .s3 { animation: gSlide 3s var(--ease) infinite .3s; }
@keyframes gSlide { 0%,100% { transform: translateX(0); opacity: 1;} 50% { transform: translateX(3px); opacity: .55;} }

.g-blink .ping { fill: currentColor; stroke: none; animation: gPing 2.4s var(--ease) infinite; transform-origin: 16px 25px; }
@keyframes gPing { 0%,60%,100% { transform: scale(.6); opacity: .4;} 78% { transform: scale(1.25); opacity: 1;} }

.g-wave .w { stroke-dasharray: 7 5; animation: gWave 2.4s linear infinite; }
@keyframes gWave { to { stroke-dashoffset: -24; } }

@media (max-width: 1200px) {
  .wl-cloud { grid-template-columns: repeat(2, 240px); gap: var(--space-5); width: max-content; }
  .wl-flowline { display: none; } /* trace is tuned to the 4-up desktop grid */
}
@media (max-width: 560px) {
  .wl-cloud { grid-template-columns: 1fr; width: auto; max-width: 340px; }
}

/* reduced motion — no cycling; show each description inline under its pill */
@media (prefers-reduced-motion: reduce) {
  .wl-cloud-tile { transform: none !important; height: auto; flex-direction: column; align-items: flex-start; padding: 16px 20px; border-radius: var(--radius-lg); }
  .wl-cloud-txt small {
    position: static !important; width: auto !important; height: auto !important;
    margin: 4px 0 0 !important; clip: auto !important; white-space: normal !important;
    overflow: visible !important; color: var(--muted); font-size: 0.88rem; line-height: 1.45;
  }
  .wl-cloud-caption { display: none; }
  .wl-glyph svg *, .wl-glyph svg [class] { animation: none !important; }
  .wl-flowline-path { animation: none !important; stroke-dasharray: none; }
}

/* ---- Combined "Why + Security" bento ---- */
.wl-bento {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4);
  grid-auto-flow: dense; margin-top: var(--space-7);
}
.wl-bento-tile {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-5);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.wl-bento-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.wl-bento-tile h3 { font-size: 1.18rem; color: var(--ink); }
.wl-bento-tile p { color: var(--muted); font-size: 0.96rem; line-height: 1.52; }
.wl-bento-ico {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: var(--brand-tint); color: var(--brand);
}
.wl-bento-ico svg { width: 24px; height: 24px; }

.wl-b-hero { grid-column: span 2; grid-row: span 2; justify-content: space-between; gap: var(--space-6); }
.wl-b-wide { grid-column: span 2; }

/* contrast variants */
.wl-bento-tile.is-brand {
  background: linear-gradient(150deg, #5e50a0 0%, #7866cc 60%, #9a8ce0 100%);
  border-color: transparent; box-shadow: 0 24px 50px rgba(94, 80, 160, 0.28);
}
.is-brand .wl-bento-kicker { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.is-brand h3 { color: #fff; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.15; margin-top: var(--space-3); }
.is-brand p { color: rgba(255, 255, 255, 0.85); font-size: 1.04rem; line-height: 1.55; margin-top: var(--space-3); }
.is-brand .btn-light { align-self: flex-start; }

.wl-bento-tile.is-dark { background: #1b1726; border-color: #2c2640; }
.is-dark h3 { color: #fff; }
.is-dark p { color: #b6b1c8; }
.is-dark .wl-bento-ico { background: rgba(255, 255, 255, 0.08); color: #c3b8f4; }

.wl-bento-tile.is-accent { background: var(--brand-tint); border-color: var(--brand-tint-2); }
.is-accent .wl-bento-ico { background: #fff; }

@media (max-width: 900px) {
  .wl-bento { grid-template-columns: repeat(2, 1fr); }
  .wl-b-hero { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 560px) {
  .wl-bento { grid-template-columns: 1fr; }
  .wl-b-hero, .wl-b-wide { grid-column: auto; }
}

/* ==========================================================================
   11. Case study / interview callout
   ========================================================================== */
.wl-feature-cs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.wl-feature-cs-media { position: relative; min-height: 380px; background: var(--brand-tint); }
.wl-feature-cs-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wl-feature-cs-body { padding: var(--space-8); }
.wl-feature-cs-body blockquote { font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.3; margin: var(--space-4) 0; }
.wl-feature-cs-author { display: flex; align-items: center; gap: 12px; margin-top: var(--space-5); }
.wl-feature-cs-author .ph { width: 46px; height: 46px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 700; }
.wl-feature-cs-author b { display: block; }
.wl-feature-cs-author span { color: var(--muted); font-size: 0.9rem; }

/* ==========================================================================
   12. AEO answer block (direct-answer for AI engines)
   ========================================================================== */
.wl-answer { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-8); }
.wl-answer p.lead { font-size: 1.25rem; color: var(--ink-2); line-height: 1.5; }
.wl-answer p.lead b { color: var(--brand); }
.wl-answer-list { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: var(--space-4); }
.wl-answer-list li { display: flex; gap: var(--space-4); align-items: flex-start; }
.wl-answer-list .n { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 0.9rem; }
.wl-answer-list b { font-family: var(--font-display); }
.wl-answer-list span { color: var(--muted); display: block; font-size: 0.96rem; }

/* Half-and-half split section (accent panel + white text, reference-style) */
.wl-split {
  display: grid; grid-template-columns: 1fr 1fr;
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-lg);
}
.wl-split-text {
  background: var(--surface); padding: var(--space-8);
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-5);
}
.wl-split-text h2 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); }
.wl-split-text .lead { font-size: 1.1rem; color: var(--ink-2); line-height: 1.55; }
.wl-split-text .lead b { color: var(--brand); }
.wl-split-text .btn { align-self: flex-start; }
.wl-split-panel {
  background: var(--wl-deep, var(--brand)); color: #fff;
  padding: var(--space-8); display: flex; align-items: center;
}
.wl-split-panel .wl-answer-list { margin: 0; width: 100%; gap: var(--space-5); }
.wl-split-panel .wl-answer-list .n { background: rgba(255,255,255,0.18); color: #fff; }
.wl-split-panel .wl-answer-list b { color: #fff; }
.wl-split-panel .wl-answer-list span { color: rgba(255,255,255,0.8); }

/* ==========================================================================
   13. FAQ
   ========================================================================== */
.wl-faq-grid { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: var(--space-8); align-items: start; }
.wl-faq-list { display: grid; gap: var(--space-3); }
.wl-faq-item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; transition: border-color var(--dur) var(--ease); }
.wl-faq-item.is-open { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.wl-faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); text-align: left; padding: var(--space-5); background: transparent; border: 0; cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; color: var(--ink); }
.wl-faq-icon { flex: none; width: 26px; height: 26px; position: relative; }
.wl-faq-icon::before, .wl-faq-icon::after { content: ""; position: absolute; top: 50%; left: 50%; background: var(--brand); border-radius: 2px; transition: transform var(--dur) var(--ease); }
.wl-faq-icon::before { width: 14px; height: 2px; transform: translate(-50%, -50%); }
.wl-faq-icon::after { width: 2px; height: 14px; transform: translate(-50%, -50%); }
.wl-faq-item.is-open .wl-faq-icon::after { transform: translate(-50%, -50%) scaleY(0); }
.wl-faq-a { max-height: 0; overflow: hidden; transition: max-height var(--dur) var(--ease); }
.wl-faq-a-inner { padding: 0 var(--space-5) var(--space-5); color: var(--muted); }

/* ==========================================================================
   14. Final CTA
   ========================================================================== */
.wl-cta { text-align: center; background: var(--ink); color: #fff; border-radius: var(--radius-lg); padding: var(--space-9) var(--space-6); position: relative; overflow: hidden; }
.wl-cta h2 { position: relative; color: #fff; font-size: clamp(2rem, 4vw, 3.2rem); }
.wl-cta p { position: relative; color: rgba(255,255,255,0.78); font-size: 1.15rem; margin-top: var(--space-4); }
.wl-cta-actions { position: relative; display: inline-flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-7); justify-content: center; }

/* ==========================================================================
   15. Footer
   ========================================================================== */
.wl-footer { background: var(--surface-2); border-top: 1px solid var(--line); padding-block: var(--space-8) var(--space-6); }
.wl-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-7); }
.wl-footer-brand img { height: 30px; width: auto; margin-bottom: var(--space-4); }
.wl-footer-brand p { color: var(--muted); font-size: 0.95rem; max-width: 320px; }
.wl-footer h4 { font-family: var(--font-body); font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); margin-bottom: var(--space-4); }
.wl-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.wl-footer a { color: var(--ink-2); font-size: 0.95rem; }
.wl-footer a:hover { color: var(--brand); }
.wl-footer-bottom { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; align-items: center; margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9rem; }

/* ==========================================================================
   16. Interviews page (Customer Stories)
   ========================================================================== */
.wl-iv-hero { padding-block: var(--space-9) var(--space-7); text-align: center; background: var(--surface); border-bottom: 1px solid var(--line); }
.wl-iv-hero h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 800; }
.wl-iv-hero p { max-width: 620px; margin: var(--space-5) auto 0; color: var(--muted); font-size: 1.2rem; }
.wl-iv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.wl-iv-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: #fff; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.wl-iv-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.wl-iv-thumb { position: relative; aspect-ratio: 16 / 9; background: var(--brand-tint); display: grid; place-items: center; overflow: hidden; }
.wl-iv-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wl-iv-play { position: relative; width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,0.92); display: grid; place-items: center; box-shadow: var(--shadow); transition: transform var(--dur) var(--ease); }
.wl-iv-card:hover .wl-iv-play { transform: scale(1.08); }
.wl-iv-play svg { width: 24px; height: 24px; color: var(--brand); margin-left: 3px; }
.wl-iv-body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.wl-iv-meta { display: flex; align-items: center; gap: 10px; }
.wl-iv-logo { height: 24px; width: auto; object-fit: contain; }
.wl-iv-tag { margin-left: auto; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--brand); background: var(--brand-tint); padding: 4px 10px; border-radius: var(--radius-pill); }
.wl-iv-card blockquote { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.35; margin: 0; }
.wl-iv-person { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--line); }
.wl-iv-person .ph { width: 42px; height: 42px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
.wl-iv-person b { display: block; font-size: 0.98rem; }
.wl-iv-person span { color: var(--muted); font-size: 0.85rem; }
.wl-iv-stats { display: flex; gap: var(--space-6); flex-wrap: wrap; padding: var(--space-2) 0 0; }
.wl-iv-stat b { font-family: var(--font-display); font-size: 1.5rem; color: var(--brand); display: block; }
.wl-iv-stat span { color: var(--muted); font-size: 0.82rem; }

/* ==========================================================================
   17. Scroll reveal
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   17. Case studies (customer carousel + founder podcast)
   ========================================================================== */
.wl-cases-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-7); }
.wl-cases-head h2 { margin-top: var(--space-3); }
.wl-cases-head p { margin-top: var(--space-3); color: var(--muted); }
.wl-cases-viewall { flex: none; margin-bottom: 6px; white-space: nowrap; }

/* Carousel */
#case-studies.wl-metrics-band {
  background: transparent;
  padding-block: 0;
}
#case-studies.wl-metrics-band .wl-container {
  max-width: var(--container);
  padding-inline: var(--gutter);
}

.wl-cases { position: relative; }
.wl-cases-track {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: var(--space-2);
}
.wl-cases-track::-webkit-scrollbar { display: none; }
.wl-case-card {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.wl-case-quote { padding: var(--space-7); display: flex; flex-direction: column; gap: var(--space-5); justify-content: center; }
.wl-case-logo { height: 26px; width: auto; object-fit: contain; align-self: flex-start; opacity: 0.85; }
.wl-case-quote blockquote { font-family: var(--font-display); font-size: clamp(1.2rem, 1.8vw, 1.6rem); line-height: 1.35; margin: 0; color: var(--ink); }
.wl-case-person { display: flex; align-items: center; gap: var(--space-3); }
.wl-case-person .ph { width: 44px; height: 44px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
.wl-case-person b { display: block; }
.wl-case-person span { color: var(--muted-2); font-size: 0.9rem; }
.wl-case-media {
  position: relative;
  background: var(--surface-3);
  border-left: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3);
  min-height: 300px;
}
.wl-case-media-ph { width: 64px; height: 64px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; }
.wl-case-media-ph svg { width: 26px; height: 26px; margin-left: 3px; }
.wl-case-media-label { color: var(--muted-2); font-size: 0.85rem; }

.wl-cases-controls { display: flex; gap: var(--space-3); justify-content: flex-end; margin-top: var(--space-5); }
.wl-cases-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  display: grid; place-items: center; cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.wl-cases-btn:hover { border-color: var(--brand); color: var(--brand); }
.wl-cases-btn:disabled { opacity: 0.4; cursor: default; }
.wl-cases-btn svg { width: 20px; height: 20px; }

/* Floating founder-podcast mini-player */
.wl-fp {
  position: fixed; right: 24px; bottom: 100px; z-index: 95;
  width: 360px; max-width: calc(100vw - 32px);
  /* hidden until the case-studies section is reached */
  opacity: 0; transform: translateY(24px); pointer-events: none; visibility: hidden;
  transition: opacity 320ms var(--ease), transform 320ms var(--ease), visibility 0s linear 320ms;
}
.wl-fp.is-live { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.wl-fp-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4);
  transform-origin: bottom right;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.wl-fp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.wl-fp-eyebrow { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand); }
.wl-fp-title { display: block; font-family: var(--font-display); font-size: 0.95rem; line-height: 1.25; margin-top: 4px; color: var(--ink); }
.wl-fp-min {
  flex: none; width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  display: grid; place-items: center; cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.wl-fp-min:hover { border-color: var(--brand); color: var(--brand); }
.wl-fp-min svg { width: 16px; height: 16px; }
.wl-fp-embed { border-radius: 12px; display: block; }
.wl-fp-links { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); font-size: 0.82rem; color: var(--muted-2); }
.wl-fp-links a { display: inline-grid; place-items: center; width: 26px; height: 26px; }
.wl-fp-links svg { width: 22px; height: 22px; }

/* Minimised launcher tab */
.wl-fp-tab {
  position: absolute; right: 0; bottom: 0;
  display: none; align-items: center; gap: var(--space-2);
  padding: 11px 18px; border-radius: var(--radius-pill);
  background: var(--brand-gradient); color: #fff; border: 0; cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: 0.9rem;
  box-shadow: var(--shadow);
  transition: filter var(--dur) var(--ease);
}
.wl-fp-tab:hover { filter: brightness(0.94); }
.wl-fp-tab svg { width: 18px; height: 18px; }

.wl-fp.is-min .wl-fp-card { opacity: 0; transform: scale(0.9) translateY(8px); pointer-events: none; }
.wl-fp.is-min .wl-fp-tab { display: inline-flex; }

/* Floating chatbot widget */
.wl-cb { position: fixed; right: 24px; bottom: 24px; z-index: 97; }
.wl-cb-fab {
  width: 60px; height: 60px; border-radius: 50%;
  /* White "liquid glass" — translucent, blurred, no colour (colour lives on Joey) */
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  color: var(--brand); border: 1px solid rgba(255, 255, 255, 0.7); cursor: pointer;
  display: grid; place-items: center;
  box-shadow: var(--shadow-lg), inset 0 1px 1px rgba(255, 255, 255, 0.9);
  transition: filter var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.wl-cb-fab:hover { filter: brightness(0.94); transform: translateY(-2px); }
.wl-cb-fab-ico { display: grid; place-items: center; position: relative; }
.wl-cb-fab-ico svg { width: 26px; height: 26px; }

/* Every Joey rendering occupies the same 46px cell on the glass disc */
.wl-cb-joey-anim,
.wl-cb-joey-still,
.wl-cb-joey-pose {
  grid-area: 1 / 1;
  width: 46px; height: 46px;
  image-rendering: pixelated;
}
.wl-cb-joey-anim,
.wl-cb-joey-still { object-fit: contain; display: block; }
.wl-cb-fab-ico .wl-cb-joey-still { display: none; }

/* Hover pose: stacked body / tail / head layers so the head can pivot on its own */
.wl-cb-fab-ico .wl-cb-joey-pose { display: none; position: relative; transform-origin: 50% 85%; }
.wl-cb-joey-pose img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.wl-cb-joey-head { transform-origin: 45% 50%; } /* neck pivot */

/* On hover: swap the idle loop for the posed Joey; head turns + tilts to "look at you" */
.wl-cb-fab:hover .wl-cb-joey-anim { display: none; }
.wl-cb-fab:hover .wl-cb-joey-pose { display: block; transform: scale(1.08) translateY(-1px); }
.wl-cb-fab:hover .wl-cb-joey-head { animation: joey-look 0.45s var(--ease) forwards; }

@keyframes joey-look {
  0%   { transform: rotate(0deg) scaleX(1); }
  55%  { transform: rotate(-15deg) scaleX(0.9); }
  100% { transform: rotate(-11deg) scaleX(0.93); }
}

/* Question mark by Joey's head — hidden until hover (brand colour against the white disc) */
.wl-cb-fab-q {
  position: absolute; top: -7px; right: -5px;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1;
  color: var(--brand); text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
  opacity: 0; transform: scale(0.4) translateY(4px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  pointer-events: none;
}
.wl-cb-fab:hover .wl-cb-fab-q {
  opacity: 1; transform: scale(1) translateY(0);
  animation: joey-q-pop 0.4s var(--ease);
}

@keyframes joey-q-pop {
  0% { transform: scale(0.4) translateY(4px); }
  60% { transform: scale(1.2) translateY(-2px); }
  100% { transform: scale(1) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .wl-cb-fab-ico .wl-cb-joey-anim { display: none; }
  .wl-cb-fab-ico .wl-cb-joey-pose { display: none; }
  .wl-cb-fab-ico .wl-cb-joey-still { display: block; }
  .wl-cb-fab:hover .wl-cb-joey-pose { display: none; }
  .wl-cb-fab:hover .wl-cb-joey-head { animation: none; }
  .wl-cb-fab:hover .wl-cb-fab-q { animation: none; }
}

.wl-cb-panel {
  position: absolute; right: 0; bottom: 76px;
  width: 380px; max-width: calc(100vw - 32px);
  height: 540px; max-height: calc(100vh - 140px);
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  overflow: hidden;
  opacity: 0; transform: translateY(16px) scale(0.98); pointer-events: none; visibility: hidden;
  transform-origin: bottom right;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.wl-cb.is-open .wl-cb-panel { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.wl-cb.is-open .wl-cb-fab-ico { display: none; }

.wl-cb-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--line); }
.wl-cb-head-id { display: flex; align-items: center; gap: var(--space-3); }
.wl-cb-head-id b { display: block; font-family: var(--font-display); font-size: 0.98rem; }
.wl-cb-status { font-size: 0.74rem; color: var(--success); display: inline-flex; align-items: center; gap: 5px; }
.wl-cb-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.wl-cb-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--brand-tint); color: var(--brand); display: grid; place-items: center; flex: none; }
.wl-cb-avatar svg { width: 20px; height: 20px; }
.wl-cb-avatar img { width: 34px; height: 34px; border-radius: 50%; object-fit: contain; image-rendering: pixelated; }
.wl-btn-ico { width: 18px; height: 18px; margin-right: 8px; vertical-align: -4px; }
.wl-cb-x { width: 32px; height: 32px; border-radius: 8px; border: 0; background: transparent; color: var(--muted-2); cursor: pointer; display: grid; place-items: center; transition: color var(--dur) var(--ease), background var(--dur) var(--ease); }
.wl-cb-x:hover { color: var(--ink); background: var(--surface-3); }
.wl-cb-x svg { width: 16px; height: 16px; }

.wl-cb-log { flex: 1; overflow-y: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.wl-cb-msg { display: flex; }
.wl-cb-msg.is-user { justify-content: flex-end; }
.wl-cb-bubble { max-width: 82%; padding: 10px 14px; border-radius: 14px; font-size: 0.92rem; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.wl-cb-msg.is-bot .wl-cb-bubble { background: var(--surface-3); color: var(--ink-2); border-bottom-left-radius: 4px; }
.wl-cb-msg.is-user .wl-cb-bubble { background: var(--brand); color: #fff; border-bottom-right-radius: 4px; }
.wl-cb-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; align-items: flex-start; }
.wl-cb-action { padding: 8px 12px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: var(--surface); color: var(--brand); font-weight: 600; font-size: 0.82rem; cursor: pointer; }
.wl-cb-action:hover { border-color: var(--brand); background: var(--brand-tint); }

.wl-cb-chips-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); margin-top: var(--space-3); }
.wl-cb-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.wl-cb-chip { padding: 8px 12px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); font-size: 0.82rem; cursor: pointer; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.wl-cb-chip:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); }

.wl-cb-typing { display: inline-flex; gap: 4px; align-items: center; }
.wl-cb-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2); opacity: 0.5; animation: wl-cb-blink 1.2s infinite ease-in-out; }
.wl-cb-typing span:nth-child(2) { animation-delay: 0.2s; }
.wl-cb-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes wl-cb-blink { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }

.wl-cb-form { display: flex; gap: var(--space-2); padding: var(--space-3); border-top: 1px solid var(--line); }
.wl-cb-input { flex: 1; min-width: 0; padding: 11px 14px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); font-family: var(--font-body); font-size: 0.92rem; color: var(--ink); outline: none; transition: border-color var(--dur) var(--ease); }
.wl-cb-input:focus { border-color: var(--brand); }
.wl-cb-send { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--brand); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background var(--dur) var(--ease); }
.wl-cb-send:hover { background: var(--brand-strong); }
.wl-cb-send:disabled { opacity: 0.5; cursor: default; }
.wl-cb-send svg { width: 18px; height: 18px; }

/* ==========================================================================
   18. Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  :root { --section-y: 88px; }
  .wl-hero-grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .wl-hero-visual { max-width: 520px; }
  .wl-tabs { grid-template-columns: 1fr; }
  .wl-step { grid-template-columns: 1fr; gap: var(--space-5); }
  .wl-step.is-reverse .wl-step-anim { order: 0; }
  .wl-step-anim { min-height: 300px; }
  .wl-chain { grid-template-columns: 1fr; }
  .wl-quoteblock { grid-template-columns: 1fr; }
  .wl-chain-arrow { transform: rotate(90deg); justify-self: center; }
  .wl-chain-band { flex-direction: column; text-align: center; }
  .wl-metrics-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
  .wl-feature-cs { grid-template-columns: 1fr; }
  .wl-feature-cs-media { min-height: 280px; }
  .wl-split { grid-template-columns: 1fr; }
  .wl-faq-grid { grid-template-columns: 1fr; }
  .wl-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  :root { --section-y: 64px; --gutter: 18px; }
  body.wl { font-size: 16px; }
  .wl-nav-links, .wl-nav-actions .btn-ghost { display: none; }
  .wl-nav-toggle { display: inline-grid; place-items: center; }
  .wl-nav.is-open .wl-nav-links {
    display: flex; position: absolute; top: 72px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
    padding: var(--space-3);
  }
  .wl-nav.is-open .wl-nav-links a { padding: 14px var(--space-4); border-radius: 10px; }
  .wl-nav.is-open .wl-nav-toggle span { background: transparent; }
  .wl-nav.is-open .wl-nav-toggle span::before { transform: translate(-50%, 0) rotate(45deg); }
  .wl-nav.is-open .wl-nav-toggle span::after { transform: translate(-50%, 0) rotate(-45deg); }
  .wl-cards { grid-template-columns: 1fr; }
  .wl-cases-head { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .wl-case-card { grid-template-columns: 1fr; }
  .wl-case-media { border-left: 0; border-top: 1px solid var(--line); min-height: 200px; order: -1; }
  .wl-fp { right: 12px; bottom: 88px; width: calc(100vw - 24px); }
  .wl-cb { right: 12px; bottom: 12px; }
  .wl-metrics-grid { grid-template-columns: 1fr 1fr; }
  .wl-iv-grid { grid-template-columns: 1fr; }
  .wl-footer-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .wl-hero-float { left: 0; bottom: -16px; }
  .wl-hero-cta .btn { flex: 1 1 auto; }
}

/* ==========================================================================
   19. Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .wl-hero-copy > *, .wl-hero-visual { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   X. Sectioned theme — alternating purple shades, glass & texture
   Fully reversible: remove the `wl-themed` class from <body> to revert.
   All rules are gated on `body.wl-themed` and only override colour/texture.
   ========================================================================== */

/* Shared deep-purple gradient + texture tokens (scoped to themed body) */
body.wl-themed {
  --wl-deep: linear-gradient(135deg, #c0287e 0%, #7a4bb0 52%, #5e50a0 100%);
  --wl-glass-bg: rgba(255, 255, 255, 0.55);
  --wl-glass-border: rgba(255, 255, 255, 0.75);
}

/* ---- 1. Hero: plain light canvas (no gradient) ---- */

/* ---- 3. Metrics band: keep the moved case-study proof clean and untextured ---- */
body.wl-themed #case-studies.wl-metrics-band {
  background: transparent;
}

/* ---- 4. "Why Wenti Labs" (AEO): lavender wash + liquid-glass panel ---- */
body.wl-themed .wl-section:has(.wl-answer) {
  background: linear-gradient(180deg, var(--brand-tint) 0%, var(--surface) 100%);
}
body.wl-themed .wl-answer {
  background: var(--wl-glass-bg);
  border-color: var(--wl-glass-border);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: var(--shadow);
}

/* ---- 6. Metrics: coloured feature block without hatch lines ---- */
body.wl-themed .wl-metrics {
  background:
    radial-gradient(60% 130% at 10% 0%, rgba(255,255,255,0.16), transparent 62%),
    radial-gradient(70% 120% at 92% 100%, rgba(166,165,255,0.24), transparent 62%),
    linear-gradient(180deg, #c0287e 0%, #7a4bb0 54%, #5e50a0 100%);
}
body.wl-themed .wl-metric .v em { color: #d9d2ff; }

/* ---- 7. Security: soft tinted band, cards as liquid-glass panels ---- */
body.wl-themed .wl-section:has(.wl-cards) {
  background:
    radial-gradient(50% 60% at 100% 0%, rgba(120,102,204,0.10), transparent 60%),
    var(--surface-2);
}
body.wl-themed .wl-card {
  background: var(--wl-glass-bg);
  border-color: var(--wl-glass-border);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}

/* ---- 8. FAQ: lavender wash + glass accordion items ---- */
body.wl-themed #faq {
  background: linear-gradient(180deg, var(--surface) 0%, var(--brand-tint) 100%);
}
body.wl-themed #faq .wl-faq-item {
  background: var(--wl-glass-bg);
  border-color: var(--wl-glass-border);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
}

/* ---- 9. CTA: deepest purple mesh, the page's strongest close ---- */
body.wl-themed .wl-cta {
  background:
    radial-gradient(55% 85% at 82% 8%, rgba(255,255,255,0.16), transparent 60%),
    radial-gradient(50% 80% at 6% 100%, rgba(236,72,153,0.35), transparent 60%),
    linear-gradient(135deg, #c0287e 0%, #6e46ad 55%, #5e50a0 100%);
}

/* Fallback: where backdrop-filter is unsupported, use solid translucent panels */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.wl-themed .wl-answer,
  body.wl-themed .wl-card,
  body.wl-themed #faq .wl-faq-item {
    background: rgba(255, 255, 255, 0.92);
  }
}