/* ============================================================
   OCTA FUNNEL — landing.css
   Single-source-of-truth para todas as landings publicas.
   Estrutura cat-XX-*: foundation, globais, atoms, molecules,
   grids, archetypes, uniques, overrides.
   ============================================================ */

/* @import url("landing-pages-legacy.css") layer(legacy-pages); — REMOVIDO 2026-05-05: arquivo migrado pra este landing.css (ver linha 7826), 404 morto */

@layer reset, tokens, base, layout,
       cat-01-foundation,
       cat-02-globais,
       cat-03-atoms,
       cat-04-molecules,
       cat-05-grids,
       cat-06-archetypes,
       cat-07-uniques,
       overrides;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html {
    background: var(--background);
    color: var(--foreground);
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  body {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
  }
  a { color: inherit; text-decoration: none; }
  button { cursor: pointer; font-family: var(--font-sans); border: none; background: transparent; }
  img { max-width: 100%; display: block; }
  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 3px; }
  ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
}

@layer tokens {
  :root {
    /* Surfaces */
    --background: #0E0E10;
    --background-2: #141416;
    --elevated: #141416;
    --foreground: #ECECEE;
    --muted: #1C1C1F;
    --muted-foreground: #8A8A94;
    --border: rgba(255,255,255,0.08);
    --border-strong: rgba(255,255,255,0.14);
    --ring: rgba(255,255,255,0.20);

    /* Brand orange */
    --accent: #F97316;
    --brand-primary: #F97316;
    --brand-primary-dark: #C2410C;
    --brand-primary-light: #7C3A12;
    --brand-orange: #F97316;
    --brand-green: #22B8CD;
    --brand-purple: #4D6BFE;
    --brand-pink: #EC4899;
    --brand-yellow: #F5E050;

    /* Aliases legacy octa-* (usados por lg-*, hp-*, e marcas inline) */
    --octa-bg: #0E0E10;
    --octa-bg-card: #141416;
    --octa-bg-subtle: #0A0D16;
    --octa-bg-hover: rgba(255,255,255,0.04);
    --octa-bg-input: rgba(255,255,255,0.04);
    --octa-text: #E2E8F0;
    --octa-text-light: #F8FAFC;
    --octa-text-secondary: rgba(255,255,255,0.5);
    --octa-text-muted: rgba(255,255,255,0.3);
    --octa-border: rgba(255,255,255,0.08);
    --octa-border-hover: rgba(255,255,255,0.12);
    --octa-primary: #F97316;
    --octa-primary-hover: #FB923C;
    --octa-primary-light: rgba(249,115,22,0.10);

    /* Plataformas (cor categórica) */
    --platform-blue-background: #1A2340;
    --platform-blue-accent: #3186FF;
    --platform-blue-foreground: #93B4F8;
    --platform-green-background: #0F2A1E;
    --platform-green-accent: #22B8CD;
    --platform-green-foreground: #6EE7B7;
    --platform-purple-background: #1F1535;
    --platform-purple-accent: #8B5CF6;
    --platform-purple-foreground: #C4B5FD;
    --platform-orange-background: #2A1A0A;
    --platform-orange-accent: #F97316;
    --platform-orange-foreground: #FDBA74;
    --platform-red-background: #2A1215;
    --platform-red-accent: #EF4444;
    --platform-red-foreground: #FCA5A5;
    --platform-yellow-background: #2A2510;
    --platform-yellow-accent: #EAB308;
    --platform-yellow-foreground: #FDE68A;
    --platform-pink-background: #2A1020;
    --platform-pink-accent: #EC4899;
    --platform-pink-foreground: #F9A8D4;

    /* Tier badges (planos) */
    --tier-basic-medium: #28282C;
    --tier-pro-medium: #F97316;
    --tier-scale-medium: #28282C;

    /* Cinzas legacy */
    --black: #ECECEE;
    --white: #0A0A0B;
    --gray-50: #141416;
    --gray-100: #1C1C1F;
    --gray-200: #28282C;
    --gray-300: #3A3A40;
    --gray-400: #6B6B73;
    --gray-500: #9A9AA3;
    --gray-600: #BBBBC3;

    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* Radius */
    --radius-sm: 2px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.20);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.30);
    --shadow-floating-sm: 0 2px 8px rgba(0,0,0,0.35), 0 0 1px rgba(0,0,0,0.20);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.40);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.50);
    --shadow-orange-glow: 0 1px 3px rgba(249,115,22,0.45), 0 0 0 1px rgba(249,115,22,0.20);

    /* Layout */
    --landing-content-width: 1280px;

    /* Motion */
    --dur-fast: 150ms;
    --dur-base: 200ms;
    --dur-slow: 300ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* DS-COMPONENTS */
    --ds-card-bg: var(--background);
    --ds-card-border: 0.5px solid var(--border-strong);
    --ds-card-radius: var(--radius-lg);
    --ds-card-padding: 24px;
    --ds-card-hover-border: rgba(249,115,22,0.50);
    --ds-card-hover-bg: rgba(249,115,22,0.065);
    --ds-status-ok: #10B981;
    --ds-status-warn: #F59E0B;
    --ds-status-down: #EF4444;
    --ds-status-info: #3186FF;
    --ds-spot-glow: rgba(249,115,22,0.20);
    --ds-channel-sms: #3186FF;
    --ds-channel-call: #8B5CF6;
    --ds-channel-wa: #25D366;
    --ds-channel-email: #F97316;
    --ds-channel-sms-bg: rgba(49, 134, 255, 0.08);
    --ds-channel-call-bg: rgba(139, 92, 246, 0.08);
    --ds-channel-wa-bg: rgba(37, 211, 102, 0.08);
    --ds-channel-email-bg: rgba(249, 115, 22, 0.08);

    /* ── Spacing scale (4px base + meios para componentes compactos) ─ */
    --space-0-5: 2px;   /* hairline — borders ornamentais, micro-shifts */
    --space-1: 4px;
    --space-1-5: 6px;   /* meio-passo — chips, badges, indicators */
    --space-2: 8px;
    --space-2-5: 10px;  /* meio-passo — inputs, forms */
    --space-3: 12px;
    --space-3-5: 14px;  /* meio-passo — menus, listas densas */
    --space-4: 16px;
    --space-4-5: 18px;  /* meio-passo — cards de prova social */
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;    /* específico — modais, hero badges */
    --space-8: 32px;
    --space-9: 36px;    /* específico — controls grandes */
    --space-10: 40px;
    --space-12: 48px;
    --space-14: 56px;
    --space-16: 64px;
    --space-20: 80px;

    /* ── Spacing semântico (componentes leem destes) ──────────── */
    --section-py: clamp(40px, 7vw, 80px);
    --hero-py-top: clamp(64px, 10vw, 112px);
    --hero-py-bot: clamp(32px, 5vw, 56px);
    --footer-py: clamp(48px, 7vw, 80px);
    --card-padding: var(--space-6);
    --card-gap: var(--space-3);
    --grid-gap: var(--space-4);
    --grid-gap-tight: var(--space-3);
    --grid-gap-loose: var(--space-6);

    /* ── Z-index scale ────────────────────────────────────────── */
    --z-below: -1;
    --z-base: 0;
    --z-content: 1;
    --z-overlap: 2;
    --z-raised: 5;
    --z-sticky: 10;
    --z-dropdown: 50;
    --z-overlay: 100;
    --z-modal: 200;
    --z-toast: 1000;

    /* ── Surface overlays (tinta branca translúcida) ───────────── */
    --surface-2: rgba(255,255,255,0.02);
    --surface-3: rgba(255,255,255,0.03);
    --surface-4: rgba(255,255,255,0.04);
    --surface-6: rgba(255,255,255,0.06);
    --surface-10: rgba(255,255,255,0.10);
    --surface-12: rgba(255,255,255,0.12);
    --surface-22: rgba(255,255,255,0.22);
    --surface-30: rgba(255,255,255,0.30);

    /* ── Cores faltantes (branco/preto puros e accent hover) ───── */
    /* NOTA: --white e --black do legacy estão INVERTIDOS — não sobrescrever.
       Use --pure-white / --pure-black quando precisar de #fff / #000 reais. */
    --pure-white: #ffffff;
    --pure-black: #000000;
    --accent-hover: #FB923C;
  }
}

@layer base {
  /* WCAG 2.3.3 — cobre TODAS as 55 animações/transições do landing.css */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* WCAG 2.4.7 — Focus visible global */
  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }
  :focus:not(:focus-visible) { outline: none; }

  .ico { display: inline-flex; color: var(--accent); flex-shrink: 0; }
  .ico svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

  .headline-xl { font-size: clamp(30px, 4.5vw, 46px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; }
  .headline-lg { font-size: clamp(26px, 3.5vw, 40px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; word-wrap: break-word; overflow-wrap: break-word; }
  .headline-md { font-size: clamp(18px, 2.5vw, 26px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
  .subheadline { font-size: 16px; font-weight: 400; color: var(--muted-foreground); line-height: 1.6; max-width: 640px; }

  .text-muted { color: var(--muted-foreground); }
  .text-center { text-align: center; }
  .mx-auto { margin-left: auto; margin-right: auto; }
  .accent { color: var(--accent); }
}

@layer layout {
  .container {
    max-width: var(--landing-content-width);
    margin: 0 auto;
    padding: 0 var(--space-6);
    position: relative;
    z-index: var(--z-content);
  }
  .section { padding: 96px 0; position: relative; }
  .section-alt { padding: 96px 0; background: var(--background-2); position: relative; }

  @media (max-width: 1100px) {
    .section, .section-alt { padding: 72px 0; }
  }
  @media (max-width: 768px) {
    .section, .section-alt { padding: var(--space-16) 0; }
  }
  @media (max-width: 600px) {
    .section, .section-alt { padding: var(--space-12) 0; }
  }
  @media (max-width: 480px) {
    .container { padding: 0 var(--space-4); }
    .section, .section-alt { padding: var(--space-10) 0; }
  }
  @media (max-width: 360px) {
    .container { padding: 0 var(--space-3); }
  }
}

@layer cat-01-foundation {
  /* Quebra de linha condicional */
  .ds-br-desktop { display: none; }
  @media (min-width: 1024px) {
    .ds-br-desktop { display: inline; }
  }

  /* Tokens grid (showcase) */
  .ds-tokens-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-3);
  }
  .ds-token {
    background: var(--background);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    font-size: 11px; font-family: var(--font-mono);
    color: var(--muted-foreground);
  }
  .ds-token-swatch {
    width: 100%; aspect-ratio: 16/9;
    border-radius: var(--radius-sm);
    border: 0.5px solid var(--border);
    margin-bottom: var(--space-2);
  }
  .ds-token-name { color: var(--foreground); font-weight: 600; }
  .ds-token-val { word-break: break-all; }
}

@layer cat-02-globais {
  /* 02.1b Floating nav (legacy) */
  .nav-wrapper {
    position: fixed; top: 16px; left: 0; right: 0;
    z-index: var(--z-overlay); padding: 0 var(--space-6); pointer-events: none;
  }
  .floating-nav {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    height: 48px;
    background: rgba(14,14,16,0.92);
    border-radius: var(--radius-xl);
    border: 0.5px solid var(--border-strong);
    padding: 0 var(--space-2) 0 var(--space-4);
    box-shadow: var(--shadow-floating-sm);
    max-width: 960px;
    margin: 0 auto;
    pointer-events: auto;
    backdrop-filter: blur(12px);
  }
  .nav-logo {
    display: flex; align-items: center; gap: var(--space-2-5);
    font-size: 15px; font-weight: 700; letter-spacing: -0.02em;
  }
  .nav-logo-icon {
    width: 28px; height: 28px;
    background: var(--black); border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    color: var(--background); font-size: 14px; font-weight: 700;
  }
  .nav-links { display: flex; gap: var(--space-0-5); justify-content: center; }
  .nav-link {
    padding: var(--space-1-5) var(--space-2-5); border-radius: var(--radius-lg); font-size: 13px; font-weight: 500;
    color: var(--muted-foreground); display: flex; align-items: center; gap: 3px;
    background: transparent; border: none; transition: all var(--dur-fast);
  }
  .nav-link:hover { color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; }
  .nav-link.active { color: var(--foreground); }
  .nav-cta { display: flex; gap: var(--space-1-5); align-items: center; }
  .nav-hamburger {
    display: none; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: var(--radius-lg); border: none;
    background: transparent; color: var(--foreground); cursor: pointer;
    transition: background var(--dur-fast); flex-shrink: 0;
  }
  .nav-hamburger:hover { background: var(--muted); }
  .nav-hamburger svg { width: 20px; height: 20px; }
  .nav-mobile-menu { display: none; }
  .nav-mobile-overlay { display: none; }

  @media (max-width: 700px) {
    .nav-links { display: none; }
    .floating-nav { grid-template-columns: auto 1fr auto; }
    .nav-cta { justify-self: end; }
    .nav-hamburger { display: flex; }
    .nav-mobile-menu {
      display: none; position: fixed; top: 64px; left: 16px; right: 16px; z-index: 101;
      background: rgba(14,14,16,0.96); border: 0.5px solid var(--border-strong);
      border-radius: var(--radius-xl); padding: var(--space-3) var(--space-2);
      flex-direction: column; gap: var(--space-0-5); backdrop-filter: blur(16px); box-shadow: var(--shadow-lg);
    }
    .nav-mobile-menu.open { display: flex; }
    .nav-mobile-menu a {
      padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); font-size: 14px; font-weight: 500;
      color: var(--muted-foreground); transition: all var(--dur-fast);
    }
    .nav-mobile-menu a:hover, .nav-mobile-menu a:active { color: var(--foreground); background: var(--muted); }
    .nav-mobile-overlay { display: none; position: fixed; inset: 0; z-index: 99; }
    .nav-mobile-overlay.open { display: block; }
  }
  @media (max-width: 480px) {
    .nav-wrapper { padding: 0 var(--space-3); top: 8px; }
    .floating-nav { padding: 0 var(--space-1-5) 0 var(--space-3); height: 44px; }
    .nav-mobile-menu { top: 56px; left: 12px; right: 12px; }
  }
  @media (max-width: 360px) {
    .floating-nav { height: 42px; padding: 0 var(--space-1) 0 var(--space-2-5); }
    .nav-mobile-menu { top: 54px; left: 8px; right: 8px; }
  }

  /* 02.2 Footer (legacy) */
  .footer {
    border-top: 0.5px solid var(--border);
    padding: var(--space-12) 0 0;
    background: var(--background);
  }
  .footer-top {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1fr;
    gap: var(--space-10); padding-bottom: var(--space-8);
  }
  .footer-logo {
    display: flex; align-items: center; gap: var(--space-2-5);
    font-size: 16px; font-weight: 700; margin-bottom: var(--space-3);
  }
  .footer-desc {
    font-size: 13px; color: var(--muted-foreground);
    line-height: 1.5; margin-bottom: var(--space-4); max-width: 320px;
  }
  .footer-socials { display: flex; gap: var(--space-2); }
  .footer-social {
    width: 32px; height: 32px; border-radius: var(--radius-md);
    border: 0.5px solid var(--border-strong); background: var(--background);
    display: flex; align-items: center; justify-content: center;
    color: var(--muted-foreground); transition: all var(--dur-fast);
  }
  .footer-social:hover { background: var(--muted); color: var(--foreground); }
  .footer-col-title {
    font-size: 12px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--muted-foreground); margin-bottom: var(--space-3-5);
  }
  .footer-links { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); padding: 0; margin: 0; }
  .footer-links a { font-size: 13px; color: var(--muted-foreground); transition: color var(--dur-fast); }
  .footer-links a:hover { color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; }
  .footer-mid {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--space-5) 0; border-top: 0.5px solid var(--border);
    flex-wrap: wrap; gap: var(--space-3);
  }
  .footer-mid-info { font-size: 12px; color: var(--muted-foreground); line-height: 1.6; }
  .footer-bottom {
    text-align: center; padding: var(--space-5) 0;
    border-top: 0.5px solid var(--border);
    font-size: 12px; color: var(--gray-500);
  }
  @media (max-width: 1100px) {
    .footer-top { grid-template-columns: 1.5fr 1fr 1fr; gap: var(--space-8); }
    .footer-top > div:last-child { grid-column: 2 / 4; }
  }
  @media (max-width: 900px) {
    .footer-top { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
    .footer-top > div:first-child { grid-column: 1 / -1; }
    .footer-top > div:last-child { grid-column: auto; }
  }
  @media (max-width: 600px) {
    .footer-top { grid-template-columns: 1fr; padding-left: var(--space-2); }
    .footer-top > div:first-child, .footer-top > div:last-child { grid-column: auto; }
  }
  @media (max-width: 480px) {
    .footer-top { gap: var(--space-6); padding-left: var(--space-3); }
    .footer-mid { flex-direction: column; text-align: center; gap: var(--space-4); }
  }

  /* Cookie banner */
  #octaCookieConsent {
    display: none; position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    z-index: 99999; width: calc(100% - 32px); max-width: 520px;
    background: #18181B; border: 1px solid var(--border);
    border-radius: var(--radius-2xl); padding: var(--space-6) var(--space-7);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    font-family: var(--font-sans);
  }
  #octaCookieConsent p { margin: 0 0 var(--space-4); font-size: 14px; line-height: 1.6; color: #A1A1AA; }
  #octaCookieConsent a { color: var(--accent); text-decoration: underline; }
  #octaCookieConsent .actions { display: flex; gap: var(--space-2-5); justify-content: flex-end; }
  #octaCookieConsent button {
    padding: var(--space-2-5) var(--space-5); border-radius: 10px; font-size: 14px; font-weight: 500;
    cursor: pointer; transition: all .15s; font-family: inherit;
  }
  #octaCookieConsent .reject {
    border: 1px solid var(--surface-12); background: transparent; color: #A1A1AA;
  }
  #octaCookieConsent .accept {
    border: none; background: var(--accent); color: var(--pure-white); font-weight: 600;
  }

  /* 02.3 Breadcrumb (ds-bc) */
  .ds-bc {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--space-1-5);
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--muted-foreground);
    list-style: none; padding: 0; margin: 0;
    word-break: break-word;
  }
  @media (min-width: 640px) {
    .ds-bc { gap: var(--space-2-5); }
  }
  .ds-bc-item {
    display: inline-flex; align-items: center; gap: var(--space-1-5);
  }
  .ds-bc-link {
    color: var(--muted-foreground);
    text-decoration: none;
    transition: color 200ms ease;
  }
  .ds-bc-link:hover { color: var(--foreground); }
  .ds-bc-page {
    font-weight: 400;
    color: var(--foreground);
  }
  .ds-bc-sep {
    display: inline-flex; align-items: center;
    color: var(--muted-foreground);
  }
  .ds-bc-sep svg {
    width: 14px; height: 14px;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .ds-bc-ellipsis {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    color: var(--muted-foreground);
    border-radius: var(--radius-md);
    cursor: default;
  }
  .ds-bc-ellipsis:hover { color: var(--foreground); }
  .ds-bc-ellipsis svg {
    width: 16px; height: 16px;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .ds-bc .sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }

  /* 02.1 Mega menu (ds-menu) */
  .ds-menu-bar {
    display: flex; align-items: center; gap: var(--space-4);
    padding: var(--space-1-5) var(--space-3) var(--space-1-5) var(--space-4);
    background: rgba(14,14,16,0.92);
    border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-floating-sm);
    width: fit-content; max-width: 100%;
    margin: 0 auto;
  }
  .ds-menu-bar-logo {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-family: var(--font-sans);
    text-decoration: none; flex-shrink: 0;
  }
  .ds-menu-bar-logo img { height: 24px; width: auto; display: block; }
  .ds-menu-bar-spacer { flex: 1; min-width: 8px; }
  .ds-menu-bar-cta {
    display: inline-flex; align-items: center; gap: var(--space-1-5);
    flex-shrink: 0;
  }
  .ds-menu-bar-cta .btn-orange-gradient {
    height: 32px; padding: 0 var(--space-3-5); font-size: 13px;
    box-shadow: none;
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .ds-menu {
    position: relative;
    display: flex; align-items: center;
    list-style: none; padding: 0; margin: 0;
    gap: 0;
  }
  .ds-menu-item { position: relative; list-style: none; }
  .ds-menu-trigger {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--space-1);
    padding: var(--space-1-5) var(--space-3-5);
    font-family: var(--font-sans); font-size: 14px; font-weight: 500;
    color: var(--muted-foreground);
    background: transparent; border: none; cursor: pointer;
    text-decoration: none;
    transition: color 200ms ease;
    border-radius: var(--radius-full);
    isolation: isolate;
  }
  .ds-menu-trigger:hover,
  .ds-menu-trigger[aria-expanded="true"] { color: var(--foreground); }
  .ds-menu-trigger-bg {
    position: absolute; inset: 0;
    border-radius: var(--radius-full);
    background: var(--surface-6);
    opacity: 0; transition: opacity 200ms ease;
    pointer-events: none; z-index: var(--z-below);
  }
  .ds-menu-trigger:hover .ds-menu-trigger-bg,
  .ds-menu-trigger[aria-expanded="true"] .ds-menu-trigger-bg { opacity: 1; }
  .ds-menu-chevron {
    width: 14px; height: 14px;
    transition: transform 200ms ease;
    flex-shrink: 0;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .ds-menu-trigger[aria-expanded="true"] .ds-menu-chevron { transform: rotate(180deg); }

  .ds-menu-panel {
    position: absolute; left: 50%; top: 100%;
    padding-top: var(--space-3);
    z-index: var(--z-overlay);
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translate(calc(-50% + var(--panel-shift, 0px)), -4px);
    transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
  }
  .ds-menu-item.is-open .ds-menu-panel,
  .ds-menu-panel:hover {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translate(calc(-50% + var(--panel-shift, 0px)), 0);
  }
  .ds-menu-panel-inner {
    display: flex; gap: var(--space-9);
    width: max-content; max-width: min(calc(100vw - 48px), 720px);
    background: var(--background-2);
    border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-lg);
  }

  /* Coluna sem header (ex: Soluções) */
  .ds-menu-col {
    min-width: 240px;
  }
  .ds-menu-col ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column;
    gap: var(--space-4-5);
  }
  /* Header de coluna (ícone + título) — usado em Segmentos/Produto/Mais */
  .ds-menu-col-head {
    display: flex; align-items: center; gap: var(--space-2-5);
    margin-bottom: var(--space-4-5); padding-bottom: var(--space-3-5);
    border-bottom: 0.5px solid var(--border);
  }
  .ds-menu-col-ico {
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-md);
    background: rgba(249,115,22,0.10);
    color: var(--accent);
    flex-shrink: 0;
  }
  .ds-menu-col-ico svg {
    width: 16px; height: 16px;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .ds-menu-col-head h3 {
    font-family: var(--font-sans);
    font-size: 13px; font-weight: 600;
    color: var(--foreground);
    margin: 0; letter-spacing: -0.01em;
    text-transform: none;
  }

  /* Link com ícone (Soluções) */
  .ds-menu-link {
    display: flex; align-items: flex-start; gap: var(--space-3);
    text-decoration: none; color: inherit;
  }
  .ds-menu-link-ico {
    flex-shrink: 0;
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    color: var(--foreground); background: transparent;
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
  }
  .ds-menu-link:hover .ds-menu-link-ico {
    background: rgba(249,115,22,0.10);
    border-color: rgba(249,115,22,0.40);
    color: var(--accent);
  }
  .ds-menu-link-ico svg {
    width: 18px; height: 18px; flex-shrink: 0;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .ds-menu-link-body {
    display: flex; flex-direction: column; gap: 3px;
    line-height: 1.35; min-width: 0;
    max-width: 280px;
  }
  .ds-menu-link-title {
    font-family: var(--font-sans);
    font-size: 13px; font-weight: 600;
    color: var(--foreground);
    margin: 0;
    transition: color 200ms ease;
  }
  .ds-menu-link:hover .ds-menu-link-title { color: var(--accent); }
  .ds-menu-link-desc {
    font-size: 12px; line-height: 1.5;
    color: var(--muted-foreground);
    margin: 0;
  }

  /* Link sem ícone (Segmentos/Produto/Mais) */
  .ds-menu-link--flat {
    display: flex; flex-direction: column; gap: 3px;
    padding: 0; max-width: 280px;
  }
  .ds-menu-link--flat .ds-menu-link-title {
    font-size: 13px; font-weight: 600;
    color: var(--foreground);
  }
  .ds-menu-link--flat:hover .ds-menu-link-title { color: var(--accent); }

  /* Coluna do Blog (sem items, só descrição) */
  .ds-menu-col-blog .ds-menu-col-blog-body {
    font-size: 13px; line-height: 1.6;
    color: var(--muted-foreground);
    max-width: 260px;
  }

  /* Layout split — sidebar de categorias + painel de detalhes (Segmentos / Mais) */
  .ds-menu-split {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 0;
    min-width: 720px;
  }
  .ds-menu-split-sidebar {
    border-right: 0.5px solid var(--border);
    padding-right: var(--space-4);
  }
  .ds-menu-split-sidebar ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column;
    gap: var(--space-1);
  }
  .ds-menu-cat {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-2-5) var(--space-3);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    color: var(--muted-foreground);
    transition: background-color 200ms ease, color 200ms ease;
  }
  .ds-menu-cat:hover,
  .ds-menu-cat.is-active {
    background: var(--surface-4);
    color: var(--foreground);
  }
  .ds-menu-cat-ico {
    flex-shrink: 0;
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-md);
    background: rgba(249,115,22,0.10);
    color: var(--accent);
    transition: background-color 200ms ease;
  }
  .ds-menu-cat.is-active .ds-menu-cat-ico {
    background: rgba(249,115,22,0.18);
  }
  .ds-menu-cat-ico svg {
    width: 16px; height: 16px;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .ds-menu-cat-label {
    flex: 1;
    font-family: var(--font-sans);
    font-size: 13px; font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
  }
  .ds-menu-cat-arrow {
    width: 14px; height: 14px;
    color: var(--accent);
    opacity: 0;
    transition: opacity 200ms ease, transform 200ms ease;
    flex-shrink: 0;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
    transform: translateX(-4px);
  }
  .ds-menu-cat.is-active .ds-menu-cat-arrow {
    opacity: 1;
    transform: translateX(0);
  }

  .ds-menu-split-content {
    padding-left: var(--space-8);
    min-width: 380px;
  }
  .ds-menu-split-panel { display: none; }
  .ds-menu-split-panel.is-active { display: block; animation: dsMenuFade 250ms ease; }
  @keyframes dsMenuFade {
    from { opacity: 0; transform: translateX(4px); }
    to { opacity: 1; transform: translateX(0); }
  }
  .ds-menu-split-panel ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column;
    gap: var(--space-4);
  }
  .ds-menu-split-panel-eyebrow {
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.10em;
    color: var(--muted-foreground);
    margin: 0 0 var(--space-3-5);
  }
  /* Bloco "Blog" inteiro como destaque visual no painel */
  .ds-menu-split-panel-blog p {
    font-size: 13px; line-height: 1.6;
    color: var(--muted-foreground);
    margin: 0 0 var(--space-4); max-width: 380px;
  }

  @media (max-width: 1024px) {
    .ds-menu-split { grid-template-columns: 240px 1fr; min-width: 640px; }
    .ds-menu-split-content { padding-left: var(--space-6); min-width: 320px; }
  }

  /* Botão Login dentro do bar (estilo trigger) */
  .ds-menu-bar-cta .ds-menu-trigger {
    color: var(--foreground);
  }

  @media (max-width: 1024px) {
    .ds-menu-panel-inner { gap: var(--space-6); padding: var(--space-5); }
    .ds-menu-col { min-width: 200px; }
  }
  @media (max-width: 768px) {
    .ds-menu, .ds-menu-bar-cta .ds-menu-trigger { display: none; }
    .ds-menu-bar { padding: var(--space-2) var(--space-4); }
  }

  /* 02.2 Footer alt (ds-footer-section) */
  .ds-footer-section {
    padding: var(--space-16) 0;
    font-family: var(--font-sans);
    background: var(--background);
  }
  @media (min-width: 768px) {
    .ds-footer-section { padding: 128px 0; }
  }
  .ds-footer-inner {
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 var(--space-6);
  }
  .ds-footer-logo {
    display: block;
    width: fit-content;
    margin: 0 auto;
    text-decoration: none;
    line-height: 0;
  }
  .ds-footer-logo img { height: 28px; width: auto; display: block; }
  .ds-footer-links {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--space-6);
    margin: var(--space-8) 0;
    font-size: 14px;
    list-style: none; padding: 0;
  }
  .ds-footer-links a {
    color: var(--muted-foreground);
    text-decoration: none;
    transition: color 150ms ease;
    display: block;
  }
  .ds-footer-links a:hover { color: var(--accent); }
  .ds-footer-socials {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--space-6);
    margin: var(--space-8) 0;
    list-style: none; padding: 0;
  }
  .ds-footer-socials a {
    color: var(--muted-foreground);
    text-decoration: none;
    transition: color 150ms ease;
    display: block;
  }
  .ds-footer-socials a:hover { color: var(--accent); }
  .ds-footer-socials svg {
    width: 24px; height: 24px;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
  }
  /* Brand glyphs (Instagram, TikTok, Threads, etc) usam fill */
  .ds-footer-socials svg.is-fill {
    fill: currentColor; stroke: none;
  }
  .ds-footer-copy {
    display: block;
    text-align: center;
    font-size: 14px;
    color: var(--muted-foreground);
  }

  /* 02.1 Octa header (estrutura) */
  .octa-stage {
    position: relative; padding: 0;
    background: var(--background);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 0.5px solid var(--border);
    overflow: visible;
    min-height: 180px;
  }

  .octa-header {
    position: relative; z-index: 30;
    padding: var(--space-4) var(--space-4) 0;
  }
  .octa-nav {
    max-width: 100%; margin: 0 auto;
    background: rgba(14,14,16,0.92);
    backdrop-filter: blur(14px);
    border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-floating-sm);
  }
  .octa-nav-inner {
    display: flex; align-items: center; gap: var(--space-3-5);
    padding: 0 var(--space-1-5) 0 var(--space-4); height: 56px;
    position: relative;
    min-width: 0;
  }

  /* Logo */
  .octa-logo {
    display: inline-flex; align-items: center;
    flex-shrink: 0;
    text-decoration: none;
  }
  .octa-logo img { height: 22px; width: auto; display: block; }

  /* Menu principal */
  .octa-menu {
    display: flex; align-items: center; gap: 1px;
    list-style: none; margin: 0; padding: 0;
    flex: 0 1 auto;
    min-width: 0;
  }
  .octa-menu-item { position: static; }
  .octa-menu-trigger {
    display: inline-flex; align-items: center; gap: 3px;
    height: 32px; padding: 0 var(--space-2-5);
    font-family: var(--font-sans); font-size: 13px; font-weight: 500;
    color: var(--muted-foreground);
    background: transparent; border: none; border-radius: var(--radius-md);
    cursor: pointer;
    transition: color var(--dur-fast), background var(--dur-fast);
    white-space: nowrap;
    text-decoration: none;
  }
  .octa-menu-trigger:hover,
  .octa-menu-trigger[aria-expanded="true"] {
    color: var(--foreground);
    background: rgba(255,255,255,0.04);
  }
  .octa-menu-chevron {
    width: 12px; height: 12px;
    stroke: currentColor; fill: none; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
    transition: transform var(--dur-base) var(--ease-out);
    opacity: 0.6;
  }
  .octa-menu-trigger[aria-expanded="true"] .octa-menu-chevron { transform: rotate(180deg); opacity: 1; }

  /* Painel dropdown */
  .octa-panel {
    position: absolute; top: calc(100% + 10px); left: 50%;
    transform: translateX(-50%) translateY(-6px);
    width: max-content; max-width: min(560px, calc(100vw - 64px));
    background: var(--background);
    backdrop-filter: blur(16px);
    border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: var(--space-3-5);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out),
                visibility var(--dur-base);
    z-index: 40;
  }
  .octa-panel.is-cols-2 { max-width: min(680px, calc(100vw - 64px)); }
  .octa-panel.is-wide { max-width: min(880px, calc(100vw - 64px)); padding: var(--space-4-5); }
  .octa-panel.is-feature { max-width: min(720px, calc(100vw - 64px)); padding: var(--space-4); }
  .octa-menu-item.is-open .octa-panel {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  /* Bridge invisível para hover não fechar entre trigger e painel */
  .octa-panel::before {
    content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px;
  }

  /* Lista de itens dentro do painel */
  .octa-panel-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-0-5); min-width: 460px; }
  .octa-panel-list.cols-2 { grid-template-columns: repeat(2, minmax(280px, 1fr)); gap: var(--space-0-5) var(--space-2); min-width: 600px; }
  .octa-panel-item {
    display: grid; grid-template-columns: 36px 1fr;
    gap: var(--space-3); align-items: start;
    padding: var(--space-2-5) var(--space-3); border-radius: var(--radius-md);
    text-decoration: none;
    transition: background var(--dur-fast);
  }
  .octa-panel-item:hover { background: rgba(249,115,22,0.06); }
  .octa-panel-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: rgba(249,115,22,0.10);
    border-radius: var(--radius-md);
    color: var(--accent); flex-shrink: 0;
  }
  .octa-panel-ico svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .octa-panel-body { display: flex; flex-direction: column; gap: var(--space-0-5); min-width: 0; }
  .octa-panel-title {
    font-size: 13px; font-weight: 600;
    color: var(--foreground); line-height: 1.35;
  }
  .octa-panel-desc {
    font-size: 12px; color: var(--muted-foreground);
    line-height: 1.5;
    max-width: 240px;
    overflow-wrap: break-word;
  }

  /* Painel "Mais" — split lista + Blog (sutil, sem destaque chamativo) */
  .octa-panel-feature {
    display: grid; grid-template-columns: 260px 280px; gap: var(--space-3);
    min-width: 560px;
  }
  .octa-panel-feature-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-0-5); }
  .octa-feature {
    display: flex; flex-direction: column; gap: var(--space-2);
    padding: var(--space-2);
    border-radius: var(--radius-md);
    background: var(--surface-3);
    border: 0.5px solid var(--border);
  }
  .octa-feature-main {
    display: grid; grid-template-columns: 36px 1fr;
    gap: var(--space-3); align-items: start;
    padding: var(--space-2) var(--space-2-5); border-radius: var(--radius-md);
    text-decoration: none;
    transition: background var(--dur-fast);
  }
  .octa-feature-main:hover { background: var(--muted); }
  a.octa-feature-post { text-decoration: none; }
  a.octa-feature-post:hover { background: var(--surface-3); }
  .octa-feature-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: rgba(249,115,22,0.10);
    border-radius: var(--radius-md);
    color: var(--accent); flex-shrink: 0;
  }
  .octa-feature-ico svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .octa-feature-body { display: flex; flex-direction: column; gap: var(--space-0-5); min-width: 0; }
  .octa-feature-title {
    font-size: 13px; font-weight: 600;
    color: var(--foreground); line-height: 1.35;
  }
  .octa-feature-desc {
    font-size: 12px; color: var(--muted-foreground);
    line-height: 1.5;
  }
  .octa-feature-post {
    display: block;
    margin: 0;
    padding: var(--space-2-5) var(--space-3);
    border-top: 0.5px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 11.5px; color: var(--muted-foreground);
    line-height: 1.5;
    transition: background var(--dur-fast);
  }
  .octa-feature-post-label {
    color: var(--muted-foreground); opacity: 0.7;
    margin-right: var(--space-0-5);
  }
  .octa-feature-post-title {
    color: var(--foreground); font-weight: 500;
  }
  .octa-feature-foot {
    margin: 0;
    padding: 0 var(--space-1) var(--space-0-5);
    display: flex; justify-content: flex-start;
  }
  .octa-link-btn {
    display: inline-flex; align-items: center; gap: var(--space-1);
    height: 28px; padding: 0 var(--space-2-5);
    font-family: var(--font-sans); font-size: 12px; font-weight: 500;
    color: var(--muted-foreground);
    background: transparent;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all var(--dur-fast);
  }
  .octa-link-btn:hover {
    color: var(--foreground);
    border-color: var(--ring);
    background: rgba(255,255,255,0.03);
  }
  .octa-link-btn svg {
    width: 12px; height: 12px;
    stroke: currentColor; fill: none; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
    transition: transform var(--dur-fast);
  }
  .octa-link-btn:hover svg { transform: translateX(2px); }

  /* 02.1 Header painel/CTAs/burger/mobile */
  .octa-panel-split { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-4-5); min-width: 720px; }
  .octa-panel-cats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-0-5); border-right: 0.5px solid var(--border); padding-right: var(--space-3); }
  .octa-panel-cat {
    display: flex; align-items: center; gap: var(--space-2-5);
    padding: var(--space-2-5) var(--space-3); border-radius: var(--radius-md);
    background: transparent; border: none; cursor: pointer;
    color: var(--muted-foreground); text-align: left;
    font-family: var(--font-sans); font-size: 12.5px; font-weight: 500;
    transition: all var(--dur-fast);
  }
  .octa-panel-cat svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
  .octa-panel-cat:hover { color: var(--foreground); background: rgba(255,255,255,0.04); }
  .octa-panel-cat.is-active { color: var(--accent); background: rgba(249,115,22,0.08); }
  .octa-panel-cat-arrow { margin-left: auto; opacity: 0; transition: opacity var(--dur-fast); }
  .octa-panel-cat.is-active .octa-panel-cat-arrow { opacity: 1; }
  .octa-panel-pane { display: none; }
  .octa-panel-pane.is-active { display: block; }
  .octa-panel-pane-eyebrow {
    font-family: var(--font-mono); font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.10em;
    color: var(--accent); margin: var(--space-1) var(--space-3) var(--space-2-5);
  }
  .octa-panel-pane ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-0-5); }
  .octa-panel-flat {
    display: block; padding: var(--space-2-5) var(--space-3); border-radius: var(--radius-md);
    text-decoration: none;
    transition: background var(--dur-fast);
  }
  .octa-panel-flat:hover { background: rgba(249,115,22,0.06); }
  .octa-panel-flat .octa-panel-title { display: block; }
  .octa-panel-flat .octa-panel-desc { display: block; margin-top: var(--space-0-5); }

  /* CTAs à direita */
  .octa-cta {
    display: flex; align-items: center; gap: var(--space-1-5);
    flex-shrink: 0; margin-left: auto;
  }
  .octa-btn {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-sans); font-size: 13px; font-weight: 500;
    height: 32px; padding: 0 var(--space-3);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none; cursor: pointer; border: none;
    transition: all var(--dur-fast);
    white-space: nowrap;
  }
  .octa-btn:active { transform: scale(0.96); transition: transform 80ms ease; }
  .octa-btn-ghost {
    background: transparent; color: var(--foreground);
    border: 1px solid var(--border-strong);
  }
  .octa-btn-ghost:hover { background: var(--muted); }
  .octa-btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--brand-primary-dark));
    color: var(--pure-white); border: 1px solid var(--brand-primary-dark);
    box-shadow: var(--shadow-orange-glow);
  }
  .octa-btn-primary:hover { opacity: 0.92; }

  /* Hamburguer mobile */
  .octa-burger {
    display: none; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: var(--radius-md);
    background: transparent; border: none; cursor: pointer;
    color: var(--foreground);
    transition: background var(--dur-fast);
    flex-shrink: 0;
  }
  .octa-burger:hover { background: var(--muted); }
  .octa-burger svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .octa-burger .ico-close { display: none; }
  .octa-burger[aria-expanded="true"] .ico-open { display: none; }
  .octa-burger[aria-expanded="true"] .ico-close { display: block; }

  /* Mobile drawer */
  .octa-mobile {
    position: absolute; top: calc(100% + 8px); left: 16px; right: 16px;
    background: rgba(14,14,16,0.96);
    backdrop-filter: blur(16px);
    border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: var(--space-3-5);
    display: none;
    max-height: 70vh; overflow-y: auto;
    z-index: 35;
  }
  .octa-mobile[data-state="open"] { display: block; }
  .octa-mobile-section { padding: var(--space-1-5) 0; }
  .octa-mobile-section + .octa-mobile-section { border-top: 0.5px solid var(--border); margin-top: var(--space-1-5); padding-top: var(--space-3); }
  .octa-mobile-label {
    font-family: var(--font-mono); font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.10em;
    color: var(--muted-foreground); margin: 0 var(--space-3) var(--space-2);
  }
  .octa-mobile-link {
    display: block; padding: var(--space-2-5) var(--space-3); border-radius: var(--radius-md);
    font-size: 14px; color: var(--foreground); font-weight: 500;
    text-decoration: none;
    transition: background var(--dur-fast);
  }
  .octa-mobile-link:hover { background: var(--muted); }
  .octa-mobile-link span {
    display: block; font-size: 12px; font-weight: 400;
    color: var(--muted-foreground); margin-top: var(--space-0-5);
  }
  .octa-mobile-cta { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-1) var(--space-1); }
  .octa-mobile-cta .octa-btn { width: 100%; height: 40px; }

  /* Stage tip — info abaixo do header demo */
  .octa-stage-body {
    padding: 130px var(--space-8) var(--space-8); text-align: center;
    color: var(--muted-foreground); font-size: 12px;
    max-width: 600px; margin: 0 auto;
    font-family: var(--font-mono);
  }
  .octa-stage-body kbd {
    display: inline-block; padding: var(--space-0-5) 7px; margin: 0 var(--space-0-5);
    font-family: var(--font-mono); font-size: 10px;
    background: rgba(255,255,255,0.06); border: 0.5px solid var(--border-strong);
    border-radius: 4px; color: var(--foreground);
  }

  /* Responsivo do header */
  @media (max-width: 1100px) {
    .octa-menu-trigger { padding: 0 var(--space-2); font-size: 12.5px; }
    .octa-nav-inner { gap: var(--space-2-5); }
  }
  @media (max-width: 980px) {
    .octa-menu, .octa-cta { display: none; }
    .octa-nav-inner { padding: 0 var(--space-3); height: 52px; }
    .octa-burger { display: inline-flex; margin-left: auto; }
    .octa-stage-body { padding: 110px var(--space-4) var(--space-6); }
  }
  /* Painéis — quando container é estreito, ajustar mínimos */
  @media (max-width: 760px) {
    .octa-panel-list, .octa-panel-list.cols-2,
    .octa-panel-feature, .octa-panel-split { min-width: 0; }
    .octa-panel-list.cols-2 { grid-template-columns: 1fr; }
    .octa-panel-feature { grid-template-columns: 1fr; }
  }

  /* 02.3 Breadcrumb (octa-bc) */
  .octa-bc-stage {
    background: var(--background);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-4);
  }
  .octa-bc-stage + .octa-bc-stage { margin-top: 0; }
  .octa-bc-stage-eyebrow {
    font-family: var(--font-mono); font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.10em;
    color: var(--muted-foreground); margin-bottom: var(--space-2-5);
    display: flex; align-items: baseline; gap: var(--space-2);
  }
  .octa-bc-stage-eyebrow code {
    font-family: var(--font-mono); font-size: 10px; font-weight: 500;
    color: var(--accent); text-transform: none; letter-spacing: 0;
    background: rgba(249,115,22,0.08); padding: 1px var(--space-1-5); border-radius: 3px;
  }

  /* Componente raiz */
  .octa-bc {
    width: 100%;
  }
  .octa-bc-list {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--space-1-5); margin: 0; padding: 0; list-style: none;
    font-family: var(--font-sans); font-size: 13px;
    color: var(--muted-foreground); line-height: 1.4;
  }
  @media (min-width: 640px) { .octa-bc-list { gap: var(--space-2-5); } }

  .octa-bc-item {
    display: inline-flex; align-items: center; gap: var(--space-1-5);
  }
  @media (min-width: 640px) { .octa-bc-item { gap: var(--space-2-5); } }

  .octa-bc-link {
    display: inline-flex; align-items: center; gap: var(--space-1);
    color: var(--muted-foreground);
    text-decoration: none;
    transition: color var(--dur-fast);
    border-radius: var(--radius-sm);
  }
  .octa-bc-link:hover { color: var(--foreground); }
  .octa-bc-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(249,115,22,0.40);
  }

  .octa-bc-link-ico {
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .octa-bc-link-ico svg {
    width: 14px; height: 14px;
    stroke: currentColor; fill: none; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
  }

  .octa-bc-page {
    display: inline-flex; align-items: center;
    color: var(--foreground); font-weight: 500;
    cursor: default;
  }

  .octa-bc-sep {
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--muted-foreground);
    opacity: 0.5;
    flex-shrink: 0;
  }
  .octa-bc-sep svg {
    width: 14px; height: 14px;
    stroke: currentColor; fill: none; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .octa-bc-sep.is-slash {
    font-family: var(--font-sans); font-size: 13px; font-weight: 300;
    opacity: 0.4;
  }

  /* Ellipsis (overflow) */
  .octa-bc-ellipsis {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    color: var(--muted-foreground);
    background: transparent; border: none; border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--dur-fast);
  }
  .octa-bc-ellipsis:hover { color: var(--foreground); background: rgba(255,255,255,0.04); }
  .octa-bc-ellipsis svg {
    width: 14px; height: 14px;
    stroke: currentColor; fill: none; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
  }

  /* Variante background-flat (em hero/topo de página com fundo escuro) */
  .octa-bc-stage--flat { background: transparent; border: none; padding: var(--space-3) 0; }

  /* Schema preview */
  .octa-bc-schema {
    margin-top: var(--space-3-5); padding: var(--space-3) var(--space-3-5);
    background: rgba(255,255,255,0.02);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-md);
    font-family: var(--font-mono); font-size: 10.5px; line-height: 1.55;
    color: var(--muted-foreground);
    overflow-x: auto;
    white-space: pre;
  }
  .octa-bc-schema-label {
    display: block;
    font-family: var(--font-mono); font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.10em;
    color: var(--accent); margin-bottom: var(--space-2);
    white-space: normal;
  }
  .octa-bc-schema .k { color: var(--accent); }
  .octa-bc-schema .s { color: var(--platform-blue-foreground); }
  .octa-bc-schema .n { color: var(--platform-green-foreground); }

  /* 02.2 Footer (octa-footer) */
  .octa-footer {
    font-family: var(--font-sans);
    background: var(--background);
    /* border removido — Rubens 2026-05-05 (footer é continuidade do site, não caixa) */
    overflow: hidden;
  }

  .octa-footer-inner {
    max-width: 1200px; margin: 0 auto;
    padding: var(--space-8) var(--space-7) var(--space-7);
  }
  @media (min-width: 768px) {
    .octa-footer-inner { padding: var(--space-12) var(--space-10) var(--space-8); }
  }

  /* ─────────────── TOP STRIP (brand + slogan) ─────────────── */
  .octa-footer-top {
    display: flex; flex-direction: column; gap: var(--space-4);
    padding-bottom: var(--space-10);
    max-width: 520px;
  }
  .octa-footer-logo {
    display: inline-flex; width: fit-content;
    text-decoration: none; line-height: 0;
  }
  .octa-footer-logo img { height: 28px; width: auto; display: block; }
  .octa-footer-slogan {
    font-size: 18px; font-weight: 600;
    color: var(--foreground); letter-spacing: -0.015em;
    line-height: 1.4; margin: 0;
  }
  .octa-footer-slogan .accent {
    color: var(--accent);
  }

  /* ─────────────── GRID 4 COLUNAS ─────────────── */
  .octa-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    padding: var(--space-9) 0;
    border-top: 0.5px solid var(--border);
  }
  @media (min-width: 560px) {
    .octa-footer-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-9) var(--space-10); }
  }
  @media (min-width: 900px) {
    .octa-footer-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-10); padding: 44px 0; }
  }

  .octa-footer-col { display: flex; flex-direction: column; gap: var(--space-4); }
  .octa-footer-col-title {
    font-family: var(--font-sans); font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--muted-foreground);
    margin: 0;
  }
  .octa-footer-col-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: var(--space-3);
    font-size: 13.5px;
  }
  .octa-footer-col-list a {
    color: var(--foreground);
    text-decoration: none;
    transition: color var(--dur-fast), transform var(--dur-fast);
    display: inline-flex; align-items: center; gap: var(--space-1-5);
    width: fit-content;
  }
  .octa-footer-col-list a:hover { color: var(--accent); }

  /* ─────────────── INSTITUTIONAL BAR (Suporte + CTA) ─────────────── */
  .octa-footer-bar {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    padding: var(--space-5) 0 var(--space-7);
    border-top: 0.5px solid var(--border);
  }
  @media (min-width: 700px) {
    .octa-footer-bar {
      grid-template-columns: 1fr auto;
      gap: var(--space-4);
      align-items: center;
    }
  }
  .octa-footer-card {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-1) 0;
    min-height: 56px;
  }
  .octa-footer-card-ico {
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    width: 32px; height: 32px;
    color: var(--muted-foreground);
  }
  .octa-footer-card-ico svg {
    width: 16px; height: 16px;
    stroke: currentColor; fill: none; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .octa-footer-card-body { display: flex; flex-direction: column; gap: var(--space-0-5); min-width: 0; }
  .octa-footer-card-label {
    font-family: var(--font-sans); font-size: 10.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.10em;
    color: var(--muted-foreground);
  }
  .octa-footer-card-value {
    font-size: 13px; font-weight: 500; color: var(--foreground);
    line-height: 1.45;
  }
  .octa-footer-card-value span {
    color: var(--muted-foreground); font-weight: 400;
  }

  /* CTA card — botão primário gradient */
  .octa-footer-cta-card { padding: 0; background: transparent; border: none; min-height: auto; }
  .octa-footer-cta-btn {
    display: inline-flex; align-items: center; gap: var(--space-2);
    height: 44px; padding: 0 22px;
    font-family: var(--font-sans); font-size: 14px; font-weight: 500;
    color: var(--pure-white);
    background: linear-gradient(135deg, var(--accent), var(--brand-primary-dark));
    border: 1px solid var(--brand-primary-dark);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-orange-glow);
    text-decoration: none;
    transition: all var(--dur-fast);
    white-space: nowrap;
  }
  .octa-footer-cta-btn:hover { opacity: 0.92; transform: translateY(-1px); }
  .octa-footer-cta-btn:active { transform: scale(0.97); }
  .octa-footer-cta-btn svg {
    width: 14px; height: 14px;
    stroke: currentColor; fill: none; stroke-width: 2.2;
    stroke-linecap: round; stroke-linejoin: round;
    transition: transform var(--dur-fast);
  }
  .octa-footer-cta-btn:hover svg { transform: translateX(3px); }

  /* ─────────────── BOTTOM BAR (minimal) ─────────────── */
  .octa-footer-bottom {
    padding-top: var(--space-6);
    border-top: 0.5px solid var(--border);
    display: flex; flex-direction: column; gap: var(--space-3);
  }
  @media (min-width: 560px) {
    .octa-footer-bottom {
      flex-direction: row; align-items: center; gap: var(--space-4) 22px; flex-wrap: wrap;
    }
  }

  .octa-footer-copy {
    font-size: 12px; color: var(--muted-foreground);
  }
  .octa-footer-legal {
    display: flex; flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    list-style: none; padding: 0; margin: 0;
    font-size: 12px;
  }
  .octa-footer-legal li { display: inline-flex; align-items: center; }
  .octa-footer-legal li + li::before {
    content: "";
    display: inline-block; width: 2px; height: 2px;
    border-radius: 50%; background: var(--muted-foreground);
    opacity: 0.4; margin-right: var(--space-4);
  }
  .octa-footer-legal a, .octa-footer-legal button {
    color: var(--muted-foreground);
    text-decoration: none;
    transition: color var(--dur-fast);
    background: none; border: none; padding: 0;
    font: inherit; cursor: pointer;
  }
  .octa-footer-legal a:hover, .octa-footer-legal button:hover {
    color: var(--foreground);
  }

  /* Socials — agora dentro do top brand strip (logo abaixo do slogan) */
  .octa-footer-socials {
    display: flex; flex-wrap: wrap;
    gap: var(--space-1); margin: var(--space-2) 0 0;
    list-style: none; padding: 0;
  }
  .octa-footer-socials a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    color: var(--muted-foreground);
    border-radius: var(--radius-md);
    transition: all var(--dur-fast);
  }
  .octa-footer-socials a:hover {
    color: var(--foreground);
    background: rgba(255,255,255,0.05);
  }
  .octa-footer-socials svg {
    width: 18px; height: 18px;
    fill: currentColor;
    display: block;
  }
}

@layer cat-03-atoms {
  /* 03.1/03.2 Buttons base */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1-5);
    font-family: var(--font-sans); font-size: 14px; font-weight: 500;
    white-space: nowrap; cursor: pointer; border: none;
    transition: all var(--dur-fast); border-radius: var(--radius-lg); text-decoration: none;
  }
  .btn:active { transform: scale(0.95); transition: transform 80ms ease; }
  .btn-default { background: var(--black); color: var(--background); height: 36px; padding: 0 var(--space-4-5); }
  .btn-default:hover { opacity: 0.82; }
  .btn-default.sm, .btn-sm { height: 32px; padding: 0 var(--space-3-5); font-size: 13px; }
  .btn-default.lg, .btn-lg { height: 44px; padding: 0 var(--space-7); font-size: 15px; }

  .btn-orange-gradient {
    background: linear-gradient(135deg, var(--accent), var(--brand-primary-dark));
    color: var(--pure-white); height: 44px; padding: 0 var(--space-7);
    border: 1px solid var(--brand-primary-dark);
    font-size: 15px;
  }
  .btn-orange-gradient:hover { opacity: 0.92; }
  .btn-orange-gradient .btn-arrow {
    display: inline-block; width: 0; overflow: hidden;
    transition: width 250ms var(--ease-back), margin-left 250ms var(--ease-back);
    margin-left: 0;
  }
  .btn-orange-gradient:hover .btn-arrow { width: 14px; margin-left: var(--space-1-5); }

  .btn-pro-gradient {
    background: linear-gradient(135deg, var(--accent), var(--brand-primary-dark));
    color: var(--pure-white); height: 36px; padding: 0 var(--space-4-5);
    border: 1px solid var(--brand-primary-dark);
  }
  .btn-pro-gradient:hover { opacity: 0.9; }

  .btn-gray-gradient {
    background: linear-gradient(135deg, var(--foreground), #D4D4D8);
    color: var(--background); height: 36px; padding: 0 var(--space-4-5);
    border: 1px solid var(--surface-12); box-shadow: 0 1px 4px rgba(0,0,0,.3);
  }
  .btn-gray-gradient:hover { opacity: 0.9; }

  .btn-ghost {
    background: transparent; color: var(--foreground);
    height: 44px; padding: 0 var(--space-7);
    border: 1px solid var(--border-strong);
    font-size: 15px; border-radius: var(--radius-lg);
  }
  .btn-ghost:hover { background: var(--muted); }

  /* 03.9 Spin border (badge) */
  .spin-border {
    position: absolute; inset: -0.5px;
    border-radius: inherit; z-index: var(--z-below); pointer-events: none;
  }

  .ds-spin-border {
    position: relative; isolation: isolate;
    background: var(--background); color: var(--muted-foreground);
    border-radius: var(--radius-full);
    padding: 5px var(--space-3-5);
    font-size: 12px; font-weight: 500;
    display: inline-flex; align-items: center; gap: var(--space-2);
  }
  .ds-spin-border::before {
    content: ''; position: absolute; inset: -1px; z-index: -2;
    border-radius: inherit;
    background: conic-gradient(from var(--ds-spin-angle, 0deg),
      transparent 0deg, transparent 270deg,
      var(--accent) 320deg, var(--accent-hover) 340deg, transparent 360deg);
    animation: dsSpinAngle 4s linear infinite;
  }
  .ds-spin-border::after {
    content: ''; position: absolute; inset: 1px; z-index: var(--z-below);
    border-radius: inherit;
    background: var(--background);
  }
  @property --ds-spin-angle {
    syntax: '<angle>'; initial-value: 0deg; inherits: false;
  }
  @keyframes dsSpinAngle {
    to { --ds-spin-angle: 360deg; }
  }
  /* fallback — navegadores sem @property animam o conic via background-position rotation */
  @supports not (background: conic-gradient(from 0deg, red, red)) {
    .ds-spin-border::before { animation: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ds-spin-border::before { animation: none; }
  }

  /* 03.4-03.8 Atoms (disclaim/divider/form) + 06.12 Form lead */
.octa-form-lead-*/.octa-form-microcopy) ---- */
  .octa-disclaim {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px; line-height: 1.55;
    color: var(--muted-foreground); opacity: 0.7;
    margin-top: var(--space-2);
  }
  .octa-disclaim::before { content: "*"; margin-right: var(--space-1); color: var(--accent); opacity: 0.9; }

  .octa-divider {
    border: 0; height: 0.5px;
    background: var(--border); opacity: 0.6;
    margin: var(--space-4) 0;
  }
  .octa-divider-label {
    display: flex; align-items: center; gap: var(--space-3);
    font-family: var(--font-mono); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.10em;
    color: var(--muted-foreground); opacity: 0.7;
    margin: var(--space-4) 0;
  }
  .octa-divider-label::before, .octa-divider-label::after {
    content: ""; flex: 1; height: 0.5px;
    background: var(--border); opacity: 0.6;
  }

  /* Form canônico — cópia fiel de /signup (signup.php linhas 210-261).
     Renomeado .form-* → .octa-form-* para isolamento. Tokens equivalentes:
     --bg-muted → --background-2 · --fg-muted → --muted-foreground · --brand → --accent. */
  .octa-form-group { margin-bottom: var(--space-4); max-width: 380px; }
  .octa-form-group label {
    display: block;
    font-family: var(--font-sans); font-size: 13px; font-weight: 500;
    color: var(--muted-foreground); margin-bottom: var(--space-1-5);
  }
  .octa-form-group label .optional {
    font-weight: 400; color: var(--muted-foreground); opacity: 0.6;
  }
  .octa-form-input {
    width: 100%; height: 44px; padding: 0 var(--space-3-5);
    background: var(--background-2);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    color: var(--foreground);
    font-family: var(--font-sans); font-size: 14px; font-weight: 400;
    outline: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
  }
  .octa-form-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(249,115,22,0.18);
  }
  .octa-form-input::placeholder { color: var(--muted-foreground); opacity: 0.5; }
  .octa-form-phone-group { display: flex; gap: var(--space-2); }
  .octa-form-phone-group .octa-form-country-code {
    width: 64px; flex-shrink: 0; text-align: center;
    font-family: var(--font-mono); font-size: 13px; font-weight: 500;
    cursor: default;
  }
  .octa-form-phone-group .octa-form-phone-number { flex: 1; }

  /* Form Lead (06.12) — wrapper card + checkbox LGPD + helper + microcopy.
     Reusa .octa-form-group/.octa-form-input do bloco acima. CTA é o canônico
     .btn.btn-orange-gradient.(do landing.css), full-width. */
  .octa-form-lead {
    max-width: 460px;
    padding: var(--space-8);
    background: var(--background-2);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-6);
  }
  @media (max-width: 540px) { .octa-form-lead { padding: var(--space-6) var(--space-5); } }
  .octa-form-lead-head { margin-bottom: var(--space-6); }
  .octa-form-lead-title {
    font-family: var(--font-sans); font-size: 22px; font-weight: 700;
    letter-spacing: -0.02em; line-height: 1.25;
    color: var(--foreground); margin: 0 0 var(--space-1-5);
  }
  .octa-form-lead-sub {
    font-size: 13px; line-height: 1.6;
    color: var(--muted-foreground); margin: 0;
  }
  .octa-form-helper {
    display: block;
    margin-top: var(--space-1-5);
    font-size: 12px; line-height: 1.5;
    color: var(--muted-foreground); opacity: 0.75;
  }
  .octa-form-lgpd {
    display: flex; align-items: flex-start; gap: var(--space-2-5);
    padding: var(--space-1) 0; margin: var(--space-1) 0 var(--space-4-5);
    cursor: pointer;
    font-size: 12.5px; line-height: 1.5;
    color: var(--muted-foreground);
  }
  .octa-form-lgpd input[type="checkbox"] {
    flex-shrink: 0;
    width: 16px; height: 16px; margin: var(--space-0-5) 0 0;
    accent-color: var(--accent);
    cursor: pointer;
  }
  .octa-form-lgpd a { color: var(--accent); text-decoration: none; }
  .octa-form-lgpd a:hover { opacity: 0.85; text-decoration: underline; }
  .octa-form-lead .btn { width: 100%; justify-content: center; }
  .octa-form-microcopy {
    display: flex; align-items: center; justify-content: center; gap: var(--space-2);
    margin-top: var(--space-3);
    font-family: var(--font-mono); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--muted-foreground); opacity: 0.7;
  }
  .octa-form-microcopy svg {
    width: 12px; height: 12px;
    stroke: currentColor; fill: none; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
  }
}

@layer cat-04-molecules {
  /* Reveal + hero fade-in */
  .reveal {
    opacity: 0; transform: translateY(24px);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  }
  .reveal.visible { opacity: 1; transform: translateY(0); }
  .reveal-delay-1 { transition-delay: 0.1s; }
  .reveal-delay-2 { transition-delay: 0.2s; }
  .reveal-delay-3 { transition-delay: 0.3s; }

  .hero-fade {
    opacity: 0; transform: translateY(20px);
    animation: heroFadeIn 0.8s var(--ease-out) forwards;
  }
  .hero-fade-1 { animation-delay: 0.4s; }
  .hero-fade-2 { animation-delay: 0.9s; }
  .hero-fade-3 { animation-delay: 1.3s; }
  .hero-fade-4 { animation-delay: 1.6s; }
  @keyframes heroFadeIn { to { opacity: 1; transform: translateY(0); } }
  @media (prefers-reduced-motion: reduce) {
    .reveal, .hero-fade { opacity: 1; transform: none; transition: none; animation: none; }
  }

  /* 04 Expanding search */
  .ds-search {
    position: relative; display: inline-flex; align-items: center;
  }
  .ds-search-input {
    width: 40px; height: 40px;
    background: var(--background);
    border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-full);
    color: var(--foreground); font-family: inherit; font-size: 14px;
    padding: 0 var(--space-3-5) 0 var(--space-10);
    transition: width var(--dur-base), border-color var(--dur-fast);
    cursor: pointer;
  }
  .ds-search-input:focus,
  .ds-search.is-open .ds-search-input {
    width: 320px;
    outline: none; cursor: text;
    border-color: var(--accent);
  }
  .ds-search-ico {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--muted-foreground); pointer-events: none;
  }
  .ds-search-ico svg { width: 16px; height: 16px; }
  .ds-search-input::placeholder { color: var(--muted-foreground); }
  .ds-search-results {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0;
    background: var(--background-2);
    border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    max-height: 300px; overflow-y: auto;
    display: none; z-index: var(--z-dropdown);
  }
  .ds-search.is-open .ds-search-results.has-results { display: block; }
  .ds-search-result {
    padding: var(--space-2-5) var(--space-3-5); font-size: 13px;
    color: var(--muted-foreground); cursor: pointer;
    border-bottom: 0.5px solid var(--border);
  }
  .ds-search-result:hover { background: rgba(249,115,22,0.06); color: var(--foreground); }
  .ds-search-result:last-child { border-bottom: none; }

  /* 04 Custom select */
  .ds-select { position: relative; display: inline-block; }
  .ds-select-trigger {
    display: inline-flex; align-items: center; gap: var(--space-2);
    background: var(--background);
    border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    font-size: 13px; font-weight: 500; color: var(--foreground);
    font-family: inherit; cursor: pointer; min-width: 180px;
    transition: border-color var(--dur-fast);
  }
  .ds-select-trigger:hover { border-color: rgba(249,115,22,0.30); }
  .ds-select.is-open .ds-select-trigger { border-color: var(--accent); }
  .ds-select-trigger .ds-select-label { flex: 1; text-align: left; }
  .ds-select-trigger svg { width: 14px; height: 14px; color: var(--muted-foreground); transition: transform var(--dur-fast); }
  .ds-select.is-open .ds-select-trigger svg { transform: rotate(180deg); }
  .ds-select-menu {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0;
    background: var(--background-2);
    border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-1);
    list-style: none; margin: 0;
    display: none; z-index: var(--z-dropdown);
    max-height: 280px; overflow-y: auto;
  }
  .ds-select.is-open .ds-select-menu { display: block; }
  .ds-select-option {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
    font-size: 13px; color: var(--muted-foreground);
    cursor: pointer; transition: background var(--dur-fast);
  }
  .ds-select-option:hover { background: var(--surface-4); color: var(--foreground); }
  .ds-select-option[aria-selected="true"] { color: var(--accent); }
  .ds-select-option[aria-selected="true"]::after {
    content: '\2713'; color: var(--accent); font-weight: 700;
  }

  /* 04.2 Logo Octa (mask) */
  .ds-octa-mark {
    display: inline-flex;
    flex-shrink: 0;
    width: 1em; height: 1em;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'%3E%3Cpath d='M390.68 778.88 Q389.94 780.15 387.84 779.72 Q374.57 777.04 362.88 769.42 Q356.32 765.15 347.93 756.27 Q346.49 754.75 336.37 744.85 C324.63 733.38 312.67 720.44 301.01 708.99 C289.42 697.62 273.22 690.53 257.51 688.28 Q251.18 687.37 240.75 687.49 Q210.35 687.85 186.52 687.82 Q179.91 687.81 174.90 687.38 C145.95 684.91 122.34 665.60 114.46 637.59 Q112.77 631.56 112.50 621.31 C111.84 596.73 112.42 570.10 112.29 554.75 C112.10 534.06 106.25 515.35 92.14 500.17 Q87.82 495.53 61.57 470.01 C52.55 461.24 40.76 449.90 34.28 443.25 Q27.31 436.11 22.93 426.19 Q16.75 412.19 17.17 397.03 Q17.44 387.36 19.73 380.22 C23.48 368.49 29.19 358.24 37.94 349.69 Q48.69 339.18 87.25 301.01 Q102.37 286.03 108.49 267.04 Q112.34 255.10 112.23 238.49 Q111.97 202.21 112.73 173.77 Q112.99 163.74 116.84 153.59 C125.44 130.90 143.60 115.87 167.36 110.75 Q173.02 109.54 184.23 109.51 Q211.18 109.46 241.50 109.70 C250.31 109.77 261.17 109.19 269.98 106.17 Q282.81 101.78 289.94 97.17 C296.62 92.85 302.62 86.88 308.70 80.80 Q330.44 59.04 352.64 35.89 C362.55 25.55 374.66 19.28 388.70 16.26 C401.38 13.53 413.64 15.21 425.60 19.64 C435.08 23.14 442.74 29.03 449.65 36.22 Q453.45 40.17 453.46 40.18 Q474.41 61.26 502.40 89.61 Q507.04 94.31 515.15 98.86 Q527.24 105.64 542.02 108.36 Q550.29 109.88 570.52 109.71 Q581.55 109.61 603.15 109.52 Q627.39 109.41 632.30 110.22 Q647.54 112.74 660.95 121.55 C670.52 127.84 677.05 136.40 682.49 146.41 Q689.15 158.66 689.68 173.72 Q690.03 183.50 688.52 190.72 Q684.79 208.58 674.67 222.41 C668.36 231.02 658.92 239.10 648.67 245.18 Q636.31 252.50 625.80 256.28 C618.95 258.75 610.15 261.83 602.36 262.99 Q596.08 263.92 595.95 263.95 C591.03 264.93 586.61 264.76 581.51 265.39 Q577.99 265.83 573.49 265.92 Q557.73 266.25 549.18 265.80 Q547.06 265.68 534.84 264.96 Q524.13 264.33 520.54 263.90 Q502.83 261.78 478.12 259.44 Q445.27 256.32 408.00 255.77 C393.98 255.57 377.49 256.32 366.00 256.76 Q340.82 257.73 310.00 261.31 Q265.23 266.52 232.02 278.02 C218.84 282.58 205.24 288.31 194.78 298.28 C183.61 308.93 178.86 321.96 182.43 336.84 C185.40 349.23 193.63 357.50 203.45 366.84 Q207.53 370.72 215.31 377.46 Q232.37 392.23 242.35 401.90 Q256.82 415.93 271.06 433.68 C289.86 457.12 307.45 482.27 322.45 509.06 Q345.28 549.84 359.75 591.47 C362.61 599.71 368.34 615.69 371.79 628.43 Q380.59 660.90 385.18 691.46 Q386.42 699.69 386.98 705.09 C387.75 712.54 388.45 716.02 389.08 723.31 Q391.30 749.04 391.07 774.81 Q391.05 776.18 391.08 776.68 Q391.15 778.08 390.68 778.88 Z'/%3E%3Cpath d='M411.95 779.04 Q411.19 771.93 411.63 762.78 C412.32 748.40 413.07 729.46 414.83 713.47 C420.23 664.37 431.93 616.71 450.91 570.65 Q459.48 549.85 467.65 533.35 Q485.30 497.72 508.19 465.17 Q517.47 451.98 531.73 433.97 Q551.87 408.53 577.28 385.04 Q594.00 369.59 606.79 359.57 C629.16 342.05 654.40 327.39 682.56 320.06 C691.22 317.80 702.04 316.21 710.98 317.17 C722.69 318.43 735.19 321.82 743.96 330.29 Q752.91 338.93 759.96 345.64 Q770.02 355.20 774.50 362.26 C786.67 381.47 788.21 405.31 779.27 426.27 C775.25 435.70 769.78 441.75 762.34 448.85 Q754.11 456.70 747.17 463.68 C734.82 476.08 721.25 488.03 710.71 499.44 Q695.47 515.93 691.27 537.20 Q689.67 545.31 689.81 566.39 Q690.07 605.29 689.80 617.50 C689.62 625.79 689.30 633.78 686.76 641.08 Q683.33 650.96 677.86 659.02 C667.48 674.33 649.62 683.96 631.45 686.80 Q626.31 687.61 617.49 687.69 C599.23 687.87 581.31 687.84 560.58 687.59 Q548.36 687.44 541.50 688.82 C526.52 691.84 512.14 698.31 501.18 709.01 C485.71 724.12 470.34 740.44 464.73 745.98 Q454.47 756.12 453.34 757.27 Q445.40 765.32 441.55 768.08 Q428.64 777.33 413.22 780.00 A1.09 1.09 0 0 1 411.95 779.04 Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'%3E%3Cpath d='M390.68 778.88 Q389.94 780.15 387.84 779.72 Q374.57 777.04 362.88 769.42 Q356.32 765.15 347.93 756.27 Q346.49 754.75 336.37 744.85 C324.63 733.38 312.67 720.44 301.01 708.99 C289.42 697.62 273.22 690.53 257.51 688.28 Q251.18 687.37 240.75 687.49 Q210.35 687.85 186.52 687.82 Q179.91 687.81 174.90 687.38 C145.95 684.91 122.34 665.60 114.46 637.59 Q112.77 631.56 112.50 621.31 C111.84 596.73 112.42 570.10 112.29 554.75 C112.10 534.06 106.25 515.35 92.14 500.17 Q87.82 495.53 61.57 470.01 C52.55 461.24 40.76 449.90 34.28 443.25 Q27.31 436.11 22.93 426.19 Q16.75 412.19 17.17 397.03 Q17.44 387.36 19.73 380.22 C23.48 368.49 29.19 358.24 37.94 349.69 Q48.69 339.18 87.25 301.01 Q102.37 286.03 108.49 267.04 Q112.34 255.10 112.23 238.49 Q111.97 202.21 112.73 173.77 Q112.99 163.74 116.84 153.59 C125.44 130.90 143.60 115.87 167.36 110.75 Q173.02 109.54 184.23 109.51 Q211.18 109.46 241.50 109.70 C250.31 109.77 261.17 109.19 269.98 106.17 Q282.81 101.78 289.94 97.17 C296.62 92.85 302.62 86.88 308.70 80.80 Q330.44 59.04 352.64 35.89 C362.55 25.55 374.66 19.28 388.70 16.26 C401.38 13.53 413.64 15.21 425.60 19.64 C435.08 23.14 442.74 29.03 449.65 36.22 Q453.45 40.17 453.46 40.18 Q474.41 61.26 502.40 89.61 Q507.04 94.31 515.15 98.86 Q527.24 105.64 542.02 108.36 Q550.29 109.88 570.52 109.71 Q581.55 109.61 603.15 109.52 Q627.39 109.41 632.30 110.22 Q647.54 112.74 660.95 121.55 C670.52 127.84 677.05 136.40 682.49 146.41 Q689.15 158.66 689.68 173.72 Q690.03 183.50 688.52 190.72 Q684.79 208.58 674.67 222.41 C668.36 231.02 658.92 239.10 648.67 245.18 Q636.31 252.50 625.80 256.28 C618.95 258.75 610.15 261.83 602.36 262.99 Q596.08 263.92 595.95 263.95 C591.03 264.93 586.61 264.76 581.51 265.39 Q577.99 265.83 573.49 265.92 Q557.73 266.25 549.18 265.80 Q547.06 265.68 534.84 264.96 Q524.13 264.33 520.54 263.90 Q502.83 261.78 478.12 259.44 Q445.27 256.32 408.00 255.77 C393.98 255.57 377.49 256.32 366.00 256.76 Q340.82 257.73 310.00 261.31 Q265.23 266.52 232.02 278.02 C218.84 282.58 205.24 288.31 194.78 298.28 C183.61 308.93 178.86 321.96 182.43 336.84 C185.40 349.23 193.63 357.50 203.45 366.84 Q207.53 370.72 215.31 377.46 Q232.37 392.23 242.35 401.90 Q256.82 415.93 271.06 433.68 C289.86 457.12 307.45 482.27 322.45 509.06 Q345.28 549.84 359.75 591.47 C362.61 599.71 368.34 615.69 371.79 628.43 Q380.59 660.90 385.18 691.46 Q386.42 699.69 386.98 705.09 C387.75 712.54 388.45 716.02 389.08 723.31 Q391.30 749.04 391.07 774.81 Q391.05 776.18 391.08 776.68 Q391.15 778.08 390.68 778.88 Z'/%3E%3Cpath d='M411.95 779.04 Q411.19 771.93 411.63 762.78 C412.32 748.40 413.07 729.46 414.83 713.47 C420.23 664.37 431.93 616.71 450.91 570.65 Q459.48 549.85 467.65 533.35 Q485.30 497.72 508.19 465.17 Q517.47 451.98 531.73 433.97 Q551.87 408.53 577.28 385.04 Q594.00 369.59 606.79 359.57 C629.16 342.05 654.40 327.39 682.56 320.06 C691.22 317.80 702.04 316.21 710.98 317.17 C722.69 318.43 735.19 321.82 743.96 330.29 Q752.91 338.93 759.96 345.64 Q770.02 355.20 774.50 362.26 C786.67 381.47 788.21 405.31 779.27 426.27 C775.25 435.70 769.78 441.75 762.34 448.85 Q754.11 456.70 747.17 463.68 C734.82 476.08 721.25 488.03 710.71 499.44 Q695.47 515.93 691.27 537.20 Q689.67 545.31 689.81 566.39 Q690.07 605.29 689.80 617.50 C689.62 625.79 689.30 633.78 686.76 641.08 Q683.33 650.96 677.86 659.02 C667.48 674.33 649.62 683.96 631.45 686.80 Q626.31 687.61 617.49 687.69 C599.23 687.87 581.31 687.84 560.58 687.59 Q548.36 687.44 541.50 688.82 C526.52 691.84 512.14 698.31 501.18 709.01 C485.71 724.12 470.34 740.44 464.73 745.98 Q454.47 756.12 453.34 757.27 Q445.40 765.32 441.55 768.08 Q428.64 777.33 413.22 780.00 A1.09 1.09 0 0 1 411.95 779.04 Z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
  }

  /* 04.16 Sidebar nav */
  .octa-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  .octa-sidebar-nav-search {
    position: sticky;
    top: 0;
    padding: var(--space-1) 0 var(--space-3);
    z-index: var(--z-overlap);
    border-bottom: 0.5px solid var(--border);
  }
  .octa-sidebar-nav-search-input {
    width: 100%;
    padding: 9px var(--space-3) 9px 34px;
    border-radius: var(--radius-md);
    border: 0.5px solid var(--border-strong);
    background: var(--background-2);
    color: var(--foreground);
    font-size: 13px;
    font-family: inherit;
    transition: border-color var(--dur-fast);
  }
  .octa-sidebar-nav-search-input::placeholder { color: var(--muted-foreground); opacity: 0.5; }
  .octa-sidebar-nav-search-input:focus {
    outline: none;
    border-color: var(--accent);
  }
  .octa-sidebar-nav-search-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted-foreground);
    pointer-events: none;
  }
  .octa-sidebar-nav-search-icon svg {
    width: 14px; height: 14px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }
  .octa-sidebar-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
  }
  .octa-sidebar-nav-label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted-foreground);
    opacity: 0.7;
    padding: var(--space-3) var(--space-3) var(--space-1-5);
  }
  .octa-sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 500;
    color: var(--muted-foreground);
    text-decoration: none;
    transition: background var(--dur-fast), color var(--dur-fast);
  }
  .octa-sidebar-nav-item:hover {
    background: var(--muted);
    color: var(--foreground);
  }
  .octa-sidebar-nav-item[aria-current="page"],
  .octa-sidebar-nav-item.is-active {
    background: rgba(249, 115, 22, 0.08);
    color: var(--accent);
  }
  .octa-sidebar-nav-item-num {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted-foreground);
    flex-shrink: 0;
    min-width: 18px;
  }
  .octa-sidebar-nav-item[aria-current="page"] .octa-sidebar-nav-item-num,
  .octa-sidebar-nav-item.is-active .octa-sidebar-nav-item-num {
    color: var(--accent);
  }
  .octa-sidebar-nav-item-count {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted-foreground);
    opacity: 0.6;
  }
  /* Chevron à direita — alternativa ao counter, usado em docs/legal sem contagem */
  .octa-sidebar-nav-item-chev {
    margin-left: auto;
    display: inline-flex;
    color: var(--muted-foreground);
    opacity: 0.5;
    transition: transform var(--dur-fast), opacity var(--dur-fast);
  }
  .octa-sidebar-nav-item-chev svg {
    width: 12px; height: 12px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }
  .octa-sidebar-nav-item:hover .octa-sidebar-nav-item-chev {
    opacity: 1;
    transform: translateX(2px);
  }
  .octa-sidebar-nav-item[aria-current="page"] .octa-sidebar-nav-item-chev,
  .octa-sidebar-nav-item.is-active .octa-sidebar-nav-item-chev {
    opacity: 1;
    color: var(--accent);
  }
  /* Mobile drawer: sidebar vira <details> clicável */
  @media (max-width: 768px) {
    .octa-sidebar-nav-search { position: static; }
    .octa-sidebar-nav[data-mobile-drawer] {
      border: 0.5px solid var(--border);
      border-radius: var(--radius-md);
      padding: var(--space-3);
    }
  }

  /* 04.17 TOC */
  .octa-toc {
    display: flex;
    flex-direction: column;
    gap: var(--space-1-5);
  }
  .octa-toc-label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted-foreground);
    opacity: 0.7;
    margin-bottom: var(--space-2);
  }
  .octa-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
    border-left: 0.5px solid var(--border);
  }
  .octa-toc-item {
    position: relative;
    display: block;
    padding: var(--space-1-5) var(--space-3);
    margin-left: -0.5px;
    border-left: 1.5px solid transparent;
    font-size: 12px;
    line-height: 1.5;
    color: var(--muted-foreground);
    text-decoration: none;
    transition: color var(--dur-fast), border-color var(--dur-fast);
  }
  .octa-toc-item:hover { color: var(--foreground); }
  .octa-toc-item[aria-current="location"],
  .octa-toc-item.is-active {
    color: var(--accent);
    border-left-color: var(--accent);
  }
  .octa-toc-item.is-h3 { padding-left: var(--space-6); font-size: 11.5px; }

  /* 04.19 Feedback artigo */
  .octa-feedback {
    border: 0.5px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    padding: var(--space-5) var(--space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    background: var(--background-2);
  }
  .octa-feedback-q {
    font-size: 13px;
    font-weight: 500;
    color: var(--foreground);
    margin: 0;
  }
  .octa-feedback-actions {
    display: flex;
    gap: var(--space-2);
  }
  .octa-feedback-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    border: 0.5px solid var(--border-strong);
    background: var(--background);
    color: var(--foreground);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--dur-fast);
  }
  .octa-feedback-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
  }
  .octa-feedback-btn svg {
    width: 14px; height: 14px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }
  .octa-feedback[data-answered] .octa-feedback-actions { display: none; }
  .octa-feedback-thanks {
    display: none;
    font-size: 13px;
    color: var(--muted-foreground);
  }
  .octa-feedback[data-answered] .octa-feedback-thanks { display: block; }

  /* 04.20 Prev/next */
  .octa-prevnext {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin: var(--space-8) 0;
  }
  .octa-prevnext-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-1-5);
    padding: var(--space-4-5) var(--space-5);
    border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    background: var(--background);
    transition: border-color var(--dur-fast), background var(--dur-fast);
  }
  .octa-prevnext-card:hover {
    border-color: var(--accent);
    background: rgba(249, 115, 22, 0.04);
  }
  .octa-prevnext-card.is-next { text-align: right; align-items: flex-end; }
  .octa-prevnext-dir {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted-foreground);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
  }
  .octa-prevnext-card.is-next .octa-prevnext-dir { flex-direction: row-reverse; }
  .octa-prevnext-dir svg {
    width: 14px; height: 14px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }
  .octa-prevnext-title {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--foreground);
    line-height: 1.4;
  }
  @media (max-width: 640px) {
    .octa-prevnext { grid-template-columns: 1fr; }
    .octa-prevnext-card.is-next { text-align: left; align-items: flex-start; }
    .octa-prevnext-card.is-next .octa-prevnext-dir { flex-direction: row; }
  }

  /* 04.21 Paginacao */
  .octa-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    margin: var(--space-8) auto;
    list-style: none;
    padding: 0;
  }
  .octa-pagination-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 var(--space-2-5);
    border-radius: var(--radius-md);
    border: 0.5px solid transparent;
    background: transparent;
    color: var(--muted-foreground);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--dur-fast);
  }
  .octa-pagination-item:hover {
    border-color: var(--border-strong);
    color: var(--foreground);
  }
  .octa-pagination-item[aria-current="page"],
  .octa-pagination-item.is-active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
    cursor: default;
  }
  .octa-pagination-item[disabled],
  .octa-pagination-item.is-disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }
  .octa-pagination-item svg {
    width: 14px; height: 14px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }
  .octa-pagination-ellipsis {
    color: var(--muted-foreground);
    padding: 0 var(--space-1);
    font-family: var(--font-mono);
    font-size: 13px;
  }

  /* 04.22 Compartilhar */
  .octa-share {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
  }
  .octa-share-label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted-foreground);
    margin-right: var(--space-1);
  }
  .octa-share-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    border: 0.5px solid var(--border-strong);
    background: var(--background);
    color: var(--muted-foreground);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--dur-fast);
  }
  .octa-share-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(249, 115, 22, 0.06);
  }
  .octa-share-btn svg {
    width: 16px; height: 16px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }
  .octa-share-btn[data-copied] {
    border-color: var(--accent);
    color: var(--accent);
  }

  /* 04.6 Counter */
  .octa-counter {
    font-family: var(--font-mono);
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 700;
    color: var(--accent);
    letter-spacing: -0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    display: inline-block;
  }
  .octa-counter-prefix,
  .octa-counter-suffix {
    color: var(--accent);
    font-weight: 700;
  }
  .octa-counter-label {
    display: block;
    margin-top: var(--space-2);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted-foreground);
  }

  /* 04.7 Progress bar */
  .octa-progress {
    width: 100%;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--muted);
    overflow: hidden;
    position: relative;
  }
  .octa-progress.is-thin { height: 4px; }
  .octa-progress.is-thick { height: 10px; }
  .octa-progress-fill {
    height: 100%;
    width: var(--progress, 0%);
    background: linear-gradient(90deg, var(--accent), var(--brand-primary-dark));
    border-radius: inherit;
    transition: width var(--dur-slow) var(--ease-out);
  }
  .octa-progress-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--space-2);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted-foreground);
  }
  .octa-progress-meta b {
    color: var(--foreground);
    font-weight: 600;
  }

  /* 04.8 Toast */
  .octa-toast {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--space-3-5);
    padding: var(--space-4) var(--space-4-5);
    border-radius: var(--radius-md);
    border: 0.5px solid var(--border-strong);
    background: var(--background-2);
    box-shadow: var(--shadow-md);
    max-width: 420px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  /* bg-dots dentro do toast — atrás do conteúdo */
  .octa-toast > .octa-bento-bg-dots {
    z-index: var(--z-base);
    border-radius: inherit;
    pointer-events: none;
  }
  .octa-toast > *:not(.octa-bento-bg-dots) {
    position: relative;
    z-index: var(--z-content);
  }
  .octa-toast-icon {
    width: 36px; height: 36px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0;
  }
  .octa-toast-icon svg {
    width: 18px; height: 18px;
    stroke: currentColor; fill: none;
    stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round;
  }
  .octa-toast-body { flex: 1; min-width: 0; }
  .octa-toast-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--foreground);
    line-height: 1.35;
    margin: 0;
  }
  .octa-toast-desc {
    font-size: 12px;
    color: var(--muted-foreground);
    line-height: 1.5;
    margin: var(--space-1) 0 0;
  }
  .octa-toast-close {
    flex-shrink: 0;
    width: 18px; height: 18px;
    background: transparent;
    border: 0;
    color: var(--muted-foreground);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: color var(--dur-fast);
  }
  .octa-toast-close:hover { color: var(--foreground); }
  .octa-toast-close svg {
    width: 14px; height: 14px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }
  /* Variantes de cor */
  .octa-toast.is-success .octa-toast-icon {
    background: rgba(16, 185, 129, 0.15);
    color: var(--ds-status-ok);
  }
  .octa-toast.is-info .octa-toast-icon {
    background: rgba(49, 134, 255, 0.15);
    color: var(--ds-status-info);
  }
  .octa-toast.is-warn .octa-toast-icon {
    background: rgba(245, 158, 11, 0.15);
    color: var(--ds-status-warn);
  }
  .octa-toast.is-error .octa-toast-icon {
    background: rgba(239, 68, 68, 0.15);
    color: var(--ds-status-down);
  }

  /* 04.10 Meta linha */
  .octa-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .octa-meta > * {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
  }
  .octa-meta > * + *::before {
    content: '·';
    margin-right: var(--space-2);
    opacity: 0.5;
  }
  .octa-meta svg {
    width: 12px; height: 12px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }
  .octa-meta b {
    color: var(--foreground);
    font-weight: 600;
  }

  /* 04.12 Skip-link WCAG */
  .octa-skiplink {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-100%);
    padding: var(--space-3) var(--space-5);
    background: var(--accent);
    color: var(--pure-white);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 var(--radius-md) 0;
    z-index: var(--z-toast);
    transition: transform var(--dur-fast) var(--ease-out);
  }
  .octa-skiplink:focus,
  .octa-skiplink:focus-visible {
    transform: translateY(0);
    outline: 2px solid var(--pure-white);
    outline-offset: 2px;
  }
  /* Variantes só do demo — força estados visuais sem precisar Tab real */
  .octa-skiplink.is-demo-focused {
    transform: translateY(0);
    outline: 2px solid var(--pure-white);
    outline-offset: 2px;
  }
  .octa-skiplink-demo-link:hover { transform: translateY(0); }

  /* Demo wrapper — mostra "topo da página" simulado com 2 estados lado a lado */
  .octa-skiplink-demo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin: 0 auto;
  }
  @media (max-width: 720px) { .octa-skiplink-demo { grid-template-columns: 1fr; } }
  .octa-skiplink-stage {
    display: flex;
    flex-direction: column;
    gap: var(--space-2-5);
  }
  .octa-skiplink-stage-label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted-foreground);
  }
  .octa-skiplink-frame {
    position: relative;
    overflow: hidden;
    background: var(--background);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-md);
    min-height: 160px;
  }
  .octa-skiplink-frame-inner {
    padding: var(--space-6) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2-5);
  }
  .octa-skiplink-frame-tag {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted-foreground);
    opacity: 0.7;
  }
  .octa-skiplink-frame-hint {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--muted-foreground);
  }
  .octa-skiplink-frame-hint code,
  .octa-skiplink-frame-hint kbd {
    background: var(--surface-6);
    border-radius: var(--radius-sm);
    padding: 1px var(--space-1-5);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--foreground);
    border: 0.5px solid var(--border);
  }
  .octa-skiplink-demo-foot {
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface-3);
    border: 0.5px solid var(--border);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--muted-foreground);
    display: flex;
    align-items: flex-start;
    gap: var(--space-2-5);
  }
  .octa-skiplink-demo-foot svg {
    width: 14px; height: 14px; flex-shrink: 0;
    margin-top: var(--space-0-5);
    stroke: var(--accent); fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }
  .octa-skiplink-demo-foot b { color: var(--foreground); }
  .octa-skiplink-demo-foot code {
    background: var(--surface-6);
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    color: var(--foreground);
  }

  /* 04.13 Lead + 04.14 Twocol + 06.11 Editorial prose */
  .octa-lead {
    font-family: var(--font-sans);
    font-size: clamp(15px, 1.6vw, 17px);
    font-weight: 400; line-height: 1.55;
    color: var(--muted-foreground);
    max-width: 680px;
    margin: 0 0 var(--space-4);
    letter-spacing: -0.005em;
  }
  .octa-lead b, .octa-lead strong { color: var(--foreground); font-weight: 600; }
  .octa-lead a { color: var(--accent); text-decoration: none; }
  .octa-lead a:hover { opacity: 0.85; text-decoration: underline; }

  .octa-prose {
    font-family: var(--font-sans);
    font-size: 14.5px;
    font-weight: 400; line-height: 1.65;
    color: var(--muted-foreground);
    max-width: 680px;
    margin: 0 0 var(--space-3-5);
  }
  .octa-prose b, .octa-prose strong { color: var(--foreground); font-weight: 600; }
  .octa-prose em { font-style: italic; }
  .octa-prose a { color: var(--accent); text-decoration: none; }
  .octa-prose a:hover { opacity: 0.85; text-decoration: underline; }
  .octa-prose code {
    font-family: var(--font-mono); font-size: 0.92em;
    padding: 1px 5px; border-radius: 4px;
    background: var(--background-2); color: var(--foreground);
    border: 0.5px solid var(--border);
  }
  /* Listas dentro de prose editorial — marker custom (accent), substitui ::marker nativo
     Aplica em <ul class="octa-prose">, <ol class="octa-prose"> e em ul/ol descendentes
     de qualquer .octa-prose wrapper. Marker nativo era cinza, mal alinhado e fora da caixa. */
  .octa-prose ol,
  ol.octa-prose,
  .octa-prose ul,
  ul.octa-prose {
    list-style: none;
    padding-left: 0;
    margin: 0 0 var(--space-3-5);
    color: var(--muted-foreground);
    line-height: 1.65;
  }
  /* UL · marker = quadrado pequeno accent (ergonomia mono · alinha com x-height do texto) */
  .octa-prose ul > li,
  ul.octa-prose > li {
    position: relative;
    padding-left: 18px;
    margin: var(--space-2) 0;
  }
  .octa-prose ul > li::before,
  ul.octa-prose > li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.65em;
    width: 5px;
    height: 5px;
    background: var(--accent);
    border-radius: 1px;
  }
  /* OL · contador em mono caps accent · começa em 01., 02. */
  .octa-prose ol,
  ol.octa-prose {
    counter-reset: octa-prose-default-num;
  }
  .octa-prose ol > li,
  ol.octa-prose > li {
    counter-increment: octa-prose-default-num;
    position: relative;
    padding-left: 32px;
    margin: var(--space-2) 0;
  }
  .octa-prose ol > li::before,
  ol.octa-prose > li::before {
    content: counter(octa-prose-default-num, decimal-leading-zero) ".";
    position: absolute;
    left: 0;
    top: 0.05em;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--accent);
  }
  /* Listas aninhadas: 2º nível usa marker mais discreto (apenas barrinha 0.5px) */
  .octa-prose ul ul > li::before,
  ul.octa-prose ul > li::before {
    background: var(--muted-foreground);
    width: 4px;
    height: 1px;
    top: 0.85em;
  }

  /* Headings pra editorial (CAT 06.11) — usados como classes utility quando
     o markup não envolve tudo num .octa-prose. Replicam o token tipográfico
     canônico com escalas fixas pra densidade controlada. */
  .octa-prose-h1 {
    font-family: var(--font-sans); font-size: 30px; font-weight: 700;
    letter-spacing: -0.02em; line-height: 1.2;
    color: var(--foreground); margin: 0 0 var(--space-3);
  }
  .octa-prose-h2 {
    font-family: var(--font-sans); font-size: 24px; font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--foreground); margin: 0 0 var(--space-2-5);
  }
  .octa-prose-h2.is-after { margin-top: var(--space-7); margin-bottom: var(--space-2-5); }
  .octa-prose-h3 {
    font-family: var(--font-sans); font-size: 20px; font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--foreground); margin: 0 0 var(--space-2);
  }
  .octa-prose-h3.is-after { margin-top: var(--space-7); margin-bottom: var(--space-4); }

  .octa-twocol {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6) var(--space-8);
    max-width: 920px;
    margin: 0 0 var(--space-4);
  }
  .octa-twocol.is-6040 { grid-template-columns: 1.5fr 1fr; }
  .octa-twocol.is-4060 { grid-template-columns: 1fr 1.5fr; }
  .octa-twocol > div { min-width: 0; }
  .octa-twocol-label {
    display: inline-block;
    font-family: var(--font-mono); font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.10em;
    color: var(--muted-foreground); opacity: 0.7;
    margin-bottom: var(--space-2);
  }
  .octa-twocol-label.is-bad { color: var(--ds-status-down); opacity: 0.85; }
  .octa-twocol-label.is-good { color: var(--accent); opacity: 1; }
  @media (max-width: 720px) {
    .octa-twocol, .octa-twocol.is-6040, .octa-twocol.is-4060 {
      grid-template-columns: 1fr;
    }
  }
}

@layer cat-05-grids {
  /* 05.4 Bento (ds-bento) */
  .ds-bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(140px, auto);
    gap: var(--space-3);
  }
  .ds-bento-item {
    background: var(--ds-card-bg);
    border: var(--ds-card-border);
    border-radius: var(--ds-card-radius);
    padding: var(--ds-card-padding);
    position: relative; overflow: hidden;
    transition: transform var(--dur-slow) cubic-bezier(0,0,0.2,1),
                border-color var(--dur-slow) cubic-bezier(0,0,0.2,1),
                background var(--dur-slow) cubic-bezier(0,0,0.2,1);
    display: flex; flex-direction: column;
  }
  .ds-bento-item:hover {
    transform: translateY(-3px);
    border-color: var(--ds-card-hover-border);
    background: var(--ds-card-hover-bg);
  }
  .ds-bento-item::before {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(249,115,22,0.18) 1px, transparent 1px);
    background-size: 16px 16px; border-radius: inherit;
    pointer-events: none; opacity: 0;
    transition: opacity var(--dur-slow);
  }
  .ds-bento-item:hover::before { opacity: 1; }
  .ds-bento-item > * { position: relative; z-index: var(--z-content); }
  .ds-bento-item.col-2 { grid-column: span 2; }
  .ds-bento-item.col-3 { grid-column: span 3; }
  .ds-bento-item.row-2 { grid-row: span 2; }
  .ds-bento-ico {
    width: 36px; height: 36px; border-radius: var(--radius-md);
    background: rgba(249,115,22,0.10);
    display: flex; align-items: center; justify-content: center;
    color: var(--accent); margin-bottom: var(--space-3-5);
  }
  .ds-bento-ico svg { width: 18px; height: 18px; }
  .ds-bento-item h3 { font-size: 16px; font-weight: 600; margin-bottom: var(--space-1-5); }
  .ds-bento-item p { font-size: 13px; color: var(--muted-foreground); line-height: 1.5; }
  .ds-bento-link {
    margin-top: auto; padding-top: var(--space-3);
    font-size: 12px; font-weight: 500; color: var(--accent);
    display: inline-flex; align-items: center; gap: var(--space-1);
  }
  .ds-bento--problem .ds-bento-ico { background: rgba(239,68,68,0.10); color: var(--ds-status-down); }
  .ds-bento--crosslink .ds-bento-ico { background: rgba(49,134,255,0.10); color: var(--ds-status-info); }

  /* 05.4 Bento aceternity */
  .ds-bento-acet {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 22rem;
    gap: var(--space-4);
    width: 100%;
  }
  .ds-bento-acet-card {
    position: relative;
    display: flex; flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: var(--background);
    border: 1px solid var(--surface-10);
    box-shadow: 0 -20px 80px -20px var(--surface-12) inset;
    transition: transform var(--dur-slow) var(--ease-back);
  }
  .ds-bento-acet-card.col-2 { grid-column: span 2; }
  .ds-bento-acet-card.col-3 { grid-column: span 3; }

  /* Background decorativo (número gigante atrás) */
  .ds-bento-acet-card-bg {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: flex-end;
    padding: 0 var(--space-8);
    pointer-events: none;
    color: var(--surface-4);
    overflow: hidden;
  }
  .ds-bento-acet-bgnum {
    font-family: var(--font-sans);
    font-size: clamp(120px, 22vw, 280px);
    font-weight: 800;
    line-height: 0.85;
    letter-spacing: -0.04em;
    color: rgba(249,115,22,0.06);
    -webkit-text-stroke: 1px rgba(249,115,22,0.12);
    transition: color var(--dur-slow), -webkit-text-stroke-color var(--dur-slow), transform var(--dur-slow) var(--ease-back);
  }
  .ds-bento-acet-bgnum i {
    font-style: normal;
    font-size: 0.55em;
    margin-left: -0.08em;
  }
  .ds-bento-acet-bgword {
    font-family: var(--font-sans);
    font-size: clamp(140px, 24vw, 320px);
    font-weight: 800;
    line-height: 0.8;
    letter-spacing: -0.05em;
    color: rgba(249,115,22,0.06);
    -webkit-text-stroke: 1px rgba(249,115,22,0.12);
    transition: color var(--dur-slow), -webkit-text-stroke-color var(--dur-slow), transform var(--dur-slow) var(--ease-back);
  }
  .ds-bento-acet-card:hover .ds-bento-acet-bgnum,
  .ds-bento-acet-card:hover .ds-bento-acet-bgword {
    color: rgba(249,115,22,0.10);
    -webkit-text-stroke-color: rgba(249,115,22,0.20);
    transform: scale(1.04);
  }

  /* Content: fica no topo, CTA aparece logo abaixo (sem space-between) */
  .ds-bento-acet-card-content {
    position: relative;
    z-index: var(--z-sticky);
    display: flex; flex-direction: column;
    gap: var(--space-1-5);
    padding: var(--space-6) var(--space-6) 0;
    pointer-events: none;
  }
  .ds-bento-acet-card-icon {
    width: 48px; height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--muted-foreground);
    transform-origin: left center;
    transition: transform var(--dur-slow) var(--ease-back), color var(--dur-slow);
    margin-bottom: var(--space-1-5);
  }
  .ds-bento-acet-card-icon svg {
    width: 100%; height: 100%;
    stroke: currentColor; fill: none;
    stroke-width: 1.75;
  }
  .ds-bento-acet-card:hover .ds-bento-acet-card-icon {
    transform: scale(0.75);
    color: var(--accent);
  }
  .ds-bento-acet-card-content h3 {
    font-family: var(--font-sans);
    font-size: 20px; font-weight: 600;
    color: var(--foreground);
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0;
  }
  .ds-bento-acet-card-content p {
    font-size: 14px; line-height: 1.5;
    color: var(--muted-foreground);
    max-width: 32rem;
    margin: 0;
  }

  /* CTA: aparece logo abaixo do content (max-height + opacity) */
  .ds-bento-acet-card-cta {
    position: relative;
    z-index: var(--z-sticky);
    display: flex; align-items: center;
    padding: 0 var(--space-6);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(8px);
    transition: max-height var(--dur-slow) var(--ease-back),
                opacity var(--dur-slow),
                transform var(--dur-slow) var(--ease-back),
                padding var(--dur-slow);
    pointer-events: none;
  }
  .ds-bento-acet-card:hover .ds-bento-acet-card-cta {
    max-height: 60px;
    opacity: 1;
    transform: translateY(0);
    padding: var(--space-4) var(--space-6) 0;
    pointer-events: auto;
  }
  .ds-bento-acet-btn {
    display: inline-flex; align-items: center; gap: var(--space-1-5);
    font-family: var(--font-sans);
    font-size: 13px; font-weight: 500;
    color: var(--foreground);
    background: var(--surface-6);
    border: 1px solid var(--surface-12);
    padding: var(--space-2) var(--space-3-5);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background var(--dur-fast), border-color var(--dur-fast);
  }
  .ds-bento-acet-btn:hover {
    background: var(--surface-10);
    border-color: var(--surface-22);
  }
  .ds-bento-acet-btn svg {
    width: 14px; height: 14px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }

  /* Overlay sutil no hover */
  .ds-bento-acet-card-overlay {
    position: absolute; inset: 0;
    pointer-events: none;
    background: transparent;
    transition: background var(--dur-slow);
  }
  .ds-bento-acet-card:hover .ds-bento-acet-card-overlay {
    background: rgba(38,38,38,0.10);
  }

  @media (max-width: 1024px) {
    .ds-bento-acet { grid-template-columns: repeat(2, 1fr); }
    .ds-bento-acet-card.col-3 { grid-column: span 2; }
  }
  @media (max-width: 600px) {
    .ds-bento-acet { grid-template-columns: 1fr; grid-auto-rows: 18rem; }
    .ds-bento-acet-card.col-2,
    .ds-bento-acet-card.col-3 { grid-column: span 1; }
    .ds-bento-acet-bgnum,
    .ds-bento-acet-bgword { font-size: 120px; }
  }

  @media (max-width: 1024px) {
    .ds-bento { grid-template-columns: repeat(2, 1fr); }
    .ds-bento-item.col-3 { grid-column: span 2; }
  }
  @media (max-width: 600px) {
    .ds-bento { grid-template-columns: 1fr; }
    .ds-bento-item.col-2, .ds-bento-item.col-3 { grid-column: span 1; }
    .ds-bento-item.row-2 { grid-row: span 1; }
  }

  /* 05.4 Bento card-static */
  .octa-bento-card.is-static .octa-bento-card-body { transform: none; }
  .octa-bento-card.is-static .octa-bento-card-ico { transform: none; }
  .octa-bento-card.is-static .octa-bento-card-cta,
  .octa-bento-card.is-static .octa-bento-card-overlay { display: none; }
  .octa-bento-card.is-static:hover {
    border-color: rgba(249, 115, 22, 0.35);
  }
  .octa-bento-card.is-static:hover .octa-bento-card-body,
  .octa-bento-card.is-static:hover .octa-bento-card-ico {
    transform: none;
  }
  .octa-bento-card-target {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 0.5px solid var(--border);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--accent);
    text-decoration: none;
    transition: opacity var(--dur-fast);
    align-self: flex-start;
  }
  .octa-bento-card-target:hover { opacity: 0.85; text-decoration: underline; }
  .octa-bento-card-target svg {
    width: 13px; height: 13px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }
  .octa-bento-card-note {
    margin-top: var(--space-2);
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted-foreground);
    opacity: 0.7;
  }

  /* 05.1/05.3 Grid Uniforme + Listing */
  a.octa-bento-card { text-decoration: none; }
  .octa-bento-card-bullets {
    list-style: none; padding: 0; margin: var(--space-1) 0 0;
    display: flex; flex-direction: column; gap: var(--space-1-5);
    font-size: 13px; color: var(--muted-foreground); line-height: 1.5;
  }
  .octa-bento-card-bullets li {
    display: flex; align-items: flex-start; gap: var(--space-2);
  }
  .octa-bento-card-bullets li::before {
    content: "";
    flex-shrink: 0;
    width: 4px; height: 4px;
    margin-top: var(--space-2);
    border-radius: 50%;
    background: var(--accent);
  }
  /* CTA reveal aceita qualquer tag (a, span, div) */
  .octa-bento-card-cta > * {
    display: inline-flex; align-items: center; gap: var(--space-1-5);
    font-family: var(--font-sans); font-size: 13px; font-weight: 500;
    color: var(--accent);
    text-decoration: none;
  }

  /* ─── G3 — Grid de Listing (busca + filtros + counter) ─── */
  .octa-listing { display: flex; flex-direction: column; gap: var(--space-4-5); }
  .octa-listing-tools {
    display: flex; flex-direction: column; gap: var(--space-3-5);
  }
  @media (min-width: 700px) {
    .octa-listing-tools { flex-direction: row; align-items: center; gap: var(--space-4); }
  }
  .octa-listing-search {
    position: relative;
    display: flex; align-items: center;
    flex: 1;
    background: var(--background);
    border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-lg);
    overflow: hidden;
    padding: 0 var(--space-3);
    height: 40px;
    transition: border-color var(--dur-fast);
  }
  .octa-listing-search:focus-within { border-color: rgba(249,115,22,0.40); }
  .octa-listing-search svg {
    width: 16px; height: 16px;
    stroke: var(--muted-foreground); fill: none; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
    flex-shrink: 0; margin-right: var(--space-2);
  }
  .octa-listing-search input {
    flex: 1;
    background: transparent; border: none; outline: none;
    font-family: var(--font-sans); font-size: 13.5px;
    color: var(--foreground);
  }
  .octa-listing-search input::placeholder { color: var(--muted-foreground); opacity: 0.7; }

  .octa-listing-chips {
    display: flex; flex-wrap: wrap; gap: var(--space-1-5);
  }
  .octa-listing-chip {
    display: inline-flex; align-items: center;
    height: 32px; padding: 0 var(--space-3);
    font-family: var(--font-sans); font-size: 12.5px; font-weight: 500;
    color: var(--muted-foreground);
    background: var(--background);
    border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--dur-fast);
  }
  .octa-listing-chip:hover { color: var(--foreground); border-color: var(--ring); }
  .octa-listing-chip.is-active {
    color: var(--accent);
    background: rgba(249,115,22,0.06);
    border-color: rgba(249,115,22,0.40);
  }

  .octa-listing-counter {
    font-family: var(--font-mono); font-size: 11px; font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--muted-foreground);
  }
  .octa-listing-counter b { color: var(--foreground); font-weight: 600; }

  .octa-listing-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
  }
  @media (max-width: 900px) { .octa-listing-grid { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 700px) { .octa-listing-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px) { .octa-listing-grid { grid-template-columns: 1fr; } }

  .octa-listing-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex; flex-direction: row; align-items: center;
    gap: var(--space-3);
    padding: var(--space-3-5);
    background: var(--background-2);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: border-color var(--dur-fast), background var(--dur-fast);
  }
  .octa-listing-card:hover { border-color: rgba(249,115,22,0.30); background: rgba(255,255,255,0.012); }
  .octa-listing-card[hidden] { display: none; }
  .octa-listing-card > .octa-bento-bg-dots { z-index: var(--z-base); border-radius: inherit; pointer-events: none; }
  .octa-listing-card-icon {
    position: relative; z-index: var(--z-content);
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    background: var(--background);
    border: 0.5px solid var(--border);
    overflow: hidden;
  }
  .octa-listing-card-icon img {
    width: 28px; height: 28px;
    object-fit: contain;
    display: block;
  }
  .octa-listing-card-body {
    position: relative; z-index: var(--z-content);
    display: flex; flex-direction: column; gap: var(--space-0-5);
    min-width: 0; flex: 1;
  }
  .octa-listing-card-name {
    font-size: 14px; font-weight: 600;
    color: var(--foreground);
    letter-spacing: -0.01em;
    line-height: 1.3;
  }
  .octa-listing-card-tag {
    font-family: var(--font-sans); font-size: 12px; font-weight: 400;
    color: var(--muted-foreground);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .octa-listing-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--space-8);
    font-size: 13px;
    color: var(--muted-foreground);
    font-family: var(--font-mono);
  }
  .octa-listing-empty[hidden] { display: none; }

  /* 05.4 Bento Grid (octa-bento) */
  .octa-bento {
    display: grid;
    grid-template-columns: repeat(var(--bento-cols, 4), minmax(0, 1fr));
    grid-auto-rows: var(--bento-row-h, 220px);
    gap: var(--bento-gap, 16px);
    width: 100%;
  }
  .octa-bento.is-centered-narrow {
    max-width: 760px; margin: 0 auto var(--space-5);
  }
  .octa-bento.is-mb-18 { margin-bottom: var(--space-4-5); }
  .octa-bento.is-narrow-380 { max-width: 380px; }
  .octa-listing-search.is-narrow-360 { max-width: 360px; }
  .octa-bento-card {
    position: relative;
    grid-column: span var(--col-span, 1);
    grid-row: span var(--row-span, 1);
    background: var(--background-2);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: border-color var(--dur-base) var(--ease-out);
    isolation: isolate;
  }
  .octa-bento-card:hover {
    border-color: rgba(249,115,22,0.30);
  }

  /* BG decorativo opcional — fica atrás do conteúdo */
  .octa-bento-card-bg {
    position: absolute; inset: 0;
    pointer-events: none;
    z-index: var(--z-base);
    overflow: hidden;
  }

  /* Body — slide pra cima no hover pra liberar espaço pra CTA */
  .octa-bento-card-body {
    position: relative; z-index: var(--z-content);
    padding: var(--space-6);
    display: flex; flex-direction: column; gap: var(--space-2);
    flex: 1;
    transform: translateY(0);
    transition: transform 320ms var(--ease-out);
  }
  .octa-bento-card:hover .octa-bento-card-body {
    transform: translateY(-32px);
  }

  .octa-bento-card-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px;
    margin-bottom: var(--space-2);
    color: var(--accent);
    transform: scale(1);
    transform-origin: left center;
    transition: transform 320ms var(--ease-out);
  }
  .octa-bento-card:hover .octa-bento-card-ico {
    transform: scale(0.8);
  }
  .octa-bento-card-ico svg {
    width: 32px; height: 32px;
    stroke: currentColor; fill: none; stroke-width: 1.6;
    stroke-linecap: round; stroke-linejoin: round;
  }

  .octa-bento-card-title {
    font-size: 17px; font-weight: 600;
    color: var(--foreground);
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 1.3;
  }
  .octa-bento-card.is-feature .octa-bento-card-title {
    font-size: 22px; letter-spacing: -0.018em;
  }
  .octa-bento-card-desc {
    font-size: 13.5px; line-height: 1.6;
    color: var(--muted-foreground);
    margin: 0;
    max-width: 480px;
  }
  .octa-bento-card.is-feature .octa-bento-card-desc {
    font-size: 14.5px; max-width: 540px;
  }

  /* CTA reveal — aparece slideup no hover */
  .octa-bento-card-cta {
    position: absolute; bottom: 0; left: 0; right: 0;
    z-index: var(--z-overlap);
    padding: var(--space-4) var(--space-6) 22px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out);
    pointer-events: none;
  }
  .octa-bento-card:hover .octa-bento-card-cta {
    opacity: 1; transform: translateY(0); pointer-events: auto;
  }
  .octa-bento-card-cta a,
  .octa-bento-card-cta span {
    display: inline-flex; align-items: center; gap: var(--space-1-5);
    font-family: var(--font-sans); font-size: 13px; font-weight: 500;
    color: var(--accent);
    text-decoration: none;
    pointer-events: auto;
  }
  .octa-bento-card-cta svg {
    width: 13px; height: 13px;
    stroke: currentColor; fill: none; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
    transition: transform 200ms;
  }
  .octa-bento-card:hover .octa-bento-card-cta svg {
    transform: translateX(3px);
  }

  /* Overlay sutil ao hover — não compete, apenas marca presença */
  .octa-bento-card-overlay {
    position: absolute; inset: 0;
    pointer-events: none;
    z-index: var(--z-content);
    background: transparent;
    transition: background var(--dur-base);
  }
  .octa-bento-card:hover .octa-bento-card-overlay {
    background: rgba(249,115,22,0.025);
  }

  /* BG pattern de dots — base canônica do sistema, posicionável via modificadores */
  .octa-bento-bg-dots {
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.10) 1px, transparent 1px);
    background-size: 16px 16px;
    mask-image: radial-gradient(ellipse at bottom left, #000, transparent 60%);
    -webkit-mask-image: radial-gradient(ellipse at bottom left, #000, transparent 60%);
  }
  /* Variantes de posição da mask — proporção certa por tamanho de card */
  .octa-bento-bg-dots.is-center {
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  }
  .octa-bento-bg-dots.is-top-right {
    mask-image: radial-gradient(ellipse at top right, #000, transparent 65%);
    -webkit-mask-image: radial-gradient(ellipse at top right, #000, transparent 65%);
  }
  .octa-bento-bg-dots.is-bottom-right {
    mask-image: radial-gradient(ellipse at bottom right, #000, transparent 60%);
    -webkit-mask-image: radial-gradient(ellipse at bottom right, #000, transparent 60%);
  }
  .octa-bento-bg-dots.is-top-left {
    mask-image: radial-gradient(ellipse at top left, #000, transparent 60%);
    -webkit-mask-image: radial-gradient(ellipse at top left, #000, transparent 60%);
  }
  /* Cards maiores podem usar dots mais densos */
  .octa-bento-bg-dots.is-dense {
    background-size: 12px 12px;
  }

  @media (max-width: 760px) {
    .octa-bento { grid-template-columns: 1fr; }
    .octa-bento-card {
      grid-column: span 1 !important;
      grid-row: span 1 !important;
    }
  }
}

@layer cat-06-archetypes {
  /* 06.1 Hero base (legacy) */
  .hero {
    padding: 140px 0 var(--space-16); position: relative; overflow: visible;
    text-align: center;
  }
  .hero-glow-canvas { position: absolute; inset: 0; pointer-events: none; z-index: var(--z-below); }
  .hero-content { position: relative; z-index: var(--z-raised); max-width: 800px; margin: 0 auto; }
  .hero-badge {
    display: inline-flex; align-items: center; gap: var(--space-1-5);
    padding: 5px var(--space-3-5); border-radius: var(--radius-full); border: none;
    background: var(--background); font-size: 12px; font-weight: 500;
    color: var(--muted-foreground); margin-bottom: var(--space-6);
    position: relative; z-index: var(--z-content);
  }
  .hero-badge::after {
    content: ''; position: absolute; inset: 1px; border-radius: inherit; z-index: var(--z-below);
    background: var(--background);
  }
  .hero-badge-dot { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
  .hero-badge img { width: 20px; height: 20px; border-radius: 4px; }
  .hero h1 { margin-bottom: var(--space-5); }
  .hero h1 span {
    color: var(--accent);
  }
  .hero .subheadline { margin: 0 auto var(--space-8); }
  .hero-ctas { display: flex; gap: var(--space-2-5); justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-10); }
  .hero-logos {
    display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-8);
  }
  .hero-logos img { height: 40px; border-radius: var(--radius-lg); background: var(--surface-4); padding: var(--space-1-5); }
  .hero-logos .plus { font-size: 24px; color: var(--muted-foreground); font-weight: 300; }

  @media (max-width: 1100px) { .hero { padding: 110px 0 var(--space-14); } }
  @media (max-width: 768px) { .hero { padding: 96px 0 var(--space-12); } }
  @media (max-width: 700px) { .hero { padding: 110px 0 60px; } }
  @media (max-width: 640px) {
    .hero-ctas { flex-direction: column; align-items: center; gap: var(--space-2-5); }
    .hero-ctas .btn { width: 100%; max-width: 360px; }
    .hero .subheadline { margin-bottom: var(--space-7); padding: 0 var(--space-1); }
    .hero-badge { font-size: 11px; padding: 5px var(--space-3); }
  }
  @media (max-width: 480px) {
    .hero { padding: 88px 0 var(--space-10); }
    .headline-xl { font-size: 24px; }
    .headline-lg { font-size: 22px; }
    .subheadline { font-size: 13px; }
    .hero-ctas .btn { width: 100%; }
  }

  /* 06.17 Marquee (legacy) */
  .marquee-wrapper { overflow: hidden; position: relative; padding: var(--space-4) 0; }
  .marquee-wrapper::before, .marquee-wrapper::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: var(--z-overlap); pointer-events: none;
  }
  .marquee-wrapper::before { left: 0; background: linear-gradient(to right, var(--background-2), transparent); }
  .marquee-wrapper::after { right: 0; background: linear-gradient(to left, var(--background-2), transparent); }
  .marquee-wrapper.bg-white::before { background: linear-gradient(to right, var(--background), transparent); }
  .marquee-wrapper.bg-white::after { background: linear-gradient(to left, var(--background), transparent); }
  .marquee-track { display: flex; gap: var(--space-2-5); animation: marquee 30s linear infinite; width: max-content; }
  .marquee-chip {
    display: inline-flex; align-items: center; gap: var(--space-1-5); padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full); border: 0.5px solid var(--border-strong);
    background: var(--background); font-size: 12px; font-weight: 500; white-space: nowrap;
  }
  @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
  @keyframes marqueeRTL { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
  @media (max-width: 700px) {
    .marquee-wrapper::before, .marquee-wrapper::after { width: 40px; }
  }
  @media (max-width: 480px) {
    .marquee-chip { padding: var(--space-1-5) var(--space-2-5); font-size: 11px; }
  }

  /* 06.2 Accordion FAQ (legacy) */
  .faq-list { max-width: 720px; margin: 0 auto; }
  .accordion-item { border-bottom: 0.5px solid var(--border); }
  .accordion-trigger {
    width: 100%; display: flex; justify-content: space-between; align-items: center;
    padding: var(--space-4-5) 0; font-size: 14px; font-weight: 500; background: transparent;
    border: none; text-align: left; color: var(--foreground); cursor: pointer;
    font-family: var(--font-sans); gap: var(--space-3);
  }
  .accordion-trigger:hover { text-decoration: underline; text-underline-offset: 3px; }
  .accordion-chevron { transition: transform var(--dur-slow); color: var(--muted-foreground); flex-shrink: 0; }
  .accordion-item.open .accordion-chevron { transform: rotate(180deg); }
  .accordion-content { max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) ease; }
  .accordion-item.open .accordion-content { max-height: 500px; }
  .accordion-body { padding: 0 0 var(--space-4-5); font-size: 13px; color: var(--muted-foreground); line-height: 1.6; }
  .faq-list .accordion-item {
    opacity: 0; transform: translateY(18px);
    transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  }
  .faq-list .accordion-item.visible { opacity: 1; transform: translateY(0); }
  @media (max-width: 480px) {
    .accordion-trigger { font-size: 13px; padding: var(--space-3-5) 0; gap: var(--space-3); }
    .accordion-body { font-size: 13px; }
    .faq-list { padding: 0 var(--space-1); }
  }

  /* 06.3 Final CTA (legacy) */
  .final-cta, .cta-final {
    text-align: center; padding: 96px 0 var(--space-16); position: relative;
  }
  .final-cta::before, .cta-final::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(249,115,22,0.08) 0%, transparent 60%);
    pointer-events: none;
  }
  .final-cta h2, .cta-final h2 { margin-bottom: var(--space-2-5); position: relative; z-index: var(--z-overlap); }
  .cta-final h2 span {
    color: var(--accent);
  }
  .final-cta p, .cta-final p { font-size: 15px; color: var(--muted-foreground); position: relative; z-index: var(--z-overlap); }
  .final-cta .btn, .cta-final .btn { margin-top: var(--space-6); position: relative; z-index: var(--z-overlap); }
  @media (max-width: 480px) {
    .final-cta, .cta-final { padding: var(--space-16) 0 var(--space-12); }
  }

  /* 06 Split 2-col (ds-split) */
  .ds-split {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--space-16); align-items: center;
  }
  .ds-split--reverse { grid-template-columns: 1fr 1fr; direction: rtl; }
  .ds-split--reverse > * { direction: ltr; }
  .ds-split--narrow { max-width: 920px; margin: 0 auto; }
  .ds-split--callout {
    background: linear-gradient(135deg, rgba(249,115,22,0.06), rgba(249,115,22,0.02));
    border: 0.5px solid rgba(249,115,22,0.18);
    border-radius: var(--radius-xl);
    padding: var(--space-12);
  }
  .ds-split-text h2 {
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 700; letter-spacing: -0.02em;
    margin-bottom: var(--space-4); line-height: 1.2;
  }
  .ds-split-text h2 span,
  .ds-split-text .ds-grad {
    color: var(--accent);
  }
  .ds-split-text p {
    font-size: 15px; color: var(--muted-foreground);
    line-height: 1.7; margin-bottom: var(--space-4);
  }
  .ds-split-text ul {
    list-style: none; display: flex; flex-direction: column; gap: var(--space-2-5);
    margin: var(--space-4) 0; padding: 0;
  }
  .ds-split-text ul li {
    display: flex; align-items: flex-start; gap: var(--space-2-5);
    font-size: 14px; color: var(--muted-foreground); line-height: 1.5;
  }
  .ds-split-text ul li::before {
    content: '\2713'; color: var(--accent); font-weight: 700; flex-shrink: 0; margin-top: var(--space-0-5);
  }
  .ds-split-img, .ds-split-figure {
    border-radius: var(--radius-xl); overflow: hidden;
    aspect-ratio: 4/3;
    background: linear-gradient(135deg, rgba(249,115,22,0.06), rgba(249,115,22,0.02));
    border: 0.5px solid var(--border-strong);
    position: relative;
  }
  .ds-split-img img {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  .ds-split-figure::before {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(249,115,22,0.12) 1px, transparent 1px);
    background-size: 20px 20px; opacity: 0.5;
  }
  .ds-split-figure-ico {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--accent); opacity: 0.4;
  }
  .ds-split-figure-ico svg { width: 80px; height: 80px; }
  .ds-split--form .ds-split-form {
    background: var(--background);
    border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-xl);
    padding: var(--space-7);
  }
  .ds-form-field { margin-bottom: var(--space-3-5); }
  .ds-form-field label {
    display: block; font-size: 12px; font-weight: 600;
    color: var(--muted-foreground); margin-bottom: var(--space-1-5);
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  .ds-form-field input,
  .ds-form-field textarea {
    width: 100%; padding: var(--space-2-5) var(--space-3);
    background: var(--surface-3);
    border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-md);
    color: var(--foreground); font-family: inherit; font-size: 14px;
    transition: border-color var(--dur-fast);
  }
  .ds-form-field input:focus,
  .ds-form-field textarea:focus {
    outline: none; border-color: var(--accent);
  }
  .ds-form-field textarea { resize: vertical; min-height: 88px; }

  @media (max-width: 768px) {
    .ds-split, .ds-split--reverse { grid-template-columns: 1fr; gap: var(--space-8); direction: ltr; }
    .ds-split--callout { padding: var(--space-8) var(--space-5); }
  }

  /* 06 Content split tailark */
  .ds-content-tlk {
    display: flex; flex-direction: column;
    gap: var(--space-8);
    max-width: 1024px;
    margin: 0 auto;
    padding: 0;
  }
  @media (min-width: 768px) {
    .ds-content-tlk { gap: var(--space-16); }
  }
  .ds-content-tlk-title {
    font-family: var(--font-sans);
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--foreground);
    max-width: 56rem;
    margin: 0;
    position: relative; z-index: var(--z-sticky);
  }
  .ds-content-tlk-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  @media (min-width: 640px) {
    .ds-content-tlk-grid { grid-template-columns: 1fr 1fr; gap: var(--space-12); }
  }
  @media (min-width: 1024px) {
    .ds-content-tlk-grid { gap: var(--space-12); }
  }

  /* Figure: aspect 76/59 com gradient border 1px (p-px no tailark) */
  .ds-content-tlk-figure {
    position: relative;
    margin-bottom: var(--space-6);
  }
  @media (min-width: 640px) {
    .ds-content-tlk-figure { margin-bottom: 0; }
  }
  .ds-content-tlk-figure-inner {
    aspect-ratio: 76 / 59;
    position: relative;
    border-radius: var(--radius-2xl);
    background: linear-gradient(to bottom, rgba(63,63,70,1), transparent);
    padding: 1px;
  }
  .ds-content-tlk-mock {
    position: relative;
    width: 100%; height: 100%;
    border-radius: calc(var(--radius-2xl) - 1px);
    background: var(--background-2);
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: var(--space-3);
    padding: var(--space-4-5);
  }
  .ds-content-tlk-mock-center {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 72px; height: 72px;
    border-radius: 18px;
    background: rgba(14,14,16,0.92);
    border: 1px solid var(--surface-10);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.40);
    z-index: var(--z-overlap);
  }
  .ds-content-tlk-mock-card {
    background: rgba(20,20,22,0.85);
    border: 0.5px solid var(--surface-10);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    display: flex; align-items: flex-start; gap: var(--space-2);
    backdrop-filter: blur(6px);
    color: var(--foreground);
    transition: border-color var(--dur-slow), background var(--dur-slow);
  }
  .ds-content-tlk-mock-card:hover {
    border-color: color-mix(in srgb, var(--c, var(--accent)) 45%, transparent);
    background: rgba(20,20,22,0.95);
  }
  .ds-content-tlk-mock-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--c, var(--accent));
    margin-top: var(--space-1);
    flex-shrink: 0;
    box-shadow: 0 0 8px var(--c, var(--accent));
  }
  .ds-content-tlk-mock-title {
    font-family: var(--font-sans);
    font-size: 14px; font-weight: 600;
    color: var(--foreground);
    line-height: 1.25;
  }
  .ds-content-tlk-mock-sub {
    font-size: 12px;
    color: var(--muted-foreground);
    margin-top: var(--space-1);
    line-height: 1.35;
  }

  /* Content column: paragraphs + blockquote */
  .ds-content-tlk-content {
    position: relative;
    display: flex; flex-direction: column;
    gap: var(--space-4);
  }
  .ds-content-tlk-content > p {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.6;
    color: var(--muted-foreground);
    margin: 0;
  }
  .ds-content-tlk-content > p b {
    color: var(--foreground);
    font-weight: 600;
  }
  .ds-content-tlk-quote {
    border-left: 4px solid var(--accent);
    padding-left: var(--space-4);
    margin: var(--space-6) 0 0;
  }
  .ds-content-tlk-quote p {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.55;
    color: var(--foreground);
    margin: 0;
    font-style: normal;
  }
  .ds-content-tlk-quote-meta {
    margin-top: var(--space-4);
    display: flex; flex-direction: column;
    gap: var(--space-2);
  }
  .ds-content-tlk-cite {
    font-family: var(--font-sans);
    font-size: 13px; font-weight: 500;
    color: var(--foreground);
    font-style: normal;
    display: block;
  }
  .ds-content-tlk-logo {
    display: inline-flex; align-items: center;
    gap: var(--space-1-5);
    font-family: var(--font-sans);
    font-size: 12px; font-weight: 600;
    color: var(--muted-foreground);
    letter-spacing: -0.01em;
  }

  /* 06.13 Timeline (ds-tl) */
  .ds-tl {
    width: 100%;
    font-family: var(--font-sans);
    background: transparent;
  }
  .ds-tl-header {
    max-width: 64rem;
    margin: 0 auto;
    padding: var(--space-8) 0 var(--space-6);
  }
  .ds-tl-title {
    font-size: clamp(22px, 3vw, 36px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--foreground);
    max-width: 56rem;
    margin: 0 0 var(--space-3);
  }
  .ds-tl-lead {
    font-size: 14px;
    color: var(--muted-foreground);
    max-width: 44rem;
    margin: 0;
    line-height: 1.55;
  }
  @media (min-width: 768px) {
    .ds-tl-lead { font-size: 16px; }
  }

  .ds-tl-rail {
    position: relative;
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 0 var(--space-16);
  }
  .ds-tl-line {
    position: absolute;
    top: 0; bottom: 0;
    left: 32px;
    width: 2px;
    overflow: hidden;
    background: linear-gradient(to bottom,
      transparent 0%,
      var(--surface-10) 10%,
      var(--surface-10) 90%,
      transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, var(--pure-black) 10%, var(--pure-black) 90%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, var(--pure-black) 10%, var(--pure-black) 90%, transparent 100%);
  }
  .ds-tl-progress {
    position: absolute;
    inset-inline: 0;
    top: 0;
    width: 2px;
    height: 0;
    background: linear-gradient(to top, var(--accent) 0%, var(--accent-hover) 30%, transparent 100%);
    border-radius: 999px;
    opacity: 0;
    transition: height 80ms linear, opacity var(--dur-slow);
  }

  .ds-tl-entry {
    display: flex;
    flex-direction: column;
    padding-top: var(--space-10);
    padding-left: var(--space-20);
    padding-right: var(--space-4);
    position: relative;
  }
  .ds-tl-entry:first-child { padding-top: var(--space-6); }

  .ds-tl-entry-head {
    position: absolute;
    left: 16px;
    top: 40px;
    display: flex; align-items: center;
  }
  .ds-tl-entry:first-child .ds-tl-entry-head { top: 24px; }
  .ds-tl-dot {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--background-2);
    border: 1px solid var(--surface-10);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    z-index: var(--z-overlap);
  }
  .ds-tl-dot-inner {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--surface-6);
    border: 1px solid var(--ring);
    transition: background var(--dur-slow), border-color var(--dur-slow);
  }
  .ds-tl-entry.is-active .ds-tl-dot-inner {
    background: var(--accent);
    border-color: var(--brand-primary-dark);
    box-shadow: 0 0 12px rgba(249,115,22,0.50);
  }
  .ds-tl-entry-title {
    display: none;
  }
  .ds-tl-entry-title-mob {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--muted-foreground);
    margin: 0 0 var(--space-3);
    line-height: 1.25;
  }

  @media (min-width: 768px) {
    .ds-tl-line { left: 32px; }
    .ds-tl-entry {
      flex-direction: row;
      gap: var(--space-10);
      padding-top: 96px;
      padding-left: 0;
      padding-right: var(--space-4);
    }
    .ds-tl-entry:first-child { padding-top: var(--space-12); }
    .ds-tl-entry-head {
      position: sticky; top: 96px; align-self: flex-start;
      flex-direction: row; align-items: center;
      max-width: 24rem;
      width: 100%;
      padding-left: 0;
      left: auto;
      z-index: var(--z-raised);
      background: transparent;
    }
    .ds-tl-entry:first-child .ds-tl-entry-head { top: 48px; }
    .ds-tl-entry-head { padding-left: var(--space-4); }
    .ds-tl-entry-title {
      display: block;
      margin: 0 0 0 var(--space-9);
      font-size: clamp(22px, 2.6vw, 32px);
      font-weight: 700;
      letter-spacing: -0.02em;
      line-height: 1.1;
      color: var(--muted-foreground);
    }
    .ds-tl-entry.is-active .ds-tl-entry-title {
      color: var(--foreground);
    }
    .ds-tl-entry-title-mob { display: none; }
    .ds-tl-entry-body {
      flex: 1;
      padding-left: var(--space-4);
      max-width: 38rem;
    }
  }

  .ds-tl-entry-body p {
    margin: 0 0 var(--space-4);
    font-size: 15px;
    line-height: 1.6;
    color: var(--muted-foreground);
  }
  @media (min-width: 768px) {
    .ds-tl-entry-body p { font-size: 16px; }
  }

  /* Cards/snippets dentro do entry */
  .ds-tl-entry-card {
    margin-top: var(--space-4);
    background: var(--background-2);
    border: 0.5px solid var(--surface-10);
    border-radius: var(--radius-md);
    overflow: hidden;
  }
  .ds-tl-entry-card-head {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2-5) var(--space-3-5);
    border-bottom: 0.5px solid var(--border);
    color: var(--muted-foreground);
    font-size: 12px; font-weight: 500;
    background: var(--surface-2);
  }
  .ds-tl-entry-card-ico {
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--accent);
  }
  .ds-tl-entry-card-ico svg {
    width: 14px; height: 14px;
  }
  .ds-tl-entry-code {
    display: block;
    padding: var(--space-3-5);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 13px;
    color: var(--foreground);
    background: transparent;
  }
  .ds-tl-entry-code span {
    color: var(--accent);
  }

  .ds-tl-entry-cards {
    margin-top: var(--space-4);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
  }
  .ds-tl-entry-mini {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2-5) var(--space-3);
    background: var(--background-2);
    border: 0.5px solid var(--surface-10);
    border-radius: var(--radius-md);
    font-size: 13px; font-weight: 500;
    color: var(--foreground);
    transition: border-color var(--dur-slow);
  }
  .ds-tl-entry-mini:hover {
    border-color: color-mix(in srgb, var(--c, var(--accent)) 45%, transparent);
  }
  .ds-tl-entry-mini-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--c, var(--accent));
    box-shadow: 0 0 8px var(--c, var(--accent));
    flex-shrink: 0;
  }

  .ds-tl-entry-channels {
    margin-top: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }
  .ds-tl-entry-channel {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--c, var(--accent)) 8%, transparent);
    color: var(--c, var(--accent));
    border: 0.5px solid color-mix(in srgb, var(--c, var(--accent)) 25%, transparent);
  }
  .ds-tl-entry-channel svg {
    width: 18px; height: 18px;
  }

  /* 06 Content block tailark */
  .ds-content-blk {
    background: rgba(255,255,255,0.025);
    border-top: 1px solid var(--surface-6);
    border-bottom: 1px solid var(--surface-6);
    padding: var(--space-16) 0;
    border-radius: var(--radius-2xl);
  }
  @media (min-width: 768px) {
    .ds-content-blk { padding: 96px 0; }
  }
  .ds-content-blk-inner {
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 var(--space-6);
    width: 100%;
  }
  .ds-content-blk-header {
    margin-bottom: var(--space-12);
  }
  .ds-content-blk-eyebrow {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--accent);
    letter-spacing: 0.01em;
  }
  .ds-content-blk-title {
    margin: var(--space-4) 0 0;
    font-family: var(--font-sans);
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--foreground);
    max-width: 44rem;
  }
  .ds-content-blk-lead {
    margin: var(--space-4) 0 0;
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.55;
    color: var(--muted-foreground);
    max-width: 52rem;
  }

  /* Divide-y entre linhas */
  .ds-content-blk-rows {
    display: flex;
    flex-direction: column;
  }
  @media (min-width: 640px) {
    .ds-content-blk-rows > .ds-content-blk-row + .ds-content-blk-row {
      border-top: 1px solid var(--surface-10);
    }
  }
  .ds-content-blk-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding: var(--space-6) 0;
  }
  @media (min-width: 640px) {
    .ds-content-blk-row {
      grid-template-columns: repeat(5, 1fr);
      gap: 0;
      padding: 0;
    }
    .ds-content-blk-row .ds-content-blk-illustration {
      grid-column: span 2;
      padding: var(--space-12) 0;
    }
    .ds-content-blk-row .ds-content-blk-content {
      grid-column: span 3;
      padding: var(--space-12) 0 var(--space-12) var(--space-12);
      border-left: 1px solid var(--surface-10);
    }
    .ds-content-blk-row--reverse .ds-content-blk-content {
      grid-column: span 3;
      padding: var(--space-12) var(--space-12) var(--space-12) 0;
      border-left: none;
      border-right: 1px solid var(--surface-10);
      order: 1;
    }
    .ds-content-blk-row--reverse .ds-content-blk-illustration {
      grid-column: span 2;
      order: 2;
    }
  }

  /* Content da row */
  .ds-content-blk-content h3 {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 20px; font-weight: 600;
    color: var(--foreground);
    letter-spacing: -0.01em;
    line-height: 1.25;
  }
  .ds-content-blk-content p {
    margin: var(--space-4) 0 0;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    color: var(--muted-foreground);
  }

  /* Illustration: comum */
  .ds-content-blk-illustration {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    min-height: 220px;
  }

  /* Illustration: lista com mask radial + tag flutuante */
  .ds-content-blk-illustration--list {
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, var(--pure-black) 50%, transparent 100%);
            mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, var(--pure-black) 50%, transparent 100%);
  }
  .ds-content-blk-list {
    list-style: none; margin: 0; padding: 0;
    text-align: center;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 22px;
    font-weight: 500;
    color: var(--muted-foreground);
    line-height: 1.6;
  }
  .ds-content-blk-list li {
    position: relative;
    padding: var(--space-0-5) 0;
  }
  .ds-content-blk-list li.is-active {
    color: var(--foreground);
  }
  .ds-content-blk-list li.is-active::before {
    content: attr(data-tag);
    position: absolute;
    left: 0;
    transform: translateX(-110%);
    color: var(--accent);
    white-space: nowrap;
  }

  /* Illustration: 4 canais Octa (SMS · Ligação · WhatsApp · E-mail) */
  .ds-content-blk-illustration--channels {
    -webkit-mask-image: radial-gradient(ellipse 65% 65% at 50% 50%, var(--pure-black) 60%, transparent 100%);
            mask-image: radial-gradient(ellipse 65% 65% at 50% 50%, var(--pure-black) 60%, transparent 100%);
  }
  .ds-content-blk-channels {
    display: flex;
    align-items: center; justify-content: center;
    gap: var(--space-4);
  }
  .ds-content-blk-channel {
    display: flex; flex-direction: column; align-items: center;
    gap: var(--space-1-5);
  }
  .ds-content-blk-channel-box {
    width: 44px; height: 44px;
    border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--c, var(--accent)) 8%, transparent);
    color: var(--c, var(--accent));
    border: 0.5px solid color-mix(in srgb, var(--c, var(--accent)) 25%, transparent);
    transition: transform var(--dur-slow) var(--ease-back), background var(--dur-slow);
  }
  .ds-content-blk-channel-box svg {
    width: 18px; height: 18px;
  }
  .ds-content-blk-channel:hover .ds-content-blk-channel-box {
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--c, var(--accent)) 14%, transparent);
  }
  .ds-content-blk-channel-label {
    font-family: var(--font-sans);
    font-size: 11px; font-weight: 500;
    color: var(--muted-foreground);
  }

  /* 06 Steps 3-col */
  .ds-steps {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6); position: relative;
  }
  .ds-steps::before {
    content: ''; position: absolute;
    top: 32px; left: 16.6%; right: 16.6%;
    height: 1px;
    background-image: linear-gradient(to right, var(--border-strong) 50%, transparent 50%);
    background-size: 12px 1px;
    z-index: var(--z-base);
  }
  .ds-step {
    background: var(--ds-card-bg);
    border: var(--ds-card-border);
    border-radius: var(--ds-card-radius);
    padding: var(--space-7) var(--space-6);
    text-align: center;
    position: relative; z-index: var(--z-content);
  }
  .ds-step-num {
    width: 44px; height: 44px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--brand-primary-dark));
    color: var(--pure-white); font-size: 18px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: var(--space-4);
    box-shadow: 0 0 0 4px var(--background), 0 0 0 5px var(--border-strong);
  }
  .ds-step h3 { font-size: 17px; font-weight: 600; margin-bottom: var(--space-2); }
  .ds-step p { font-size: 14px; color: var(--muted-foreground); line-height: 1.6; }
  .ds-step-code {
    margin-top: var(--space-3-5); padding: var(--space-2-5) var(--space-3);
    background: rgba(0,0,0,0.4);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-md);
    font-family: var(--font-mono); font-size: 11px;
    color: var(--accent-hover); text-align: left;
    overflow-x: auto;
  }
  .ds-steps--vertical { grid-template-columns: 1fr; gap: var(--space-4); }
  .ds-steps--vertical::before { display: none; }
  .ds-steps--vertical .ds-step { text-align: left; display: flex; gap: var(--space-4); align-items: flex-start; }
  .ds-steps--vertical .ds-step-num { flex-shrink: 0; margin-bottom: 0; }
  @media (max-width: 768px) {
    .ds-steps { grid-template-columns: 1fr; }
    .ds-steps::before { display: none; }
  }

  /* 06 Spotlight grid */
  .ds-spot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
  }
  .ds-spot {
    --mx: 50%; --my: 50%;
    background: var(--ds-card-bg);
    border: var(--ds-card-border);
    border-radius: var(--ds-card-radius);
    padding: var(--ds-card-padding);
    position: relative; overflow: hidden;
    transition: border-color var(--dur-base), transform var(--dur-base);
  }
  .ds-spot::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(400px circle at var(--mx) var(--my),
      var(--ds-spot-glow) 0%, transparent 50%);
    opacity: 0; transition: opacity var(--dur-base);
    border-radius: inherit;
  }
  .ds-spot:hover {
    border-color: rgba(249,115,22,0.30);
    transform: translateY(-2px);
  }
  .ds-spot:hover::before { opacity: 1; }
  .ds-spot > * { position: relative; z-index: var(--z-content); }
  .ds-spot-ico {
    width: 40px; height: 40px; border-radius: var(--radius-md);
    background: rgba(249,115,22,0.10);
    color: var(--accent);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: var(--space-3-5);
  }
  .ds-spot-ico svg { width: 20px; height: 20px; }
  .ds-spot h3 { font-size: 16px; font-weight: 600; margin-bottom: var(--space-1-5); }
  .ds-spot p { font-size: 13px; color: var(--muted-foreground); line-height: 1.55; }
  .ds-spot-meta {
    margin-top: var(--space-3-5); padding-top: var(--space-3);
    border-top: 0.5px solid var(--border);
    display: flex; flex-wrap: wrap; gap: var(--space-1-5);
  }
  .ds-spot-chip {
    display: inline-flex; align-items: center; gap: var(--space-1);
    font-size: 11px; font-weight: 500;
    padding: 3px var(--space-2); border-radius: 999px;
    background: var(--surface-4);
    color: var(--muted-foreground);
  }
  .ds-spot-chip.ch-sms { color: var(--ds-channel-sms); background: var(--ds-channel-sms-bg); }
  .ds-spot-chip.ch-call { color: var(--ds-channel-call); background: var(--ds-channel-call-bg); }
  .ds-spot-chip.ch-wa { color: var(--ds-channel-wa); background: var(--ds-channel-wa-bg); }
  .ds-spot-chip.ch-email { color: var(--ds-channel-email); background: var(--ds-channel-email-bg); }
  @media (prefers-reduced-motion: reduce) {
    .ds-spot::before { transition: none; }
    .ds-spot:hover { transform: none; }
  }

  /* 06 Animated beam */
  .ds-beam {
    position: relative; width: 100%; max-width: 720px; margin: 0 auto;
    aspect-ratio: 16/9;
    background: var(--background);
    border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background-image: radial-gradient(circle, var(--surface-4) 1px, transparent 1px);
    background-size: 18px 18px;
  }
  .ds-beam-svg {
    position: absolute; inset: 0; width: 100%; height: 100%;
  }
  /* Path base — fica visível como guia cinza sutil */
  .ds-beam-path-base {
    fill: none;
    stroke: var(--surface-10);
    stroke-width: 2;
    stroke-linecap: round;
  }
  /* Path animado — recebe stroke="url(#beam-grad-X)" via inline */
  .ds-beam-path-anim {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
  }
  /* Chip-box style (mesmo padrão de .octa-fw-trigger-chip-box / .ds-content-blk-channel-box) */
  .ds-beam-node {
    position: absolute;
    width: 44px; height: 44px;
    border-radius: 11px;
    background: color-mix(in srgb, currentColor 8%, transparent);
    border: 0.5px solid color-mix(in srgb, currentColor 25%, transparent);
    display: flex; align-items: center; justify-content: center;
  }
  .ds-beam-node svg { width: 18px; height: 18px; }
  .ds-beam-node.ds-beam-center {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: rgba(14,14,16,0.92);
    border: 1px solid var(--surface-10);
    color: var(--pure-white);
    box-shadow: 0 8px 24px rgba(0,0,0,0.40);
  }
  .ds-beam-node.ds-beam-center svg { width: 28px; height: 28px; }
  .ds-beam-label {
    position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%);
    font-size: 11px; font-weight: 500; color: var(--muted-foreground);
    white-space: nowrap;
  }
  @media (prefers-reduced-motion: reduce) {
    .ds-beam-path-anim { stroke-opacity: 0.6; }
    .ds-beam-svg animate { animation: none !important; }
  }

  /* 06 Animated list */
  .ds-list {
    display: flex; flex-direction: column; gap: var(--space-2);
    list-style: none; padding: 0; margin: 0;
  }
  .ds-list-item {
    background: var(--ds-card-bg);
    border: var(--ds-card-border);
    border-radius: var(--ds-card-radius);
    padding: var(--space-3-5) var(--space-4-5);
    display: flex; align-items: center; gap: var(--space-3-5);
    opacity: 0; transform: translateY(8px);
    animation: dsListIn 0.5s var(--ease-out) forwards;
  }
  .ds-list-item:nth-child(1) { animation-delay: 0.05s; }
  .ds-list-item:nth-child(2) { animation-delay: 0.10s; }
  .ds-list-item:nth-child(3) { animation-delay: 0.15s; }
  .ds-list-item:nth-child(4) { animation-delay: 0.20s; }
  .ds-list-item:nth-child(5) { animation-delay: 0.25s; }
  .ds-list-item:nth-child(6) { animation-delay: 0.30s; }
  .ds-list-item:nth-child(7) { animation-delay: 0.35s; }
  .ds-list-item:nth-child(8) { animation-delay: 0.40s; }
  .ds-list-item:nth-child(9) { animation-delay: 0.45s; }
  .ds-list-item:nth-child(n+10) { animation-delay: 0.50s; }
  @keyframes dsListIn {
    to { opacity: 1; transform: translateY(0); }
  }
  .ds-list-ico {
    flex-shrink: 0; width: 32px; height: 32px;
    border-radius: var(--radius-md);
    background: rgba(249,115,22,0.10);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
  }
  .ds-list-ico svg { width: 16px; height: 16px; }
  .ds-list-body { flex: 1; min-width: 0; }
  .ds-list-title { font-size: 14px; font-weight: 600; color: var(--foreground); }
  .ds-list-desc { font-size: 12px; color: var(--muted-foreground); line-height: 1.4; margin-top: var(--space-0-5); }
  .ds-list-meta { font-size: 12px; color: var(--muted-foreground); flex-shrink: 0; }
  .ds-list-status {
    display: inline-flex; align-items: center; gap: var(--space-1-5);
    font-size: 12px; font-weight: 500;
  }
  .ds-list-status::before {
    content: ''; width: 8px; height: 8px; border-radius: 50%;
    box-shadow: 0 0 8px currentColor;
  }
  .ds-list-status.ok { color: var(--ds-status-ok); }
  .ds-list-status.warn { color: var(--ds-status-warn); }
  .ds-list-status.down { color: var(--ds-status-down); }
  @media (prefers-reduced-motion: reduce) {
    .ds-list-item { animation: none; opacity: 1; transform: none; }
  }

  /* 06.17 Logo cloud */
  .ds-logos {
    text-align: center; padding: var(--space-8) 0;
  }
  .ds-logos-title {
    font-size: 13px; font-weight: 500;
    color: var(--muted-foreground);
    text-transform: uppercase; letter-spacing: 0.08em;
    margin-bottom: var(--space-6);
  }

  /* 06.7 Pricing (ds-pricing) */
  .ds-pricing {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4); max-width: 1080px; margin: 0 auto;
  }
  .ds-pricing-toggle {
    display: inline-flex; align-items: center; gap: var(--space-1-5);
    background: var(--background-2);
    border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-full);
    padding: var(--space-1);
    margin-bottom: var(--space-7);
  }
  .ds-pricing-toggle button {
    background: transparent; border: none; cursor: pointer;
    padding: var(--space-1-5) var(--space-4); border-radius: var(--radius-full);
    font-size: 13px; font-weight: 500; color: var(--muted-foreground);
    font-family: inherit;
    transition: all var(--dur-fast);
  }
  .ds-pricing-toggle button.active {
    background: var(--accent); color: var(--pure-white);
  }
  @media (max-width: 900px) {
    .ds-pricing { grid-template-columns: 1fr; max-width: 420px; }
  }

  /* 06.4 Testimonials grid */
  .ds-tg {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-4);
  }
  .ds-tg-card {
    background: var(--ds-card-bg);
    border: var(--ds-card-border);
    border-radius: var(--ds-card-radius);
    padding: var(--space-6);
    display: flex; flex-direction: column; gap: var(--space-3-5);
    transition: border-color var(--dur-base), transform var(--dur-base);
  }
  .ds-tg-card:hover {
    border-color: rgba(249,115,22,0.30);
    transform: translateY(-3px);
  }
  .ds-tg-stars { display: flex; gap: var(--space-0-5); color: var(--accent); }
  .ds-tg-stars svg { width: 14px; height: 14px; fill: currentColor; }
  .ds-tg-quote {
    font-size: 14px; line-height: 1.6; color: var(--foreground);
    flex: 1;
  }
  .ds-tg-author {
    display: flex; align-items: center; gap: var(--space-2-5);
    padding-top: var(--space-3); border-top: 0.5px solid var(--border);
  }
  .ds-tg-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--brand-primary-dark));
    color: var(--pure-white); font-weight: 700; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
  }
  .ds-tg-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .ds-tg-name { font-size: 13px; font-weight: 600; color: var(--foreground); }
  .ds-tg-role { font-size: 11px; color: var(--muted-foreground); }

  /* 06.4 Testimonial slider */
  .ds-ts {
    position: relative;
  }
  .ds-ts-track {
    display: flex; gap: var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: var(--space-1);
  }
  .ds-ts-track::-webkit-scrollbar { display: none; }
  .ds-ts-slide {
    flex: 0 0 calc((100% - 32px) / 3);
    scroll-snap-align: start;
    background: var(--ds-card-bg);
    border: var(--ds-card-border);
    border-radius: var(--ds-card-radius);
    padding: var(--space-6);
    display: flex; flex-direction: column; gap: var(--space-3-5);
  }
  @media (max-width: 1024px) {
    .ds-ts-slide { flex: 0 0 calc((100% - 16px) / 2); }
  }
  @media (max-width: 640px) {
    .ds-ts-slide { flex: 0 0 100%; }
  }
  .ds-ts-controls {
    display: flex; justify-content: center; align-items: center;
    gap: var(--space-3); margin-top: var(--space-6);
  }
  .ds-ts-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 0.5px solid var(--border-strong);
    background: var(--background);
    color: var(--foreground);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all var(--dur-fast);
  }
  .ds-ts-btn:hover { border-color: var(--accent); color: var(--accent); }
  .ds-ts-btn:disabled { opacity: 0.3; cursor: not-allowed; }
  .ds-ts-btn svg { width: 16px; height: 16px; }
  .ds-ts-dots { display: flex; gap: var(--space-1-5); }
  .ds-ts-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--border-strong); cursor: pointer;
    transition: background var(--dur-fast), width var(--dur-fast);
    border: none;
  }
  .ds-ts-dot.active {
    background: var(--accent); width: 22px; border-radius: 999px;
  }

  /* 06.3 CTA marquee */
  .ds-cta-mq {
    text-align: center; padding: var(--space-20) 0;
    position: relative; overflow: hidden;
  }
  .ds-cta-mq::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 50%, rgba(249,115,22,0.12) 0%, transparent 60%);
    pointer-events: none;
  }
  .ds-cta-mq-marquee {
    overflow: hidden; padding: var(--space-4-5) 0;
    border-top: 0.5px solid var(--border);
    border-bottom: 0.5px solid var(--border);
    margin: var(--space-8) 0;
  }
  .ds-cta-mq-track {
    display: flex; gap: var(--space-7); align-items: center;
    animation: marquee 30s linear infinite;
    width: max-content;
    font-size: 28px; font-weight: 700; letter-spacing: -0.02em;
    color: var(--foreground);
  }
  .ds-cta-mq-track.reverse { animation: marqueeRTL 30s linear infinite; }
  .ds-cta-mq-track span { display: inline-flex; align-items: center; gap: var(--space-7); }
  .ds-cta-mq-track span::after {
    content: ''; width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent);
  }
  .ds-cta-mq h2 {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 700; letter-spacing: -0.02em;
    margin-bottom: var(--space-3); line-height: 1.15;
    position: relative; z-index: var(--z-overlap);
  }
  .ds-cta-mq h2 span {
    color: var(--accent);
  }
  .ds-cta-mq p { font-size: 16px; color: var(--muted-foreground); margin-bottom: var(--space-6); position: relative; z-index: var(--z-overlap); }
  .ds-cta-mq .btn { position: relative; z-index: var(--z-overlap); }

  /* 06.10 Data table */
  .ds-table-wrap {
    background: var(--background);
    border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-lg);
    overflow: hidden;
    overflow: hidden;
  }
  .ds-table {
    width: 100%; border-collapse: collapse;
    font-size: 13px;
  }
  .ds-table thead th {
    background: var(--background-2);
    color: var(--muted-foreground);
    font-weight: 600;
    text-align: left;
    padding: var(--space-3) var(--space-4);
    border-bottom: 0.5px solid var(--border-strong);
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
    position: sticky; top: 0; z-index: var(--z-content);
  }
  .ds-table tbody td {
    padding: var(--space-3-5) var(--space-4);
    border-bottom: 0.5px solid var(--border);
    color: var(--muted-foreground);
  }
  .ds-table tbody tr:last-child td { border-bottom: none; }
  .ds-table tbody tr:hover td { background: var(--surface-2); }
  .ds-table .cell-primary { font-weight: 600; color: var(--foreground); }
  .ds-table .ds-badge {
    display: inline-flex; align-items: center; gap: var(--space-1-5);
    padding: 3px var(--space-2); border-radius: 999px;
    font-size: 11px; font-weight: 600;
  }
  .ds-table .ds-badge.info { background: rgba(49,134,255,0.10); color: var(--ds-status-info); }
  .ds-table .ds-badge.warn { background: rgba(245,158,11,0.10); color: var(--ds-status-warn); }
  .ds-table .ds-badge.error { background: rgba(239,68,68,0.10); color: var(--ds-status-down); }
  .ds-table .ds-badge.ok { background: rgba(16,185,129,0.10); color: var(--ds-status-ok); }
  @media (max-width: 640px) {
    .ds-table-wrap { overflow-x: auto; }
    .ds-table { min-width: 520px; }
  }

  /* 06 About section */
  .ds-about-eyebrow {
    font-size: 13px; font-weight: 500;
    color: var(--muted-foreground);
    margin-bottom: var(--space-2);
  }
  .ds-about-title {
    font-size: clamp(28px, 3.4vw, 38px);
    font-weight: 700; letter-spacing: -0.02em; line-height: 1.2;
    color: var(--foreground);
    margin: 0 0 var(--space-3);
  }
  .ds-about-sub {
    font-size: 15px; color: var(--muted-foreground);
    line-height: 1.65; max-width: 560px;
    margin: 0 0 var(--space-8);
  }
  .ds-about {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: center;
  }
  .ds-about-img {
    width: 100%; aspect-ratio: 4/3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    overflow: hidden;
    background: var(--background);
  }
  .ds-about-img img {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  .ds-about-features {
    display: flex; flex-direction: column; gap: var(--space-6);
  }
  .ds-about-feat {
    display: flex; gap: var(--space-3-5); align-items: flex-start;
  }
  .ds-about-feat-ico {
    flex-shrink: 0;
    width: 24px; height: 24px;
    color: var(--accent);
    display: flex; align-items: flex-start; justify-content: center;
    margin-top: var(--space-0-5);
  }
  .ds-about-feat-ico svg { width: 22px; height: 22px; stroke-width: 1.75; }
  .ds-about-feat-body { flex: 1; min-width: 0; }
  .ds-about-feat-title {
    font-size: 16px; font-weight: 600; color: var(--foreground);
    margin-bottom: var(--space-1); line-height: 1.3;
  }
  .ds-about-feat-desc {
    font-size: 14px; color: var(--muted-foreground);
    line-height: 1.6; margin: 0;
  }
  @media (max-width: 768px) {
    .ds-about { grid-template-columns: 1fr; gap: var(--space-8); }
  }

  /* 06 Sticky scroll reveal */
  .ds-sticky-scroll {
    position: relative;
    display: flex; justify-content: center;
    gap: var(--space-10);
    height: 30rem;
    overflow-y: auto;
    padding: var(--space-10);
    background: var(--background);
    transition: background-color 600ms ease;
    /* Scrollbar invisível — efeito acontece como surpresa */
    scrollbar-width: none;            /* Firefox */
    -ms-overflow-style: none;         /* IE/Edge legado */
  }
  .ds-sticky-scroll::-webkit-scrollbar {
    display: none;                    /* Chrome/Safari/Edge atual */
    width: 0; height: 0;
  }
  .ds-sticky-scroll[data-active="0"] { background: var(--background); }
  .ds-sticky-scroll[data-active="1"] { background: var(--background-2); }
  .ds-sticky-scroll[data-active="2"] { background: #0A0A0A; }
  .ds-sticky-scroll[data-active="3"] { background: #181818; }

  .ds-sticky-scroll-left {
    position: relative;
    display: flex; align-items: flex-start;
    padding: 0 var(--space-4);
  }
  .ds-sticky-scroll-cards {
    max-width: 42rem;
  }
  .ds-sticky-scroll-card {
    margin: var(--space-20) 0;
  }
  .ds-sticky-scroll-card:first-child { margin-top: 0; }
  .ds-sticky-scroll-card h2 {
    font-family: var(--font-sans);
    font-size: 24px; font-weight: 700;
    color: var(--foreground);
    opacity: 0.3;
    transition: opacity 400ms ease;
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 1.25;
  }
  .ds-sticky-scroll-card p {
    font-size: 16px; line-height: 1.55;
    color: var(--muted-foreground);
    max-width: 24rem;
    margin-top: var(--space-4);
    opacity: 0.3;
    transition: opacity 400ms ease;
  }
  .ds-sticky-scroll-card.is-active h2 { opacity: 1; }
  .ds-sticky-scroll-card.is-active p { opacity: 1; color: var(--foreground); }
  .ds-sticky-scroll-spacer { height: 160px; }

  .ds-sticky-scroll-right {
    display: none;
    flex-shrink: 0;
    width: 360px; height: 280px;
    border-radius: var(--radius-md);
    position: sticky; top: 40px;
    overflow: hidden;
    background: var(--background-2);
    transition: background 600ms ease;
    box-shadow: var(--shadow-md);
  }
  @media (min-width: 1024px) {
    .ds-sticky-scroll-right { display: block; }
  }
  .ds-sticky-scroll-right[data-active="0"] {
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  }
  .ds-sticky-scroll-right[data-active="1"] {
    background: linear-gradient(135deg, var(--ds-status-info), #276BCC);
  }
  .ds-sticky-scroll-right[data-active="2"] {
    background: linear-gradient(135deg, var(--ds-status-info), #276BCC);
  }
  .ds-sticky-scroll-right[data-active="3"] {
    background: linear-gradient(135deg, var(--ds-channel-wa), #1EA952);
  }
  .ds-sticky-scroll-content {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    padding: var(--space-6);
    opacity: 0; transition: opacity 400ms ease;
    pointer-events: none;
    color: var(--pure-white);
    text-align: center;
  }
  .ds-sticky-scroll-content > * { margin: auto; }
  .ds-sticky-scroll-content.is-active {
    opacity: 1; pointer-events: auto;
  }

  /* Conteúdos visuais dos painéis */
  .ds-sticky-zap {
    width: 96px; height: 96px;
    background: var(--surface-12);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 60px var(--surface-30);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.2);
  }
  .ds-sticky-zap svg { width: 48px; height: 48px; fill: var(--pure-white); stroke: none; }

  .ds-sticky-fwcard {
    background: rgba(255,255,255,0.16);
    backdrop-filter: blur(12px);
    border: 1px solid var(--surface-30);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    width: calc(100% - 48px);
    color: var(--pure-white);
  }
  .ds-sticky-fwcard-head {
    display: flex; align-items: center; gap: var(--space-2-5); margin-bottom: var(--space-2-5);
  }
  .ds-sticky-fwcard-ico {
    width: 32px; height: 32px;
    background: rgba(0,0,0,0.30);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
  }
  .ds-sticky-fwcard-ico svg { width: 16px; height: 16px; stroke: var(--pure-white); fill: none; stroke-width: 2; }
  .ds-sticky-fwcard-title { font-size: 13px; font-weight: 600; }
  .ds-sticky-fwcard-sub { font-size: 11px; opacity: 0.8; }
  .ds-sticky-fwcard-row {
    font-size: 11px; display: flex; align-items: center; gap: var(--space-1-5);
    padding-top: var(--space-2); border-top: 1px solid var(--ring);
  }
  .ds-sticky-fwcard-check {
    background: rgba(0,0,0,0.35);
    width: 16px; height: 16px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .ds-sticky-fwcard-check svg { width: 10px; height: 10px; stroke: var(--pure-white); fill: none; stroke-width: 3; }

  .ds-sticky-channels {
    position: relative;
    width: 200px; height: 200px;
  }
  .ds-sticky-channels-lines {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: var(--z-base);
  }
  .ds-sticky-channels-lines line {
    stroke: rgba(255, 255, 255, 0.55);
    stroke-width: 1.5;
    stroke-dasharray: 4 4;
    stroke-linecap: round;
  }
  .ds-sticky-channels-center {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 56px; height: 56px;
    background: rgba(0,0,0,0.40);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--surface-30);
    z-index: var(--z-overlap);
  }
  .ds-sticky-channels-center svg { width: 28px; height: 28px; fill: var(--pure-white); stroke: none; }
  /* Channel nodes formatados como .octa-fw-trigger-chip-box (44×44 radius 11, cores por canal) */
  .ds-sticky-channel-node {
    position: absolute;
    width: 44px; height: 44px;
    border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(18, 18, 20, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 0.5px solid var(--surface-10);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    z-index: var(--z-overlap);
    /* color inline por canal — bg fica neutro pra destacar sobre o gradient */
  }
  .ds-sticky-channel-node svg {
    width: 22px; height: 22px;
    stroke: currentColor; fill: none; color: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }
  .ds-sticky-channel-node:nth-of-type(2) { top: -4px; left: 50%; transform: translateX(-50%); }
  .ds-sticky-channel-node:nth-of-type(3) { top: 50%; right: -4px; transform: translateY(-50%); }
  .ds-sticky-channel-node:nth-of-type(4) { bottom: -4px; left: 50%; transform: translateX(-50%); }
  .ds-sticky-channel-node:nth-of-type(5) { top: 50%; left: -4px; transform: translateY(-50%); }

  /* Reset .octa-fw-selected-card quando dentro de .ds-sticky-scroll-content (sem stack effect) */
  .ds-sticky-scroll-content .octa-fw-selected-card {
    position: static;
    left: auto; right: auto; top: auto;
    transform: none !important;
    width: 100%;
    max-width: 272px;
    animation: none;
    background: rgba(20,20,22,0.88);
    backdrop-filter: blur(12px);
    border: 1px solid var(--surface-22);
  }
  .ds-sticky-scroll-content .octa-fw-selected-card .octa-fw-selected-card-icon {
    background: rgba(0,0,0,0.40);
  }

  .ds-sticky-toast {
    width: 318px; height: auto;
    display: block;
    filter: drop-shadow(0 8px 24px rgba(0,0,0,0.30));
  }

  /* 06.18 Octa em numeros */
  .octa-facts-section {
    padding: var(--space-14) 0;
  }
  .octa-facts-head {
    max-width: 720px;
    margin: 0 auto var(--space-10);
    text-align: center;
    padding: 0 var(--space-6);
  }
  .octa-facts-title {
    font-family: var(--font-sans);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--foreground);
    margin: 0 0 var(--space-3);
    text-wrap: balance;
  }
  .octa-facts-title .accent { color: var(--accent); }
  .octa-facts-sub {
    font-family: var(--font-sans);
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--muted-foreground);
    margin: 0;
  }
  .octa-facts-grid {
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 var(--space-6);
  }
  @media (max-width: 700px) {
    .octa-facts-section { padding: var(--space-10) 0; }
  }

  /* 06.21 Carrossel */
  .octa-carousel-slide-title {
    font-family: var(--font-sans); font-size: 22px; font-weight: 600;
    letter-spacing: -0.01em; margin: 0 0 var(--space-2);
  }

  .octa-carousel {
    position: relative;
    margin: 0 auto;
  }
  .octa-carousel-track {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: var(--space-1) 0 var(--space-5);
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
  }
  .octa-carousel-track::-webkit-scrollbar { height: 4px; }
  .octa-carousel-track::-webkit-scrollbar-track { background: transparent; }
  .octa-carousel-track::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--radius-sm);
  }
  .octa-carousel-item {
    flex: 0 0 auto;
    width: 280px;
    scroll-snap-align: start;
    text-decoration: none;
    display: flex;
  }
  /* Cards de 04.1 dentro do carrossel — altura uniforme + fill */
  .octa-carousel-item .octa-bento-card {
    width: 100%;
    min-height: 220px;
  }
  .octa-carousel-arrows {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
    margin-bottom: var(--space-4);
  }
  .octa-carousel-arrow {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    border: 0.5px solid var(--border-strong);
    background: var(--background);
    color: var(--foreground);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--dur-fast);
  }
  .octa-carousel-arrow:hover:not([disabled]) {
    border-color: var(--accent);
    color: var(--accent);
  }
  .octa-carousel-arrow[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
  }
  .octa-carousel-arrow svg {
    width: 16px; height: 16px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }
  /* fade lateral pra indicar overflow — mesma lógica do marquee */
  .octa-carousel-fade {
    position: relative;
  }
  .octa-carousel-fade::before,
  .octa-carousel-fade::after {
    content: '';
    position: absolute; top: 0; bottom: 20px;
    width: 32px;
    pointer-events: none;
    z-index: var(--z-overlap);
  }
  .octa-carousel-fade::before {
    left: 0;
    background: linear-gradient(to right, var(--background), transparent);
  }
  .octa-carousel-fade::after {
    right: 0;
    background: linear-gradient(to left, var(--background), transparent);
  }
  @media (max-width: 700px) {
    .octa-carousel-item { width: 240px; }
    .octa-carousel-arrows { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .octa-carousel-track { scroll-behavior: auto; }
  }

  /* 06.22 Layout-shell 2col */
  .octa-shell {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: var(--space-12);
    align-items: start;
    max-width: var(--landing-content-width);
    margin: 0 auto;
    padding: 0 var(--space-6);
  }
  .octa-shell.has-toc {
    grid-template-columns: 240px minmax(0, 1fr) 220px;
    gap: var(--space-10);
  }
  .octa-shell-aside {
    position: sticky;
    top: 96px;
    align-self: start;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
  }
  .octa-shell-aside::-webkit-scrollbar { width: 4px; }
  .octa-shell-aside::-webkit-scrollbar-thumb {
    background: var(--border-strong); border-radius: var(--radius-sm);
  }
  .octa-shell-main {
    min-width: 0;
    padding-bottom: var(--space-16);
  }
  .octa-shell-toc {
    position: sticky;
    top: 96px;
    align-self: start;
  }
  /* Mobile: sidebar vira drawer no topo, TOC some */
  @media (max-width: 1100px) {
    .octa-shell.has-toc {
      grid-template-columns: 280px minmax(0, 1fr);
    }
    .octa-shell-toc { display: none; }
  }
  @media (max-width: 768px) {
    .octa-shell, .octa-shell.has-toc {
      grid-template-columns: 1fr;
      gap: 0;
    }
    .octa-shell-aside {
      position: static;
      max-height: none;
      margin-bottom: var(--space-6);
    }
  }

  /* 06.23 Incidentes */
  .octa-incidents {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 880px;
    margin: 0 auto;
    border-left: 0.5px solid var(--border);
    padding-left: 0;
  }
  .octa-incident {
    position: relative;
    padding: var(--space-5) 0 var(--space-6) var(--space-7);
    border-bottom: 0.5px solid var(--border);
  }
  .octa-incident:last-child { border-bottom: none; }
  .octa-incident-bullet {
    position: absolute;
    left: -6px;
    top: 26px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--background);
    border: 2px solid var(--ds-status-ok);
  }
  .octa-incident.is-degraded .octa-incident-bullet { border-color: var(--ds-status-warn); }
  .octa-incident.is-down .octa-incident-bullet { border-color: var(--ds-status-down); }
  .octa-incident.is-resolved .octa-incident-bullet {
    background: var(--ds-status-ok);
    border-color: var(--ds-status-ok);
  }
  .octa-incident-meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-1-5);
    flex-wrap: wrap;
  }
  .octa-incident-date {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted-foreground);
  }
  .octa-incident-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-0-5) var(--space-2);
    border-radius: var(--radius-full);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .octa-incident.is-resolved .octa-incident-status {
    background: rgba(16, 185, 129, 0.12);
    color: var(--ds-status-ok);
  }
  .octa-incident.is-degraded .octa-incident-status {
    background: rgba(245, 158, 11, 0.12);
    color: var(--ds-status-warn);
  }
  .octa-incident.is-down .octa-incident-status {
    background: rgba(239, 68, 68, 0.12);
    color: var(--ds-status-down);
  }
  .octa-incident-title {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--foreground);
    margin: 0 0 var(--space-1-5);
  }
  .octa-incident-desc {
    font-size: 13px;
    line-height: 1.55;
    color: var(--muted-foreground);
    margin: 0 0 var(--space-2-5);
  }
  .octa-incident-updates {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--muted);
    display: flex;
    flex-direction: column;
    gap: var(--space-1-5);
  }
  .octa-incident-update {
    display: flex;
    gap: var(--space-2);
    font-size: 12px;
    line-height: 1.5;
    color: var(--muted-foreground);
  }
  .octa-incident-update-time {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted-foreground);
    opacity: 0.7;
    flex-shrink: 0;
    min-width: 56px;
  }

  /* 06.24 Posts relacionados */
  .octa-related {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }
  .octa-related-card {
    display: flex;
    flex-direction: column;
    border: 0.5px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    overflow: hidden;
    background: var(--background-2);
    text-decoration: none;
    transition: border-color var(--dur-fast), transform var(--dur-fast);
  }
  .octa-related-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
  }
  /* CAT 06.10 — Tabela comparativa: largura primeira coluna + reset de margem */
  .octa-cmp-table col.is-feature { width: 38%; }
  .octa-cmp-table-wrap.is-flush  { margin-top: 0; }

  /* CAT 06.1 — Hero frame envoltório do showcase (preview) */
  .hero.is-frame {
    border-radius: var(--radius-lg);
    overflow: hidden;
    overflow: hidden;
    border: 0.5px solid var(--border);
  }

  /* CAT 06.24 — covers placeholder do showcase (mock visual sem imagem real) */
  .octa-related-card-cover.is-mock-orange { background: linear-gradient(135deg, rgba(249,115,22,0.18), rgba(194,65,12,0.10)); aspect-ratio: 16/9; }
  .octa-related-card-cover.is-mock-cyan   { background: linear-gradient(135deg, rgba(34,184,205,0.16), rgba(77,107,254,0.10)); aspect-ratio: 16/9; }
  .octa-related-card-cover.is-mock-pink   { background: linear-gradient(135deg, rgba(236,72,153,0.16), rgba(245,224,80,0.08)); aspect-ratio: 16/9; }

  .octa-related-card-cover {
    aspect-ratio: 16/9;
    width: 100%;
    background: var(--muted);
    object-fit: cover;
    display: block;
    border-bottom: 0.5px solid var(--border);
  }
  .octa-related-card-body {
    padding: var(--space-4-5) var(--space-5) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .octa-related-card-cat {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);
  }
  .octa-related-card-title {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--foreground);
    line-height: 1.35;
    margin: 0;
  }
  .octa-related-card-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted-foreground);
    opacity: 0.8;
    margin-top: auto;
    padding-top: var(--space-1);
  }
  @media (max-width: 768px) {
    .octa-related { grid-template-columns: 1fr; }
  }

  /* 06.25 Comparacao financeira */
  .octa-finance {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    max-width: 980px;
    margin: 0 auto;
  }
  .octa-finance-block {
    border: 0.5px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--background-2);
    margin-bottom: var(--space-6);
  }
  .octa-finance-block:last-child { margin-bottom: 0; }
  .octa-finance-block-head {
    padding: var(--space-4-5) var(--space-6);
    border-bottom: 0.5px solid var(--border);
    background: var(--muted);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
  }
  .octa-finance-block-title {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--foreground);
    margin: 0;
  }
  .octa-finance-block-body {
    padding: 0;
  }
  .octa-finance-block-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
  }
  .octa-finance-block-body th,
  .octa-finance-block-body td {
    padding: var(--space-5) var(--space-5);
    text-align: left;
    border-bottom: 0.5px solid var(--border);
    vertical-align: middle;
  }
  .octa-finance-block-body th {
    padding-block: var(--space-4);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted-foreground);
    background: var(--background-2);
  }
  .octa-finance-block-body tr:last-child td { border-bottom: none; }
  .octa-finance-block-body td.is-octa { color: var(--accent); font-weight: 600; }
  .octa-finance-block-body td.is-best { color: var(--ds-status-ok); font-weight: 600; }

  /* Separador de categoria — modo 'groups' do comparison-table (Bp 5 §4b · Rubens 2026-05-16) */
  .octa-finance-block-body tr.cmp-group-row td.cmp-group-label {
    padding: var(--space-5) var(--space-5) var(--space-3);
    background: var(--muted);
    color: var(--muted-foreground);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: left;
    border-bottom: 0.5px solid var(--border);
    border-top: 0.5px solid var(--border);
  }
  .octa-finance-block-body tr.cmp-group-row:first-child td.cmp-group-label { border-top: 0; }

  /* Tabela mobile 320px — overflow-x explicito (Rubens 2026-05-16) */
  .octa-finance-block-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .octa-finance-block-body table { min-width: 100%; }

  /* Cross-link bottom Bp 5 §8b (Rubens 2026-05-16) — "Compare a Octa Funnel com outras plataformas" */
  .octa-vs-related {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-3);
    list-style: none;
    padding: 0;
    margin: var(--space-6) 0 0;
  }
  .octa-vs-related-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--background-2);
    color: var(--foreground);
    text-decoration: none;
    font-size: 14px;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
  }
  .octa-vs-related-link:hover {
    border-color: var(--accent);
    background: var(--muted);
    transform: translateY(-1px);
  }
  .octa-vs-related-prefix {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted-foreground);
  }
  .octa-vs-related-name {
    font-weight: 600;
    color: var(--foreground);
    flex: 1;
  }
  .octa-vs-related-arrow {
    color: var(--accent);
    font-size: 16px;
    font-weight: 600;
    transition: transform 160ms ease;
  }
  .octa-vs-related-link:hover .octa-vs-related-arrow { transform: translateX(2px); }

  /* 06.1 Hero modos */
  .hero.is-simple,
  .hero.is-vs,
  .hero.is-search,
  .hero.is-form {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--background);
    isolation: isolate;
  }
  /* canvas dentro dos modos novos precisa de stacking context próprio
     pra não cair pra trás do wrapper de demo do showcase */
  .hero.is-simple > .hero-glow-canvas,
  .hero.is-vs > .hero-glow-canvas,
  .hero.is-search > .hero-glow-canvas,
  .hero.is-form > .hero-glow-canvas {
    z-index: var(--z-base);
  }
  .hero.is-simple > .container,
  .hero.is-vs > .container,
  .hero.is-search > .container,
  .hero.is-form > .container {
    position: relative;
    z-index: var(--z-content);
  }
  .hero.is-simple { padding: var(--space-12) 0 var(--space-8); }
  .hero.is-vs    { padding: var(--space-12) 0 var(--space-8); }
  .hero.is-search { padding: var(--space-14) 0 var(--space-10); }
  .hero.is-form   { padding: var(--space-10) 0; }

  /* Modo simples (Bp 10/14/18) */
  .octa-hero-simple {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
  }
  .octa-hero-simple .headline-xl { margin-bottom: var(--space-4); }
  .octa-hero-simple .octa-lead {
    max-width: 640px;
    margin: 0 auto var(--space-6);
  }
  .octa-hero-simple .hero-ctas { justify-content: center; }

  /* Modo comparativo (Bp 5) */
  .octa-hero-vs {
    text-align: center;
    max-width: 780px;
    margin: 0 auto;
  }
  .octa-hero-vs .headline-xl { margin-bottom: var(--space-3-5); }
  .octa-hero-vs .octa-lead {
    max-width: 660px;
    margin: 0 auto var(--space-6);
  }
  .octa-hero-vs .hero-ctas { justify-content: center; }
  .octa-hero-vs-logos {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4-5);
    margin-bottom: var(--space-5);
  }
  .octa-hero-vs-logo {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--background-2);
    border: 0.5px solid var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .octa-hero-vs-logo.is-octa .ds-octa-mark {
    width: 32px;
    height: 32px;
    color: var(--accent);
  }
  .octa-hero-vs-logo img {
    width: 36px;
    height: 36px;
    object-fit: contain;
  }
  .octa-hero-vs-x {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 500;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  /* Modo busca (Bp 9/12 hub) */
  .octa-hero-search {
    text-align: center;
    max-width: 680px;
    margin: 0 auto;
  }
  .octa-hero-search .headline-xl { margin-bottom: var(--space-3-5); }
  .octa-hero-search .octa-lead {
    max-width: 580px;
    margin: 0 auto var(--space-6);
  }
  .octa-hero-search-form {
    position: relative;
    max-width: 560px;
    margin: 0 auto;
  }
  .octa-hero-search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted-foreground);
    pointer-events: none;
    display: inline-flex;
  }
  .octa-hero-search-icon svg {
    width: 18px; height: 18px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }
  .octa-hero-search-input {
    width: 100%;
    padding: var(--space-4) var(--space-4) var(--space-4) var(--space-12);
    border-radius: var(--radius-full);
    border: 0.5px solid var(--border-strong);
    background: var(--background-2);
    color: var(--foreground);
    font-size: 15px;
    font-family: inherit;
    transition: border-color var(--dur-fast);
  }
  .octa-hero-search-input::placeholder { color: var(--muted-foreground); opacity: 0.6; }
  .octa-hero-search-input:focus {
    outline: none;
    border-color: var(--accent);
  }
  .octa-hero-search-popular {
    margin-top: var(--space-4-5);
    display: flex;
    gap: var(--space-3-5);
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
  }
  .octa-hero-search-popular-label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted-foreground);
  }
  .octa-hero-search-popular-link {
    font-size: 13px;
    color: var(--accent);
    text-decoration: none;
    transition: opacity var(--dur-fast);
  }
  .octa-hero-search-popular-link:hover { opacity: 0.85; text-decoration: underline; }

  /* 06.1 Hero modo form */
  .octa-hero-form-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-12);
    align-items: center;
    max-width: 1080px;
    margin: 0 auto;
  }
  .octa-hero-form-copy { min-width: 0; }
  .octa-hero-form-copy .headline-xl { margin-bottom: var(--space-3-5); }
  .octa-hero-form-copy .octa-lead { margin-bottom: var(--space-4-5); }
  .octa-hero-form-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: 13px;
    color: var(--muted-foreground);
  }
  .octa-hero-form-bullets li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .octa-hero-form-bullets svg {
    width: 14px; height: 14px;
    stroke: var(--accent); fill: none;
    stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
    flex-shrink: 0;
  }
  @media (max-width: 900px) {
    .octa-hero-form-grid {
      grid-template-columns: 1fr;
      gap: var(--space-8);
    }
  }

  /* 04.23 Notif banner (06.20/06.27) */
  .octa-notif-banner {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    background: linear-gradient(135deg, rgba(249,115,22,0.08) 0%, rgba(249,115,22,0.02) 100%);
    border: 1.5px solid rgba(249,115,22,0.25);
    border-radius: var(--radius-lg);
    overflow: hidden;
    overflow: hidden;
    text-decoration: none;
    transition: border-color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-base);
  }
  .octa-notif-banner:hover {
    border-color: rgba(249,115,22,0.50);
    box-shadow: 0 4px 24px rgba(249,115,22,0.10);
    transform: translateY(-2px);
  }
  .octa-notif-banner::before {
    content: '';
    position: absolute;
    top: -50%; right: -10%;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(249,115,22,0.06) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
  }
  .octa-notif-banner-icon {
    flex-shrink: 0;
    width: 48px; height: 48px;
    border-radius: var(--radius-xl);
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--accent), #EA580C);
    color: var(--pure-white);
    box-shadow: 0 4px 12px rgba(249,115,22,0.30);
    position: relative; z-index: var(--z-content);
  }
  .octa-notif-banner-icon svg {
    width: 22px; height: 22px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }
  .octa-notif-banner-body {
    flex: 1; min-width: 0;
    position: relative; z-index: var(--z-content);
  }
  .octa-notif-banner-body h3,
  .octa-notif-banner-body h4 {
    font-family: var(--font-sans);
    font-size: 14px; font-weight: 700;
    color: var(--foreground);
    margin: 0 0 var(--space-0-5);
    display: flex; align-items: center;
    gap: var(--space-1-5);
    flex-wrap: wrap;
  }
  .octa-notif-banner-badge {
    font-family: var(--font-mono);
    font-size: 9px; font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-0-5) 7px;
    border-radius: 4px;
    background: var(--accent);
    color: var(--pure-white);
  }
  .octa-notif-banner-body p {
    font-size: 12px;
    line-height: 1.5;
    color: var(--muted-foreground);
    margin: 0;
    max-width: 520px;
  }
  .octa-notif-banner-cta {
    flex-shrink: 0;
    position: relative; z-index: var(--z-content);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--accent);
    color: var(--pure-white);
    font-family: var(--font-sans);
    font-size: 12px; font-weight: 600;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: var(--space-1-5);
    transition: background var(--dur-fast);
  }
  .octa-notif-banner-cta:hover { background: #EA580C; }
  .octa-notif-banner-cta svg {
    width: 14px; height: 14px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }
  /* Variante .is-result — protagonismo no valor (06.20 Calculadora) */
  .octa-notif-banner.is-result .octa-notif-banner-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
  }
  .octa-notif-banner-eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted-foreground);
  }
  .octa-notif-banner-value {
    display: block;
    font-family: var(--font-mono);
    font-size: clamp(22px, 3vw, 28px);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.1;
    color: var(--accent);
  }
  .octa-notif-banner.is-result .octa-notif-banner-body p {
    margin-top: var(--space-1);
  }
  @media (max-width: 640px) {
    .octa-notif-banner { flex-direction: column; text-align: center; }
    .octa-notif-banner-body h3,
    .octa-notif-banner-body h4 { justify-content: center; }
  }

  /* 06.26 Quiz multi-step */
  .octa-quiz {
    max-width: 640px;
    margin: 0 auto;
    background: var(--background-2);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
  }
  .octa-quiz-progress {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-7) var(--space-5);
    border-bottom: 0.5px solid var(--border);
  }
  .octa-quiz-progress-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted-foreground);
  }
  .octa-quiz-progress-meta b {
    color: var(--foreground);
    font-weight: 600;
  }
  .octa-quiz-progress-bar {
    display: flex;
    gap: var(--space-1);
    height: 4px;
  }
  .octa-quiz-progress-seg {
    flex: 1;
    background: var(--muted);
    border-radius: var(--radius-sm);
    transition: background var(--dur-fast);
  }
  .octa-quiz-progress-seg.is-done { background: var(--accent); }
  .octa-quiz-progress-seg.is-current {
    background: var(--accent);
    animation: octa-quiz-pulse 1.6s ease-in-out infinite;
  }
  @keyframes octa-quiz-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }

  .octa-quiz-step {
    /* Reset do fieldset default — sem border nativo, mantém margin-top pra separar da barra */
    border: 0;
    margin: var(--space-5) 0 0;
    min-inline-size: 0;
    padding: var(--space-6) var(--space-7) var(--space-7);
    display: none;
  }
  .octa-quiz-step[data-active] { display: block; }
  .octa-quiz-step legend {
    /* Reset do legend default — sem float/position nativo, comporta como block normal */
    display: block;
    width: 100%;
    float: none;
    font-family: var(--font-sans);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--foreground);
    line-height: 1.35;
    margin: 0 0 var(--space-2);
    padding: 0;
  }
  .octa-quiz-step-helper {
    font-size: 12px;
    color: var(--muted-foreground);
    line-height: 1.5;
    margin: 0 0 var(--space-4-5);
    display: flex;
    align-items: flex-start;
    gap: var(--space-1-5);
  }
  .octa-quiz-step-helper svg {
    width: 13px; height: 13px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    flex-shrink: 0; margin-top: 1px;
  }
  .octa-quiz-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0 0 var(--space-5);
    list-style: none;
    padding: 0;
  }
  .octa-quiz-option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 0.5px solid var(--border-strong);
    background: var(--background);
    cursor: pointer;
    transition: all var(--dur-fast);
  }
  .octa-quiz-option:hover {
    border-color: var(--accent);
    background: rgba(249, 115, 22, 0.04);
  }
  .octa-quiz-option input[type="radio"] {
    accent-color: var(--accent);
    cursor: pointer;
    width: 16px; height: 16px;
    flex-shrink: 0;
  }
  .octa-quiz-option-label {
    font-size: 13px;
    color: var(--foreground);
    line-height: 1.4;
  }
  .octa-quiz-option:has(input:checked) {
    border-color: var(--accent);
    background: rgba(249, 115, 22, 0.06);
  }
  .octa-quiz-actions {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 0.5px solid var(--border);
    margin-top: var(--space-2);
  }
  .octa-quiz-actions .octa-quiz-back-spacer { flex: 0 0 auto; }
  /* Sub-pergunta condicional — visível só quando trigger ativa */
  .octa-quiz-sub {
    margin-top: var(--space-4);
    padding: var(--space-4);
    border-left: 1.5px solid var(--border);
    background: var(--muted);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    display: none;
  }
  .octa-quiz-sub[data-active] { display: block; }

  /* 06.27 Resultado quiz/calc */
  .octa-result {
    max-width: 980px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
  }
  .octa-result-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
  }
  .octa-result-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-1) var(--space-2-5);
    border-radius: var(--radius-full);
    background: rgba(16, 185, 129, 0.12);
    color: var(--ds-status-ok);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-3);
  }
  .octa-result-badge svg {
    width: 12px; height: 12px;
    stroke: currentColor; fill: none;
    stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  }
  .octa-result-title {
    font-family: var(--font-sans);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--foreground);
    line-height: 1.2;
    margin: 0 0 var(--space-3);
  }
  .octa-result-disclaim {
    font-size: 13px;
    color: var(--muted-foreground);
    line-height: 1.55;
    opacity: 0.85;
    margin: 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
  .octa-result-meta {
    margin-top: var(--space-2);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted-foreground);
    opacity: 0.7;
  }
  /* Cards financeiros (5 cards = grid 2 colunas com último ocupando ambas no desktop) */
  .octa-result-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
  .octa-result-card {
    background: var(--background-2);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    padding: var(--space-5) 22px;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .octa-result-card.is-fullrow { grid-column: 1 / -1; }
  .octa-result-card-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted-foreground);
  }
  .octa-result-card-label svg {
    width: 14px; height: 14px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    color: var(--accent);
  }
  .octa-result-card-value {
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 600;
    color: var(--foreground);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
  }
  .octa-result-card-desc {
    font-size: 12px;
    color: var(--muted-foreground);
    line-height: 1.5;
    margin: 0;
  }
  /* Card destaque grande — reusa .octa-notif-banner.is-result (4.23 do front-docs) */
  @media (max-width: 700px) {
    .octa-result-cards { grid-template-columns: 1fr; }
  }

  /* 06.28 Nao encontrou */
  .octa-notfound {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    padding: var(--space-10) var(--space-8);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--background-2);
    text-align: center;
    overflow: hidden;
  }
  .octa-notfound > .octa-bento-bg-dots {
    z-index: var(--z-base);
    border-radius: inherit;
    pointer-events: none;
  }
  .octa-notfound > *:not(.octa-bento-bg-dots) {
    position: relative;
    z-index: var(--z-content);
  }
  .octa-notfound-icon {
    width: 48px; height: 48px;
    margin: 0 auto var(--space-4);
    border-radius: var(--radius-full);
    background: rgba(249, 115, 22, 0.08);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .octa-notfound-icon svg {
    width: 22px; height: 22px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }
  .octa-notfound-title {
    font-family: var(--font-sans);
    font-size: clamp(20px, 2.6vw, 26px);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--foreground);
    margin: 0 0 var(--space-3);
  }
  .octa-notfound-desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted-foreground);
    margin: 0 0 var(--space-5);
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
  }
  .octa-notfound-list {
    list-style: none;
    margin: 0 auto var(--space-6);
    padding: 0;
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4-5);
    justify-content: center;
  }
  .octa-notfound-list li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    font-size: 13px;
    color: var(--muted-foreground);
  }
  .octa-notfound-list li::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
  }
  .octa-notfound-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
  }
  @media (max-width: 640px) {
    .octa-notfound { padding: var(--space-8) var(--space-6); }
    .octa-notfound-actions { flex-direction: column; }
    .octa-notfound-actions .btn { width: 100%; justify-content: center; }
  }

  /* 06.17 Marquee logos (octa-mq) */
  .octa-mq-section {
    padding: var(--space-14) 0;
  }
  .octa-mq-head {
    max-width: 720px;
    margin: 0 auto var(--space-10);
    text-align: center;
    padding: 0 var(--space-6);
  }
  .octa-mq-title {
    font-family: var(--font-sans);
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 500;
    letter-spacing: -0.01em; line-height: 1.3;
    color: var(--foreground);
    margin: 0;
    text-wrap: balance;
  }
  .octa-mq-title .accent { color: var(--accent); }
  .octa-mq-rows {
    position: relative;
    display: flex; flex-direction: column;
  }
  .octa-mq {
    position: relative;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  }
  .octa-mq-track {
    display: flex;
    width: max-content;
    animation: octa-mq-scroll 60s linear infinite;
    will-change: transform;
  }
  .octa-mq.is-reverse .octa-mq-track { animation-direction: reverse; }
  .octa-mq:hover .octa-mq-track { animation-play-state: paused; }
  .octa-mq-item {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    width: 160px; height: 72px;
    padding: var(--space-3) var(--space-5);
    background: var(--background-2);
    border-radius: var(--radius-md);
  }
  .octa-mq-logo {
    display: block;
    height: 32px; width: auto; max-width: 120px;
    object-fit: contain;
    filter: grayscale(100%) brightness(1.8) contrast(0.4);
    opacity: 0.6;
    transition: filter var(--dur-base) ease, opacity var(--dur-base) ease, transform var(--dur-base) ease;
  }
  .octa-mq-item:hover .octa-mq-logo {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.08);
  }

  /* Badge canônica 03.9 sobreposta ao centro do marquee */
  .octa-mq-badge {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: var(--z-overlay);
    margin: 0;
    box-shadow: var(--shadow-md);
  }
  @keyframes octa-mq-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .octa-mq-track { animation: none; }
    .octa-mq { mask-image: none; -webkit-mask-image: none; overflow-x: auto; }
  }

  /* 06.15 Apresentacao rapida */
  .octa-sk {
    max-width: 1180px;
    margin: 0 auto;
    font-family: var(--font-sans);
    position: relative;
  }
  .octa-sk-head {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
  }
  .octa-sk-head h2 {
    font-size: clamp(24px, 3.5vw, 34px); font-weight: 700;
    letter-spacing: -0.025em; line-height: 1.2;
    color: var(--foreground); margin: 0 0 var(--space-2);
  }
  .octa-sk-head p {
    font-size: 15px; color: var(--muted-foreground);
    line-height: 1.65; margin: 0;
  }

  /* Scroll-area com scroll INTERNO (sem moldura, scrollbar oculta) */
  .octa-sk-scroll-area {
    position: relative;
    height: 520px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* IE/Edge legacy */
  }
  .octa-sk-scroll-area::-webkit-scrollbar { display: none; width: 0; height: 0; }

  /* Conteúdo interno: altura = N × 520 (uma "tela" por step) */
  .octa-sk-content {
    position: relative;
    height: calc(var(--sk-steps, 3) * 520px);
  }
  /* Pin: ocupa 1ª "tela" e fica grudado durante o resto do scroll interno */
  .octa-sk-pin {
    position: sticky;
    top: 0;
    height: 520px;
    display: flex; align-items: center;
    padding: var(--space-8) var(--space-10);
    z-index: var(--z-overlap);
  }
  .octa-sk-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-7);
    align-items: center;
  }
  @media (min-width: 760px) {
    .octa-sk-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-12); }
  }

  /* Stack de texto: 3 steps no mesmo lugar, cross-fade entre elas */
  .octa-sk-text-stack {
    position: relative;
    min-height: 240px;
  }
  .octa-sk-step {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: center;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
    pointer-events: none;
  }
  .octa-sk-step.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Triggers fantasmas — uma "tela" interna por step */
  .octa-sk-triggers {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: var(--z-base);
  }
  .octa-sk-trigger {
    position: absolute;
    left: 0; right: 0;
    height: 520px;
  }
  .octa-sk-trigger[data-trigger="0"] { top: 0; }
  .octa-sk-trigger[data-trigger="1"] { top: 520px; }
  .octa-sk-trigger[data-trigger="2"] { top: 1040px; }
  .octa-sk-trigger[data-trigger="3"] { top: 1560px; }

  /* Hint visual: ícone "scroll" no canto pra usuário entender */
  .octa-sk-scroll-hint {
    position: absolute;
    top: 16px; right: 20px;
    z-index: 3;
    display: inline-flex; align-items: center; gap: var(--space-1-5);
    font-family: var(--font-mono); font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.10em;
    color: var(--muted-foreground);
    background: rgba(0,0,0,0.40);
    backdrop-filter: blur(8px);
    padding: 5px var(--space-2-5);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-full);
    pointer-events: none;
    animation: ogSkHintFade 4s ease-out forwards;
  }
  .octa-sk-scroll-hint svg {
    width: 11px; height: 11px;
    stroke: currentColor; fill: none; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
    animation: ogSkHintArrow 1.6s ease-in-out infinite;
  }
  @keyframes ogSkHintFade { to { opacity: 0; } }
  @keyframes ogSkHintArrow {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(3px); }
  }

  .octa-sk-num {
    display: inline-flex; align-items: center; gap: var(--space-2);
    width: fit-content;
    font-family: var(--font-mono); font-size: 11px; font-weight: 500;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    padding: 5px var(--space-3) 5px var(--space-2-5);
    background: var(--background);
    border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-full);
    color: var(--muted-foreground);
    margin-bottom: 22px;
  }
  .octa-sk-num-n {
    color: var(--accent);
    font-weight: 600;
  }
  .octa-sk-num-sep {
    width: 1px; height: 10px;
    background: var(--border-strong);
    opacity: 0.6;
  }
  .octa-sk-num-l {
    color: var(--foreground);
    font-weight: 500;
    letter-spacing: 0.08em;
  }
  .octa-sk-step h3 {
    font-size: clamp(22px, 2.6vw, 28px); font-weight: 700;
    letter-spacing: -0.02em; line-height: 1.25;
    color: var(--foreground);
    margin: 0 0 var(--space-3-5);
  }
  .octa-sk-step h3 em { font-style: normal; color: var(--accent); font-weight: 700; }
  .octa-sk-step p {
    font-size: 15px; line-height: 1.65;
    color: var(--muted-foreground);
    max-width: 480px;
    margin: 0;
  }

  /* Painel direito (dentro do pinned) */
  .octa-sk-panel {
    position: relative;
    display: none;
  }
  @media (min-width: 760px) { .octa-sk-panel { display: block; } }
  .octa-sk-panel-stack {
    position: relative;
    width: 320px; height: 300px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--background);
    border: 0.5px solid var(--border-strong);
  }
  .octa-sk-panel-card {
    position: absolute; inset: 0;
    opacity: 0;
    transform: scale(0.96);
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
    pointer-events: none;
  }
  .octa-sk-panel-card.is-active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
  }

  /* Body do panel-card centralizado verticalmente (eixo Y) */
  .octa-sk-panel-card .octa-bento-card-body {
    height: 100%;
    justify-content: center;
  }
  /* Extras do panel-card (microcards, pills, channels) */
  .octa-sk-extras {
    margin-top: var(--space-3);
    width: 100%;
  }
  /* Microcards de plataformas (card 1) — espelha .octa-listing-card-icon */
  .octa-sk-microcards {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .octa-sk-microcard {
    width: 40px; height: 40px;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    background: var(--background);
    border: 0.5px solid var(--border);
    overflow: hidden;
    flex-shrink: 0;
  }
  .octa-sk-microcard img {
    width: 28px; height: 28px;
    object-fit: contain;
    display: block;
  }
  /* Pills de frameworks (card 2) — espelha .octa-fw-selectors / .octa-fw-sel */
  .octa-sk-pills {
    display: flex; flex-wrap: wrap;
    gap: var(--space-1-5);
  }
  .octa-sk-pill {
    display: inline-flex; align-items: center; gap: var(--space-1);
    padding: 3px 9px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-strong);
    background: var(--background);
    font-size: 10px; font-weight: 500;
    color: var(--muted-foreground);
    transition: all var(--dur-fast);
    user-select: none;
    white-space: nowrap;
  }
  .octa-sk-pill:hover { border-color: var(--accent); color: var(--accent); }
  .octa-sk-pill.is-active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
  }
  .octa-sk-pill-indicator {
    width: 12px; height: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
  }
  .octa-sk-pill-indicator .dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: currentColor;
  }
  .octa-sk-pill.is-active .dot { display: none; }
  .octa-sk-pill-indicator .check { display: none; }
  .octa-sk-pill.is-active .octa-sk-pill-indicator .check {
    display: block; width: 10px; height: 10px;
    stroke: currentColor; fill: none;
    stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  }
  /* Channels (card 3) — espelha .octa-fw-selected-card-triggers / .octa-fw-trigger-chip */
  .octa-sk-channels {
    display: flex; flex-wrap: wrap;
    gap: var(--space-2);
  }
  .octa-sk-channel {
    display: flex; flex-direction: column;
    align-items: center;
    gap: var(--space-1);
  }
  .octa-sk-channel-ico {
    width: 44px; height: 44px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
  }
  .octa-sk-channel-ico svg {
    width: 18px; height: 18px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }
  .octa-sk-channel-name {
    font-size: 8px; font-weight: 500;
    color: var(--muted-foreground);
    text-align: center; line-height: 1.2;
  }
  .octa-sk-channel.is-sms .octa-sk-channel-ico { background: rgba(49,134,255,0.12); color: var(--ds-channel-sms); }
  .octa-sk-channel.is-call .octa-sk-channel-ico { background: rgba(139,92,246,0.12); color: var(--ds-channel-call); }
  .octa-sk-channel.is-wa .octa-sk-channel-ico { background: rgba(37,211,102,0.12); color: var(--ds-channel-wa); }
  .octa-sk-channel.is-email .octa-sk-channel-ico { background: rgba(249,115,22,0.12); color: var(--accent); }
  /* Progress dots ao lado do painel */
  .octa-sk-progress {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    right: -24px;
    display: flex; flex-direction: column; gap: var(--space-2-5);
  }
  @media (max-width: 760px) {
    .octa-sk-progress { display: none; }
  }
  .octa-sk-progress-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--border);
    transition: background var(--dur-fast), transform var(--dur-fast);
  }
  .octa-sk-progress-dot.is-active {
    background: var(--accent);
    transform: scale(1.4);
  }

  /* 06.4 Testimonials (octa-ts) */
  .octa-ts {
    max-width: 1180px;
    margin: 0 auto;
    padding-inline: clamp(16px, 4vw, 32px);
    padding-block: clamp(64px, 8vw, 96px);
    font-family: var(--font-sans);
  }
  .octa-ts-head { margin-bottom: var(--space-7); max-width: 640px; }
  .octa-ts-head-eyebrow {
    display: inline-block;
    font-family: var(--font-mono); font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.10em;
    color: var(--accent); margin-bottom: var(--space-2-5);
  }
  .octa-ts-head h2 {
    font-size: clamp(22px, 3vw, 30px); font-weight: 700;
    letter-spacing: -0.02em; line-height: 1.25;
    color: var(--foreground); margin: 0 0 var(--space-2);
  }
  .octa-ts-head p {
    font-size: 14px; color: var(--muted-foreground);
    line-height: 1.6; margin: 0;
  }

  /* Card editorial moderno — sem barra lateral, sem quote mark */
  .octa-ts-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex; flex-direction: column; gap: var(--space-5);
    padding: 22px var(--space-6);
    background: var(--background-2);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--dur-fast), background var(--dur-fast);
    min-height: 200px;
  }
  .octa-ts-card:hover {
    border-color: rgba(249,115,22,0.30);
    background: rgba(255,255,255,0.012);
  }
  .octa-ts-card > .octa-bento-bg-dots { z-index: var(--z-base); border-radius: inherit; pointer-events: none; }
  .octa-ts-quote {
    position: relative; z-index: var(--z-content);
    font-size: 14.5px;
    color: var(--foreground);
    line-height: 1.65;
    margin: 0;
    font-weight: 400;
    flex: 1;
  }
  .octa-ts-quote em {
    font-style: normal;
    color: var(--accent);
    font-weight: 500;
  }

  .octa-ts-card footer {
    position: relative; z-index: var(--z-content);
    display: flex; align-items: center; gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 0.5px solid var(--border);
    margin-top: auto;
  }

  /* Monogram avatar — inicial em mono, fundo laranja translúcido */
  .octa-ts-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(249,115,22,0.10);
    color: var(--accent);
    font-family: var(--font-mono); font-size: 11px; font-weight: 600;
    letter-spacing: 0.06em;
    flex-shrink: 0;
    border: 0.5px solid rgba(249,115,22,0.20);
  }

  .octa-ts-meta { display: flex; flex-direction: column; gap: var(--space-0-5); min-width: 0; flex: 1; }
  .octa-ts-meta cite {
    font-style: normal;
    font-size: 13px; font-weight: 600;
    color: var(--foreground);
    line-height: 1.3;
  }

  /* ─── Modo: single (1 card destaque) ─── */
  .octa-ts-grid { display: grid; gap: var(--space-5); }
  .octa-ts-grid.is-single   { grid-template-columns: minmax(0, 720px); justify-content: center; gap: 0; }
  .octa-ts-grid.is-single .octa-ts-card { min-height: 0; padding: var(--space-7) var(--space-8); }
  .octa-ts-grid.is-single .octa-ts-quote { font-size: 18px; line-height: 1.6; }

  /* ─── Modo: grid-3 ─── */
  .octa-ts-grid.is-grid-3 { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }

  /* ─── Modo: compacto-2 ─── */
  .octa-ts-grid.is-grid-2 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 880px;
    margin-left: auto; margin-right: auto;
    gap: var(--space-5);
  }
  .octa-ts-grid.is-grid-2 .octa-ts-card { min-height: 0; }

  /* ─── Modo: marquee (scroll infinito 2 trilhas) ─── */
  .octa-ts-marquee {
    position: relative;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  }
  .octa-ts-marquee + .octa-ts-marquee { margin-top: var(--space-5); }
  .octa-ts-track {
    display: flex; gap: var(--space-5);
    width: max-content;
    animation: ogTsScroll 80s linear infinite;
  }
  .octa-ts-marquee.is-reverse .octa-ts-track {
    animation-direction: reverse;
    animation-duration: 90s;
  }
  .octa-ts-marquee:hover .octa-ts-track { animation-play-state: paused; }
  .octa-ts-track .octa-ts-card { width: 380px; flex-shrink: 0; }
  @keyframes ogTsScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .octa-ts-track { animation: none; transform: none; }
    .octa-ts-marquee { mask-image: none; -webkit-mask-image: none; }
  }

  /* Separador entre seções de modo (no demo do showcase) */
  .octa-ts-divider {
    margin: var(--space-9) 0 var(--space-6);
    padding-top: var(--space-5);
    border-top: 0.5px dashed var(--border);
  }
  .octa-ts-divider-label {
    font-family: var(--font-mono); font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--muted-foreground); margin-bottom: var(--space-4);
  }
  .octa-ts-divider-label code {
    color: var(--accent); background: rgba(249,115,22,0.08);
    padding: var(--space-0-5) 7px; border-radius: 3px; text-transform: none;
    letter-spacing: 0.04em;
  }

  @media (max-width: 800px) {
    .octa-ts-grid.is-grid-3,
    .octa-ts-grid.is-grid-2 { grid-template-columns: 1fr; }
    .octa-ts-track .octa-ts-card { width: 320px; }
  }

  /* 06.13 Timeline (octa-tl) */
  .octa-tl {
    max-width: 1080px;
    margin: 0 auto;
    font-family: var(--font-sans);
    position: relative;
  }
  .octa-tl-head {
    max-width: 640px;
    margin: 0 auto var(--space-10);
  }
  .octa-tl-head h2 {
    font-size: clamp(24px, 3.5vw, 36px); font-weight: 700;
    letter-spacing: -0.025em; line-height: 1.2;
    color: var(--foreground); margin: 0 0 var(--space-2);
  }
  .octa-tl-head p {
    font-size: 15px; color: var(--muted-foreground);
    line-height: 1.6; margin: 0;
  }

  .octa-tl-body {
    position: relative;
    padding-left: var(--space-14);
  }

  /* Linha vertical à esquerda com mask top/bottom fade */
  .octa-tl-line {
    position: absolute;
    left: 19px;
    top: 0; bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, transparent 0%, var(--border-strong) 6%, var(--border-strong) 94%, transparent 100%);
    pointer-events: none;
    overflow: hidden;
  }
  .octa-tl-line-progress {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 0;
    background: linear-gradient(to top, transparent 0%, var(--accent) 30%, var(--accent) 100%);
    transition: height 60ms linear;
    will-change: height;
  }

  /* Cada step */
  .octa-tl-step {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding: var(--space-5) 0;
  }
  @media (min-width: 760px) {
    .octa-tl-step { grid-template-columns: 220px 1fr; gap: var(--space-8); padding: var(--space-8) 0; }
  }
  .octa-tl-step:first-child { padding-top: 0; }
  .octa-tl-step:last-child { padding-bottom: 0; }

  /* Aside sticky com dot + título */
  .octa-tl-step-aside {
    display: flex; align-items: center; gap: var(--space-3-5);
  }
  @media (min-width: 760px) {
    .octa-tl-step-aside {
      position: sticky;
      top: 24px;
      align-self: start;
      height: fit-content;
    }
  }
  .octa-tl-step-dot {
    position: absolute; left: -56px;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: var(--background);
    border-radius: 50%;
    z-index: var(--z-raised);
  }
  .octa-tl-step-dot::before {
    content: "";
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--background-2);
    border: 0.5px solid var(--border-strong);
    transition: background var(--dur-base), border-color var(--dur-base), transform var(--dur-base);
  }
  .octa-tl-step.is-active .octa-tl-step-dot::before {
    background: var(--accent);
    border-color: var(--accent);
    transform: scale(1.15);
    box-shadow: 0 0 0 4px rgba(249,115,22,0.18);
  }
  .octa-tl-step-num {
    font-family: var(--font-mono); font-size: 12px; font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--muted-foreground);
    transition: color var(--dur-base);
  }
  .octa-tl-step.is-active .octa-tl-step-num { color: var(--accent); }
  .octa-tl-step-title {
    font-size: clamp(22px, 3.5vw, 36px); font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: var(--muted-foreground);
    margin: 0;
    transition: color var(--dur-base);
  }
  .octa-tl-step.is-active .octa-tl-step-title { color: var(--foreground); }
  .octa-tl-step-aside-meta {
    display: flex; flex-direction: column; gap: var(--space-1);
  }

  /* Conteúdo do step */
  .octa-tl-step-content {
    font-size: 14.5px; line-height: 1.7;
    color: var(--muted-foreground);
  }
  .octa-tl-step-content p { margin: 0 0 var(--space-3-5); }
  .octa-tl-step-content p:last-child { margin-bottom: 0; }
  .octa-tl-step-content ul {
    list-style: none; padding: 0; margin: 0 0 var(--space-4-5);
    display: flex; flex-direction: column; gap: var(--space-2);
  }
  .octa-tl-step-content ul li {
    display: flex; align-items: flex-start; gap: var(--space-2-5);
    font-size: 14px;
    color: var(--foreground);
  }
  .octa-tl-step-content ul li svg {
    flex-shrink: 0;
    width: 14px; height: 14px;
    margin-top: var(--space-1);
    stroke: var(--accent); fill: none; stroke-width: 2.5;
    stroke-linecap: round; stroke-linejoin: round;
  }
  /* Wrapper do card-base dentro do step (largura limitada) */
  .octa-tl-step-cardwrap {
    margin-top: var(--space-5);
    max-width: 460px;
  }
  /* Pills de canais reutilizáveis dentro do card-base
     Layout espelha .octa-fw-selected-card-triggers / .octa-fw-trigger-chip */
  .octa-bento-card-pills {
    display: flex; flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
  }
  .octa-bento-card-pill {
    display: flex; flex-direction: column;
    align-items: center;
    gap: var(--space-1);
  }
  .octa-bento-card-pill-box {
    width: 44px; height: 44px;
    border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
  }
  .octa-bento-card-pill-box svg {
    width: 18px; height: 18px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    color: currentColor;
  }
  .octa-bento-card-pill-label {
    font-size: 8px; font-weight: 500;
    color: var(--muted-foreground);
    text-align: center; line-height: 1.2;
  }
  /* Cores por canal — tokens canônicos dos canais (bg + color no box) */
  .octa-bento-card-pill.is-sms   .octa-bento-card-pill-box { background: rgba(49,134,255,0.12); color: var(--ds-channel-sms); }
  .octa-bento-card-pill.is-call  .octa-bento-card-pill-box { background: rgba(139,92,246,0.12); color: var(--ds-channel-call); }
  .octa-bento-card-pill.is-wa    .octa-bento-card-pill-box { background: rgba(37,211,102,0.12); color: var(--ds-channel-wa); }
  .octa-bento-card-pill.is-email .octa-bento-card-pill-box { background: rgba(249,115,22,0.12); color: var(--ds-channel-email); }

  /* 06.13 Timeline media 760 */
  @media (max-width: 760px) {
    .octa-tl-body { padding-left: 44px; }
    .octa-tl-line { left: 15px; }
    .octa-tl-step-dot { left: -44px; width: 32px; height: 32px; }
    .octa-tl-step-dot::before { width: 10px; height: 10px; }
  }

  /* 06.7 Pricing (octa-pricing) */
  .octa-pricing {
    max-width: 1180px;
    margin: 0 auto;
    font-family: var(--font-sans);
  }
  .octa-pricing-head {
    max-width: 640px;
    margin: 0 auto var(--space-9);
    text-align: center;
  }
  .octa-pricing-head-eyebrow {
    display: inline-block;
    font-family: var(--font-mono); font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.10em;
    color: var(--accent); margin-bottom: var(--space-2-5);
  }
  .octa-pricing-head h2 {
    font-size: clamp(24px, 3.5vw, 34px); font-weight: 700;
    letter-spacing: -0.025em; line-height: 1.2;
    color: var(--foreground); margin: 0 0 var(--space-2);
  }
  .octa-pricing-head p {
    font-size: 15px; color: var(--muted-foreground);
    line-height: 1.6; margin: 0;
  }

  /* Grid 3 cards lado a lado */
  .octa-pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    align-items: stretch;
  }
  @media (min-width: 880px) {
    .octa-pricing-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-4-5); }
  }

  /* Card externo (padding 6px ao redor, "moldura") */
  .octa-pricing-card {
    position: relative;
    background: var(--background-2);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-1-5);
    transition: border-color var(--dur-base);
    display: flex; flex-direction: column;
  }
  .octa-pricing-card:hover { border-color: rgba(249,115,22,0.30); }
  .octa-pricing-card.is-featured {
    border-color: var(--accent);
    border-width: 1px;
  }

  /* Header card-in-card com efeito glass */
  .octa-pricing-card-header {
    position: relative;
    background: var(--background);
    border: 0.5px solid var(--border);
    border-radius: calc(var(--radius-xl) - 4px);
    padding: var(--space-4-5) var(--space-4-5) var(--space-5);
    margin-bottom: var(--space-2);
    overflow: hidden;
  }
  .octa-pricing-card-header::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 40%, rgba(0,0,0,0) 100%);
    pointer-events: none;
    border-radius: inherit;
    z-index: var(--z-content);
  }
  .octa-pricing-card-header > .octa-bento-bg-dots { z-index: var(--z-base); border-radius: inherit; }
  .octa-pricing-card-header > .octa-pricing-card-plan,
  .octa-pricing-card-header > .octa-pricing-card-desc,
  .octa-pricing-card-header > .octa-pricing-card-price { position: relative; z-index: var(--z-overlap); }
  .octa-pricing-card-plan {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-2); margin-bottom: var(--space-4-5);
    position: relative;
  }
  .octa-pricing-card-name {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-size: 13.5px; font-weight: 500;
    color: var(--muted-foreground);
  }
  .octa-pricing-card-name svg {
    width: 16px; height: 16px;
    stroke: currentColor; fill: none; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .octa-pricing-card.is-featured .octa-pricing-card-name { color: var(--accent); }

  .octa-pricing-card-badge {
    display: inline-flex; align-items: center;
    padding: var(--space-0-5) 9px;
    font-family: var(--font-sans); font-size: 11px; font-weight: 500;
    color: var(--foreground);
    border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-full);
    white-space: nowrap;
  }
  .octa-pricing-card.is-featured .octa-pricing-card-badge {
    color: var(--pure-white);
    background: var(--accent);
    border-color: var(--accent);
  }

  .octa-pricing-card-desc {
    font-size: 12px;
    color: var(--muted-foreground);
    line-height: 1.5;
    margin: 0 0 var(--space-4);
    position: relative;
  }
  .octa-pricing-card-price {
    display: flex; align-items: flex-end; gap: var(--space-1-5);
    position: relative;
  }
  .octa-pricing-card-main {
    font-size: 32px; font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--foreground);
    line-height: 1;
  }
  .octa-pricing-card-period {
    font-size: 13px;
    color: var(--muted-foreground);
    padding-bottom: var(--space-1);
  }
  /* Body */
  .octa-pricing-card-body {
    display: flex; flex-direction: column; gap: var(--space-4-5);
    padding: var(--space-3);
    flex: 1;
  }
  .octa-pricing-card-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: var(--space-3);
  }
  .octa-pricing-card-list li {
    display: flex; align-items: flex-start; gap: var(--space-2-5);
    font-size: 13px; line-height: 1.45;
    color: var(--muted-foreground);
  }
  .octa-pricing-card-list li svg {
    flex-shrink: 0;
    width: 14px; height: 14px;
    margin-top: 3px;
    stroke: var(--accent); fill: none; stroke-width: 2.5;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .octa-pricing-card-list.is-locked li {
    opacity: 0.5;
  }
  .octa-pricing-card-list.is-locked li svg {
    stroke: var(--muted-foreground);
  }

  /* Separator com texto central */
  .octa-pricing-card-sep {
    display: flex; align-items: center; gap: var(--space-3);
    font-size: 12px;
    color: var(--muted-foreground);
  }
  .octa-pricing-card-sep::before,
  .octa-pricing-card-sep::after {
    content: "";
    flex: 1;
    height: 0.5px;
    background: var(--border-strong);
    opacity: 0.5;
  }

  /* CTA na base do body */
  .octa-pricing-card-cta {
    margin-top: auto;
    padding-top: var(--space-1-5);
  }
  .octa-pricing-card-cta .btn,
  .octa-pricing-card-cta .octa-link-btn {
    width: 100%; justify-content: center;
  }

  /* 06.8 Cross-link */
  .octa-cl {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    padding: var(--space-7) var(--space-6);
    background: var(--background);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .octa-cl-head {
    display: flex; align-items: baseline;
    gap: var(--space-3); margin-bottom: var(--space-4);
    padding-bottom: var(--space-3-5);
    border-bottom: 0.5px solid var(--border);
  }
  .octa-cl-eyebrow {
    font-family: var(--font-mono); font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.10em;
    color: var(--muted-foreground);
  }
  .octa-cl-eyebrow b { color: var(--accent); font-weight: 600; }

  .octa-cl-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column;
  }
  .octa-cl-item {
    position: relative;
    display: grid;
    grid-template-columns: 22px 1fr auto auto;
    gap: var(--space-3-5); align-items: center;
    padding: var(--space-4) var(--space-3-5) var(--space-4) var(--space-4-5);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background var(--dur-fast);
  }
  .octa-cl-item::before {
    content: "";
    position: absolute;
    left: 6px; top: 12px; bottom: 12px;
    width: 2px;
    background: var(--accent);
    border-radius: var(--radius-sm);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform var(--dur-base) var(--ease-out);
  }
  .octa-cl-item:hover { background: rgba(249,115,22,0.04); }
  .octa-cl-item:hover::before { transform: scaleY(1); }

  .octa-cl-arrow {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    color: var(--muted-foreground);
    transition: color var(--dur-fast), transform var(--dur-base) var(--ease-out);
  }
  .octa-cl-arrow svg {
    width: 16px; height: 16px;
    stroke: currentColor; fill: none; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .octa-cl-item:hover .octa-cl-arrow {
    color: var(--accent);
    transform: translateX(4px);
  }

  .octa-cl-label {
    font-family: var(--font-sans); font-size: 15px; font-weight: 500;
    color: var(--foreground); line-height: 1.4;
  }

  /* CTA mono que aparece inline ao hover (substitui o tooltip pill) */
  .octa-cl-cta {
    font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--accent);
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity var(--dur-fast), transform var(--dur-base) var(--ease-out);
    pointer-events: none;
  }
  .octa-cl-item:hover .octa-cl-cta {
    opacity: 1; transform: translateX(0);
  }
  .octa-cl-cta::before {
    content: "→ ";
    opacity: 0.6;
  }

  .octa-cl-url {
    font-family: var(--font-mono); font-size: 11px;
    color: var(--muted-foreground);
    opacity: 0.6;
    transition: opacity var(--dur-fast);
  }
  .octa-cl-item:hover .octa-cl-url { opacity: 1; }

  @media (max-width: 600px) {
    .octa-cl-item { grid-template-columns: 22px 1fr; }
    .octa-cl-cta, .octa-cl-url { grid-column: 2; font-size: 10px; opacity: 1; transform: none; padding-top: var(--space-1); }
    .octa-cl-cta::before { content: ""; }
  }

  /* 06.3 CTA Banner */
  .octa-cta-banner {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--background);
    border: 0.5px solid var(--border);
    isolation: isolate;
  }
  .octa-cta-banner-bg {
    position: absolute; inset: 0;
    pointer-events: none;
    z-index: var(--z-base);
  }
  .octa-cta-banner-bg canvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    display: block;
  }

  .octa-cta-banner-content {
    position: relative; z-index: var(--z-content);
    max-width: 720px; margin: 0 auto;
    padding: 96px var(--space-6) 96px;
    text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: var(--space-4-5);
  }
  @media (max-width: 768px) {
    .octa-cta-banner-content { padding: var(--space-16) var(--space-5); }
  }
  .octa-cta-banner-title {
    font-size: clamp(28px, 4vw, 42px); font-weight: 700;
    letter-spacing: -0.025em; line-height: 1.2;
    color: var(--foreground);
    margin: 0;
    max-width: 640px;
  }
  .octa-cta-banner-title .accent { color: var(--accent); }
  .octa-cta-banner-sub {
    font-size: 15px; color: var(--muted-foreground);
    line-height: 1.65; margin: 0;
    max-width: 540px;
  }
  .octa-cta-banner-actions {
    display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center;
    margin-top: var(--space-2);
  }
  /* Modo duplo (Bp 16/17 — ferramentas) — 2 CTAs lado a lado · sem dotgrid */
  .octa-cta-banner.is-duplo { background: var(--background); }
  .octa-cta-banner.is-duplo .octa-cta-banner-content { padding: 72px var(--space-6); }
  @media (max-width: 768px) {
    .octa-cta-banner.is-duplo .octa-cta-banner-content { padding: var(--space-14) var(--space-5); }
  }
  .octa-cta-banner.is-duplo .octa-cta-banner-actions .btn { display: inline-flex; align-items: center; gap: var(--space-1-5); }
  .octa-cta-banner.is-duplo .octa-cta-banner-actions .btn svg {
    width: 14px; height: 14px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }
  /* Modo institucional (Bp 13 — fim de blog post) — fundo sólido --background-2 · sem dotgrid · cross-link inline */
  .octa-cta-banner.is-inst { background: var(--background-2); }
  .octa-cta-banner.is-inst .octa-cta-banner-content { padding: 72px var(--space-6); }
  @media (max-width: 768px) {
    .octa-cta-banner.is-inst .octa-cta-banner-content { padding: var(--space-14) var(--space-5); }
  }

  /* 06.2 FAQ (octa-faq) */
  .octa-faq {
    max-width: 760px;
    margin: 0 auto;
    font-family: var(--font-sans);
  }
  .octa-faq-item {
    border-bottom: 0.5px solid var(--border);
  }
  .octa-faq-item > summary {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4-5) var(--space-5) var(--space-4-5) var(--space-1);
    font-size: 15px; font-weight: 500;
    color: var(--foreground);
    line-height: 1.45;
    cursor: pointer;
    list-style: none;
    transition: color var(--dur-fast);
  }
  .octa-faq-item > summary::-webkit-details-marker { display: none; }
  .octa-faq-item > summary:hover { color: var(--accent); }
  .octa-faq-item[open] > summary { color: var(--foreground); }
  .octa-faq-chevron {
    width: 16px; height: 16px;
    stroke: currentColor; fill: none; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
    flex-shrink: 0;
    color: var(--muted-foreground);
    transition: transform var(--dur-base) var(--ease-out), color var(--dur-fast);
  }
  .octa-faq-item[open] > summary .octa-faq-chevron {
    transform: rotate(180deg);
    color: var(--accent);
  }
  .octa-faq-content {
    padding: 0 var(--space-5) var(--space-5) var(--space-1);
    font-size: 14px; line-height: 1.65;
    color: var(--muted-foreground);
    max-width: 680px;
  }
  .octa-faq-content p { margin: 0 0 var(--space-2-5); }
  .octa-faq-content p:last-child { margin-bottom: 0; }
  .octa-faq-content a {
    color: var(--accent);
    text-decoration: none;
    transition: opacity var(--dur-fast);
  }
  .octa-faq-content a:hover { opacity: 0.85; text-decoration: underline; }

  /* Header opcional do bloco FAQ */
  .octa-faq-head {
    text-align: center; max-width: 640px; margin: 0 auto var(--space-8);
  }
  .octa-faq-head-eyebrow {
    display: inline-block;
    font-family: var(--font-mono); font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.10em;
    color: var(--accent); margin-bottom: var(--space-2-5);
  }
  .octa-faq-head h2 {
    font-size: clamp(22px, 3vw, 30px); font-weight: 700;
    letter-spacing: -0.02em; line-height: 1.25;
    color: var(--foreground); margin: 0 0 var(--space-2);
  }
  .octa-faq-head p {
    font-size: 14px; color: var(--muted-foreground);
    line-height: 1.6; margin: 0;
  }
}

@layer cat-07-uniques {
  /* 07.2 Status grid 45d */
  .octa-status-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 980px;
    margin: 0 auto;
  }
  .octa-status-grid-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-bottom: 0.5px solid var(--border);
  }
  .octa-status-grid-row:last-child { border-bottom: none; }
  .octa-status-grid-row-name {
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
  }
  .octa-status-grid-row-name b {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--foreground);
  }
  .octa-status-grid-row-name span {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ds-status-ok);
  }
  .octa-status-grid-row-name.is-degraded span { color: var(--ds-status-warn); }
  .octa-status-grid-row-name.is-down span { color: var(--ds-status-down); }
  .octa-status-grid-bars {
    display: grid;
    grid-template-columns: repeat(45, 1fr);
    gap: var(--space-0-5);
  }
  .octa-status-grid-bar {
    width: 100%;
    aspect-ratio: 1 / 4;
    min-height: 14px;
    border-radius: 1px;
    background: var(--ds-status-ok);
    cursor: help;
    transition: opacity var(--dur-fast);
  }
  .octa-status-grid-bar:hover { opacity: 0.7; }
  .octa-status-grid-bar.is-degraded { background: var(--ds-status-warn); }
  .octa-status-grid-bar.is-down { background: var(--ds-status-down); }
  .octa-status-grid-legend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-2);
    padding: 0 var(--space-4);
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--muted-foreground);
  }
  .octa-status-grid-legend-keys {
    display: flex;
    gap: var(--space-4);
  }
  .octa-status-grid-legend-key {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
  }
  .octa-status-grid-legend-key::before {
    content: '';
    width: 8px; height: 8px;
    border-radius: 1px;
    background: var(--ds-status-ok);
  }
  .octa-status-grid-legend-key.is-degraded::before { background: var(--ds-status-warn); }
  .octa-status-grid-legend-key.is-down::before { background: var(--ds-status-down); }

  /* 07.3 Status banner */
  .octa-status-banner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 0.5px solid var(--ds-status-ok);
    background: rgba(16, 185, 129, 0.08);
    max-width: 980px;
    margin: 0 auto;
  }
  .octa-status-banner.is-degraded {
    border-color: var(--ds-status-warn);
    background: rgba(245, 158, 11, 0.08);
  }
  .octa-status-banner.is-down {
    border-color: var(--ds-status-down);
    background: rgba(239, 68, 68, 0.08);
  }
  .octa-status-banner-dot {
    width: 12px; height: 12px;
    border-radius: var(--radius-full);
    background: var(--ds-status-ok);
    flex-shrink: 0;
    position: relative;
  }
  .octa-status-banner-dot::after {
    content: '';
    position: absolute;
    inset: -var(--space-1);
    border-radius: inherit;
    background: inherit;
    opacity: 0.4;
    animation: octa-status-pulse 2s ease-out infinite;
  }
  @keyframes octa-status-pulse {
    0% { transform: scale(0.8); opacity: 0.5; }
    100% { transform: scale(1.6); opacity: 0; }
  }
  .octa-status-banner.is-degraded .octa-status-banner-dot { background: var(--ds-status-warn); }
  .octa-status-banner.is-down .octa-status-banner-dot { background: var(--ds-status-down); }
  .octa-status-banner-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
  }
  .octa-status-banner-title {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--foreground);
  }
  .octa-status-banner-sub {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted-foreground);
  }

  /* 07.4 Imprensa */
  .octa-imprensa {
    position: relative;
    max-width: 640px;
    margin: 0 auto;
    padding: var(--space-10) var(--space-6);
    text-align: center;
    border: 0.5px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--background-2);
    overflow: hidden;
  }
  .octa-imprensa > .octa-bento-bg-dots {
    z-index: var(--z-base);
    border-radius: inherit;
    pointer-events: none;
  }
  .octa-imprensa > *:not(.octa-bento-bg-dots) {
    position: relative;
    z-index: var(--z-content);
  }
  .octa-imprensa-icon {
    width: 48px; height: 48px;
    margin: 0 auto var(--space-4);
    border-radius: var(--radius-full);
    background: rgba(249, 115, 22, 0.10);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .octa-imprensa-icon svg {
    width: 22px; height: 22px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }
  .octa-imprensa-title {
    font-family: var(--font-sans);
    font-size: clamp(20px, 2.6vw, 26px);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--foreground);
    margin: 0 0 var(--space-3);
  }
  .octa-imprensa-desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted-foreground);
    margin: 0 0 var(--space-5);
  }
  .octa-imprensa-mail {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-full);
    background: var(--background);
    border: 0.5px solid var(--border-strong);
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--accent);
    text-decoration: none;
    transition: border-color var(--dur-fast);
  }
  .octa-imprensa-mail:hover { border-color: var(--accent); }
  .octa-imprensa-mail svg {
    width: 14px; height: 14px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }
  .octa-imprensa-note {
    margin-top: var(--space-5);
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted-foreground);
    opacity: 0.75;
  }

  /* 07.6 Publicidade */
  .octa-pub {
    position: relative;
    border: 0.5px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--background-2);
    overflow: hidden;
    max-width: 720px;
    margin: var(--space-8) auto;
  }
  .octa-pub-label {
    position: absolute;
    top: var(--space-2);
    right: var(--space-3);
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--muted-foreground);
    opacity: 0.7;
    z-index: var(--z-content);
  }
  .octa-pub-inner {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-5) var(--space-6);
    text-decoration: none;
  }
  .octa-pub-art {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--accent), var(--brand-primary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pure-white);
  }
  .octa-pub-art svg {
    width: 28px; height: 28px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }
  .octa-pub-body { flex: 1; min-width: 0; }
  .octa-pub-title {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 600;
    color: var(--foreground);
    line-height: 1.35;
    margin: 0 0 var(--space-1-5);
  }
  .octa-pub-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    font-size: 13px;
    font-weight: 500;
    color: var(--accent);
  }
  .octa-pub-cta svg {
    width: 12px; height: 12px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    transition: transform var(--dur-fast);
  }
  .octa-pub:hover .octa-pub-cta svg { transform: translateX(3px); }
  @media (max-width: 640px) {
    .octa-pub-inner { padding: var(--space-4); gap: var(--space-3-5); }
    .octa-pub-art { width: 48px; height: 48px; }
    .octa-pub-art svg { width: 22px; height: 22px; }
  }

  /* 07.5 Manifesto */
  .octa-mf {
    max-width: 1024px;
    margin: 0 auto;
    padding: var(--space-12) var(--space-6);
  }
  .octa-mf-stack { display: flex; flex-direction: column; gap: var(--space-8); }
  @media (min-width: 768px) { .octa-mf-stack { gap: var(--space-16); } }
  .octa-mf-title {
    position: relative; z-index: var(--z-sticky);
    font-family: var(--font-sans);
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--foreground);
    margin: 0;
  }
  .octa-mf-title .accent { color: var(--accent); }
  .octa-mf-grid {
    display: grid;
    gap: 46px;
  }
  @media (min-width: 640px) { .octa-mf-grid { grid-template-columns: 1fr 1fr; } }
  .octa-mf-grid.is-compact { gap: var(--space-8); }
  .octa-mf-col {
    display: flex; flex-direction: column;
    gap: var(--space-6);
    min-width: 0;
  }
  @media (min-width: 768px) { .octa-mf-col { gap: var(--space-8); } }
  .octa-mf-image-wrap {
    position: relative;
    aspect-ratio: 76 / 59;
    border-radius: var(--radius-xl);
    padding: 1px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.10), transparent);
    overflow: hidden;
  }
  .octa-mf-image {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: calc(var(--radius-xl) - 1px);
  }
  .octa-mf-text {
    position: relative;
    display: flex; flex-direction: column; gap: var(--space-4);
  }
  .octa-mf-text > p {
    font-family: var(--font-sans);
    font-size: 14.5px; line-height: 1.65;
    color: var(--muted-foreground); margin: 0;
  }
  .octa-mf-text > p strong, .octa-mf-text > p b {
    color: var(--foreground); font-weight: 700;
  }
  /* Prova social do manifesto = cópia fiel do .octa-ts-card de 06.4 — não tem CSS próprio aqui */
  .octa-mf-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-1); }
  .octa-mf-cta .btn { align-self: flex-start; }
}

@layer overrides {
  /* Utilities & overrides finais */
  .dt-footer-grid {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1fr;
    gap: var(--space-10); padding-bottom: var(--space-8);
  }
  .dt-footer-social {
    width: 32px; height: 32px; border-radius: var(--radius-lg);
    border: 1px solid var(--octa-border);
    background: var(--octa-bg);
    display: flex; align-items: center; justify-content: center;
    color: var(--octa-text-muted); transition: all 150ms; text-decoration: none;
  }
  .dt-footer-social:hover { background: var(--octa-bg-card); color: var(--octa-text); }
  .dt-footer-col-title {
    font-size: 12px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--octa-text-muted); margin-bottom: var(--space-3-5);
  }
  .dt-footer-links { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); padding: 0; margin: 0; }
  .dt-footer-links a {
    font-size: 13px; color: var(--octa-text-muted);
    transition: color 150ms; text-decoration: none;
  }
  .dt-footer-links a:hover { color: var(--octa-text); text-decoration: underline; text-underline-offset: 3px; }
  @media (max-width: 860px) {
    .dt-footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
    .dt-footer-grid > div:first-child { grid-column: 1 / -1; }
  }
  @media (max-width: 480px) {
    .dt-footer-grid { grid-template-columns: 1fr; }
  }

  /* Force-dark — landings ignoram qualquer [data-theme="light"] herdado */
  html[data-theme="light"], body[data-theme="light"] {
    --background: #0E0E10;
    --foreground: #ECECEE;
  }

  /* ========================================
     Globais Fase 1 (reconstrução 2026-05-03)
     ======================================== */

  /* Mega-menu Segmentos — wrapper da coluna 1fr no grid .octa-panel-split */
  .octa-panel-content { min-width: 0; }

  /* ============================================
     Sprint 3.1 — Moléculas críticas (2026-05-04)
     hero · faq · cta-final · pillars-4 · social-proof
     ============================================ */

  /* FAQ wrapper section */
  .octa-faq-section {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--space-12, 96px) var(--space-4, 16px);
  }
  .octa-faq-section.is-pad-32-16 { padding: var(--space-8, 32px) var(--space-4, 16px); }

  /* 4 Pilares — sistema G2 (2x2 desktop, 1 col mobile, card-link inteiro) */
  .octa-pillars-section {
    max-width: var(--container-max, 1200px);
    margin: 0 auto;
    padding: var(--space-12, 96px) var(--space-4, 16px);
  }
  .octa-pillars-head {
    text-align: center;
    margin-bottom: var(--space-8, 32px);
  }
  .octa-pillars-eyebrow {
    display: inline-block;
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent, #F97316);
    margin-bottom: var(--space-2, 8px);
  }
  .octa-pillars-title {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 700;
    line-height: 1.1;
    color: var(--foreground, #ECECEE);
    margin: 0 0 var(--space-3, 12px);
  }
  .octa-pillars-sub {
    font-size: 16px;
    color: var(--muted-foreground, #8A8A94);
    max-width: 640px;
    margin: 0 auto;
  }
  .octa-pillars-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4, 16px);
  }
  @media (max-width: 768px) {
    .octa-pillars-grid { grid-template-columns: 1fr; }
  }

  .octa-pillar-card {
    /* herda .octa-bento-card; aqui só ajustes específicos */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 220px;
    padding: var(--space-5, 24px);
    border: 0.5px solid var(--border, rgba(255,255,255,0.08));
    border-radius: var(--radius-lg, 16px);
    background: var(--octa-bg-card, #141416);
    text-decoration: none;
    transition: transform 200ms var(--ease-out, ease), border-color 200ms var(--ease-out, ease);
    overflow: hidden;
    position: relative;
  }
  .octa-pillar-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent, #F97316);
  }
  .octa-pillar-card-body { position: relative; z-index: 1; }
  .octa-pillar-card-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent, #F97316);
    margin: 0 0 var(--space-2, 8px);
  }
  .octa-pillar-card-desc {
    font-size: 16px;
    font-weight: 600;
    color: var(--foreground, #ECECEE);
    margin: 0 0 var(--space-3, 12px);
  }
  .octa-pillar-card-bullets {
    font-size: 13px;
    color: var(--muted-foreground, #8A8A94);
    margin: 0 0 var(--space-4, 16px);
  }
  .octa-pillar-card-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 4px);
    font-size: 13px;
    font-weight: 600;
    color: var(--accent, #F97316);
    margin-top: auto;
    position: relative;
    z-index: 1;
  }

  /* Social proof — modificadores de variante */
  .octa-ts-grid.is-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4, 16px); }
  .octa-ts-grid.is-grid-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4, 16px); }
  .octa-ts-grid.is-grid-8 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4, 16px); }
  .octa-ts-grid.is-compacto-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3, 12px); }
  .octa-ts-grid.is-single { max-width: 720px; margin: 0 auto; }
  @media (max-width: 900px) {
    .octa-ts-grid.is-grid-3,
    .octa-ts-grid.is-grid-4,
    .octa-ts-grid.is-grid-8 { grid-template-columns: 1fr; }
  }
  @media (min-width: 901px) and (max-width: 1100px) {
    .octa-ts-grid.is-grid-4,
    .octa-ts-grid.is-grid-8 { grid-template-columns: repeat(2, 1fr); }
  }
  .octa-ts-result {
    display: inline-block;
    margin-left: var(--space-2, 8px);
    padding: 2px 8px;
    background: var(--platform-orange-background, #2A1A0A);
    color: var(--accent, #F97316);
    border-radius: var(--radius-sm, 4px);
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    font-weight: 600;
  }
  .octa-ts-divider {
    height: 1px;
    background: var(--border, rgba(255,255,255,0.08));
    margin: var(--space-8, 32px) 0;
  }

  /* CTA banner — modos auxiliares */
  .octa-cta-banner.is-duplo {
    background: radial-gradient(ellipse at top, rgba(249,115,22,0.06), transparent 70%);
  }
  .octa-cta-banner.is-inst {
    background: var(--background-2, #141416);
  }
  .octa-cta-banner-microcopy {
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted-foreground, #8A8A94);
    opacity: 0.75;
    margin-top: var(--space-3, 12px);
  }

  /* Hero auxiliares */
  .octa-hero-simple { text-align: center; max-width: 800px; margin: 0 auto; }
  .octa-lead {
    font-size: 18px;
    line-height: 1.5;
    color: var(--muted-foreground, #8A8A94);
    max-width: 640px;
    margin: var(--space-3, 12px) auto var(--space-5, 24px);
  }
  .octa-hero-vs-sep {
    font-family: var(--font-mono, monospace);
    font-size: 14px;
    color: var(--muted-foreground, #8A8A94);
    margin: 0 var(--space-3, 12px);
  }
  .octa-hero-vs-competitor { height: 28px; width: auto; }
  .octa-hero-form-copy { padding-right: var(--space-6, 24px); }
  .octa-hero-search-popular {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
    justify-content: center;
    margin-top: var(--space-3, 12px);
  }
  .octa-hero-search-popular-link {
    font-size: 13px;
    color: var(--muted-foreground, #8A8A94);
    text-decoration: none;
    padding: 4px 10px;
    border-radius: var(--radius-md, 8px);
    border: 0.5px solid var(--border, rgba(255,255,255,0.08));
    transition: color 150ms, border-color 150ms;
  }
  .octa-hero-search-popular-link:hover {
    color: var(--accent, #F97316);
    border-color: var(--accent, #F97316);
  }

  /* Skip-link WCAG 2.1 AA — só visível em focus via teclado (Tab) */
  /* :focus-visible só ativa em foco via teclado (Tab) — não em auto-focus do browser */

  /* ============================================================
   * Rubens overrides 2026-05-05 — Bp 1 Home refinements
   * ============================================================ */

  /* Hero: padding canônico (memoria: feedback_hero_padding_100.md — Rubens 2026-05-05) */
  .hero {
    padding: 120px 0px 0px 0px !important;
  }

  /* Canvas dotgrid do hero: cobre o .hero is-frame inteiro (Rubens 2026-05-06) */
  .hero .hero-glow-canvas {
    height: 90% !important;
    inset: 0 !important;
    contain: strict;
    will-change: transform;
  }
  /* Anti-CLS: hero reserva altura mínima estável (Rubens 2026-05-07) */
  .hero.is-frame {
    min-height: 80vh;
    contain: layout paint;
  }
  @media (max-width: 768px) {
    .hero.is-frame { min-height: 70vh; }
  }

  /* Editor toolbar dots (macOS traffic lights) — Rubens 2026-05-05 */
  .octa-editor-dot.is-traffic-red    { background: #FF5F57 !important; }
  .octa-editor-dot.is-traffic-yellow { background: #FEBC2E !important; }
  .octa-editor-dot.is-traffic-green  { background: #28C840 !important; }

  /* Hero is-frame: zero border (memoria: feedback_hero_layout.md) */
  .hero.is-frame {
    border: 0 !important;
    border-radius: 0;
  }



    /* ================================================================
     06.6 · 4 PILARES (NEW) — timeline horizontal numerada
     Visualmente distinto de 06.5 (octa-mf bento) e 06.14 (switchboard)
     2026-05-07 · Rubens
     ================================================================ */

  .octa-pillars-tl {
    max-width: 1024px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 32px);
    padding-block: var(--octa-section-py);
  }
  .octa-pillars-tl-head {
    text-align: center;
    margin-bottom: var(--space-9);
  }
  .octa-pillars-tl-head h2 {
    font-family: var(--font-sans);
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--foreground);
    margin: 0 0 var(--space-3);
  }
  .octa-pillars-tl-head p {
    font-size: 16px;
    color: var(--muted-foreground);
    max-width: 540px;
    margin: 0 auto;
    line-height: 1.55;
  }
  .octa-pillars-tl-track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding-top: 56px;
  }
  .octa-pillars-tl-line {
    position: absolute;
    top: 90px;
    left: 0; right: 0;
    height: 0.5px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(249, 115, 22, 0.35) 8%,
      rgba(249, 115, 22, 0.35) 92%,
      transparent 100%);
    pointer-events: none;
  }
  .octa-pillars-tl-item {
    position: relative;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    padding: 0 var(--space-3);
  }
  .octa-pillars-tl-num {
    font-family: var(--font-mono);
    font-size: clamp(48px, 6vw, 72px);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1;
    color: rgba(249, 115, 22, 0.18);
    margin-bottom: var(--space-2);
    transition: color 240ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .octa-pillars-tl-dot {
    position: absolute;
    top: 90px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--background);
    border: 2px solid var(--accent);
    transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), background 240ms;
    z-index: 1;
  }
  .octa-pillars-tl-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    margin-top: var(--space-5);
    color: var(--accent);
  }
  .octa-pillars-tl-ico svg {
    width: 28px; height: 28px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
  }
  .octa-pillars-tl-item h3 {
    font-family: var(--font-sans);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--foreground);
    margin: var(--space-3) 0 var(--space-2);
  }
  .octa-pillars-tl-item ul {
    list-style: none;
    padding: 0;
    margin: 0;
    color: var(--muted-foreground);
    font-size: 13.5px;
    line-height: 1.55;
  }
  .octa-pillars-tl-item ul li + li {
    margin-top: var(--space-1);
  }
  .octa-pillars-tl-item:hover .octa-pillars-tl-num {
    color: rgba(249, 115, 22, 0.55);
  }
  .octa-pillars-tl-item:hover .octa-pillars-tl-dot {
    background: var(--accent);
    transform: translate(-50%, -50%) scale(1.3);
  }
  .octa-pillars-tl-cta {
    text-align: center;
    margin-top: var(--space-9);
  }
  @media (max-width: 768px) {
    .octa-pillars-tl-track {
      grid-template-columns: 1fr;
      padding-top: 0;
      gap: var(--space-4);
    }
    .octa-pillars-tl-line { display: none; }
    .octa-pillars-tl-item {
      flex-direction: row;
      align-items: flex-start;
      gap: var(--space-4);
      padding: var(--space-4);
      border: 0.5px solid var(--border);
      border-radius: var(--radius-md);
      background: var(--background-2);
    }
    .octa-pillars-tl-num {
      font-size: 36px;
      flex: 0 0 auto;
      margin: 0;
    }
    .octa-pillars-tl-dot { display: none; }
    .octa-pillars-tl-ico { margin-top: 0; }
    .octa-pillars-tl-item-body { flex: 1 1 auto; }
  }

  /* ================================================================
     06.14 · SOLUÇÃO COM GATILHOS (refinado · 2026-05-08)
     Cards de gatilho · numeração discreta · ação editorial · DS aligned
     ================================================================ */

  .octa-trigger-board {
    max-width: 1024px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 32px);
    padding-block: var(--octa-section-py);
  }
  .octa-trigger-board-head {
    text-align: center;
    margin-bottom: var(--space-9);
  }
  .octa-trigger-board-head h2 {
    font-family: var(--font-sans);
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--foreground);
    margin: 0 0 var(--space-3);
  }
  .octa-trigger-board-head p {
    font-size: 16px;
    color: var(--muted-foreground);
    max-width: 540px;
    margin: 0 auto;
    line-height: 1.55;
  }
  .octa-trigger-board-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
  @media (max-width: 700px) {
    .octa-trigger-board-grid { grid-template-columns: 1fr; }
  }
  .octa-trigger-card {
    position: relative;
    padding: var(--space-6);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--background-2);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: border-color 240ms, transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .octa-trigger-card-bg-dots {
    position: absolute;
    inset: 0 0 auto auto;
    width: 200px; height: 140px;
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.04) 1px, transparent 0);
    background-size: 14px 14px;
    pointer-events: none;
    opacity: 0.6;
  }
  .octa-trigger-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
    position: relative;
  }
  .octa-trigger-card-meta .num {
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
    color: rgba(249, 115, 22, 0.35);
  }
  .octa-trigger-card-title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0 0 var(--space-2);
    position: relative;
  }
  .octa-trigger-card-title svg {
    width: 22px; height: 22px;
    color: var(--accent);
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    flex: 0 0 auto;
  }
  .octa-trigger-card-title h3 {
    font-family: var(--font-sans);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--foreground);
    margin: 0;
  }
  .octa-trigger-card-desc {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--muted-foreground);
    margin: 0 0 var(--space-4);
    position: relative;
  }
  .octa-trigger-card-action {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-top: var(--space-3);
    border-top: 0.5px solid var(--border);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--muted-foreground);
    position: relative;
  }
  .octa-trigger-card-action svg {
    width: 14px; height: 14px;
    stroke: var(--accent);
    stroke-width: 2;
    flex: 0 0 auto;
    margin-left: auto;
  }
  .octa-trigger-card:hover {
    border-color: rgba(249, 115, 22, 0.45);
    transform: translateY(-2px);
  }
  .octa-trigger-board-cta {
    text-align: center;
    margin-top: var(--space-9);
  }

  /* Showcase prose articles · centralizar bloco prose dentro do demo-stage
     (max-width 680px continua, só centraliza horizontalmente · 2026-05-08) */
  #c-mol-prose .demo-stage,
  #c-mol-prose-variants .demo-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #c-mol-prose .demo-stage > .octa-prose,
  #c-mol-prose-variants .demo-stage > .octa-prose {
    width: 100%;
  }

  /* ================================================================
     PROSE VARIANTS — 5 modifiers editoriais + 3 list modifiers
     Aplicáveis em /sobre, /manifesto, /termos, /privacidade, FAQ answer, blog
     2026-05-07 · Rubens
     ================================================================ */

  /* === Variant 1 · EDITORIAL · drop-cap accent na 1a letra === */
  .octa-prose.is-editorial {
    max-width: 680px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--foreground);
  }
  .octa-prose.is-editorial > p {
    color: var(--foreground);
    margin: 0 0 var(--space-4);
  }
  .octa-prose.is-editorial > p:first-of-type::first-letter {
    float: left;
    font-family: var(--font-sans);
    font-size: 4.4em;
    line-height: 0.88;
    font-weight: 800;
    color: var(--accent);
    padding: 4px 10px 0 0;
  }

  /* === Variant 2 · MANIFESTO · sentenças numeradas em mono caps === */
  .octa-prose.is-manifesto {
    max-width: 680px;
    counter-reset: octa-manifesto;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .octa-prose.is-manifesto > li,
  .octa-prose.is-manifesto > p {
    counter-increment: octa-manifesto;
    position: relative;
    padding: var(--space-5) 0;
    border-bottom: 0.5px solid var(--border);
    margin: 0;
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.55;
    color: var(--foreground);
  }
  .octa-prose.is-manifesto > li::before,
  .octa-prose.is-manifesto > p::before {
    content: counter(octa-manifesto, decimal-leading-zero);
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: var(--space-2);
  }
  .octa-prose.is-manifesto > li:last-child,
  .octa-prose.is-manifesto > p:last-child {
    border-bottom: 0;
  }

  /* === Variant 3 · HIGHLIGHT LEAD · 1a frase em destaque + border accent === */
  .octa-prose.is-highlight {
    max-width: 680px;
  }
  .octa-prose.is-highlight > p:first-of-type {
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.55;
    color: var(--foreground);
    margin: 0 0 var(--space-5);
    padding-left: var(--space-4);
    border-left: 2px solid var(--accent);
  }
  .octa-prose.is-highlight > p:not(:first-of-type) {
    font-family: var(--font-sans);
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--muted-foreground);
    margin: 0 0 var(--space-3-5);
  }

  /* === Variant 4 · BRACKETED · h3 com [01] mono accent prefix === */
  .octa-prose.is-bracketed {
    max-width: 680px;
    counter-reset: octa-bracket;
  }
  .octa-prose.is-bracketed > p {
    color: var(--muted-foreground);
    line-height: 1.65;
    margin: 0 0 var(--space-3-5);
  }
  .octa-prose.is-bracketed h3,
  .octa-prose.is-bracketed .octa-prose-h3 {
    counter-increment: octa-bracket;
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    font-family: var(--font-sans);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--foreground);
    margin: var(--space-7) 0 var(--space-3);
  }
  .octa-prose.is-bracketed h3::before,
  .octa-prose.is-bracketed .octa-prose-h3::before {
    content: "[" counter(octa-bracket, decimal-leading-zero) "]";
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--accent);
    padding-top: 6px;
  }

  /* === Variant 5 · CARD · prose em bento-card wrapper === */
  .octa-prose.is-card {
    position: relative;
    max-width: 680px;
    padding: var(--space-7) var(--space-6);
    border-radius: var(--radius-lg);
    border: 0.5px solid var(--border);
    background: var(--background-2);
    overflow: hidden;
  }
  .octa-prose.is-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto auto;
    width: 240px;
    height: 180px;
    background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0);
    background-size: 14px 14px;
    pointer-events: none;
    opacity: 0.7;
  }
  .octa-prose.is-card > p {
    position: relative;
    z-index: 1;
    color: var(--foreground);
    line-height: 1.65;
    margin: 0 0 var(--space-3-5);
  }
  .octa-prose.is-card > p:last-child {
    margin-bottom: 0;
  }

  /* ================================================================
     PROSE LIST VARIANTS — 3 modifiers para <ul>/<ol>
     ================================================================ */

  /* Variant A · MARKER · barra vertical accent */
  .octa-prose-list.is-marker {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-4);
  }
  .octa-prose-list.is-marker > li {
    position: relative;
    padding-left: 18px;
    margin: var(--space-2) 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--muted-foreground);
  }
  .octa-prose-list.is-marker > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 4px;
    height: 12px;
    background: var(--accent);
    border-radius: 1px;
  }

  /* Variant B · NUMBERED MONO · contador 01. 02. em mono accent */
  .octa-prose-list.is-numbered {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-4);
    counter-reset: octa-prose-num;
  }
  .octa-prose-list.is-numbered > li {
    counter-increment: octa-prose-num;
    position: relative;
    padding-left: 38px;
    margin: var(--space-2-5) 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--muted-foreground);
  }
  .octa-prose-list.is-numbered > li::before {
    content: counter(octa-prose-num, decimal-leading-zero) ".";
    position: absolute;
    left: 0;
    top: 0.05em;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--accent);
  }

  /* Variant C · TAGS · pills inline-flex */
  .octa-prose-list.is-tags {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-4);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .octa-prose-list.is-tags > li {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    border: 0.5px solid var(--border);
    background: var(--background-2);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted-foreground);
  }
  .octa-prose-list.is-tags > li.is-active {
    background: rgba(249, 115, 22, 0.10);
    border-color: rgba(249, 115, 22, 0.5);
    color: var(--accent);
  }

  /* Reduced motion · sem mudanças aqui (todos os modifiers são estáticos) */


  /* §2 Definição — modifier .is-cross na ul.octa-prose com SVG x-circle laranja
     Bp 2 v5 (Rubens 2026-05-06) */
  .octa-prose.is-cross {
    list-style: none;
    padding-left: 0;
  }
  .octa-prose.is-cross > li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding-left: 0;
    margin: var(--space-2-5) 0;
  }
  .octa-prose.is-cross > li > .octa-prose-cross {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    stroke: var(--ds-status-down);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    margin-top: 2px;
  }
  .octa-prose.is-cross > li > .octa-prose-cross circle { fill: rgba(239, 68, 68, 0.08); }
  .octa-prose.is-cross > li > span { flex: 1 1 auto; }



  /* §3.5 Canvas multicanal — wrapper de page com padding canônico (Rubens 2026-05-07) */
  section.octa-canvas-section {
    padding-block: var(--octa-section-py);
    padding-inline: clamp(16px, 4vw, 32px);
    max-width: 1280px;
    margin-inline: auto;
  }

  /* Frameworks layout: max-width 1024px alinhado com .octa-mf
     (memoria: feedback_section_max_width_1024.md) */
  .octa-fw-layout,
  .octa-fw-footer {
    max-width: 1024px;
    margin-inline: auto;
  }

  /* MARQUEE plataformas: bg cinza na seção INTEIRA (não nos items)
     Vira bloco visual separado. (Rubens 2026-05-05) */
  .octa-mq-section {
    background: var(--background-2);
    border-radius: var(--radius-xl);
    margin-block: clamp(40px, 6vw, 80px);
    padding-block: clamp(56px, 8vw, 96px);
  }
  .octa-mq-item {
    background: transparent;
  }


  /* CAROUSEL — scrollbar oculto + animação infinita opcional via JS
     Track é interno (scroll horizontal); arrows controlam manualmente.
     (Rubens 2026-05-05) */
  .octa-carousel-track {
    scrollbar-width: none;
  }
  .octa-carousel-track::-webkit-scrollbar {
    display: none;
  }
  /* CSS autoplay removido (Rubens 2026-05-05): conflitava com JS scrollBy.
     Animação do data-autoplay é controlada inteiramente em octa-components.js. */

  /* EDITOR DEMO overlap — DENTRO do hero (após .hero-content), margin-top
     mínimo (próximo dos CTAs), margin-bottom negativo controlado pra vazar
     visualmente pra Dor SEM cobrir o título dela.
     (memoria: feedback_editor_dentro_hero.md — Rubens 2026-05-05) */
  .hero .hero-editor-overlap {
    position: relative;
    z-index: var(--z-sticky);
    max-width: 1024px;
    margin: 24px auto -120px;
    padding-inline: clamp(16px, 4vw, 32px);
  }
  .hero .hero-editor-overlap .octa-editor-demo {
    border-radius: var(--radius-xl);
    box-shadow: 0 32px 80px rgba(0,0,0,0.55), 0 0 0 0.5px var(--border-strong);
  }
  /* ============================================================
   * PADDINGS REEQUILIBRADOS — Rubens 2026-05-05
   * Ritmo vertical canônico: cada seção respira igual, sem brigas.
   * Token base: --octa-section-py = clamp(56px, 7vw, 96px)
   * ============================================================ */
  :root {
    --octa-section-py: clamp(56px, 7vw, 96px);
    --octa-section-py-tight: clamp(40px, 5vw, 64px);
    --octa-section-py-loose: clamp(80px, 10vw, 120px);
  }

  /* §3 Dor refatorada — Lead paragraph (04.13) + G4 Bento Grid (05.4) */
  body section.hero + section.octa-lead-block,
  body section.hero + script + section.octa-lead-block {
    padding-top: 180px !important;  /* acomoda overlap do editor demo */
  }
  .octa-lead-block {
    padding-bottom: var(--octa-section-py-tight);
  }
  .octa-lead-block .container {
    max-width: 720px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 24px);
    text-align: center;
  }
  .octa-lead-block .octa-prose-h1 {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-4);
  }
  .octa-lead-block .octa-lead {
    font-size: clamp(15px, 1.4vw, 17px);
    line-height: 1.6;
    color: var(--muted-foreground);
    max-width: 640px;
    margin: 0 auto;
  }
  .octa-bento-block {
    /* Cola no Lead acima — sem padding-top extra (Rubens 2026-05-05) */
    padding-top: 0 !important;
    padding-bottom: var(--octa-section-py) !important;
    max-width: 1024px;
    margin-inline: auto;
  }
  .octa-bento-block .container {
    padding-inline: clamp(16px, 4vw, 24px);
  }

  /* §4 Manifesto (octa-mf) */
  body section.octa-bento-block + section.octa-mf {
    padding-top: var(--octa-section-py) !important;
  }

  /* §5 Apresentação rápida (sticky 4 etapas) — padding-top maior */
  .octa-sk {
    padding-top: var(--octa-section-py-loose) !important;
    padding-bottom: var(--octa-section-py) !important;
  }

  /* §7 Carrossel — padding equilibrado */
  section.demo-stage,
  body section > .demo-stage {
    padding-block: var(--octa-section-py);
  }
  /* Carousel arrows alinhadas no topo */
  .octa-carousel-arrows {
    margin-top: var(--space-4);
  }

  /* §9 Pricing — padding-top reduzido + padding lateral (Rubens 2026-05-05) */
  .octa-pricing {
    padding-block: var(--octa-section-py) !important;
    padding-inline: clamp(16px, 4vw, 32px) !important;
  }

  /* §6 4 Pilares (octa-mf) — garante padding lateral em qualquer viewport */
  section.octa-mf {
    padding-inline: clamp(16px, 4vw, 32px) !important;
  }

  /* §14 CTA banner content — padding zerado por dentro
     (parent .octa-cta-banner já controla padding-block via --octa-section-py-loose) */
  .octa-cta-banner-content {
    padding: 0 !important;
  }

  /* §11 FAQ — padding aumentado (estava muito pequeno) */
  .octa-faq-section {
    padding-block: var(--octa-section-py-loose) !important;
  }

  /* §12 Octa Facts (bento G4) */
  .octa-facts-section {
    padding-block: var(--octa-section-py) !important;
  }
  .octa-facts-head {
    text-align: center;
    max-width: 720px;
    margin-inline: auto;
    margin-bottom: var(--space-10);
    padding-inline: clamp(16px, 4vw, 24px);
  }
  .octa-facts-sub {
    font-size: clamp(14px, 1.3vw, 16px);
    line-height: 1.6;
    color: var(--muted-foreground);
    margin: var(--space-4) auto 0;
    max-width: 640px;
  }
  .octa-facts-sub p {
    margin: 0 0 var(--space-2);
  }
  .octa-facts-sub p:last-child {
    margin-bottom: 0;
  }

  /* §13 Marquee plataformas — padding INTERNO reduzido + margin-bottom ZERO
     (Rubens 2026-05-05: marquee cola no CTA final, sem margem inferior) */
  .octa-mq-section {
    padding-block: var(--octa-section-py-tight) !important;
    margin-top: var(--octa-section-py-tight);
    margin-bottom: 0 !important;
  }

  /* Carousel — cards não cortarem nas laterais (Rubens 2026-05-05).
     Track recebe padding-inline pra primeiro/último card respirarem.
     Container max-width 1280px pra setas alinharem com conteúdo. */
  .octa-carousel,
  .octa-carousel-fade {
    max-width: 1024px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 32px);
  }
  .octa-carousel-track {
    padding-inline: 4px;
    scroll-padding-inline: clamp(24px, 4vw, 48px);
  }
  .octa-carousel-track > .octa-carousel-item:first-child {
    margin-left: 0;
  }
  .octa-carousel-track > .octa-carousel-item:last-child {
    margin-right: clamp(24px, 4vw, 48px);
  }

  /* §14 CTA final — padding equilibrado + sem border (Rubens 2026-05-05) */
  .octa-cta-banner {
    padding-block: var(--octa-section-py-loose) !important;
    border: 0 !important;
  }

  /* Eyebrows fracos removidos (Rubens 2026-05-05) — pricing e prova social
     comunicam contexto pelo H2, eyebrow extra polui ritmo visual */
  .octa-pricing-head-eyebrow,
  .octa-ts-head-eyebrow {
    display: none !important;
  }

  /* Footer sem border (Rubens 2026-05-05) — continuidade do site */
  .octa-footer,
  .octa-footer-inner {
    border: 0 !important;
    border-radius: 0 !important;
  }

  /* Sticky panel 4 (Reativação) — stack rotativo de toasts canônicos
     SVG icon-box reduzido pra liberar espaço; texto cabe em 2 linhas (Rubens 2026-05-05) */
  .octa-sk-converted-stack {
    position: relative;
    width: 100%;
    height: 72px;
    margin-top: var(--space-3);
  }
  .octa-sk-converted {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: rgba(14,14,16,0.92);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 14px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
    pointer-events: none;
  }
  .octa-sk-converted.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .octa-sk-converted-icon-box {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: #111114;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .octa-sk-converted-mark {
    width: 26px;
    height: 26px;
  }
  .octa-sk-converted-content {
    flex: 1;
    min-width: 0;
    padding-right: 38px; /* espaço pra timestamp absoluto */
  }
  .octa-sk-converted-title {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--font-sans);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .octa-sk-converted-sub {
    color: rgba(255,255,255,0.82);
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-sans);
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .octa-sk-converted-time {
    position: absolute;
    top: 10px;
    right: 12px;
    color: rgba(255,255,255,0.50);
    font-size: 10.5px;
    font-weight: 600;
    font-family: var(--font-sans);
  }

  @media (max-width: 768px) {
    .hero .hero-editor-overlap {
      margin: 16px auto -80px;
    }
    body section.hero + section.octa-lead-block,
    body section.hero + script + section.octa-lead-block {
      padding-top: 140px !important;
    }
  }
}
/* ============================================================
 Migrado de landing-pages-legacy.css → landing.css
 Classes usadas pelo showcase (c-arch-editor, c-arch-calc,
 c-arch-frameworks, c-arch-tabela). Bloco autocontido.
 ============================================================ */


/* --- c-arch-editor + c-arch-solucao (editor demo, canvas, mini-flow, conn) --- */

.octa-editor-demo {
  position: relative; max-width: 900px; margin: 0 auto;
  background: var(--background); border: 0.5px solid var(--border-strong);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden;
  margin-bottom: -60px; z-index: var(--z-sticky);
}

.octa-editor-toolbar {
  display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2-5) var(--space-4);
  border-bottom: 0.5px solid var(--border); background: var(--muted);
}

.octa-editor-dot { width: 10px; height: 10px; border-radius: 50%; }

.octa-editor-canvas {
  position: relative; height: 440px;
  background-image: radial-gradient(circle, var(--surface-6) 1px, transparent 1px);
  background-size: 20px 20px; overflow: hidden;
}

.conn-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: var(--z-content); }

.conn-path { fill: none; stroke: rgba(255,255,255,.35); stroke-width: 2; stroke-linecap: round; }

.octa-editor-stats {
  display: flex; align-items: center; justify-content: center; gap: var(--space-7);
  padding: var(--space-2) var(--space-4); border-top: 0.5px solid var(--border);
  background: var(--muted); font-size: 11px; color: var(--muted-foreground);
}

.octa-editor-stat { display: flex; align-items: center; gap: var(--space-1-5); }

.octa-editor-stat-dot { width: 6px; height: 6px; border-radius: 50%; animation: statPulse 2s ease infinite; }

.octa-editor-stat-dot.is-ok     { background: var(--ds-status-ok); }

.octa-editor-stat-dot.is-accent { background: var(--accent); }

.octa-editor-stat-dot.is-info   { background: var(--ds-status-info); }

.octa-editor-toolbar-meta {
  font-size: 12px; color: var(--muted-foreground); margin-left: 8px;
}

.octa-editor-stat-val { font-weight: 600; color: var(--foreground); font-variant-numeric: tabular-nums; }

@keyframes statPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

.octa-canvas-card-header h3 .ico { font-size: 18px; margin-right: 6px; display: inline-flex; align-items: center; }

.octa-canvas-tabs { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-8); }

.octa-canvas-tab {
  display: inline-flex; align-items: center; gap: var(--space-1-5); padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-lg); border: 0.5px solid var(--border-strong);
  background: var(--background); font-size: 13px; font-weight: 500;
  color: var(--muted-foreground); transition: all var(--dur-fast); cursor: pointer;
}

.octa-canvas-tab:hover, .octa-canvas-tab.active { background: var(--black); color: var(--background); border-color: var(--black); }

.octa-canvas-panel { display: none; animation: fadeIn 0.4s ease; }

.octa-canvas-panel.active { display: block; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.octa-canvas-card {
  background: var(--background); border: 0.5px solid var(--border-strong);
  border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-sm);
  max-width: 80%; margin: 0 auto;
}

.octa-canvas-card-header { padding: var(--space-6) var(--space-7); border-bottom: 0.5px solid var(--border); }

.octa-canvas-card-header h3 { font-size: 18px; font-weight: 600; margin-bottom: var(--space-1-5); }

.octa-canvas-card-header p { font-size: 13px; color: var(--muted-foreground); line-height: 1.5; }

.octa-canvas-canvas {
  position: relative; height: 360px;
  background-image: radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 16px 16px; overflow: hidden;
}

.mini-box {
  width: var(--mini-box-size, 44px); height: var(--mini-box-size, 44px);
  border-radius: var(--mini-box-radius, 11px);
  background: var(--mini-box-bg, var(--accent));
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: var(--mini-icon-size, 18px);
}

.mini-label {
  font-size: var(--mini-label-size, 9px);
  font-weight: 500; color: var(--muted-foreground);
  text-align: center; max-width: 72px; line-height: 1.2;
}

.mini-notif {
  background: var(--ds-status-ok); color: white;
  border-radius: var(--mini-notif-radius, 8px);
  padding: 3px 6px;
  font-size: var(--mini-notif-size, 11px);
  font-weight: 600;
  display: flex; align-items: center; gap: 3px; white-space: nowrap;
}


/* --- c-arch-calc (calculadora) --- */

.octa-calc-header h3.is-calc-result-title {
  font-family: var(--font-sans); font-size: 18px; font-weight: 600;
  letter-spacing: -0.01em; margin: 0;
}

.octa-calc-wrapper.is-narrow-760 { max-width: 760px; margin-bottom: var(--space-5); }

.octa-calc-header h3.is-calc-title {
  font-family: var(--font-sans); font-size: 20px; font-weight: 600;
  letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}

.octa-calc-header p.is-calc-intro {
  font-size: 13.5px; color: var(--muted-foreground);
  line-height: 1.6; margin: 0;
}

.octa-calc-cta {
  width: 100%; height: 48px;
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-2); font-weight: 600;
}

.octa-form-group.is-block    { max-width: none; margin-bottom: var(--space-4); }

.octa-form-group.is-block-lg { max-width: none; margin-bottom: var(--space-5); }

.octa-notif-banner.is-result-narrow { max-width: 760px; margin: var(--space-4) auto 0; }

.octa-calc-wrapper {
  max-width: 680px; margin: 0 auto; background: var(--background);
  border: 0.5px solid var(--border-strong); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md); overflow: hidden;
}

.octa-calc-header { padding: var(--space-8) var(--space-8) var(--space-6); text-align: center; }

.octa-calc-body { padding: 0 var(--space-8) var(--space-8); }

.octa-calc-slider-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted-foreground);
  text-align: center;
  margin: 0 0 var(--space-2);
}

.octa-calc-value-display { font-family: var(--font-mono); font-size: 28px; font-weight: 500; text-align: center; margin-bottom: var(--space-4); }

.octa-calc-slider {
  width: 100%; height: 6px; -webkit-appearance: none; appearance: none;
  border-radius: 3px; background: linear-gradient(to right, var(--accent), var(--brand-primary-dark));
  outline: none; margin-bottom: var(--space-8);
}

.octa-calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--black); border: 3px solid var(--background); box-shadow: var(--shadow-sm); cursor: pointer;
}

.octa-calc-slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: var(--black);
  border: 3px solid var(--background); box-shadow: var(--shadow-sm); cursor: pointer;
}

.octa-calc-row { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3-5) 0; border-bottom: 0.5px solid var(--border); }

.octa-calc-row:last-child { border-bottom: none; padding-bottom: 0; }

.octa-calc-row-name { font-size: 13px; font-weight: 500; }

.octa-calc-row-value { font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--ds-status-ok); }

.octa-calc-row-total {
  background: var(--muted); margin: var(--space-4) -var(--space-8) -var(--space-8); padding: var(--space-5) var(--space-8);
  display: flex; justify-content: space-between; align-items: center;
}

.octa-calc-row-total .octa-calc-row-name { font-size: 15px; font-weight: 600; }

.octa-calc-row-total .octa-calc-row-value { font-size: 18px; font-weight: 600; color: var(--ds-status-ok); }

.octa-calc-disclaimer { text-align: center; font-size: 11px; color: var(--gray-500); margin-top: var(--space-5); }


/* --- c-arch-frameworks --- */

.octa-fw-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: start; margin-top: var(--space-10); }

.octa-fw-cards-col { display: flex; flex-direction: column; gap: var(--space-3); }

.octa-fw-card {
  background: var(--background); border: 0.5px solid var(--border-strong);
  border-radius: var(--radius-lg); padding: var(--space-5); position: relative; overflow: hidden;
  transition: transform var(--dur-slow) cubic-bezier(0,0,0.2,1),
              border-color var(--dur-slow) cubic-bezier(0,0,0.2,1),
              background var(--dur-slow) cubic-bezier(0,0,0.2,1);
}

.octa-fw-card:hover { transform: translateY(-3px); border-color: rgba(249,115,22,0.50); background: rgba(249,115,22,0.065); }

.octa-fw-card::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(249,115,22,0.18) 1px, transparent 1px);
  background-size: 16px 16px; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity var(--dur-slow) cubic-bezier(0,0,0.2,1);
}

.octa-fw-card:hover::before { opacity: 1; }

.octa-fw-card h3 { font-size: 14px; font-weight: 600; margin-bottom: var(--space-1-5); display: flex; align-items: center; gap: var(--space-2); }

.octa-fw-card h3 .ico { font-size: 16px; display: inline-flex; align-items: center; }

.octa-fw-card p { font-size: 12px; color: var(--muted-foreground); line-height: 1.5; margin-bottom: var(--space-2-5); }

.octa-fw-card .result { font-size: 11px; font-weight: 500; color: var(--accent); margin-top: var(--space-2); }

.octa-fw-panel-empty-icon .ico { font-size: 22px; display: inline-flex; align-items: center; }

.octa-fw-sel-indicator {
  width: 12px; height: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}

.octa-fw-sel-indicator .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; transition: all var(--dur-fast);
}

.octa-fw-sel-indicator .check { display: none; }

.octa-fw-sel.active .octa-fw-sel-indicator .check { display: block; width: 10px; height: 10px; }

.octa-fw-panel {
  position: sticky; top: 100px;
  min-height: 420px; overflow: hidden;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}

.octa-fw-panel-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--space-3); padding: var(--space-10) var(--space-6); text-align: center;
}

.octa-fw-panel-empty-icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--platform-orange-background);
  display: flex; align-items: center; justify-content: center;
}

.octa-fw-panel-empty p { font-size: 13px; color: var(--muted-foreground); max-width: 240px; line-height: 1.5; }

.octa-fw-panel-list { padding: var(--space-5); position: relative; min-height: 280px; width: 100%; }

.octa-fw-footer {
  margin-top: var(--space-10); padding: var(--space-7) var(--space-8); border-radius: var(--radius-lg);
  border: 0.5px solid var(--border-strong); background: var(--background);
  max-width: 720px; margin-left: auto; margin-right: auto;
  position: relative; overflow: hidden;
}

.octa-fw-footer-inner { display: flex; align-items: flex-start; gap: var(--space-5); flex-wrap: wrap; }

.octa-fw-footer-content { flex: 1; min-width: 280px; }

.octa-fw-footer-title { display: flex; align-items: center; gap: var(--space-2-5); margin-bottom: var(--space-2-5); }

.octa-fw-footer-title .ico { font-size: 18px; color: var(--accent); }

.octa-fw-footer-title span:last-child { font-size: 15px; font-weight: 600; color: var(--foreground); }

.octa-fw-footer-content p { font-size: 13px; color: var(--muted-foreground); line-height: 1.7; margin: 0; }

.octa-fw-footer-checklist { display: flex; flex-direction: column; gap: var(--space-2); min-width: 180px; }

.octa-fw-footer-check { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; color: var(--muted-foreground); }

.octa-fw-footer-check .ico { font-size: 14px; color: var(--accent); }


/* --- c-arch-tabela (octa-cmp-table partials) --- */

.octa-cmp-table .col-pro { background: rgba(249,115,22,0.04); }

.octa-cmp-table th.col-pro { background: rgba(249,115,22,0.08); }

.octa-cmp-table tr:hover td.col-pro { background: rgba(249,115,22,0.065); }

.octa-cmp-table .nocheck {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  color: var(--ds-status-down); font-weight: 600; font-size: 14px;
}

.octa-cmp-table .cost-best { color: var(--ds-status-ok); font-weight: 600; }

.octa-cmp-table .cost-divider td {
  padding: var(--space-2) var(--space-4); font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--muted-foreground);
  border-bottom: 1px solid var(--border-strong); background: var(--muted);
}


/* --- Media queries (responsive) --- */

@media (max-width: 900px) {
  .octa-fw-layout { grid-template-columns: 1fr; }
  .octa-fw-panel { position: static; }
}

@media (max-width: 700px) {
  .octa-editor-canvas { height: 300px; }
  .mini-label { max-width: 50px; }
  .octa-canvas-card { max-width: 100%; }
  .octa-canvas-card-header { padding: var(--space-5); }
  .octa-canvas-canvas { height: 240px; }
  .octa-calc-header { padding: var(--space-6) var(--space-5) var(--space-5); }
  .octa-calc-body { padding: 0 var(--space-5) var(--space-5); }
  .octa-calc-row-total { margin: var(--space-4) -var(--space-5) -var(--space-5); padding: var(--space-4) var(--space-5); }
  .octa-calc-value-display { font-size: 24px; }
  .octa-calc-row-value { font-size: 12px; }
  .octa-calc-row-name { font-size: 12px; }
  .octa-calc-row-total .octa-calc-row-value { font-size: 15px; }
  .octa-calc-row-total .octa-calc-row-name { font-size: 13px; }
  .octa-cmp-table .check, .octa-cmp-table .nocheck { width: 18px; height: 18px; font-size: 10px; }
  .octa-cmp-table .cost-divider td { padding: var(--space-1-5) var(--space-2); font-size: 9px; }
  .octa-fw-panel { min-height: 180px; }
}

@media (max-width: 480px) {
  .octa-editor-canvas { height: 220px; }
  .octa-canvas-canvas { height: 200px; }
  .mini-label { max-width: 44px; }
  .octa-canvas-tabs { gap: var(--space-1-5); }
  .octa-canvas-tab { padding: var(--space-1-5) var(--space-2-5); font-size: 12px; }
  .octa-calc-header { padding: var(--space-5) var(--space-4) var(--space-4); }
  .octa-calc-body { padding: 0 var(--space-4) var(--space-4); }
  .octa-calc-row-total { margin: var(--space-4) -var(--space-4) -var(--space-4); padding: var(--space-3-5) var(--space-4); }
  .octa-calc-value-display { font-size: 22px; }
  .octa-calc-slider-label { font-size: 12px; }
  .octa-calc-row-value { font-size: 11px; }
  .octa-calc-row-name { font-size: 11px; }
  .octa-calc-row-total .octa-calc-row-value { font-size: 14px; }
  .octa-calc-row-total .octa-calc-row-name { font-size: 12px; }
  .octa-cmp-table .check, .octa-cmp-table .nocheck { width: 16px; height: 16px; font-size: 9px; }
  .octa-fw-card { padding: var(--space-4); }
  .octa-fw-panel { min-height: 160px; }
}

@media (max-width: 360px) {
  .octa-canvas-tab { padding: 5px var(--space-2); font-size: 11px; }
}

/* --- c-arch-tabela base rules (faltavam — linhas 452-458 do legacy) --- */
.octa-cmp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.octa-cmp-table th { padding: var(--space-3-5) var(--space-4); text-align: left; font-weight: 600; border-bottom: 1px solid var(--border-strong); background: var(--muted); }
.octa-cmp-table td { padding: var(--space-3) var(--space-4); border-bottom: 0.5px solid var(--border); color: var(--muted-foreground); transition: background 0.15s; }
.octa-cmp-table td:first-child { font-weight: 500; color: var(--foreground); }
.octa-cmp-table th:not(:first-child),
.octa-cmp-table td:not(:first-child) { text-align: center; }
.octa-cmp-table tr:last-child td { border-bottom: none; }
.octa-cmp-table tr:hover td { background: var(--surface-3); }
.octa-cmp-table .check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  color: var(--ds-status-ok); font-weight: 600; font-size: 14px;
}
.octa-cmp-table-wrap { margin-top: var(--space-16); }
.octa-cmp-table-wrap.is-flush { margin-top: 0; }
.octa-cmp-table-header { text-align: center; margin-bottom: var(--space-5); }
.octa-cmp-table-header h3 { font-size: 18px; font-weight: 600; margin-bottom: var(--space-1-5); }
.octa-cmp-table-header p { font-size: 13px; color: var(--muted-foreground); }

/* ===================================== */
/* Migração 100% landing-pages-legacy.css */
/* ===================================== */
/* ============================================================
   OCTA FUNNEL — landing-pages-legacy.css
   ----
   ATENCAO: ARQUIVO DESCARTAVEL.
   Contem o CSS de pagina ESPECIFICO (page-home, page-platforms,
   page-lp-integration, page-lp-vs, page-help, page-legal) que foi
   movido aqui durante o Bloco 5 da reorganizacao.
   Sera DELETADO conforme as paginas forem recriadas com a nova
   arquitetura cat-XX-* + ds-components.
   ----
   Carregar APOS landing.css apenas nas paginas legadas.
   ============================================================ */

@layer page-home, page-platforms, page-lp-integration, page-lp-vs,
       page-help, page-legal;

@layer page-home {
  /* Editor demo */
  .octa-editor-demo {
    position: relative; max-width: 900px; margin: 0 auto;
    background: var(--background); border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden;
    margin-bottom: -60px; z-index: var(--z-sticky);
  }
  .octa-editor-toolbar {
    display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2-5) var(--space-4);
    border-bottom: 0.5px solid var(--border); background: var(--muted);
  }
  .octa-editor-dot { width: 10px; height: 10px; border-radius: 50%; }
  .octa-editor-canvas {
    position: relative; height: 440px;
    background-image: radial-gradient(circle, var(--surface-6) 1px, transparent 1px);
    background-size: 20px 20px; overflow: hidden;
  }
  .flow-node {
    position: absolute;
    display: flex; flex-direction: column; align-items: center; gap: var(--space-1-5);
    opacity: 0; transform: scale(0.8);
    transition: all 0.5s var(--ease-back);
    white-space: nowrap; z-index: var(--z-sticky);
  }
  .flow-node.visible { opacity: 1; transform: scale(1); }
  .flow-node-box {
    width: 56px; height: 56px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    position: relative; transition: box-shadow .15s;
    color: white; font-size: 22px;
  }
  .flow-node-label {
    font-size: 10px; font-weight: 500; color: var(--muted-foreground);
    text-align: center; max-width: 80px; line-height: 1.2;
  }
  .conn-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: var(--z-content); }
  .conn-path { fill: none; stroke: rgba(255,255,255,.35); stroke-width: 2; stroke-linecap: round; }
  .conn-dot { fill: rgba(255,255,255,.35); transition: fill .12s; }
  .pulse-dot { fill: var(--accent); filter: drop-shadow(0 0 4px rgba(249,115,22,0.7)); }

  .octa-editor-toast {
    position: absolute; z-index: calc(var(--z-sticky) + 10); padding: var(--space-1-5) var(--space-3); border-radius: 8px;
    background: rgba(20,20,22,0.92); border: 0.5px solid var(--border);
    backdrop-filter: blur(8px);
    font-size: 11px; font-weight: 500; color: var(--foreground);
    white-space: nowrap; pointer-events: none;
    opacity: 0; transform: translateY(6px);
    animation: toastIn 0.4s ease forwards, toastOut 0.4s ease 2.6s forwards;
  }
  .octa-editor-toast-icon { color: var(--accent); margin-right: var(--space-1-5); }
  .octa-editor-toast-green { color: #22C55E; margin-right: var(--space-1-5); }
  .octa-editor-toast.toast-green { border-color: rgba(34,197,94,0.30); }
  @keyframes toastIn { to { opacity: 1; transform: translateY(0); } }
  @keyframes toastOut { to { opacity: 0; transform: translateY(-8px); } }

  .octa-editor-stats {
    display: flex; align-items: center; justify-content: center; gap: var(--space-7);
    padding: var(--space-2) var(--space-4); border-top: 0.5px solid var(--border);
    background: var(--muted); font-size: 11px; color: var(--muted-foreground);
  }
  .octa-editor-stat { display: flex; align-items: center; gap: var(--space-1-5); }
  .octa-editor-stat-dot { width: 6px; height: 6px; border-radius: 50%; animation: statPulse 2s ease infinite; }
  .octa-editor-stat-dot.is-ok     { background: var(--ds-status-ok); }
  .octa-editor-stat-dot.is-accent { background: var(--accent); }
  .octa-editor-stat-dot.is-info   { background: var(--ds-status-info); }
  .octa-editor-toolbar-meta {
    font-size: 12px; color: var(--muted-foreground); margin-left: 8px;
  }
  .octa-editor-stat-val { font-weight: 600; color: var(--foreground); font-variant-numeric: tabular-nums; }
  @keyframes statPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

  /* Solução (tabs) */
  /* octa-canvas-card-header h3 ico (CAT 06.14) */
  .octa-canvas-card-header h3 .ico { font-size: 18px; margin-right: 6px; display: inline-flex; align-items: center; }
  .octa-canvas-tabs { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-8); }
  .octa-canvas-tab {
    display: inline-flex; align-items: center; gap: var(--space-1-5); padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-lg);
    overflow: hidden; border: 0.5px solid var(--border-strong);
    background: var(--background); font-size: 13px; font-weight: 500;
    color: var(--muted-foreground); transition: all var(--dur-fast); cursor: pointer;
  }
  .octa-canvas-tab:hover, .octa-canvas-tab.active { background: var(--black); color: var(--background); border-color: var(--black); }
  .octa-canvas-panel { display: none; animation: fadeIn 0.4s ease; }
  .octa-canvas-panel.active { display: block; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
  .octa-canvas-card {
    background: var(--background); border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-sm);
    max-width: 80%; margin: 0 auto;
  }
  .octa-canvas-card-header { padding: var(--space-6) var(--space-7); border-bottom: 0.5px solid var(--border); }
  .octa-canvas-card-header h3 { font-size: 18px; font-weight: 600; margin-bottom: var(--space-1-5); }
  .octa-canvas-card-header p { font-size: 13px; color: var(--muted-foreground); line-height: 1.5; }
  .octa-canvas-canvas {
    position: relative; height: 360px;
    background-image: radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 16px 16px; overflow: hidden;
  }
  .mini-node {
    position: absolute; display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
    opacity: 0; transform: translateX(-10px);
    transition: all 0.5s var(--ease-back); white-space: nowrap;
  }
  .mini-node.visible { opacity: 1; transform: translateX(0); }
  .mini-box {
    width: var(--mini-box-size, 44px); height: var(--mini-box-size, 44px);
    border-radius: var(--mini-box-radius, 11px);
    background: var(--mini-box-bg, var(--accent));
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: var(--mini-icon-size, 18px);
  }
  .mini-label {
    font-size: var(--mini-label-size, 9px);
    font-weight: 500; color: var(--muted-foreground);
    text-align: center; max-width: 72px; line-height: 1.2;
  }
  .mini-notif {
    background: var(--ds-status-ok); color: white;
    border-radius: var(--mini-notif-radius, 8px);
    padding: 3px 6px;
    font-size: var(--mini-notif-size, 11px);
    font-weight: 600;
    display: flex; align-items: center; gap: 3px; white-space: nowrap;
  }

  /* Problemas — grid + content split */
  .problems-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin-bottom: var(--space-10); }
  .problem-card {
    background: var(--background); border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-lg);
    overflow: hidden; padding: var(--space-6); position: relative; overflow: hidden;
    transition: transform var(--dur-slow) cubic-bezier(0,0,0.2,1),
                border-color var(--dur-slow) cubic-bezier(0,0,0.2,1),
                background var(--dur-slow) cubic-bezier(0,0,0.2,1);
  }
  .problem-card:hover { transform: translateY(-3px); border-color: rgba(249,115,22,0.50); background: rgba(249,115,22,0.065); }
  .problem-card::before {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(249,115,22,0.18) 1px, transparent 1px);
    background-size: 16px 16px; border-radius: inherit; pointer-events: none;
    opacity: 0; transition: opacity var(--dur-slow) cubic-bezier(0,0,0.2,1);
  }
  .problem-card:hover::before { opacity: 1; }
  .problem-card-icon {
    width: 36px; height: 36px; border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-3);
  }
  .problem-card h3 { font-size: 15px; font-weight: 600; margin-bottom: var(--space-1-5); }
  .problem-card p { font-size: 13px; color: var(--muted-foreground); line-height: 1.5; }

  #problemas { display: flex; align-items: stretch; min-height: 580px; padding: 0; }
  .problemas-image-wrap { flex: 0 0 50%; overflow: hidden; }
  .problemas-image-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; }
  .problemas-content {
    flex: 1; min-width: 0; overflow: hidden;
    padding: var(--space-14) var(--space-12) var(--space-14) var(--space-16);
    display: flex; flex-direction: column; justify-content: center;
  }
  .problemas-content .problems-grid { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-10); }
  .problemas-content .problem-card { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-5) var(--space-6); }
  .problemas-content .problem-card-icon { flex-shrink: 0; margin-bottom: 0; }
  .problemas-content .problem-card h3 { margin-bottom: var(--space-0-5); }
  .problemas-content .marquee-wrapper::before { background: linear-gradient(to right, var(--background), transparent); }
  .problemas-content .marquee-wrapper::after { background: linear-gradient(to left, var(--background), transparent); }

  /* Calculadora */
  /* CAT 06.20 — calculadora compacta result heading (Bp Home) */
  .octa-calc-header h3.is-calc-result-title {
    font-family: var(--font-sans); font-size: 18px; font-weight: 600;
    letter-spacing: -0.01em; margin: 0;
  }

  /* Modifier — calculadora variante completo (Bp 17): max 760 + margin */
  .octa-calc-wrapper.is-narrow-760 { max-width: 760px; margin-bottom: var(--space-5); }
  .octa-calc-header h3.is-calc-title {
    font-family: var(--font-sans); font-size: 20px; font-weight: 600;
    letter-spacing: -0.015em; margin: 0 0 var(--space-2);
  }
  .octa-calc-header p.is-calc-intro {
    font-size: 13.5px; color: var(--muted-foreground);
    line-height: 1.6; margin: 0;
  }
  .octa-calc-cta {
    width: 100%; height: 48px;
    display: flex; align-items: center; justify-content: center;
    gap: var(--space-2); font-weight: 600;
  }
  .octa-form-group.is-block    { max-width: none; margin-bottom: var(--space-4); }
  .octa-form-group.is-block-lg { max-width: none; margin-bottom: var(--space-5); }
  .octa-notif-banner.is-result-narrow { max-width: 760px; margin: var(--space-4) auto 0; }

  .octa-calc-wrapper {
    max-width: 680px; margin: 0 auto; background: var(--background);
    border: 0.5px solid var(--border-strong); border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md); overflow: hidden;
  }
  .octa-calc-header { padding: var(--space-8) var(--space-8) var(--space-6); text-align: center; }
  .octa-calc-body { padding: 0 var(--space-8) var(--space-8); }
  .octa-calc-slider-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--muted-foreground);
    text-align: center;
    margin: 0 0 var(--space-2);
  }
  .octa-calc-value-display { font-family: var(--font-mono); font-size: 28px; font-weight: 500; text-align: center; margin-bottom: var(--space-4); }
  .octa-calc-slider {
    width: 100%; height: 6px; -webkit-appearance: none; appearance: none;
    border-radius: 3px; background: linear-gradient(to right, var(--accent), var(--brand-primary-dark));
    outline: none; margin-bottom: var(--space-8);
  }
  .octa-calc-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
    background: var(--black); border: 3px solid var(--background); box-shadow: var(--shadow-sm); cursor: pointer;
  }
  .octa-calc-slider::-moz-range-thumb {
    width: 22px; height: 22px; border-radius: 50%; background: var(--black);
    border: 3px solid var(--background); box-shadow: var(--shadow-sm); cursor: pointer;
  }
  .octa-calc-row { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3-5) 0; border-bottom: 0.5px solid var(--border); }
  .octa-calc-row:last-child { border-bottom: none; padding-bottom: 0; }
  .octa-calc-row-name { font-size: 13px; font-weight: 500; }
  .octa-calc-row-value { font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--ds-status-ok); }
  .octa-calc-row-total {
    background: var(--muted); margin: var(--space-4) -var(--space-8) -var(--space-8); padding: var(--space-5) var(--space-8);
    display: flex; justify-content: space-between; align-items: center;
  }
  .octa-calc-row-total .octa-calc-row-name { font-size: 15px; font-weight: 600; }
  .octa-calc-row-total .octa-calc-row-value { font-size: 18px; font-weight: 600; color: var(--ds-status-ok); }
  .octa-calc-disclaimer { text-align: center; font-size: 11px; color: var(--gray-500); margin-top: var(--space-5); }

  /* Frameworks */
  .typewriter-text { color: var(--accent); border-right: 2px solid var(--accent); animation: blink 0.8s infinite; }
  @keyframes blink { 0%, 50% { border-color: var(--accent); } 51%, 100% { border-color: transparent; } }
  .octa-fw-card {
    background: var(--background); border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-lg);
    overflow: hidden; padding: var(--space-5); position: relative; overflow: hidden;
    transition: transform var(--dur-slow) cubic-bezier(0,0,0.2,1),
                border-color var(--dur-slow) cubic-bezier(0,0,0.2,1),
                background var(--dur-slow) cubic-bezier(0,0,0.2,1);
  }
  .octa-fw-card:hover { transform: translateY(-3px); border-color: rgba(249,115,22,0.50); background: rgba(249,115,22,0.065); }
  .octa-fw-card::before {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(249,115,22,0.18) 1px, transparent 1px);
    background-size: 16px 16px; border-radius: inherit; pointer-events: none;
    opacity: 0; transition: opacity var(--dur-slow) cubic-bezier(0,0,0.2,1);
  }
  .octa-fw-card:hover::before { opacity: 1; }
  .octa-fw-card h3 { font-size: 14px; font-weight: 600; margin-bottom: var(--space-1-5); display: flex; align-items: center; gap: var(--space-2); }
  .octa-fw-card h3 .ico { font-size: 16px; display: inline-flex; align-items: center; }
  .octa-fw-card p { font-size: 12px; color: var(--muted-foreground); line-height: 1.5; margin-bottom: var(--space-2-5); }
  .octa-fw-card .result { font-size: 11px; font-weight: 500; color: var(--accent); margin-top: var(--space-2); }
  .octa-fw-panel-empty-icon .ico { font-size: 22px; display: inline-flex; align-items: center; }

  .octa-fw-selectors { display: flex; flex-wrap: wrap; gap: var(--space-1-5); }
  .octa-fw-sel {
    display: inline-flex; align-items: center; gap: var(--space-1);
    padding: 3px 9px; border-radius: var(--radius-full);
    border: 1px solid var(--border-strong); background: var(--background);
    font-size: 10px; font-weight: 500; color: var(--muted-foreground);
    cursor: pointer; transition: all var(--dur-fast); user-select: none;
  }
  .octa-fw-sel:hover { border-color: var(--accent); color: var(--accent); }
  .octa-fw-sel.active { background: var(--accent); color: white; border-color: var(--accent); }
  .octa-fw-sel-indicator {
    width: 12px; height: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
  }
  .octa-fw-sel-indicator .dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: currentColor; transition: all var(--dur-fast);
  }
  .octa-fw-sel.active .dot { display: none; }
  .octa-fw-sel-indicator .check { display: none; }
  .octa-fw-sel.active .octa-fw-sel-indicator .check { display: block; width: 10px; height: 10px; }

  .octa-fw-panel {
    position: sticky; top: 100px;
    min-height: 420px; overflow: hidden;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
  }
  .octa-fw-panel-empty {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: var(--space-3); padding: var(--space-10) var(--space-6); text-align: center;
  }
  .octa-fw-panel-empty-icon {
    width: 48px; height: 48px; border-radius: 12px;
    background: var(--platform-orange-background);
    display: flex; align-items: center; justify-content: center;
  }
  .octa-fw-panel-empty p { font-size: 13px; color: var(--muted-foreground); max-width: 240px; line-height: 1.5; }
  .octa-fw-panel-list { padding: var(--space-5); position: relative; min-height: 280px; width: 100%; }

  .octa-fw-footer {
    margin-top: var(--space-10); padding: var(--space-7) var(--space-8); border-radius: var(--radius-lg);
    border: 0.5px solid var(--border-strong); background: var(--background);
    max-width: 720px; margin-left: auto; margin-right: auto;
    position: relative; overflow: hidden;
  }
  .octa-fw-footer-inner { display: flex; align-items: flex-start; gap: var(--space-5); flex-wrap: wrap; }
  .octa-fw-footer-content { flex: 1; min-width: 280px; }
  .octa-fw-footer-title { display: flex; align-items: center; gap: var(--space-2-5); margin-bottom: var(--space-2-5); }
  .octa-fw-footer-title .ico { font-size: 18px; color: var(--accent); }
  .octa-fw-footer-title span:last-child { font-size: 15px; font-weight: 600; color: var(--foreground); }
  .octa-fw-footer-content p { font-size: 13px; color: var(--muted-foreground); line-height: 1.7; margin: 0; }
  .octa-fw-footer-checklist { display: flex; flex-direction: column; gap: var(--space-2); min-width: 180px; }
  .octa-fw-footer-check { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; color: var(--muted-foreground); }
  .octa-fw-footer-check .ico { font-size: 14px; color: var(--accent); }

  .octa-fw-selected-card {
    position: absolute; left: 20px; right: 20px;
    background: var(--background); border: 0.5px solid var(--border-strong);
    border-radius: 14px; padding: var(--space-4-5) var(--space-4);
    box-shadow: 0 2px 12px rgba(0,0,0,0.25);
    transition: all 0.4s var(--ease-back);
  }
  .octa-fw-selected-card:nth-last-child(2) { transform: translateY(8px) scale(0.97); z-index: 9; }
  .octa-fw-selected-card:nth-last-child(3) { transform: translateY(16px) scale(0.94); z-index: 8; }
  .octa-fw-selected-card:nth-last-child(4) { transform: translateY(24px) scale(0.91); z-index: 7; }
  .octa-fw-selected-card:nth-last-child(5) { transform: translateY(32px) scale(0.88); z-index: 6; }
  .octa-fw-selected-card:nth-last-child(n+6) { transform: translateY(36px) scale(0.86); opacity: 0; }
  .octa-fw-selected-card:last-child {
    transform: translateY(0) scale(1); z-index: var(--z-sticky);
    animation: octaFwCardIn 0.35s var(--ease-back);
  }
  @keyframes octaFwCardIn {
    from { opacity: 0; transform: translateY(-20px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  .octa-fw-selected-card-top {
    display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3-5);
    padding-bottom: var(--space-3); border-bottom: 0.5px solid var(--border);
  }
  .octa-fw-selected-card-icon {
    width: 36px; height: 36px; border-radius: 8px;
    background: var(--platform-orange-background);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .octa-fw-selected-card-info { flex: 1; min-width: 0; }
  .octa-fw-selected-card-info .octa-fw-selected-card-title { font-size: 13px; font-weight: 600; color: var(--foreground); margin-bottom: 1px; display: block; }
  .octa-fw-selected-card-info span { font-size: 11px; color: var(--muted-foreground); }
  .octa-fw-selected-card-remove {
    background: none; border: none; color: var(--gray-400); font-size: 16px;
    cursor: pointer; padding: var(--space-0-5) var(--space-1); line-height: 1;
    transition: color var(--dur-fast); flex-shrink: 0;
  }
  .octa-fw-selected-card-remove:hover { color: var(--ds-status-down); }
  .octa-fw-selected-card-body { display: flex; flex-direction: column; gap: var(--space-1-5); }
  .octa-fw-selected-card-body p {
    font-size: 12px; color: var(--muted-foreground); line-height: 1.5;
    display: flex; align-items: flex-start; gap: var(--space-2);
  }
  .octa-fw-selected-card-body p .check-ico { color: var(--gray-400); flex-shrink: 0; margin-top: var(--space-0-5); }
  .octa-fw-selected-card-triggers { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
  .octa-fw-trigger-chip { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
  .octa-fw-trigger-chip-box {
    width: 44px; height: 44px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    /* color e background vêm inline (paleta canônica de canais) */
  }
  .octa-fw-trigger-chip-box .ico { color: inherit; }
  .octa-fw-trigger-chip-box svg, .octa-fw-trigger-chip-box .ico svg {
    width: 18px; height: 18px;
    stroke: currentColor; fill: none; color: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }
  .octa-fw-trigger-chip-label {
    font-size: 8px; font-weight: 500; color: var(--muted-foreground);
    text-align: center; line-height: 1.2;
  }

  /* Planos */
  .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-bottom: var(--space-12); }
  .plan-card {
    border-radius: var(--radius-xl); overflow: hidden; padding: 1px;
    transition: transform var(--dur-slow) cubic-bezier(0,0,0.2,1), box-shadow var(--dur-slow) cubic-bezier(0,0,0.2,1);
  }
  .plan-card:hover { transform: translateY(-4px); }
  .plan-card-basic { background: linear-gradient(135deg, var(--gray-200) 0%, var(--gray-200) 16%, var(--surface-3) 16%); }
  .plan-card-basic:hover { box-shadow: 0 8px 30px var(--surface-6); }
  .plan-card-pro {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent) 16%, var(--surface-3) 16%);
    transform: scale(1.03);
  }
  .plan-card-pro:hover { box-shadow: 0 8px 30px rgba(249,115,22,0.25); transform: scale(1.03) translateY(-4px); }
  .plan-card-scale { background: linear-gradient(135deg, var(--gray-200) 0%, var(--gray-200) 16%, var(--surface-3) 16%); }
  .plan-card-scale:hover { box-shadow: 0 8px 30px rgba(100,100,255,0.10); }
  .plan-inner { background: var(--background); border-radius: 11px; padding: var(--space-6); display: flex; flex-direction: column; height: 100%; }
  .plan-badge { width: 20px; height: 20px; border-radius: 3px; margin-bottom: var(--space-3); }
  .plan-badge-basic, .plan-badge-pro, .plan-badge-scale {
    width: 20px; height: 20px; border-radius: 3px; margin-bottom: var(--space-3);
    display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700;
  }
  .plan-badge-basic { background: var(--tier-basic-medium); color: var(--muted-foreground); }
  .plan-badge-pro { background: var(--tier-pro-medium); color: white; }
  .plan-badge-scale { background: var(--tier-scale-medium); color: var(--muted-foreground); }
  .plan-name { font-size: 18px; font-weight: 600; margin-bottom: var(--space-1); }
  .plan-price { margin-bottom: var(--space-4); }
  .plan-price .amount { font-family: var(--font-mono); font-size: 2rem; font-weight: 600; color: var(--foreground); }
  .plan-price .currency { font-family: var(--font-mono); color: var(--muted-foreground); font-size: .875rem; }
  .plan-price .period { color: var(--muted-foreground); font-size: .8125rem; }
  .plan-highlight {
    display: inline-flex; padding: var(--space-0-5) var(--space-2); border-radius: 3px;
    background: var(--accent); color: white; font-size: 10px; font-weight: 600;
    margin-bottom: var(--space-2); width: fit-content; position: relative; overflow: hidden;
  }
  .plan-highlight::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
    animation: planShimmer 3s ease-in-out infinite;
  }
  @keyframes planShimmer { 0%, 100% { left: -100%; } 50% { left: 150%; } }
  .plan-features { list-style: none; margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2-5); flex: 1; padding: 0; }
  .plan-features li {
    font-size: 13px; color: var(--muted-foreground);
    display: flex; align-items: flex-start; gap: var(--space-2); line-height: 1.4;
    opacity: 0; transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
  .plan-features li.visible { opacity: 1; transform: translateY(0); }
  .plan-features li::before { content: '✓'; color: var(--accent); font-weight: 600; flex-shrink: 0; margin-top: 1px; }
  .plan-cta { margin-top: var(--space-5); }

  /* Comparison Table */
  .octa-cmp-table-wrap { margin-top: var(--space-16); }
  .octa-cmp-table-header { text-align: center; margin-bottom: var(--space-5); }
  .octa-cmp-table-header h3 { font-size: 18px; font-weight: 600; margin-bottom: var(--space-1-5); }
  .octa-cmp-table-header p { font-size: 13px; color: var(--muted-foreground); }
  .octa-cmp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
  .octa-cmp-table th { padding: var(--space-3-5) var(--space-4); text-align: left; font-weight: 600; border-bottom: 1px solid var(--border-strong); background: var(--muted); }
  .octa-cmp-table td { padding: var(--space-3) var(--space-4); border-bottom: 0.5px solid var(--border); color: var(--muted-foreground); transition: background 0.15s; }
  .octa-cmp-table td:first-child { font-weight: 500; color: var(--foreground); }
  .octa-cmp-table th:not(:first-child),
  .octa-cmp-table td:not(:first-child) { text-align: center; }
  .octa-cmp-table tr:last-child td { border-bottom: none; }
  .octa-cmp-table tr:hover td { background: var(--surface-3); }
  .octa-cmp-table .col-pro { background: rgba(249,115,22,0.04); }
  .octa-cmp-table th.col-pro { background: rgba(249,115,22,0.08); }
  .octa-cmp-table tr:hover td.col-pro { background: rgba(249,115,22,0.065); }
  .octa-cmp-table .check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    color: var(--ds-status-ok); font-weight: 600; font-size: 14px;
  }
  .octa-cmp-table .nocheck {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    color: var(--ds-status-down); font-weight: 600; font-size: 14px;
  }
  .octa-cmp-table .cost-best { color: var(--ds-status-ok); font-weight: 600; }
  .octa-cmp-table .cost-divider td {
    padding: var(--space-2) var(--space-4); font-size: 10px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.6px; color: var(--muted-foreground);
    border-bottom: 1px solid var(--border-strong); background: var(--muted);
  }

  /* Integration logos marquee */
  .integration-logos-section { padding: 0; }
  .logos-marquee {
    overflow: hidden; padding: var(--space-3) 0; position: relative;
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  }
  .logos-track-imgs {
    display: flex; gap: var(--space-8); align-items: center;
    animation: marquee 150s linear infinite; width: max-content;
    will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  }
  .logos-track-imgs.reverse { animation: marqueeRTL 150s linear infinite; }
  .logos-track-imgs img {
    height: 32px; width: auto; max-width: 120px; object-fit: contain;
    filter: grayscale(100%) brightness(1.8) contrast(0.4);
    opacity: 0.6; transition: all 300ms ease;
  }
  .logos-track-imgs img:hover { filter: grayscale(0%); opacity: 1; transform: scale(1.08); }
  @media(max-width:700px) {
    .logos-track-imgs img { height: 24px; max-width: 90px; }
    .logos-track-imgs { gap: var(--space-6); }
  }

  /* Why grid */
  .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
  .why-card {
    background: var(--background); border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-lg);
    overflow: hidden; padding: var(--space-6); position: relative; overflow: hidden;
    transition: transform var(--dur-slow) cubic-bezier(0,0,0.2,1),
                border-color var(--dur-slow) cubic-bezier(0,0,0.2,1),
                background var(--dur-slow) cubic-bezier(0,0,0.2,1);
  }
  .why-card:hover { transform: translateY(-3px); border-color: rgba(249,115,22,0.50); background: rgba(249,115,22,0.065); }
  .why-card::before {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(249,115,22,0.18) 1px, transparent 1px);
    background-size: 16px 16px; border-radius: inherit; pointer-events: none;
    opacity: 0; transition: opacity var(--dur-slow) cubic-bezier(0,0,0.2,1);
  }
  .why-card:hover::before { opacity: 1; }
  .why-card-icon {
    width: 36px; height: 36px; border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-3-5);
  }
  .why-card h3 { font-size: 15px; font-weight: 600; margin-bottom: var(--space-2); }
  .why-card p { font-size: 13px; color: var(--muted-foreground); line-height: 1.5; }

  /* Home: about + sobre + section padding adjustments */
  .hero { padding: 140px 0 0; overflow: visible; text-align: center; }
  #sobre { overflow: hidden; position: relative; padding: 76px 0; }
  .about-split {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch;
    min-height: 500px;
  }
  .about-text { padding: var(--space-12) var(--space-16) var(--space-12) 0; }
  .about-text h2 { margin-bottom: var(--space-6); }
  .about-text h2 span,
  .about-text .cta-line span {
    color: var(--accent);
  }
  .about-text .lead-paragraph { font-size: 16px; color: var(--muted-foreground); line-height: 1.7; margin-bottom: var(--space-5); }
  .about-text .highlight-text { font-size: 18px; font-weight: 700; color: var(--foreground); margin-bottom: var(--space-6); }
  .about-text ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-2-5); margin-bottom: var(--space-6); }
  .about-text ul li { display: flex; align-items: flex-start; gap: var(--space-2-5); font-size: 14px; color: var(--muted-foreground); line-height: 1.5; }
  .about-text ul li .ico { margin-top: var(--space-0-5); font-size: 16px; }
  .about-text .multicanal { font-size: 14px; color: var(--muted-foreground); line-height: 1.6; margin-bottom: var(--space-5); }
  .about-text .cta-line { font-size: 15px; font-weight: 600; color: var(--foreground); }
  .about-image-wrap { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; }
  .about-image { position: absolute; inset: 0; overflow: hidden; }
  .about-image img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; }

  /* Home responsive */
  @media (max-width: 900px) {
    .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
    .why-grid { grid-template-columns: 1fr 1fr; }
    .problemas-content { padding: var(--space-10) var(--space-8) var(--space-10) var(--space-10); }
  }
  @media (max-width: 768px) {
    .about-split { grid-template-columns: 1fr; gap: var(--space-8); }
    #sobre { display: flex; flex-direction: column; padding: 0; position: relative; }
    .about-split { grid-template-columns: 1fr !important; gap: 0 !important; min-height: auto !important; }
    .about-image-wrap { position: relative !important; width: 100% !important; height: 260px !important; overflow: hidden; }
    .about-image { position: absolute; inset: 0; border-radius: 0 !important; }
    .about-image img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
    .about-text { padding: var(--space-8) var(--space-5) var(--space-10) !important; margin-top: 0 !important; }
  }
  @media (max-width: 700px) {
    .problems-grid { grid-template-columns: 1fr; }
    .why-grid { grid-template-columns: 1fr; }
    .octa-editor-canvas { height: 300px; }
    .flow-node { gap: 3px; }
    .flow-node-label { max-width: 60px; }
    .mini-node { gap: var(--space-0-5); }
    .mini-label { max-width: 50px; }
    .octa-canvas-card { max-width: 100%; }
    .octa-canvas-card-header { padding: var(--space-5); }
    .octa-canvas-canvas { height: 240px; }
    .octa-calc-header { padding: var(--space-6) var(--space-5) var(--space-5); }
    .octa-calc-body { padding: 0 var(--space-5) var(--space-5); }
    .octa-calc-row-total { margin: var(--space-4) -var(--space-5) -var(--space-5); padding: var(--space-4) var(--space-5); }
    .octa-calc-value-display { font-size: 24px; }
    .octa-calc-row-value { font-size: 12px; }
    .octa-calc-row-name { font-size: 12px; }
    .octa-calc-row-total .octa-calc-row-value { font-size: 15px; }
    .octa-calc-row-total .octa-calc-row-name { font-size: 13px; }
    .headline-lg { line-height: 1.25; }
    .octa-cmp-table-wrap {
      overflow-x: auto;      margin-top: var(--space-8); padding: 0; position: relative;
    }
    .octa-cmp-table-wrap > div { min-width: 0; }
    .octa-cmp-table-header h3 { font-size: 16px; }
    .octa-cmp-table-header p { font-size: 12px; }
    .octa-cmp-table { font-size: 11px; table-layout: auto; }
    .octa-cmp-table th, .octa-cmp-table td { padding: 9px var(--space-2); white-space: nowrap; }
    .octa-cmp-table td:first-child, .octa-cmp-table th:first-child {
      position: sticky; left: 0; z-index: 3; background: var(--background);
      width: 120px; min-width: 120px; max-width: 140px;
      white-space: normal; font-size: 12px;
    }
    .octa-cmp-table th:first-child { background: var(--muted); }
    .octa-cmp-table th:not(:first-child), .octa-cmp-table td:not(:first-child) {
      text-align: center; min-width: 58px; font-size: 10px;
    }
    .octa-cmp-table .check, .octa-cmp-table .nocheck { width: 18px; height: 18px; font-size: 10px; }
    .octa-cmp-table .cost-divider td { padding: var(--space-1-5) var(--space-2); font-size: 9px; }
    .octa-fw-panel { min-height: 180px; }
    #problemas { flex-direction: column; min-height: auto; }
    .problemas-image-wrap { flex: none; width: 100%; height: 280px; }
    .problemas-image-wrap img { border-radius: 0; }
    .problemas-content { padding: var(--space-8) var(--space-5); overflow: visible; }
  }
  @media (max-width: 480px) {
    .octa-editor-canvas { height: 220px; }
    .octa-canvas-canvas { height: 200px; }
    .flow-node-label { max-width: 50px; }
    .mini-label { max-width: 44px; }
    .octa-canvas-tabs { gap: var(--space-1-5); }
    .octa-canvas-tab { padding: var(--space-1-5) var(--space-2-5); font-size: 12px; }
    .octa-calc-header { padding: var(--space-5) var(--space-4) var(--space-4); }
    .octa-calc-body { padding: 0 var(--space-4) var(--space-4); }
    .octa-calc-row-total { margin: var(--space-4) -var(--space-4) -var(--space-4); padding: var(--space-3-5) var(--space-4); }
    .octa-calc-value-display { font-size: 22px; }
    .octa-calc-slider-label { font-size: 12px; }
    .pricing-grid { max-width: 100%; }
    .plan-inner { padding: var(--space-5); }
    .plan-price .amount { font-size: 1.6rem; }
    .octa-calc-row-value { font-size: 11px; }
    .octa-calc-row-name { font-size: 11px; }
    .octa-calc-row-total .octa-calc-row-value { font-size: 14px; }
    .octa-calc-row-total .octa-calc-row-name { font-size: 12px; }
    .octa-cmp-table { font-size: 10px; }
    .octa-cmp-table th, .octa-cmp-table td { padding: 7px var(--space-1-5); }
    .octa-cmp-table td:first-child, .octa-cmp-table th:first-child {
      width: 105px; min-width: 105px; max-width: 120px; font-size: 11px;
    }
    .octa-cmp-table th:not(:first-child), .octa-cmp-table td:not(:first-child) {
      min-width: 52px; font-size: 9px;
    }
    .octa-cmp-table .check, .octa-cmp-table .nocheck { width: 16px; height: 16px; font-size: 9px; }
    .octa-cmp-table-header h3 { font-size: 15px; }
    .octa-fw-card { padding: var(--space-4); }
    .octa-fw-sel { padding: var(--space-1-5) var(--space-2-5); font-size: 11px; min-height: 36px; }
    .octa-fw-panel { min-height: 160px; }
    .why-card { padding: var(--space-5); }
  }
  @media (max-width: 360px) {
    .octa-canvas-tab { padding: 5px var(--space-2); font-size: 11px; }
    .octa-fw-sel { padding: 5px var(--space-2); font-size: 10px; }
  }
}

@layer page-platforms {
  .hero-integ {
    padding: 120px 0 var(--space-16); position: relative; overflow: hidden;
  }
  .hero-integ-inner {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--space-12); align-items: center; position: relative; z-index: var(--z-raised);
  }
  .hero-integ-text { order: 1; }
  .hero-integ-orbital { order: 2; }
  .hero-integ-text h1 { margin-bottom: var(--space-4); }
  .hero-integ-text h1 .text-gradient,
  .hero-integ-text h1 span {
    color: var(--accent);
  }
  .hero-integ-text .subheadline { margin-bottom: var(--space-7); }
  .hero-integ-ctas { display: flex; gap: var(--space-2-5); flex-wrap: wrap; }

  /* Orbital */
  .orbital-wrapper { position: relative; width: 100%; aspect-ratio: 1; max-width: 480px; margin: 0 auto; }
  .orbital-center {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 64px; height: 64px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center; z-index: var(--z-sticky);
  }
  .orbital-center svg { width: 56px; height: 56px; }
  .orbital-ring {
    position: absolute; top: 50%; left: 50%;
    border: 1px solid rgba(255,255,255,0.05); border-radius: 50%;
    transform: translate(-50%, -50%);
  }
  .orbital-ring-1 { width: 160px; height: 160px; animation: orbit-cw 28s linear infinite; }
  .orbital-ring-2 { width: 260px; height: 260px; animation: orbit-ccw 38s linear infinite; }
  .orbital-ring-3 { width: 360px; height: 360px; animation: orbit-cw 48s linear infinite; }
  .orbital-ring-4 { width: 460px; height: 460px; animation: orbit-ccw 58s linear infinite; }
  .orbital-icon {
    position: absolute; width: 34px; height: 34px;
    border-radius: 9px; background: var(--background);
    border: 1px solid var(--border-strong);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  }
  .orbital-icon img { width: 20px; height: 20px; object-fit: contain; filter: brightness(1.2); }
  .orbital-ring-1 .orbital-icon { animation: orbit-ccw 28s linear infinite; }
  .orbital-ring-2 .orbital-icon { animation: orbit-cw 38s linear infinite; }
  .orbital-ring-3 .orbital-icon { animation: orbit-ccw 48s linear infinite; }
  .orbital-ring-4 .orbital-icon { animation: orbit-cw 58s linear infinite; }
  @keyframes orbit-cw { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
  @keyframes orbit-ccw { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(-360deg); } }
  .orbital-ring-1 .oi-1 { top: 0; left: 50%; transform: translate(-50%, -50%); }
  .orbital-ring-1 .oi-2 { top: 100%; left: 50%; transform: translate(-50%, -50%); }
  .orbital-ring-1 .oi-3 { top: 50%; left: 0; transform: translate(-50%, -50%); }
  .orbital-ring-1 .oi-4 { top: 50%; left: 100%; transform: translate(-50%, -50%); }
  .orbital-ring-2 .oi-1 { top: 0; left: 50%; transform: translate(-50%, -50%); }
  .orbital-ring-2 .oi-2 { top: 50%; left: 100%; transform: translate(-50%, -50%); }
  .orbital-ring-2 .oi-3 { top: 100%; left: 50%; transform: translate(-50%, -50%); }
  .orbital-ring-2 .oi-4 { top: 50%; left: 0; transform: translate(-50%, -50%); }
  .orbital-ring-2 .oi-5 { top: 14.6%; left: 85.4%; transform: translate(-50%, -50%); }
  .orbital-ring-2 .oi-6 { top: 85.4%; left: 14.6%; transform: translate(-50%, -50%); }
  .orbital-ring-3 .oi-1 { top: 0; left: 50%; transform: translate(-50%, -50%); }
  .orbital-ring-3 .oi-2 { top: 25%; left: 93.3%; transform: translate(-50%, -50%); }
  .orbital-ring-3 .oi-3 { top: 75%; left: 93.3%; transform: translate(-50%, -50%); }
  .orbital-ring-3 .oi-4 { top: 100%; left: 50%; transform: translate(-50%, -50%); }
  .orbital-ring-3 .oi-5 { top: 75%; left: 6.7%; transform: translate(-50%, -50%); }
  .orbital-ring-3 .oi-6 { top: 25%; left: 6.7%; transform: translate(-50%, -50%); }
  .orbital-ring-3 .oi-7 { top: 6.7%; left: 25%; transform: translate(-50%, -50%); }
  .orbital-ring-4 .oi-1 { top: 0; left: 50%; transform: translate(-50%, -50%); }
  .orbital-ring-4 .oi-2 { top: 9.5%; left: 79.4%; transform: translate(-50%, -50%); }
  .orbital-ring-4 .oi-3 { top: 34.5%; left: 97.6%; transform: translate(-50%, -50%); }
  .orbital-ring-4 .oi-4 { top: 65.5%; left: 97.6%; transform: translate(-50%, -50%); }
  .orbital-ring-4 .oi-5 { top: 90.5%; left: 79.4%; transform: translate(-50%, -50%); }
  .orbital-ring-4 .oi-6 { top: 100%; left: 50%; transform: translate(-50%, -50%); }
  .orbital-ring-4 .oi-7 { top: 90.5%; left: 20.6%; transform: translate(-50%, -50%); }
  .orbital-ring-4 .oi-8 { top: 65.5%; left: 2.4%; transform: translate(-50%, -50%); }
  .orbital-ring-4 .oi-9 { top: 34.5%; left: 2.4%; transform: translate(-50%, -50%); }
  .orbital-ring-4 .oi-10 { top: 9.5%; left: 20.6%; transform: translate(-50%, -50%); }

  /* Proof */
  .proof-section { text-align: center; }
  .proof-section .subheadline { margin: var(--space-3) auto var(--space-2); }
  .proof-badge {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-1-5) var(--space-4) var(--space-1-5) var(--space-1-5); border-radius: var(--radius-full);
    border: 0.5px solid var(--border-strong); background: var(--background);
    font-size: 12px; font-weight: 500; color: var(--muted-foreground);
    box-shadow: var(--shadow-xs); margin-bottom: var(--space-8);
    max-width: 100%; white-space: nowrap;
  }
  .proof-badge-dot {
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
  }

  /* Etapas (compartilhado entre /plataformas e /lp/integracoes — defino aqui em base) */
  .etapas { display: flex; flex-direction: column; gap: 0; max-width: 860px; margin: 0 auto; }
  .etapa-arrow {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 72px; position: relative;
  }
  .etapa-arrow .arrow-line { width: 0; flex: 1; border-left: 2px dashed var(--border-strong, #333); }
  .etapa-arrow .arrow-icon {
    width: 28px; height: 28px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
  }
  .etapa-arrow .arrow-icon svg { width: 20px; height: 20px; }
  .etapa-arrow .arrow-icon svg polyline {
    stroke: var(--accent, var(--accent)); stroke-width: 2.5; fill: none;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .etapa {
    background: var(--background); border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-xl); padding: var(--space-9); position: relative; overflow: hidden;
    transition: transform var(--dur-slow) cubic-bezier(0,0,0.2,1), border-color var(--dur-slow), background var(--dur-slow);
  }
  .etapa:hover { transform: translateY(-3px); border-color: rgba(249,115,22,0.50); background: rgba(249,115,22,0.065); }
  .etapa::before {
    content: ''; position: absolute; inset: 0; z-index: var(--z-base);
    background-image: radial-gradient(circle, rgba(249,115,22,0.18) 1px, transparent 1px);
    background-size: 16px 16px; border-radius: inherit; pointer-events: none;
    opacity: 0; transition: opacity var(--dur-slow);
  }
  .etapa:hover::before { opacity: 1; }
  .etapa > * { position: relative; z-index: var(--z-content); }
  .etapa-header { display: flex; align-items: center; gap: var(--space-3-5); margin-bottom: var(--space-4); }
  .etapa-number {
    width: 44px; height: 44px; background: rgba(249,115,22,0.10);
    border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 700; color: var(--accent); flex-shrink: 0;
  }
  .etapa-header h3 { font-size: 18px; font-weight: 700; }
  .etapa-header h3 small { font-size: 13px; font-weight: 500; color: var(--muted-foreground); display: block; margin-top: var(--space-0-5); }
  .etapa p { font-size: 14px; color: var(--muted-foreground); line-height: 1.7; }
  .etapa p + p { margin-top: var(--space-3); }
  .etapa-sub { margin-top: var(--space-5); }
  .etapa-sub h3, .etapa-sub h4 { font-size: 14px; font-weight: 600; margin-bottom: var(--space-2); color: var(--foreground); }
  .etapa-sub h3 .ico, .etapa-sub h4 .ico { font-size: 14px; margin-right: var(--space-1); }
  .etapa-sub p { font-size: 13px; }
  .etapa-sub ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-1-5); margin-top: var(--space-2); padding: 0; }
  .etapa-sub ul li { display: flex; align-items: flex-start; gap: var(--space-2); font-size: 13px; color: var(--muted-foreground); line-height: 1.5; }
  .etapa-sub ul li .ico { margin-top: var(--space-0-5); font-size: 14px; }
  .etapa-divider { height: 1px; background: var(--border); margin: var(--space-5) 0; }

  /* Filter tabs + platform cards */
  .platforms-section-header { text-align: center; margin-bottom: var(--space-8); }
  .filter-tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; margin-bottom: var(--space-8); }
  .filter-tab {
    padding: .5rem 1.15rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-strong);
    background: var(--muted);
    color: var(--muted-foreground);
    font-size: .8125rem; font-weight: 500;
    font-family: inherit; cursor: pointer;
    transition: all var(--dur-fast);
  }
  .filter-tab:hover { border-color: rgba(249,115,22,0.40); color: var(--foreground); background: rgba(249,115,22,0.04); }
  .filter-tab.active {
    background: rgba(249,115,22,0.08);
    border-color: rgba(249,115,22,.3);
    color: var(--accent);
  }
  .platforms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-3);
  }
  .platform-card {
    background: var(--background);
    border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-lg);
    overflow: hidden;
    padding: var(--space-4); display: flex; align-items: center; gap: var(--space-3);
    position: relative; overflow: hidden;
    transition: transform var(--dur-slow) cubic-bezier(0,0,0.2,1),
                border-color var(--dur-slow) cubic-bezier(0,0,0.2,1),
                background var(--dur-slow) cubic-bezier(0,0,0.2,1);
  }
  .platform-card:hover {
    box-shadow: var(--shadow-sm);
    border-color: rgba(249,115,22,0.50);
    transform: translateY(-3px);
    background: rgba(249,115,22,0.065);
  }
  .platform-card::before {
    content: ''; position: absolute; inset: 0; z-index: var(--z-base);
    background-image: radial-gradient(circle, rgba(249,115,22,0.18) 1px, transparent 1px);
    background-size: 16px 16px; border-radius: inherit; pointer-events: none;
    opacity: 0; transition: opacity var(--dur-slow) cubic-bezier(0,0,0.2,1);
  }
  .platform-card:hover::before { opacity: 1; }
  .platform-card-logo, .platform-card-info { position: relative; z-index: var(--z-content); }
  .platform-card-logo {
    width: 36px; height: 36px; border-radius: 8px;
    background: var(--surface-3);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; overflow: hidden;
  }
  .platform-card-logo img { width: 36px; height: 36px; object-fit: contain; }
  .platform-card-info h3 { font-size: 13px; font-weight: 600; margin-bottom: 1px; }
  .platform-card-info p { font-size: 11.5px; color: var(--muted-foreground); line-height: 1.4; }
  .platform-category-content { display: none; animation: fadeIn 0.3s ease; }
  .platform-category-content.active { display: block; }

  /* Webhook section */
  .webhook-section { position: relative; }
  .webhook-card {
    max-width: 800px; margin: 0 auto;
    background: var(--background);
    border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm); overflow: hidden;
    display: grid; grid-template-columns: auto 1fr; gap: 0;
  }
  .webhook-card-accent { width: 4px; background: linear-gradient(to bottom, var(--accent), var(--brand-primary-dark)); border-radius: 4px 0 0 4px; }
  .webhook-card-body { padding: var(--space-7) var(--space-8); }
  .webhook-card-top { display: flex; align-items: center; gap: var(--space-3-5); margin-bottom: var(--space-3-5); }
  .webhook-card-icon {
    width: 40px; height: 40px; border-radius: 10px;
    background: var(--platform-orange-background);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .webhook-card-top h3 { font-size: 17px; font-weight: 600; }
  .webhook-card-body p { font-size: 13px; color: var(--muted-foreground); line-height: 1.6; margin-bottom: var(--space-1-5); }
  .webhook-card-body p strong { color: var(--foreground); font-weight: 500; }
  .webhook-features { display: flex; gap: var(--space-5); margin-top: var(--space-4); padding-top: var(--space-3-5); border-top: 0.5px solid var(--border); }
  .webhook-feature { display: flex; align-items: center; gap: var(--space-1-5); font-size: 12px; color: var(--muted-foreground); }
  .webhook-feature .ico { font-size: 13px; }

  /* Benefícios split */
  #beneficios-section { display: flex; align-items: stretch; min-height: 580px; padding: 0; background: var(--background); }
  .beneficios-image-wrap { flex: 0 0 50%; overflow: hidden; }
  .beneficios-image-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; }
  .beneficios-content {
    flex: 1; min-width: 0; overflow: hidden;
    padding: var(--space-14) var(--space-12) var(--space-14) var(--space-16);
    display: flex; flex-direction: column; justify-content: center;
  }
  .beneficios-content .benefits-header { margin-bottom: var(--space-8); }
  .beneficios-content .benefits-header .subheadline { margin: var(--space-2-5) 0 0; }
  .benefits-stack { display: flex; flex-direction: column; gap: var(--space-4); }
  .benefit-card {
    background: var(--background);
    border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-lg);
    overflow: hidden;
    padding: var(--space-5) var(--space-6);
    display: flex; align-items: flex-start; gap: var(--space-4);
    transition: all var(--dur-base);
    position: relative; overflow: hidden;
  }
  .benefit-card:hover {
    box-shadow: var(--shadow-sm); transform: translateY(-3px);
    border-color: rgba(249,115,22,0.50); background: rgba(249,115,22,0.065);
  }
  .benefit-card::before {
    content: ''; position: absolute; inset: 0; z-index: var(--z-base);
    background-image: radial-gradient(circle, rgba(249,115,22,0.18) 1px, transparent 1px);
    background-size: 16px 16px; border-radius: inherit; pointer-events: none;
    opacity: 0; transition: opacity var(--dur-slow) cubic-bezier(0,0,0.2,1);
  }
  .benefit-card:hover::before { opacity: 1; }
  .benefit-card > * { position: relative; z-index: var(--z-content); }
  .benefit-card-icon {
    width: 36px; height: 36px;
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .benefit-card-body h3 { font-size: 15px; font-weight: 600; margin-bottom: var(--space-0-5); }
  .benefit-card-body .benefit-subtitle { font-size: 13px; color: var(--muted-foreground); margin-bottom: var(--space-2-5); line-height: 1.5; }
  .benefit-card-body ul {
    list-style: none; padding: 0; margin: 0 0 var(--space-2-5);
    display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3);
  }
  .benefit-card-body ul li {
    font-size: 12px; color: var(--muted-foreground);
    display: flex; align-items: flex-start; gap: var(--space-1-5); line-height: 1.4;
  }
  .benefit-card-body ul li::before {
    content: '\2713'; color: var(--accent); font-weight: 600; flex-shrink: 0; margin-top: 1px;
  }
  .benefit-card-body .benefit-cta {
    font-size: 12px; font-weight: 500; color: var(--accent);
    padding-top: var(--space-2-5); border-top: 0.5px solid var(--border);
    display: flex; align-items: center; gap: var(--space-1-5);
  }

  @media (max-width: 900px) {
    .hero-integ-inner { grid-template-columns: 1fr; text-align: center; }
    .hero-integ-text { order: 2; }
    .hero-integ-orbital { order: 1; }
    .hero-integ-text .subheadline { margin-left: auto; margin-right: auto; }
    .hero-integ-ctas { justify-content: center; }
    .orbital-wrapper { max-width: 380px; }
    .orbital-ring-4 { display: none; }
    .orbital-ring-1 { width: 130px; height: 130px; }
    .orbital-ring-2 { width: 230px; height: 230px; }
    .orbital-ring-3 { width: 330px; height: 330px; }
    .orbital-center svg { width: 40px; height: 40px; }
    .orbital-icon { width: 28px; height: 28px; border-radius: 7px; }
    .orbital-icon img { width: 16px; height: 16px; }
    #beneficios-section { flex-direction: column; min-height: auto; }
    .beneficios-image-wrap { flex: none; width: 100%; height: 280px; }
    .beneficios-content { padding: var(--space-8) var(--space-5); }
    .etapa { padding: var(--space-6); }
    .platforms-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
    .webhook-card { grid-template-columns: 4px 1fr; }
  }
  @media (max-width: 600px) {
    .hero-integ { padding: 100px 0 var(--space-12); }
    .orbital-wrapper { max-width: 320px; }
    .orbital-ring-1 { width: 100px; height: 100px; }
    .orbital-ring-2 { width: 190px; height: 190px; }
    .orbital-ring-3 { width: 280px; height: 280px; }
    .orbital-center svg { width: 28px; height: 28px; }
    .orbital-center { width: 40px; height: 40px; border-radius: 10px; }
    .orbital-icon { width: 24px; height: 24px; border-radius: 6px; }
    .orbital-icon img { width: 14px; height: 14px; }
    .filter-tabs { gap: var(--space-1-5); }
    .webhook-features { flex-direction: column; gap: var(--space-2); }
    .webhook-card-body { padding: var(--space-5); }
    .benefit-card { padding: var(--space-5); }
    .proof-badge { font-size: 11px; padding: var(--space-1) var(--space-2-5) var(--space-1) var(--space-1); margin-bottom: var(--space-5); }
    .proof-badge-dot { width: 16px; height: 16px; }
    .proof-badge-dot svg { width: 10px; height: 10px; }
    .platforms-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-2-5); }
  }
  @media (max-width: 480px) {
    .hero-integ { padding: 88px 0 var(--space-10); }
    .orbital-wrapper { max-width: 260px; }
    .orbital-ring-1 { width: 80px; height: 80px; }
    .orbital-ring-2 { width: 155px; height: 155px; }
    .orbital-ring-3 { width: 230px; height: 230px; }
    .orbital-center svg { width: 22px; height: 22px; }
    .orbital-center { width: 32px; height: 32px; border-radius: 8px; }
    .orbital-icon { width: 20px; height: 20px; border-radius: 5px; }
    .orbital-icon img { width: 12px; height: 12px; }
    .hero-integ-ctas { flex-direction: column; gap: var(--space-2); }
    .hero-integ-ctas .btn { width: 100%; }
    .proof-badge { font-size: 10px; padding: 3px var(--space-2) 3px 3px; margin-bottom: var(--space-3-5); gap: var(--space-1); }
    .proof-badge-dot { width: 14px; height: 14px; }
    .proof-badge-dot svg { width: 9px; height: 9px; }
    .etapa { padding: var(--space-5); }
    .etapa-number { width: 36px; height: 36px; font-size: 15px; }
    .etapa-header h3 { font-size: 16px; }
    .etapa-arrow { height: 48px; }
    .platforms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
    .platform-card { padding: var(--space-3); gap: var(--space-2); }
    .platform-card-info h3 { font-size: 12px; }
    .platform-card-info p { font-size: 10px; }
    .webhook-card-body { padding: var(--space-4); }
    .benefit-card { padding: var(--space-4); }
    .benefit-card h3 { font-size: 15px; }
    .benefit-card ul { gap: var(--space-1); }
    .benefit-card li { font-size: 12px; }
    .filter-tabs { gap: var(--space-1); }
    .filter-tab { padding: var(--space-1-5) var(--space-2-5); font-size: 11px; }
  }
  @media (max-width: 360px) {
    .hero-integ { padding: var(--space-20) 0 var(--space-8); }
    .orbital-wrapper { max-width: 220px; }
    .orbital-ring-1 { width: 66px; height: 66px; }
    .orbital-ring-2 { width: 130px; height: 130px; }
    .orbital-ring-3 { width: 194px; height: 194px; }
    .orbital-center svg { width: 18px; height: 18px; }
    .orbital-center { width: 28px; height: 28px; border-radius: 7px; }
    .orbital-icon { width: 17px; height: 17px; border-radius: 4px; }
    .orbital-icon img { width: 10px; height: 10px; }
    .platforms-grid { gap: var(--space-1-5); }
    .platform-card { padding: var(--space-2-5); gap: var(--space-1-5); }
    .filter-tab { padding: 5px var(--space-2); font-size: 10px; }
  }
}

@layer page-lp-integration {
  /* Closing split */
  .closing-split {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center;
    margin-top: var(--space-16);
  }
  .closing-image { position: relative; border-radius: var(--radius-xl); overflow: hidden; }
  .closing-image-placeholder {
    width: 100%; aspect-ratio: 4/3;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(249,115,22,0.06), rgba(249,115,22,0.02));
    border-radius: var(--radius-xl); position: relative; overflow: hidden;
  }
  .closing-image-placeholder::before {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(249,115,22,0.12) 1px, transparent 1px);
    background-size: 20px 20px; opacity: 0.5;
  }
  .closing-image-placeholder .ico { font-size: 64px; opacity: 0.3; position: relative; z-index: var(--z-content); }
  .closing-text h3 { font-size: 22px; font-weight: 700; margin-bottom: var(--space-5); }
  .closing-text h3 span {
    color: var(--accent);
  }
  .closing-text p { font-size: 14px; color: var(--muted-foreground); line-height: 1.7; margin-bottom: var(--space-4); }
  .closing-text ul {
    list-style: none; display: flex; flex-direction: column; gap: var(--space-2-5);
    margin-bottom: var(--space-4); padding: 0;
  }
  .closing-text ul li {
    display: flex; align-items: flex-start; gap: var(--space-2-5);
    font-size: 14px; color: var(--muted-foreground); line-height: 1.5;
  }
  .closing-text ul li .ico { margin-top: var(--space-0-5); font-size: 16px; }
  .closing-text .closing-note { font-size: 13px; color: var(--muted-foreground); line-height: 1.6; }

  /* Comparison (before/after columns) */
  .comparison { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .comp-col {
    background: var(--background); border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-xl); padding: var(--space-9);
    position: relative; overflow: hidden;
    transition: transform var(--dur-slow) cubic-bezier(0,0,0.2,1), border-color var(--dur-slow), background var(--dur-slow);
  }
  .comp-col:hover { transform: translateY(-3px); border-color: rgba(249,115,22,0.50); background: rgba(249,115,22,0.065); }
  .comp-col::before {
    content: ''; position: absolute; inset: 0; z-index: var(--z-base);
    background-image: radial-gradient(circle, rgba(249,115,22,0.18) 1px, transparent 1px);
    background-size: 16px 16px; border-radius: inherit; pointer-events: none;
    opacity: 0; transition: opacity var(--dur-slow);
  }
  .comp-col:hover::before { opacity: 1; }
  .comp-col h3, .comp-col ul { position: relative; z-index: var(--z-content); }
  .comp-col.before { border-color: rgba(239,68,68,0.15); }
  .comp-col.before:hover { border-color: rgba(239,68,68,0.40); background: rgba(239,68,68,0.04); }
  .comp-col.before::before {
    background-image: radial-gradient(circle, rgba(239,68,68,0.12) 1px, transparent 1px);
  }
  .comp-col.after { border-color: rgba(16,185,129,0.20); }
  .comp-col.after:hover { border-color: rgba(16,185,129,0.50); background: rgba(16,185,129,0.04); }
  .comp-col.after::before {
    background-image: radial-gradient(circle, rgba(16,185,129,0.12) 1px, transparent 1px);
  }
  .comp-col h3 { font-size: 17px; font-weight: 700; margin-bottom: var(--space-6); display: flex; align-items: center; gap: var(--space-2-5); }
  .comp-col ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-3-5); padding: 0; }
  .comp-col li { display: flex; align-items: flex-start; gap: var(--space-2-5); font-size: 13px; color: var(--muted-foreground); line-height: 1.5; }
  .comp-check {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 22px; height: 22px; border-radius: 50%; font-size: 11px; font-weight: 600;
  }
  .comp-check.yes { background: rgba(16,185,129,0.12); color: var(--ds-status-ok); }
  .comp-check.no { background: rgba(239,68,68,0.10); color: var(--ds-status-down); }

  /* Override section padding na lp/integracoes (a página usa section padding:var(--space-5)) */
  .lp-integ-section { padding: var(--space-5) 0; }

  @media (max-width: 768px) {
    .about-split, .closing-split { grid-template-columns: 1fr; gap: var(--space-8); }
    .comparison { grid-template-columns: 1fr; }
  }
  @media (max-width: 768px) {
    #sobre { display: flex; flex-direction: column; padding: 0; }
    .about-image-wrap { position: relative; width: 100%; height: 280px; order: -1; }
    .about-image { border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
    .about-split { min-height: auto; }
    .about-text { padding: 0 var(--space-4) var(--space-6); margin-top: var(--space-6); }
  }
}

@layer page-lp-vs {
  .sec-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); margin-bottom: var(--space-3); }
  .sec-title { font-size: clamp(26px, 3.5vw, 40px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: var(--space-4); }
  .sec-sub { font-size: 16px; color: var(--muted-foreground); max-width: 640px; margin: 0 auto var(--space-10); line-height: 1.6; }

  .problem-stats {
    list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5);
    max-width: 720px; margin: var(--space-8) auto 0; padding: 0;
  }
  .problem-stats li {
    display: flex; align-items: center; gap: var(--space-4); padding: var(--space-6);
    border-radius: var(--radius-lg);
    overflow: hidden; border: 0.5px solid var(--surface-4);
    background: var(--background);
  }
  .problem-stats .stat-num {
    font-size: clamp(28px, 4vw, 40px); font-weight: 800;
    letter-spacing: -0.02em; color: var(--accent); line-height: 1; flex-shrink: 0;
  }
  .problem-stats .stat-text { font-size: 14px; color: var(--muted-foreground); line-height: 1.4; }

  /* Pillars grid */
  .pillars-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-top: var(--space-16); }
  .pillar {
    padding: var(--space-7); border-radius: var(--radius-lg);
    border: 0.5px solid var(--surface-4); background: var(--background-2);
    transition: border-color var(--dur-fast); position: relative; overflow: hidden;
    display: flex; flex-direction: column;
  }
  .pillar:hover { border-color: rgba(249,115,22,0.25); }
  .pillar-head { display: flex; align-items: center; gap: var(--space-3-5); margin-bottom: var(--space-4); }
  .pillar-icon {
    width: 44px; height: 44px; border-radius: var(--radius-lg);
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(249,115,22,0.10); color: var(--accent); flex-shrink: 0;
  }
  .pillar-num {
    font-family: var(--font-mono); font-size: 11px; font-weight: 600;
    color: var(--accent); letter-spacing: 0.08em; margin-bottom: var(--space-0-5);
  }
  .pillar-head h3 { font-size: 18px; font-weight: 700; color: var(--foreground); letter-spacing: -0.01em; }
  .pillar-quote { font-size: 14px; font-style: italic; color: var(--foreground); line-height: 1.5; margin-bottom: var(--space-3); }
  .pillar-desc { font-size: 13px; color: var(--muted-foreground); line-height: 1.6; margin-bottom: var(--space-5); flex-grow: 1; }
  .pillar-fws {
    display: flex; flex-wrap: wrap; gap: var(--space-1-5);
    padding-top: var(--space-4); border-top: 0.5px solid var(--surface-4);
  }
  .pillar-fw {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px var(--space-2-5); font-size: 12px; font-weight: 500;
    color: var(--muted-foreground); background: var(--surface-3);
    border: 0.5px solid var(--surface-6); border-radius: var(--radius-full);
  }
  .pillar-fw svg { width: 12px; height: 12px; color: var(--accent); }

  /* Comparison table (vs) */
  .cmp-wrap { border-radius: var(--radius-xl); overflow: hidden; border: 0.5px solid var(--border); }
  .cmp-table { width: 100%; border-collapse: collapse; }
  .cmp-table th, .cmp-table td { padding: var(--space-3-5) var(--space-5); text-align: left; border-bottom: 0.5px solid var(--border); font-size: 14px; }
  .cmp-table thead th {
    background: var(--muted); font-weight: 600; font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground);
  }
  .cmp-table thead th.octa { color: var(--accent); }
  .cmp-table tbody td { background: var(--background); vertical-align: top; }
  .cmp-table tbody tr:last-child td { border-bottom: none; }
  .cmp-table .feat { font-weight: 500; color: var(--foreground); }
  .cmp-table .section-divider td {
    background: var(--muted); font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent);
    padding: var(--space-2-5) var(--space-5); border-bottom: 0.5px solid var(--border);
  }
  .yes-val { color: var(--ds-status-ok); font-weight: 600; }
  .no-val { color: var(--muted-foreground); }

  @media (max-width: 720px) {
    .pillars-grid { grid-template-columns: 1fr; gap: var(--space-3-5); }
    .pillar { padding: 22px; }
    .pillar-head h3 { font-size: 16px; }
  }
  @media (max-width: 768px) {
    .cmp-table th, .cmp-table td { padding: var(--space-3) var(--space-3-5); font-size: 13px; }
    .cmp-table .section-divider td { padding: var(--space-2-5) var(--space-3-5); font-size: 10px; }
  }
  @media (max-width: 640px) {
    .cmp-table th, .cmp-table td { padding: var(--space-2-5) var(--space-2-5); font-size: 12px; }
    .cmp-table .feat { font-size: 12px; }
  }
  @media (max-width: 560px) {
    .problem-stats { grid-template-columns: 1fr; gap: var(--space-3); }
    .problem-stats li { padding: var(--space-4-5) var(--space-5); }
  }
  @media (max-width: 480px) {
    .cmp-table th, .cmp-table td { padding: 9px var(--space-2); }
    .cmp-wrap { margin: 0 -var(--space-1); }
    .pillar { padding: var(--space-5); }
  }
}

@layer page-help {
  .hp-app { display: flex; min-height: calc(100vh - var(--topbar-height, 56px)); }
  .hp-sidebar {
    position: sticky; top: 0;
    height: calc(100vh - var(--topbar-height, 56px));
    width: 220px; flex-shrink: 0;
    overflow-y: auto;
    padding: var(--space-5) var(--space-3) var(--space-10) var(--space-5);
    border-right: 1px solid var(--octa-border);
    scrollbar-width: thin;
    scrollbar-color: var(--surface-6) transparent;
  }
  .hp-sidebar::-webkit-scrollbar { width: 3px; }
  .hp-sidebar::-webkit-scrollbar-thumb { background: var(--surface-6); border-radius: 3px; }
  .hp-sb-group { margin-bottom: 22px; }
  .hp-sb-title {
    display: flex; align-items: center; gap: 7px;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.10em;
    color: var(--octa-text-muted);
    padding: 0 var(--space-2-5); margin-bottom: var(--space-1-5);
  }
  .hp-sb-title-icon {
    width: 16px; height: 16px;
    display: flex; align-items: center; justify-content: center;
    opacity: 0.55; flex-shrink: 0;
  }
  .hp-sb-title-icon svg { width: 14px; height: 14px; }
  .hp-sb-item {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-1-5) var(--space-2-5); font-size: 14px; font-weight: 500;
    color: var(--octa-text-secondary);
    border-radius: 8px; border-left: 2px solid transparent;
    transition: all 150ms cubic-bezier(0.4,0,0.2,1); cursor: pointer;
  }
  .hp-sb-dot {
    display: block; width: 5px; height: 5px;
    border-radius: 50%; background: var(--octa-text-muted);
    transition: all 150ms cubic-bezier(0.4,0,0.2,1);
  }
  .hp-sb-item:hover { color: var(--octa-text); background: var(--surface-3); }
  .hp-sb-item:hover .hp-sb-dot { background: var(--octa-text-secondary); }
  .hp-sb-item.active {
    color: var(--octa-primary-hover);
    border-left-color: var(--octa-primary);
    background: rgba(249,115,22,0.06);
    font-weight: 500;
  }
  .hp-sb-item .ico { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .hp-sb-item.active .hp-sb-dot { background: var(--octa-primary); width: 6px; height: 6px; box-shadow: 0 0 6px rgba(249,115,22,0.4); }
  .hp-sb-articles { padding: var(--space-0-5) 0 var(--space-1-5) var(--space-4-5); }
  .hp-sb-art {
    display: flex; align-items: center; gap: 7px;
    padding: 5px var(--space-2-5); font-size: 0.8rem; font-weight: 400;
    color: var(--octa-text-muted);
    border-radius: 6px; cursor: pointer;
    transition: all 150ms cubic-bezier(0.4,0,0.2,1);
  }
  .hp-sb-art:hover { color: var(--octa-text-secondary); background: var(--surface-3); }
  .hp-sb-art.active { color: var(--octa-primary-hover); font-weight: 500; }
  .hp-sb-art-dot {
    display: block; width: 3px; height: 3px;
    border-radius: 50%; background: var(--octa-text-muted);
    flex-shrink: 0; transition: all 150ms;
  }
  .hp-sb-art.active .hp-sb-art-dot { background: var(--octa-primary); width: 4px; height: 4px; }

  .hp-main { flex: 1; min-width: 0; padding: var(--space-7) var(--space-12) 60px; }
  .hp-toc {
    position: sticky; top: 0;
    height: calc(100vh - var(--topbar-height, 56px));
    width: 210px; flex-shrink: 0;
    overflow-y: auto; padding: var(--space-7) var(--space-5) var(--space-10) 0;
    scrollbar-width: none;
  }
  .hp-toc::-webkit-scrollbar { display: none; }
  .hp-toc-label {
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.10em;
    color: var(--octa-text-muted); margin-bottom: var(--space-2-5);
  }
  .hp-toc-link {
    display: block; font-size: 0.8rem; color: var(--octa-text-muted);
    padding: var(--space-1) 0 var(--space-1) var(--space-3);
    border-left: 1.5px solid var(--octa-border);
    transition: all 150ms cubic-bezier(0.4,0,0.2,1); cursor: pointer;
  }
  .hp-toc-link:hover { color: var(--octa-text-secondary); border-left-color: var(--octa-border-hover); }
  .hp-toc-link.active { color: var(--octa-primary-hover); border-left-color: var(--octa-primary); font-weight: 500; }

  .hp-v-home, .hp-v-article { display: none; }
  .hp-v-home.on { display: flex; flex-direction: column; align-items: center; }
  .hp-v-article.on { display: block; }
  .hp-app.hp-is-home .hp-sidebar, .hp-app.hp-is-home .hp-toc { display: none; }
  .hp-app.hp-is-home ~ * .hp-cat-btn, .hp-app.hp-is-home .hp-cat-btn { display: none !important; }
  .hp-app.hp-is-home .hp-main {
    padding: var(--space-7) var(--space-5) 60px;
    display: flex; flex-direction: column; align-items: center;
  }

  .hp-hero { text-align: center; padding: 0 var(--space-4) var(--space-8); max-width: 620px; }
  .hp-hero .hp-greeting {
    font-size: 2.6rem; font-weight: 800; line-height: 1.1;
    letter-spacing: -0.025em; margin-bottom: var(--space-3);
  }
  .hp-hero .hp-greeting .hp-name { color: var(--octa-primary); }
  .hp-hero .hp-greeting .hp-wave {
    display: inline-block;
    animation: hpWave 2.2s ease-in-out infinite;
    transform-origin: 70% 70%;
  }
  @keyframes hpWave {
    0%, 100% { transform: rotate(0); }
    15% { transform: rotate(14deg); }
    30% { transform: rotate(-8deg); }
    40% { transform: rotate(14deg); }
    50% { transform: rotate(-4deg); }
    60% { transform: rotate(10deg); }
    70% { transform: rotate(0); }
  }
  .hp-hero .hp-sub {
    font-size: 1.08rem; color: var(--octa-text-secondary);
    line-height: 1.6; max-width: 480px; margin: 0 auto;
  }

  .hp-search {
    width: 100%; max-width: 540px;
    display: flex; align-items: center; gap: var(--space-2-5);
    background: var(--octa-bg-input);
    border: 1.5px solid var(--octa-border);
    border-radius: 8px;
    padding: var(--space-3) var(--space-4-5); margin-bottom: var(--space-10);
    transition: border-color 150ms cubic-bezier(0.4,0,0.2,1);
  }
  .hp-search:focus-within { border-color: var(--octa-primary) !important; }
  .hp-search svg { width: 18px; height: 18px; color: var(--octa-text-muted); flex-shrink: 0; }
  .hp-search input {
    flex: 1; background: none; border: none; outline: none;
    font: inherit; font-size: 0.95rem; color: var(--octa-text);
  }
  .hp-search input::placeholder { color: var(--octa-text-muted); }
  .hp-search-wrap { margin-bottom: var(--space-10); position: relative; }
  .hp-search-wrap .hp-search { margin-bottom: 0; }
  @keyframes spin { to { transform: rotate(360deg); } }

  .hp-search-results {
    position: absolute; top: 100%; left: 0; right: 0; z-index: var(--z-dropdown);
    background: var(--octa-bg-card);
    border: 1px solid var(--octa-border);
    border-top: none;
    border-radius: 0 0 10px 10px;
    max-height: 420px; overflow-y: auto;
    box-shadow: 0 12px 32px rgba(0,0,0,.35);
    scrollbar-width: thin;
  }
  .hp-sr-item {
    display: flex; flex-direction: column; gap: 3px;
    padding: var(--space-3) var(--space-4-5); cursor: pointer;
    border-bottom: 1px solid var(--surface-4);
    transition: background 120ms;
  }
  .hp-sr-item:last-child { border-bottom: none; }
  .hp-sr-item:hover { background: rgba(249,115,22,.06); }
  .hp-sr-title {
    font-size: .92rem; font-weight: 600;
    color: var(--octa-text);
    display: flex; align-items: center; gap: var(--space-2);
  }
  .hp-sr-title .hp-sr-icon { width: 14px; height: 14px; opacity: .5; flex-shrink: 0; }
  .hp-sr-title .hp-sr-icon svg { width: 14px; height: 14px; }
  .hp-sr-cat { font-size: .75rem; font-weight: 500; color: var(--octa-primary); opacity: .8; }
  .hp-sr-snippet {
    font-size: .8rem; color: var(--octa-text-muted); line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .hp-sr-snippet mark {
    background: rgba(249,115,22,.25); color: var(--octa-text);
    border-radius: 2px; padding: 0 var(--space-0-5);
  }
  .hp-sr-empty {
    padding: var(--space-6) var(--space-4-5); text-align: center;
    color: var(--octa-text-muted); font-size: .88rem;
  }

  .hp-blocks-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5); max-width: 960px; width: 100%;
    padding: 0 var(--space-1) 60px;
  }
  .hp-cat-block {
    background: var(--octa-bg-card);
    border: 0.5px solid var(--surface-4);
    border-radius: 10px; padding: var(--space-6);
    position: relative; overflow: hidden; cursor: pointer;
    transition: transform var(--dur-slow) cubic-bezier(0,0,0.2,1),
                border-color var(--dur-slow) cubic-bezier(0,0,0.2,1),
                background var(--dur-slow) cubic-bezier(0,0,0.2,1);
  }
  .hp-cat-block:hover {
    transform: translateY(-3px);
    border-color: rgba(249,115,22,0.50);
    background: rgba(249,115,22,0.065);
  }
  .hp-cat-block::before {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(249,115,22,0.18) 1px, transparent 1px);
    background-size: 16px 16px; border-radius: inherit;
    pointer-events: none; opacity: 0;
    transition: opacity var(--dur-slow) cubic-bezier(0,0,0.2,1);
  }
  .hp-cat-block:hover::before { opacity: 1; }
  .hp-cat-icon {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(249,115,22,0.10);
    border-radius: 8px;
    border: 1px solid rgba(249,115,22,0.14);
    margin-bottom: var(--space-4); position: relative; z-index: var(--z-content);
  }
  .hp-cat-icon svg { width: 20px; height: 20px; color: var(--octa-primary); stroke-width: 2; }
  .hp-cat-block h3 { font-size: 1rem; font-weight: 650; margin-bottom: var(--space-1-5); position: relative; z-index: var(--z-content); }
  .hp-cat-block .hp-desc { font-size: 0.82rem; color: var(--octa-text-secondary); line-height: 1.5; position: relative; z-index: var(--z-content); margin-bottom: var(--space-3-5); }
  .hp-cat-count {
    font-size: 0.72rem; font-weight: 500; color: var(--octa-text-muted);
    display: flex; align-items: center; gap: var(--space-1);
    position: relative; z-index: var(--z-content);
  }
  .hp-cat-count svg { width: 12px; height: 12px; }

  .hp-article { max-width: 740px; }
  /* GIF demo nos artigos da Central de Ajuda */
  .hp-gif-demo {
    margin: 20px 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--octa-border);
    background: var(--octa-bg-card);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  }
  .hp-gif-demo img {
    width: 100%;
    display: block;
    border-radius: 8px;
  }
  .hp-gif-demo--caption {
    padding: 8px 14px;
    font-size: 0.78rem;
    color: var(--octa-text-muted);
    border-top: 1px solid var(--octa-border);
    text-align: center;
  }
  .hp-bc { display: flex; align-items: center; gap: var(--space-1-5); font-size: 0.8rem; color: var(--octa-text-muted); margin-bottom: var(--space-2); }
  .hp-bc a { transition: color 150ms cubic-bezier(0.4,0,0.2,1); cursor: pointer; }
  .hp-bc a:hover { color: var(--octa-text-secondary); }
  .hp-bc .hp-sep { opacity: 0.35; }
  .hp-page-title { font-size: 1.8rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: var(--space-1); line-height: 1.2; }
  .hp-page-desc { font-size: 0.92rem; color: var(--octa-text-secondary); margin-bottom: var(--space-7); line-height: 1.6; }
  .hp-article-list { list-style: none; padding: 0; margin: 0; }
  .hp-article-list li { border-bottom: 1px solid var(--octa-border); }
  .hp-article-list li:last-child { border-bottom: none; }
  .hp-article-link {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3-5) var(--space-1);
    font-size: 0.92rem; color: var(--octa-text-secondary);
    transition: all 150ms cubic-bezier(0.4,0,0.2,1); cursor: pointer;
  }
  .hp-article-link:hover { color: var(--octa-primary-hover); padding-left: var(--space-2-5); }
  .hp-article-link .hp-num {
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    background: var(--octa-bg-card);
    border: 1px solid var(--octa-border);
    border-radius: 8px; font-size: 0.72rem; font-weight: 600;
    color: var(--octa-text-muted); flex-shrink: 0;
    font-family: var(--font-mono);
  }
  .hp-article-link:hover .hp-num {
    background: rgba(249,115,22,0.10);
    border-color: rgba(249,115,22,0.30);
    color: var(--octa-primary);
  }
  .hp-article-link .hp-arrow {
    margin-left: auto; opacity: 0;
    transition: opacity 150ms cubic-bezier(0.4,0,0.2,1);
    color: var(--octa-primary); width: 14px; height: 14px; flex-shrink: 0;
  }
  .hp-article-link:hover .hp-arrow { opacity: 1; }

  /* Prose */
  .hp-prose h1 { font-size: 1.6rem; font-weight: 800; margin: var(--space-8) 0 var(--space-4); scroll-margin-top: 80px; line-height: 1.25; }
  .hp-prose h2 {
    font-size: 1.3rem; font-weight: 700; margin: var(--space-9) 0 var(--space-3-5);
    padding-bottom: var(--space-2); border-bottom: 1px solid var(--octa-border);
    scroll-margin-top: 80px; position: relative;
  }
  .hp-prose h2 .hp-anchor {
    position: absolute; left: -24px; top: 50%; transform: translateY(-60%);
    opacity: 0; transition: opacity 150ms cubic-bezier(0.4,0,0.2,1);
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    background: var(--octa-bg-card); border-radius: 8px;
    border: 1px solid var(--octa-border);
  }
  .hp-prose h2:hover .hp-anchor { opacity: 1; }
  .hp-prose h2 .hp-anchor svg { width: 11px; height: 11px; color: var(--octa-text-muted); }
  .hp-prose h3 { font-size: 1.05rem; font-weight: 600; margin: var(--space-6) 0 var(--space-2-5); scroll-margin-top: 80px; }
  .hp-prose h4 { font-size: 0.95rem; font-weight: 600; margin: var(--space-5) 0 var(--space-2); scroll-margin-top: 80px; color: var(--octa-text); }
  .hp-prose p { margin-bottom: var(--space-3-5); color: var(--octa-text-secondary); line-height: 1.7; }
  .hp-prose strong { color: var(--octa-text); font-weight: 600; }
  .hp-prose em { font-style: italic; }
  .hp-prose u { text-decoration: underline; text-underline-offset: 2px; }
  .hp-prose s, .hp-prose strike { text-decoration: line-through; opacity: 0.7; }
  .hp-prose sub { vertical-align: sub; font-size: 0.8em; }
  .hp-prose sup { vertical-align: super; font-size: 0.8em; }
  .hp-prose ul, .hp-prose ol { margin: var(--space-2-5) 0 var(--space-4-5) var(--space-5); color: var(--octa-text-secondary); }
  .hp-prose ul { list-style: disc; }
  .hp-prose ol { list-style: decimal; }
  .hp-prose li { margin-bottom: var(--space-1-5); line-height: 1.6; }
  .hp-prose a {
    color: var(--octa-primary-hover);
    text-decoration: underline; text-underline-offset: 2px;
    text-decoration-color: rgba(249,115,22,0.3);
    transition: text-decoration-color 150ms;
  }
  .hp-prose a:hover { text-decoration-color: var(--octa-primary); }
  .hp-prose a.hp-platform-link {
    color: var(--octa-text); text-decoration: none;
    background: rgba(249,115,22,0.08);
    border: 1px solid rgba(249,115,22,0.18);
    padding: 1px 7px; border-radius: 4px;
    font-size: 0.92em; transition: all 150ms;
  }
  .hp-prose a.hp-platform-link:hover {
    background: rgba(249,115,22,0.15);
    border-color: rgba(249,115,22,0.35);
    color: var(--octa-primary-hover);
  }
  .hp-prose img { max-width: 100%; height: auto; border-radius: 8px; margin: var(--space-3-5) 0; display: block; }
  .hp-prose iframe { max-width: 100%; border: none; border-radius: 8px; }
  .hp-prose [style*="padding-bottom"] { border-radius: 8px; overflow: hidden; margin: var(--space-4) 0; }
  .hp-prose code {
    font-family: var(--font-mono); font-size: 0.85em;
    background: rgba(249,115,22,0.08); color: var(--accent-hover);
    padding: var(--space-0-5) var(--space-1-5); border-radius: 4px;
  }
  .hp-prose pre {
    background: var(--octa-bg-card);
    border: 1px solid var(--octa-border);
    border-radius: 8px; padding: var(--space-4) var(--space-4-5);
    overflow-x: auto; margin: var(--space-4-5) 0; line-height: 1.7;
  }
  .hp-prose pre code { background: none; padding: 0; color: var(--octa-text-secondary); font-size: 0.8rem; }
  .hp-prose blockquote {
    border-left: 3px solid var(--octa-primary); margin: var(--space-4-5) 0;
    padding: var(--space-3) var(--space-4-5); background: rgba(249,115,22,0.04);
    border-radius: 0 8px 8px 0; color: var(--octa-text-secondary);
    font-style: italic;
  }
  .hp-prose blockquote p { margin-bottom: var(--space-1-5); }
  .hp-prose blockquote p:last-child { margin-bottom: 0; }
  .hp-prose hr { border: none; border-top: 1px solid var(--octa-border); margin: var(--space-7) 0; }
  .hp-prose table { width: 100%; border-collapse: collapse; margin: var(--space-4) 0; font-size: 0.88rem; }
  .hp-prose table th, .hp-prose table td {
    border: 1px solid var(--surface-10);
    padding: var(--space-2-5) var(--space-3); text-align: left;
    color: var(--octa-text-secondary);
  }
  .hp-prose table th { font-weight: 600; color: var(--octa-text); background: var(--surface-3); }
  .hp-prose table tr:hover td { background: var(--surface-2); }
  .hp-prose [style*="text-align: center"] { text-align: center; }
  .hp-prose [style*="text-align: right"] { text-align: right; }
  .hp-prose [style*="text-align: justify"] { text-align: justify; }
  .hp-prose font[size="1"] { font-size: 0.75rem; }
  .hp-prose font[size="3"] { font-size: 1rem; }
  .hp-prose font[size="4"] { font-size: 1.15rem; }
  .hp-prose font[size="5"] { font-size: 1.35rem; }
  .hp-prose font[size="6"] { font-size: 1.6rem; }

  .hp-callout {
    display: flex; gap: var(--space-3); padding: var(--space-3-5) var(--space-4);
    border-radius: 8px; border: 1px solid var(--octa-border);
    background: var(--octa-bg-card); margin: var(--space-4-5) 0;
    font-size: 0.85rem; line-height: 1.6; color: var(--octa-text-secondary);
  }
  .hp-callout-icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: var(--space-0-5); }
  .hp-callout.hp-info .hp-callout-icon { color: var(--octa-primary); }
  .hp-callout.hp-tip { border-color: rgba(34,197,94,0.25); }
  .hp-callout.hp-tip .hp-callout-icon { color: #22C55E; }
  .hp-code-block {
    background: var(--octa-bg-card); border: 1px solid var(--octa-border);
    border-radius: 8px; padding: var(--space-4) var(--space-4-5);
    overflow-x: auto; margin: var(--space-4-5) 0;
  }
  .hp-code-block code { background: none; padding: 0; color: var(--octa-text-secondary); font-size: 0.8rem; line-height: 1.7; }

  .hp-pag {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3-5);
    margin-top: var(--space-10); padding-top: var(--space-7);
    border-top: 1px solid var(--octa-border);
  }
  .hp-pag-link {
    display: flex; flex-direction: column;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--octa-border);
    border-radius: 8px;
    transition: border-color 150ms cubic-bezier(0.4,0,0.2,1); cursor: pointer;
  }
  .hp-pag-link:hover { border-color: var(--octa-border-hover); }
  .hp-pag-link.hp-next { align-items: flex-end; text-align: right; }
  .hp-pag-lbl {
    font-size: 0.72rem; color: var(--octa-text-muted); font-weight: 500;
    display: flex; align-items: center; gap: var(--space-1); margin-bottom: 3px;
  }
  .hp-pag-lbl svg { width: 12px; height: 12px; }
  .hp-pag-val { font-size: 0.88rem; font-weight: 500; }

  .hp-feedback { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-9); }
  .hp-feedback .hp-lbl { font-size: 0.83rem; color: var(--octa-text-muted); }
  .hp-fb-btns { display: flex; gap: var(--space-2); }
  .hp-fb-btn {
    display: flex; align-items: center; gap: var(--space-1-5);
    padding: 7px 13px;
    border: 1px solid var(--octa-border);
    border-radius: 8px;
    font-size: 0.8rem; color: var(--octa-text-muted);
    background: rgba(255,255,255,0.015);
    transition: all 150ms cubic-bezier(0.4,0,0.2,1);
  }
  .hp-fb-btn:hover { border-color: var(--octa-border-hover); color: var(--octa-text-secondary); }
  .hp-fb-btn svg { width: 13px; height: 13px; }
  .hp-docs-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: var(--space-7); margin-top: var(--space-9);
    border-top: 1px solid var(--octa-border);
    padding-bottom: var(--space-20);
  }
  .hp-footer-copy { font-size: 0.75rem; color: var(--octa-text-muted); }
  .hp-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 89; }
  .hp-overlay.hp-show { display: block; }
  .hp-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); min-height: 36px; }
  .hp-back-btn {
    display: flex; align-items: center; gap: var(--space-1-5);
    font-size: 0.85rem; font-weight: 500; color: var(--octa-text-secondary);
    cursor: pointer; padding: var(--space-1-5) var(--space-2-5); border-radius: 8px;
    transition: all 150ms cubic-bezier(0.4,0,0.2,1);
    background: none; border: none; font-family: inherit;
  }
  .hp-back-btn:hover { color: var(--octa-text); background: var(--surface-4); }
  .hp-back-btn svg { width: 16px; height: 16px; }
  .hp-cat-btn {
    display: none; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-3-5);
    background: var(--octa-bg-card);
    border: 1px solid var(--octa-border);
    border-radius: 8px;
    color: var(--octa-text-secondary);
    font-size: 0.8125rem; font-weight: 500;
    cursor: pointer; transition: all 150ms; min-height: 36px;
  }
  .hp-cat-btn:hover { background: var(--octa-bg-hover); color: var(--octa-text); }
  .hp-cat-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

  .hp-toast {
    position: fixed; top: 50%; left: 50%; z-index: var(--z-toast);
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0; pointer-events: none;
    background: var(--octa-primary-light);
    border: 1px solid rgba(249, 115, 22, .3);
    color: var(--octa-primary);
    font-size: 20px; font-weight: 600;
    padding: var(--space-4-5) var(--space-8); border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
    transition: all 300ms cubic-bezier(0.4,0,0.2,1);
    backdrop-filter: blur(12px);
  }
  .hp-toast.hp-toast-show { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; }

  .hp-bottom-section { max-width: 960px; width: 100%; margin-top: var(--space-16); }
  .hp-support-box {
    display: flex; align-items: center; gap: var(--space-8);
    background: var(--octa-bg-card);
    border: 1px solid var(--octa-border);
    border-radius: 12px; padding: var(--space-9) var(--space-10);
  }
  .hp-support-text { flex: 1; }
  .hp-support-text h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: var(--space-2); }
  .hp-support-text p { font-size: 0.92rem; color: var(--octa-text-secondary); line-height: 1.6; margin: 0; }
  .hp-support-actions { flex-shrink: 0; }
  .hp-wa-btn {
    display: inline-flex; align-items: center; gap: var(--space-2-5);
    background: var(--ds-channel-wa); color: var(--pure-white);
    font-size: 15px; font-weight: 600;
    padding: var(--space-3) var(--space-6); border-radius: 10px; border: none;
    cursor: pointer; text-decoration: none; transition: all 150ms;
  }
  .hp-wa-btn:hover { opacity: 0.9; transform: translateY(-1px); }
  .hp-wa-btn svg { width: 22px; height: 22px; }
  .hp-cta-box {
    text-align: center; padding: var(--space-16) var(--space-6); position: relative;
  }
  .hp-cta-box::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(249,115,22,0.06) 0%, transparent 60%);
    pointer-events: none;
  }
  .hp-cta-box h3 { font-size: 1.6rem; font-weight: 800; margin-bottom: var(--space-2-5); position: relative; z-index: var(--z-content); }
  .hp-cta-box p { font-size: 1rem; color: var(--octa-text-secondary); margin-bottom: var(--space-6); position: relative; z-index: var(--z-content); }
  .hp-cta-btn {
    display: inline-flex; align-items: center;
    background: linear-gradient(135deg, var(--accent), var(--brand-primary-dark));
    color: var(--pure-white); height: 48px; padding: 0 var(--space-9);
    border-radius: 8px; border: none;
    font-size: 16px; font-weight: 700;
    cursor: pointer; text-decoration: none;
    transition: opacity 150ms; position: relative; z-index: var(--z-content);
  }
  .hp-cta-btn:hover { opacity: 0.9; }

  .hp-marquee-wrapper { overflow: hidden; position: relative; padding: var(--space-4) 0; }
  .hp-marquee-wrapper::before, .hp-marquee-wrapper::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: var(--z-overlap);
  }
  .hp-marquee-wrapper::before { left: 0; background: linear-gradient(to right, var(--octa-bg, var(--background)), transparent); }
  .hp-marquee-wrapper::after { right: 0; background: linear-gradient(to left, var(--octa-bg, var(--background)), transparent); }
  .hp-marquee-track {
    display: flex; gap: var(--space-2-5); width: max-content;
    animation: hpMarquee 40s linear infinite;
  }
  @keyframes hpMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
  .hp-marquee-chip {
    display: inline-flex; align-items: center; gap: var(--space-1-5);
    padding: var(--space-2) var(--space-4); border-radius: 999px;
    border: 0.5px solid var(--octa-border, var(--border));
    background: var(--octa-bg-card, var(--background-2));
    font-size: 12px; font-weight: 500; white-space: nowrap;
    color: var(--octa-text-secondary, #B4B4B7);
  }
  .hp-mq-ico { display: inline-flex; align-items: center; font-size: 13px; margin-right: 3px; }
  .hp-mq-ico svg { width: 13px; height: 13px; fill: var(--accent); stroke: none; }

  /* Public layout (sem login) */
  .hp-public-layout {
    display: flex; flex-direction: column; min-height: 100vh;
    background: var(--octa-bg, var(--background));
  }
  .hp-public-header {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-6);
    border-bottom: 1px solid var(--octa-border, var(--border));
    background: var(--octa-bg-card, var(--background-2));
    position: sticky; top: 0; z-index: var(--z-overlay);
  }
  .hp-public-logo {
    display: flex; align-items: center; gap: var(--space-2-5);
    text-decoration: none; font-size: 18px; font-weight: 700;
    color: var(--octa-text, var(--foreground));
  }
  .hp-public-login-btn {
    padding: 7px var(--space-4-5); font-size: 14px; font-weight: 600;
    color: var(--octa-text, var(--foreground));
    background: transparent;
    border: 1px solid var(--octa-border, var(--surface-12));
    border-radius: 8px; text-decoration: none; transition: all 150ms;
  }
  .hp-public-login-btn:hover { background: var(--surface-6); }
  .hp-public-signup-btn {
    padding: 7px var(--space-4-5); font-size: 14px; font-weight: 600;
    color: var(--pure-white); background: var(--octa-primary, var(--accent));
    border: none; border-radius: 8px; text-decoration: none; transition: all 150ms;
  }
  .hp-public-signup-btn:hover { opacity: 0.9; }
  .hp-public-content { flex: 1; max-width: 1100px; width: 100%; margin: 0 auto; padding: 0 var(--space-6); }
  .hp-public .hp-app { --topbar-height: 0px; }
  .hp-public .hp-sidebar { top: 56px; height: calc(100vh - 56px); }

  @media (max-width: 1100px) { .hp-toc { display: none; } }
  @media (max-width: 900px) { .hp-blocks-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 860px) {
    .hp-sidebar {
      position: fixed; left: 0; top: 0; z-index: 1010;
      height: 100vh; width: 280px; max-width: 85vw;
      background: var(--octa-bg-subtle);
      transform: translateX(-100%);
      transition: transform var(--dur-slow) cubic-bezier(0,0,0.2,1);
      padding: var(--space-16) var(--space-3) var(--space-10) var(--space-5);
      box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    }
    .hp-sidebar.hp-open { transform: translateX(0); }
    .hp-overlay { z-index: 1009; }
    .hp-main { padding: var(--space-5) var(--space-4-5) 60px; }
    .hp-hero .hp-greeting { font-size: 2rem; }
    .hp-blocks-grid { grid-template-columns: 1fr; max-width: 420px; }
    .hp-pag { grid-template-columns: 1fr; }
    .hp-page-title { font-size: 1.4rem; }
    .hp-cat-btn { display: inline-flex !important; }
  }
  @media (max-width: 700px) { .hp-support-box { flex-direction: column; text-align: center; gap: var(--space-5); padding: var(--space-7) var(--space-5); } }
  @media (max-width: 640px) {
    .hp-public-header { padding: var(--space-2-5) var(--space-4); }
    .hp-public-login-btn, .hp-public-signup-btn { padding: var(--space-1-5) var(--space-3-5); font-size: 13px; }
  }
  @media (max-width: 480px) {
    .hp-main { padding: var(--space-4) var(--space-3-5) var(--space-12); }
    .hp-app.hp-is-home .hp-main { padding: var(--space-4) var(--space-3) var(--space-12); }
    .hp-hero { padding: 0 var(--space-2) var(--space-6); }
    .hp-hero .hp-greeting { font-size: 1.4rem; }
    .hp-hero .hp-sub { font-size: 0.9rem; }
    .hp-search { padding: var(--space-2-5) var(--space-3-5); margin-bottom: var(--space-7); }
    .hp-search input { font-size: 0.875rem; }
    .hp-search-wrap { margin-bottom: var(--space-7); }
    .hp-blocks-grid { gap: var(--space-3); max-width: 100%; padding: 0 0 var(--space-10); }
    .hp-cat-block { padding: var(--space-4); }
    .hp-cat-block:hover { transform: none; }
    .hp-cb-title { font-size: 0.95rem; }
    .hp-cb-desc { font-size: 0.78rem; }
    .hp-cb-count { font-size: 0.7rem; }
    .hp-page-title { font-size: 1.15rem; }
    .hp-page-desc { font-size: 0.85rem; margin-bottom: var(--space-5); }
    .hp-prose h1 { font-size: 1.3rem; margin: var(--space-6) 0 var(--space-3); }
    .hp-prose h2 { font-size: 1.1rem; margin: var(--space-7) 0 var(--space-2-5); }
    .hp-prose h3 { font-size: 0.95rem; margin: var(--space-5) 0 var(--space-2); }
    .hp-prose p { font-size: 0.875rem; line-height: 1.65; }
    .hp-prose li { font-size: 0.875rem; }
    .hp-prose table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: 0.8rem; }
    .hp-prose table th, .hp-prose table td { padding: var(--space-2) var(--space-2-5); white-space: nowrap; }
    .hp-prose pre { padding: var(--space-3) var(--space-3-5); }
    .hp-prose pre code { font-size: 0.75rem; }
    .hp-prose blockquote { padding: var(--space-2-5) var(--space-3-5); margin: var(--space-3-5) 0; }
    .hp-prose h2 .hp-anchor { display: none; }
    .hp-support-box { padding: var(--space-6) var(--space-4); gap: var(--space-4); }
    .hp-support-text h3 { font-size: 1.05rem; }
    .hp-support-text p { font-size: 0.85rem; }
    .hp-wa-btn { padding: var(--space-2-5) var(--space-5); font-size: 14px; width: 100%; justify-content: center; }
    .hp-cta-box { padding: var(--space-10) var(--space-4); }
    .hp-cta-box h3 { font-size: 1.25rem; }
    .hp-cta-box p { font-size: 0.875rem; }
    .hp-cta-btn { height: 44px; padding: 0 var(--space-6); font-size: 14px; }
    .hp-pag-val { font-size: 0.8rem; }
    .hp-pag-lbl { font-size: 0.65rem; }
    .hp-bc { font-size: 0.75rem; flex-wrap: wrap; }
    .hp-back-btn { font-size: 0.8rem; padding: 5px var(--space-2); }
    .hp-marquee-wrapper::before, .hp-marquee-wrapper::after { width: 40px; }
    .hp-marquee-chip { padding: var(--space-1-5) var(--space-3); font-size: 11px; }
    .hp-docs-footer { flex-direction: column; align-items: flex-start; gap: 0.75rem; padding-bottom: var(--space-12); }
    .hp-public-logo { font-size: 15px; }
    .hp-public-logo img { height: 24px !important; }
  }
  @media (max-width: 360px) {
    .hp-main { padding: var(--space-3) var(--space-2-5) var(--space-10); }
    .hp-hero .hp-greeting { font-size: 1.2rem; }
    .hp-hero .hp-sub { font-size: 0.8125rem; }
    .hp-cat-block { padding: var(--space-3-5); }
    .hp-page-title { font-size: 1.05rem; }
    .hp-prose h1 { font-size: 1.15rem; }
    .hp-prose h2 { font-size: 1rem; }
    .hp-prose p, .hp-prose li { font-size: 0.8125rem; }
    .hp-cta-box { padding: var(--space-8) var(--space-3); }
    .hp-cta-box h3 { font-size: 1.1rem; }
    .hp-public-login-btn, .hp-public-signup-btn { padding: 5px var(--space-2-5); font-size: 12px; }
    .hp-search { padding: var(--space-2) var(--space-3); }
  }
}

@layer page-legal {
  .lg-app { display: flex; min-height: calc(100vh - 56px); }
  .lg-sidebar {
    position: sticky; top: 56px;
    height: calc(100vh - 56px);
    width: 240px; flex-shrink: 0;
    overflow-y: auto;
    padding: var(--space-5) var(--space-3) var(--space-10) var(--space-5);
    border-right: 1px solid var(--octa-border);
    scrollbar-width: thin;
    scrollbar-color: var(--surface-6) transparent;
  }
  .lg-sidebar::-webkit-scrollbar { width: 3px; }
  .lg-sidebar::-webkit-scrollbar-thumb { background: var(--surface-6); border-radius: 3px; }
  .lg-sb-group { margin-bottom: 22px; }
  .lg-sb-title {
    display: flex; align-items: center; gap: 7px;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.10em;
    color: var(--octa-text-muted);
    padding: 0 var(--space-2-5); margin-bottom: var(--space-1-5);
  }
  .lg-sb-title-icon { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; opacity: 0.55; flex-shrink: 0; }
  .lg-sb-title-icon svg { width: 14px; height: 14px; }
  .lg-sb-item {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-1-5) var(--space-2-5); font-size: 14px; font-weight: 500;
    color: var(--octa-text-secondary);
    border-radius: 8px; border-left: 2px solid transparent;
    transition: all 150ms cubic-bezier(0.4,0,0.2,1);
    text-decoration: none;
  }
  .lg-sb-dot {
    display: block; width: 5px; height: 5px;
    border-radius: 50%; background: var(--octa-text-muted);
    transition: all 150ms cubic-bezier(0.4,0,0.2,1);
    flex-shrink: 0;
  }
  .lg-sb-item:hover { color: var(--octa-text); background: var(--surface-3); }
  .lg-sb-item:hover .lg-sb-dot { background: var(--octa-text-secondary); }
  .lg-sb-item.active {
    color: var(--octa-primary-hover);
    border-left-color: var(--octa-primary);
    background: rgba(249,115,22,0.06);
    font-weight: 500;
  }
  .lg-sb-item.active .lg-sb-dot { background: var(--octa-primary); width: 6px; height: 6px; box-shadow: 0 0 6px rgba(249,115,22,0.4); }

  .lg-main { flex: 1; min-width: 0; padding: var(--space-7) var(--space-12) 60px; }
  .lg-toc {
    position: sticky; top: 56px;
    height: calc(100vh - 56px);
    width: 210px; flex-shrink: 0;
    overflow-y: auto; padding: var(--space-7) var(--space-5) var(--space-10) 0;
    scrollbar-width: none;
  }
  .lg-toc::-webkit-scrollbar { display: none; }
  .lg-toc-label {
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.10em;
    color: var(--octa-text-muted); margin-bottom: var(--space-2-5);
  }
  .lg-toc-link {
    display: block; font-size: 0.8rem; color: var(--octa-text-muted);
    padding: var(--space-1) 0 var(--space-1) var(--space-3);
    border-left: 1.5px solid var(--octa-border);
    transition: all 150ms cubic-bezier(0.4,0,0.2,1); cursor: pointer;
    text-decoration: none;
  }
  .lg-toc-link:hover { color: var(--octa-text-secondary); border-left-color: var(--octa-border-hover); }
  .lg-toc-link.active { color: var(--octa-primary-hover); border-left-color: var(--octa-primary); font-weight: 500; }

  .lg-article { max-width: 740px; }
  .lg-bc {
    display: flex; align-items: center; gap: var(--space-1-5); flex-wrap: wrap;
    font-size: 0.8rem; color: var(--octa-text-muted); margin-bottom: var(--space-2);
  }
  .lg-bc a { transition: color 150ms cubic-bezier(0.4,0,0.2,1); color: var(--octa-text-muted); text-decoration: none; }
  .lg-bc a:hover { color: var(--octa-text-secondary); }
  .lg-bc .lg-sep { opacity: 0.35; }
  .lg-page-title { font-size: 1.8rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: var(--space-1); line-height: 1.2; }
  .lg-page-meta { font-size: 0.8rem; color: var(--octa-text-muted); margin-bottom: var(--space-7); line-height: 1.5; }

  /* Prose (espelha hp-prose com namespace lg-) */
  .lg-prose h1 { font-size: 1.6rem; font-weight: 800; margin: var(--space-8) 0 var(--space-4); scroll-margin-top: 80px; line-height: 1.25; }
  .lg-prose h2 {
    font-size: 1.3rem; font-weight: 700; margin: var(--space-9) 0 var(--space-3-5);
    padding-bottom: var(--space-2); border-bottom: 1px solid var(--octa-border);
    scroll-margin-top: 80px; position: relative;
  }
  .lg-prose h2 .lg-anchor {
    position: absolute; left: -24px; top: 50%; transform: translateY(-60%);
    opacity: 0; transition: opacity 150ms cubic-bezier(0.4,0,0.2,1);
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    background: var(--octa-bg-card); border-radius: 8px;
    border: 1px solid var(--octa-border); text-decoration: none;
  }
  .lg-prose h2:hover .lg-anchor { opacity: 1; }
  .lg-prose h2 .lg-anchor svg { width: 11px; height: 11px; color: var(--octa-text-muted); }
  .lg-prose h3 { font-size: 1.05rem; font-weight: 600; margin: var(--space-6) 0 var(--space-2-5); scroll-margin-top: 80px; }
  .lg-prose h4 { font-size: 0.95rem; font-weight: 600; margin: var(--space-5) 0 var(--space-2); scroll-margin-top: 80px; color: var(--octa-text); }
  .lg-prose p { margin-bottom: var(--space-3-5); color: var(--octa-text-secondary); line-height: 1.7; }
  .lg-prose strong { color: var(--octa-text); font-weight: 600; }
  .lg-prose em { font-style: italic; }
  .lg-prose u { text-decoration: underline; text-underline-offset: 2px; }
  .lg-prose s, .lg-prose strike { text-decoration: line-through; opacity: 0.7; }
  .lg-prose sub { vertical-align: sub; font-size: 0.8em; }
  .lg-prose sup { vertical-align: super; font-size: 0.8em; }
  .lg-prose ul, .lg-prose ol { margin: var(--space-2-5) 0 var(--space-4-5) var(--space-5); color: var(--octa-text-secondary); }
  .lg-prose ul { list-style: disc; }
  .lg-prose ol { list-style: decimal; }
  .lg-prose li { margin-bottom: var(--space-1-5); line-height: 1.6; }
  .lg-prose a {
    color: var(--octa-primary-hover);
    text-decoration: underline; text-underline-offset: 2px;
    text-decoration-color: rgba(249,115,22,0.3);
    transition: text-decoration-color 150ms;
  }
  .lg-prose a:hover { text-decoration-color: var(--octa-primary); }
  .lg-prose img { max-width: 100%; height: auto; border-radius: 8px; margin: var(--space-3-5) 0; display: block; }
  .lg-prose iframe { max-width: 100%; border: none; border-radius: 8px; }
  .lg-prose [style*="padding-bottom"] { border-radius: 8px; overflow: hidden; margin: var(--space-4) 0; }
  .lg-prose code {
    font-family: var(--font-mono); font-size: 0.85em;
    background: rgba(249,115,22,0.08); color: var(--accent-hover);
    padding: var(--space-0-5) var(--space-1-5); border-radius: 4px;
  }
  .lg-prose pre {
    background: var(--octa-bg-card);
    border: 1px solid var(--octa-border);
    border-radius: 8px; padding: var(--space-4) var(--space-4-5);
    overflow-x: auto; margin: var(--space-4-5) 0; line-height: 1.7;
  }
  .lg-prose pre code { background: none; padding: 0; color: var(--octa-text-secondary); font-size: 0.8rem; }
  .lg-prose blockquote {
    border-left: 3px solid var(--octa-primary); margin: var(--space-4-5) 0;
    padding: var(--space-3) var(--space-4-5); background: rgba(249,115,22,0.04);
    border-radius: 0 8px 8px 0; color: var(--octa-text-secondary);
    font-style: italic;
  }
  .lg-prose blockquote p { margin-bottom: var(--space-1-5); }
  .lg-prose blockquote p:last-child { margin-bottom: 0; }
  .lg-prose hr { border: none; border-top: 1px solid var(--octa-border); margin: var(--space-7) 0; }
  .lg-prose table { width: 100%; border-collapse: collapse; margin: var(--space-4) 0; font-size: 0.88rem; }
  .lg-prose table th, .lg-prose table td {
    border: 1px solid var(--surface-10);
    padding: var(--space-2-5) var(--space-3); text-align: left;
    color: var(--octa-text-secondary);
  }
  .lg-prose table th { font-weight: 600; color: var(--octa-text); background: var(--surface-3); }
  .lg-prose table tr:hover td { background: var(--surface-2); }
  .lg-prose [style*="text-align: center"] { text-align: center; }
  .lg-prose [style*="text-align: right"] { text-align: right; }
  .lg-prose [style*="text-align: justify"] { text-align: justify; }
  .lg-prose font[size="1"] { font-size: 0.75rem; }
  .lg-prose font[size="3"] { font-size: 1rem; }
  .lg-prose font[size="4"] { font-size: 1.15rem; }
  .lg-prose font[size="5"] { font-size: 1.35rem; }
  .lg-prose font[size="6"] { font-size: 1.6rem; }

  .lg-pag {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3-5);
    margin-top: var(--space-10); padding-top: var(--space-7);
    border-top: 1px solid var(--octa-border);
  }
  .lg-pag-link {
    display: flex; flex-direction: column;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--octa-border);
    border-radius: 8px;
    transition: border-color 150ms cubic-bezier(0.4,0,0.2,1);
    text-decoration: none;
  }
  .lg-pag-link:hover { border-color: var(--octa-border-hover); }
  .lg-pag-link.lg-next { align-items: flex-end; text-align: right; }
  .lg-pag-lbl {
    font-size: 0.72rem; color: var(--octa-text-muted); font-weight: 500;
    display: flex; align-items: center; gap: var(--space-1); margin-bottom: 3px;
  }
  .lg-pag-lbl svg { width: 12px; height: 12px; }
  .lg-pag-val { font-size: 0.88rem; font-weight: 500; color: var(--octa-text); }

  .lg-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); min-height: 36px; }
  .lg-mob-menu-btn {
    display: none; align-items: center; gap: var(--space-1-5);
    font-size: 0.85rem; font-weight: 500; color: var(--octa-text-secondary);
    cursor: pointer; padding: var(--space-1-5) var(--space-2-5); border-radius: 8px;
    transition: all 150ms cubic-bezier(0.4,0,0.2,1);
    background: none; border: none; font-family: inherit;
  }
  .lg-mob-menu-btn:hover { color: var(--octa-text); background: var(--surface-4); }
  .lg-mob-menu-btn svg { width: 16px; height: 16px; }
  .lg-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 89; }
  .lg-overlay.lg-show { display: block; }

  /* Public layout */
  .lg-public-layout {
    display: flex; flex-direction: column; min-height: 100vh;
    background: var(--octa-bg, var(--background));
  }
  .lg-public-header {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-6);
    border-bottom: 1px solid var(--octa-border, var(--border));
    background: var(--octa-bg-card, var(--background-2));
    position: sticky; top: 0; z-index: var(--z-overlay);
  }
  .lg-public-logo {
    display: flex; align-items: center; gap: var(--space-2-5);
    text-decoration: none; font-size: 18px; font-weight: 700;
    color: var(--octa-text, var(--foreground));
  }
  .lg-public-login-btn {
    padding: 7px var(--space-4-5); font-size: 14px; font-weight: 600;
    color: var(--octa-text, var(--foreground));
    background: transparent;
    border: 1px solid var(--octa-border, var(--surface-12));
    border-radius: 8px; text-decoration: none; transition: all 150ms;
  }
  .lg-public-login-btn:hover { background: var(--surface-6); }
  .lg-public-signup-btn {
    padding: 7px var(--space-4-5); font-size: 14px; font-weight: 600;
    color: var(--pure-white); background: var(--octa-primary, var(--accent));
    border: none; border-radius: 8px; text-decoration: none; transition: all 150ms;
  }
  .lg-public-signup-btn:hover { opacity: 0.9; }
  .lg-public-content { flex: 1; max-width: 1100px; width: 100%; margin: 0 auto; padding: 0 var(--space-6); }

  @media (max-width: 1100px) { .lg-toc { display: none; } }
  @media (max-width: 860px) {
    .lg-sidebar {
      position: fixed; left: 0; top: 0; z-index: 90;
      background: var(--octa-bg-subtle); height: 100vh;
      transform: translateX(-100%);
      transition: transform var(--dur-slow) cubic-bezier(0,0,0.2,1);
    }
    .lg-sidebar.lg-open { transform: translateX(0); }
    .lg-mob-menu-btn { display: flex; }
    .lg-main { padding: var(--space-5) var(--space-4-5) 60px; }
    .lg-pag { grid-template-columns: 1fr; }
    .lg-page-title { font-size: 1.4rem; }
  }
  @media (max-width: 640px) {
    .lg-public-header { padding: var(--space-2-5) var(--space-4); }
    .lg-public-login-btn, .lg-public-signup-btn { padding: var(--space-1-5) var(--space-3-5); font-size: 13px; }
  }
  @media (max-width: 480px) {
    .lg-main { padding: var(--space-4) var(--space-3-5) var(--space-12); }
    .lg-public-content { padding: 0 var(--space-4); }
    .lg-page-title { font-size: 1.2rem; }
    .lg-prose h1 { font-size: 1.3rem; margin: var(--space-6) 0 var(--space-3); }
    .lg-prose h2 { font-size: 1.1rem; margin: var(--space-7) 0 var(--space-2-5); }
    .lg-prose h3 { font-size: 0.95rem; margin: var(--space-5) 0 var(--space-2); }
    .lg-prose p, .lg-prose li { font-size: 0.875rem; line-height: 1.65; }
    .lg-prose table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: 0.8rem; }
    .lg-prose table th, .lg-prose table td { padding: var(--space-2) var(--space-2-5); white-space: nowrap; }
    .lg-prose pre { padding: var(--space-3) var(--space-3-5); font-size: 0.75rem; }
    .lg-prose code { font-size: 0.8em; }
    .lg-prose blockquote { padding: var(--space-2-5) var(--space-3-5); margin: var(--space-3-5) 0; }
    .lg-header { gap: var(--space-2); }
    .lg-bc { font-size: 0.75rem; flex-wrap: wrap; }
    .lg-pag-val { font-size: 0.8rem; }
    .lg-pag-lbl { font-size: 0.65rem; }
    .lg-public-logo { font-size: 15px; }
    .lg-public-logo img { height: 24px !important; }
    .lg-prose h2 .lg-anchor { display: none; }
  }
  @media (max-width: 360px) {
    .lg-main { padding: var(--space-3) var(--space-2-5) var(--space-10); }
    .lg-public-content { padding: 0 var(--space-3); }
    .lg-page-title { font-size: 1.1rem; }
    .lg-prose h1 { font-size: 1.15rem; }
    .lg-prose h2 { font-size: 1rem; }
    .lg-prose p, .lg-prose li { font-size: 0.8125rem; }
    .lg-public-login-btn, .lg-public-signup-btn { padding: 5px var(--space-2-5); font-size: 12px; }
  }
}


/* Fix: bento-bg-dots não pode capturar clicks (overlay decorativo) */
.octa-bento-bg-dots { pointer-events: none; }


/* === Header sobreposto ao hero (Bp 1 — design moderno) === */
/* Header absolute over hero, transparent enough to see hero canvas behind */
.octa-header {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: var(--space-3) var(--space-4) 0 !important;
}
/* Hero precisa ter position:relative pra header absoluto se ancorar */
.hero { position: relative; padding-top: 80px; }
/* Hero simple já tem padding suficiente */
.hero.is-simple { padding-top: 96px; }


/* ============================================
   Cookie preferences dialog (2026-05-05)
   ============================================ */
@layer overrides {
  .octa-cookie-dialog {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: 16px;
    padding: 0;
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    margin: auto;
    inset: 0;
    box-shadow: 0 30px 80px rgba(0,0,0,0.55);
    font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  }
  .octa-cookie-dialog::backdrop {
    background: rgba(8,8,10,0.85);
    backdrop-filter: blur(6px);
  }
  .octa-cookie-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px 24px 20px;
  }
  .octa-cookie-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .octa-cookie-head h2 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    color: var(--text);
    letter-spacing: -0.01em;
  }
  .octa-cookie-close {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted, var(--text));
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
  }
  .octa-cookie-close:hover {
    background: var(--surface-2, rgba(255,255,255,0.04));
    color: var(--text);
  }
  .octa-cookie-intro {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--text-muted, #b3b3b8);
    margin: 0;
  }
  .octa-cookie-intro a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .octa-cookie-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .octa-cookie-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2, rgba(255,255,255,0.02));
  }
  .octa-cookie-item-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .octa-cookie-item-text strong {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
  }
  .octa-cookie-item-text span {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--text-muted, #9a9aa3);
  }
  .octa-cookie-toggle {
    --w: 40px;
    --h: 22px;
    position: relative;
    flex-shrink: 0;
    width: var(--w);
    height: var(--h);
    cursor: pointer;
  }
  .octa-cookie-toggle.is-locked { cursor: not-allowed; opacity: 0.6; }
  .octa-cookie-toggle input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: inherit;
  }
  .octa-cookie-toggle-track {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.10);
    border: 1px solid var(--border);
    border-radius: 999px;
    transition: background 0.18s, border-color 0.18s;
  }
  .octa-cookie-toggle-track::after {
    content: ;
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.18s;
  }
  .octa-cookie-toggle input:checked + .octa-cookie-toggle-track {
    background: var(--accent);
    border-color: var(--accent);
  }
  .octa-cookie-toggle input:checked + .octa-cookie-toggle-track::after {
    transform: translateX(18px);
  }
  .octa-cookie-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    border-top: 1px solid var(--border);
    padding-top: 16px;
  }
  .octa-cookie-btn {
    appearance: none;
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
  }
  .octa-cookie-btn.is-ghost {
    color: var(--text-muted, #b3b3b8);
  }
  .octa-cookie-btn.is-ghost:hover {
    background: rgba(255,255,255,0.04);
    color: var(--text);
  }
  .octa-cookie-btn.is-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #0E0E10;
  }
  .octa-cookie-btn.is-primary:hover { filter: brightness(1.05); }
  @media (max-width: 480px) {
    .octa-cookie-actions { justify-content: stretch; }
    .octa-cookie-btn { flex: 1 1 100%; }
  }
}

/* ============================================
   Cookie consent banner (2026-05-05)
   Aparece na 1a visita. Slide-up no rodape.
   ============================================ */
@layer overrides {
  .octa-cookie-banner {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 9999;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
    font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  }
  .octa-cookie-banner.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .octa-cookie-banner-inner {
    max-width: 1180px;
    margin: 0 auto;
    background: var(--surface, #16161a);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    box-shadow: 0 16px 40px rgba(0,0,0,0.45);
  }
  .octa-cookie-banner-text {
    flex: 1 1 320px;
    min-width: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-muted, #b3b3b8);
  }
  .octa-cookie-banner-text strong {
    color: var(--text);
    font-weight: 600;
    margin-right: 4px;
  }
  .octa-cookie-banner-text a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .octa-cookie-banner-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
  }
  @media (max-width: 640px) {
    .octa-cookie-banner { left: 8px; right: 8px; bottom: 8px; }
    .octa-cookie-banner-inner { padding: 14px; }
    .octa-cookie-banner-actions { width: 100%; }
    .octa-cookie-banner-actions .octa-cookie-btn { flex: 1 1 0; min-width: 0; }
  }
}

/* ============================================
   PADDING-INLINE consolidado — Rubens 2026-05-05
   Garante respiro lateral em todas as seções da home.
   Cobre as 6 seções flagradas em audit:
   .octa-bento-block, .octa-sk, .octa-fw-layout,
   .octa-ts, .octa-facts-section, .octa-cta-banner
   ============================================ */
@layer overrides {
  section.octa-bento-block,
  section.octa-sk,
  section.octa-ts,
  section.octa-facts-section,
  section.octa-cta-banner,
  div.octa-fw-layout {
    padding-inline: clamp(16px, 4vw, 32px) !important;
  }
}

/* ============================================
   FIX overflow horizontal em viewports < 768
   .octa-carousel-track e .octa-mq são scroll horizontal
   internos; sem clip no body, escapam pro doc width.
   (Rubens 2026-05-05)
   ============================================ */
@layer overrides {
  html, body { overflow-x: clip; }
}

/* ============================================================
 * Bp 2 — Página-mãe Soluções (/automacao-de-vendas)
 * Componentes: Timeline (dor), Definição, Mecânica 3 passos
 * Tokens herdados de landing.css (vars --space, --radius, --accent).
 * ============================================================ */
@layer overrides {

  /* §3 Timeline narrativa (.octa-dt-*) */
  section.octa-dt-section {
    max-width: 1024px;
    margin-inline: auto;
    padding-block: var(--octa-section-py, clamp(56px, 7vw, 96px));
    padding-inline: clamp(16px, 4vw, 32px) !important;
  }
  .octa-dt-head {
    text-align: center;
    margin-bottom: var(--space-10);
    max-width: 720px;
    margin-inline: auto;
  }
  .octa-dt-title {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-3);
    color: var(--text);
  }
  .octa-dt-sub {
    font-size: clamp(15px, 1.4vw, 17px);
    line-height: 1.6;
    color: var(--muted-foreground);
    margin: 0;
  }
  .octa-dt-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    counter-reset: octa-dt;
  }
  .octa-dt-step {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: clamp(16px, 3vw, 32px);
    padding-block: clamp(20px, 3vw, 32px);
    border-bottom: 1px solid var(--border);
  }
  .octa-dt-step:last-child { border-bottom: 0; }
  .octa-dt-step-rail {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 6px;
  }
  .octa-dt-step-num {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 600;
    color: var(--accent);
    letter-spacing: -0.02em;
    line-height: 1;
  }
  .octa-dt-step-body { min-width: 0; }
  .octa-dt-step-title {
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.015em;
    margin: 0 0 var(--space-3);
    color: var(--text);
  }
  .octa-dt-step-desc p {
    font-size: clamp(15px, 1.3vw, 16px);
    line-height: 1.6;
    color: var(--muted-foreground);
    margin: 0 0 var(--space-2);
  }
  .octa-dt-step-desc p:last-child { margin-bottom: 0; }
  .octa-dt-step-desc .micro-proof {
    font-size: clamp(13px, 1.2vw, 14px);
    color: var(--text);
    margin-top: var(--space-2);
  }
  .octa-dt-step-desc .micro-proof em {
    color: var(--muted-foreground);
    font-style: normal;
    font-size: 0.9em;
  }
  @media (max-width: 600px) {
    .octa-dt-step { grid-template-columns: 56px 1fr; }
    .octa-dt-step-num { font-size: 32px; }
  }

  /* §4 Definição educacional (.octa-def-*) */
  section.octa-def-section {
    max-width: 1024px;
    margin-inline: auto;
    padding-block: var(--octa-section-py, clamp(56px, 7vw, 96px));
    padding-inline: clamp(16px, 4vw, 32px) !important;
  }
  .octa-def-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
  }
  .octa-def-head { text-align: center; }
  .octa-def-title {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--text);
  }
  .octa-def-prose {
    max-width: 720px;
    margin-inline: auto;
  }
  .octa-def-prose p {
    font-size: clamp(16px, 1.5vw, 18px);
    line-height: 1.7;
    color: var(--text);
    margin: 0 0 var(--space-4);
  }
  .octa-def-prose p:last-child { margin-bottom: 0; }
  .octa-def-h3 {
    font-size: clamp(20px, 2.2vw, 24px);
    font-weight: 600;
    text-align: center;
    margin: 0;
    color: var(--text);
    letter-spacing: -0.01em;
  }
  .octa-def-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    max-width: 720px;
    margin-inline: auto;
  }
  .octa-def-item {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: var(--space-4);
    align-items: start;
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 12px);
    background: var(--surface, rgba(255,255,255,0.02));
  }
  .octa-def-item.is-pos {
    border-color: rgba(249,115,22,0.4);
    background: rgba(249,115,22,0.04);
  }
  .octa-def-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ef4444;
  }
  .octa-def-item.is-pos .octa-def-icon { color: var(--accent); }
  .octa-def-item-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .octa-def-item-text strong {
    font-size: clamp(15px, 1.4vw, 17px);
    font-weight: 600;
    color: var(--text);
  }
  .octa-def-item-text span {
    font-size: clamp(14px, 1.3vw, 15px);
    color: var(--muted-foreground);
    line-height: 1.5;
  }

  /* §5 Mecânica 3 passos (.octa-mc-*) */
  section.octa-mc-section {
    max-width: 1024px;
    margin-inline: auto;
    padding-block: var(--octa-section-py, clamp(56px, 7vw, 96px));
    padding-inline: clamp(16px, 4vw, 32px) !important;
  }
  .octa-mc-head {
    text-align: center;
    max-width: 720px;
    margin-inline: auto;
    margin-bottom: var(--space-10);
  }
  .octa-mc-title {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--text);
  }
  .octa-mc-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: stretch;
    gap: var(--space-2);
  }
  .octa-mc-step {
    display: contents;
  }
  .octa-mc-card {
    grid-column: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: clamp(20px, 2.5vw, 28px);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl, 16px);
    background: var(--surface, rgba(255,255,255,0.02));
    height: 100%;
  }
  .octa-mc-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }
  .octa-mc-card-num {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 14px;
    font-weight: 600;
    color: var(--muted-foreground);
    letter-spacing: 0.04em;
  }
  .octa-mc-card-ico {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md, 10px);
    background: rgba(249,115,22,0.10);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .octa-mc-card-verb {
    font-size: clamp(20px, 2.2vw, 24px);
    font-weight: 600;
    margin: 0;
    color: var(--text);
    letter-spacing: -0.01em;
  }
  .octa-mc-card-desc {
    font-size: clamp(14px, 1.3vw, 16px);
    line-height: 1.55;
    color: var(--text);
    margin: 0;
  }
  .octa-mc-card-proof {
    font-size: clamp(12px, 1.2vw, 13px);
    line-height: 1.5;
    color: var(--muted-foreground);
    margin: 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
  }
  .octa-mc-arrow {
    grid-column: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-foreground);
    width: 24px;
  }
  .octa-mc-slogan {
    text-align: center;
    font-size: clamp(20px, 2.4vw, 28px);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: var(--space-10) auto 0;
    max-width: 720px;
  }
  @media (max-width: 768px) {
    .octa-mc-grid { grid-template-columns: 1fr; }
    .octa-mc-step { display: contents; }
    .octa-mc-arrow { transform: rotate(90deg); margin-block: -4px; }
  }

}

/* ============================================================
 * Bp 2 v2 — Componentes novos (refactor MOFU 2026-05-05)
 *   .octa-cf-* → Ciclo da venda em 4 fases (cards-link pros pilares)
 *   .octa-af-* → Anatomia de um fluxo (5 peças)
 * ============================================================ */
@layer overrides {

  /* §3 Ciclo da venda em 4 fases */
  section.octa-cf-section {
    max-width: 1024px;
    margin-inline: auto;
    padding-block: var(--octa-section-py, clamp(56px, 7vw, 96px));
    padding-inline: clamp(16px, 4vw, 32px) !important;
  }
  .octa-cf-head {
    text-align: center;
    max-width: 760px;
    margin-inline: auto;
    margin-bottom: var(--space-10);
  }
  .octa-cf-eyebrow {
    display: inline-block;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: var(--space-3);
  }
  .octa-cf-title {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-3);
    color: var(--text);
  }
  .octa-cf-sub {
    font-size: clamp(15px, 1.4vw, 17px);
    line-height: 1.6;
    color: var(--muted-foreground);
    margin: 0;
  }
  .octa-cf-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(12px, 2vw, 18px);
  }
  .octa-cf-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: clamp(20px, 2.5vw, 28px);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl, 16px);
    background: var(--surface, rgba(255,255,255,0.02));
    text-decoration: none;
    color: inherit;
    transition: transform 220ms cubic-bezier(0.16,1,0.3,1),
                border-color 220ms cubic-bezier(0.16,1,0.3,1),
                background 220ms cubic-bezier(0.16,1,0.3,1);
  }
  .octa-cf-card:hover {
    transform: translateY(-2px);
    border-color: rgba(249,115,22,0.45);
    background: rgba(249,115,22,0.04);
  }
  .octa-cf-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .octa-cf-card-num {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--muted-foreground);
  }
  .octa-cf-card-ico {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md, 10px);
    background: rgba(249,115,22,0.10);
    color: var(--accent);
  }
  .octa-cf-card-fase {
    font-size: clamp(20px, 2.2vw, 24px);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--text);
  }
  .octa-cf-card-desc {
    font-size: clamp(14px, 1.3vw, 15px);
    line-height: 1.55;
    color: var(--text);
    margin: 0;
  }
  .octa-cf-card-pilar {
    font-size: clamp(13px, 1.2vw, 14px);
    color: var(--accent);
    margin: 0;
  }
  .octa-cf-card-tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .octa-cf-card-tags li {
    font-size: 12px;
    line-height: 1;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted-foreground);
  }
  .octa-cf-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
    font-size: 13px;
    font-weight: 500;
    color: var(--accent);
  }
  .octa-cf-footer {
    margin-top: var(--space-10);
    padding: clamp(20px, 3vw, 32px);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl, 16px);
    background: var(--surface, rgba(255,255,255,0.02));
    text-align: center;
  }
  .octa-cf-footer-title {
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin: 0 0 var(--space-3);
    color: var(--text);
  }
  .octa-cf-footer-desc {
    font-size: clamp(14px, 1.3vw, 16px);
    line-height: 1.6;
    color: var(--muted-foreground);
    margin: 0 auto var(--space-5);
    max-width: 640px;
  }
  .octa-cf-footer-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  @media (max-width: 720px) {
    .octa-cf-grid { grid-template-columns: 1fr; }
  }

  /* §4 Anatomia de um fluxo (5 peças) */
  section.octa-af-section {
    max-width: 1024px;
    margin-inline: auto;
    padding-block: var(--octa-section-py, clamp(56px, 7vw, 96px));
    padding-inline: clamp(16px, 4vw, 32px) !important;
  }
  .octa-af-head {
    text-align: center;
    max-width: 760px;
    margin-inline: auto;
    margin-bottom: var(--space-10);
  }
  .octa-af-eyebrow {
    display: inline-block;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: var(--space-3);
  }
  .octa-af-title {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-3);
    color: var(--text);
  }
  .octa-af-sub {
    font-size: clamp(15px, 1.4vw, 17px);
    line-height: 1.6;
    color: var(--muted-foreground);
    margin: 0;
  }
  .octa-af-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .octa-af-item {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: clamp(16px, 3vw, 32px);
    padding-block: clamp(20px, 3vw, 28px);
    border-bottom: 1px solid var(--border);
  }
  .octa-af-item:last-child { border-bottom: 0; }
  .octa-af-item-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding-top: 4px;
  }
  .octa-af-item-num {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 600;
    color: var(--accent);
    letter-spacing: -0.02em;
    line-height: 1;
  }
  .octa-af-item-ico {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md, 10px);
    background: rgba(249,115,22,0.10);
    color: var(--accent);
  }
  .octa-af-item-body { min-width: 0; }
  .octa-af-item-title {
    font-size: clamp(20px, 2.2vw, 24px);
    font-weight: 600;
    margin: 0 0 var(--space-2);
    color: var(--text);
    letter-spacing: -0.01em;
  }
  .octa-af-item-desc {
    font-size: clamp(15px, 1.3vw, 16px);
    line-height: 1.6;
    color: var(--text);
    margin: 0 0 var(--space-3);
  }
  .octa-af-item-octa {
    font-size: clamp(13px, 1.2vw, 14px);
    line-height: 1.55;
    color: var(--muted-foreground);
    margin: 0;
  }
  .octa-af-tag {
    display: inline-block;
    padding: 3px 8px;
    margin-right: 6px;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent);
    background: rgba(249,115,22,0.10);
    border-radius: 4px;
    vertical-align: middle;
  }
  .octa-af-footer {
    margin-top: var(--space-10);
    padding: clamp(20px, 3vw, 32px);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl, 16px);
    background: var(--surface, rgba(255,255,255,0.02));
    text-align: center;
  }
  .octa-af-footer-title {
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 500;
    line-height: 1.4;
    color: var(--text);
    margin: 0 auto var(--space-5);
    max-width: 640px;
  }
  .octa-af-footer-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  @media (max-width: 600px) {
    .octa-af-item { grid-template-columns: 56px 1fr; }
    .octa-af-item-num { font-size: 22px; }
  }

}

/* ============================================================
 * Bp 2 v3 — Showcase-aligned (2026-05-05)
 * Apenas wrappers de seção e variant grid-4 do social-proof.
 * Componentes internos usam classes canônicas do showcase.
 * ============================================================ */
@layer overrides {

  /* §3 Ciclo 4 fases — wrapper que junta 04.13 Lead + 05.2 G2 */
  section.octa-cf-section {
    max-width: 1024px;
    margin-inline: auto;
    padding-block: var(--octa-section-py, clamp(56px, 7vw, 96px));
    padding-inline: clamp(16px, 4vw, 32px) !important;
  }
  section.octa-cf-section .octa-cf-lead-wrap {
    max-width: 720px;
    margin: 0 auto var(--space-10);
  }
  section.octa-cf-section .octa-prose-h1 {
    text-align: center;
    margin: 0 0 var(--space-3);
  }
  section.octa-cf-section .octa-lead {
    text-align: center;
    margin: 0 auto;
  }

  /* §6 Prova social variant=grid-4 — 2x2 em desktop (Rubens 2026-05-07) */
  .octa-ts-grid.is-grid-4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
  @media (max-width: 600px) {
    .octa-ts-grid.is-grid-4 { grid-template-columns: 1fr; }
  }

}

/* ============================================================
 * Hero sem editor demo — padding-bottom generoso
 * Quando o hero não tem .hero-editor-overlap, ele fica curto
 * (só badge+h1+sub+CTAs ~ 460px). Adicionar padding bottom pra
 * dar respiro e altura mínima coerente com a home.
 * ============================================================ */
@layer overrides {
  section.hero:not(:has(.hero-editor-overlap)) {
    padding-bottom: clamp(80px, 10vw, 140px) !important;
  }
}

/* ============================================================
 * /sobre overrides (Bp 14) — Rubens 2026-05-08
 * Adiciona regras pra:
 *   1) Padding entre octa-bento-block + octa-cf-section (§4→§5)
 *   2) Respiro entre número (::before) e texto na .octa-prose.is-manifesto
 * ============================================================ */

/* 1) octa-bento-block colado em octa-cf-section (mesma lógica de bento+mf) */
body section.octa-bento-block + section.octa-cf-section {
  padding-top: var(--octa-section-py-tight) !important;
}

/* 2) octa-cf-section logo após bento-block: reduz padding-top duplicado.
 *    O bento-block já tem padding-bottom full, cf-section ganha tight. */
body section.octa-bento-block + section.octa-cf-section {
  padding-top: var(--space-6) !important;
}

/* 3) is-manifesto: número 01/02/03 grudado na linha border-bottom — adiciona padding-bottom no ::before */
.octa-prose.is-manifesto > li::before,
.octa-prose.is-manifesto > p::before {
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-1);
}

/* ============================================================
 * /faq overrides (Bp 18) — Rubens iter 2 (2026-05-08)
 * Anatomia: hero-simple + shell-2col (sidebar busca/categorias + main 40 perguntas).
 * Wrapper canonico .octa-faq-section foi pensado pra acordeao simples (max-width 760px,
 * padding loose). Pra shell-2col precisamos relaxar max-width e diminuir padding,
 * alem de destacar h2 das categorias dentro do shell-main.
 * ============================================================ */

/* 1) Modifier .is-shell relaxa max-width pra caber shell-2col + reduz padding-block */
.octa-faq-section.is-shell {
  max-width: var(--landing-content-width) !important;
  padding-block: var(--space-6) !important;
}
.octa-faq-section.is-shell .octa-shell {
  padding: 0 var(--space-6);
}

/* 2) Octa-faq-head dentro de shell-main: alinhamento esquerda + h2 destaque accent + margin-top */
.octa-shell-main > .octa-faq-head {
  text-align: left;
  max-width: none;
  margin: 0 0 var(--space-5);
}
.octa-shell-main > .octa-faq-head:not(:first-of-type) {
  margin-top: var(--space-16);
}
.octa-shell-main > .octa-faq-head h2 {
  color: var(--accent);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}


/* ============================================================
 * /plataformas overrides (Bp 9) — Rubens iter v4 (2026-05-09)
 * Listing com 7 chips de categorias longos + busca interna ATIVA.
 * Empilha tools (chips em cima, search embaixo) e remove padding lateral
 * da §4 pra grid usar container 1024px todo. Dentro de @layer overrides
 * porque originais .octa-cf-section também estão em @layer overrides
 * (sem isso, !important da camada vence !important unlayered).
 * ============================================================ */
@layer overrides {

  /* 1) section.octa-cf-section.is-flush — remove padding lateral
   *    (atende pedido humano "remova padding lateral do .octa-cf-section is-in";
   *    `is-in` é classe de motion dinâmica, então usamos modifier estático
   *    `is-flush` que independe de animação) */
  section.octa-cf-section.is-flush {
    padding-inline: 0 !important;
  }

  /* 2) .octa-listing-tools.is-stacked — chips em cima, search embaixo
   *    (sobrepõe row→column do default em desktop; mobile já é column) */
  .octa-listing-tools.is-stacked {
    flex-direction: column !important;
    align-items: stretch;
    gap: var(--space-3);
  }
  .octa-listing-tools.is-stacked .octa-listing-chips {
    flex-wrap: wrap;
    gap: var(--space-2);
    width: 100%;
  }
  .octa-listing-tools.is-stacked .octa-listing-search {
    width: 100%;
    flex: none;
  }

}

/* ============================================================
 * Bp 3 segmentos overrides — z-index editor + isolation lead-block
 * Origem: humano (Rubens) · 2026-05-09 (E2 iter v2 mãe Bp 3)
 * Bug: hero-editor-overlap .octa-editor-demo tem margin-bottom -120px
 * pra vazar pro octa-lead-block. Sem isolation explícita, o conteúdo
 * de octa-lead-block (h2/p/divs com data-octa-anim que aplicam
 * will-change: transform) cria stacking contexts que disputam com
 * o editor. Resultado visual: stats bar do editor cortada pelo padding
 * do octa-lead-block.
 *
 * Mesmo padrão pro botão .text-center .btn dentro de .octa-canvas-section
 * (§5 frameworks): editor archetype tem margin-bottom -60px e o CTA logo
 * abaixo subia visualmente sobre o editor.
 * ============================================================ */
@layer overrides {
  /* 1) Subir z-index do editor demo no hero pra var(--z-overlay)
   *    (acima de qualquer stacking context que sections seguintes
   *    possam criar via [data-octa-anim] will-change: transform). */
  .hero .hero-editor-overlap {
    z-index: 999 !important;
  }
  .hero .hero-editor-overlap .octa-editor-demo {
    position: relative;
    z-index: var(--z-overlay) !important;
  }

  /* 2) octa-lead-block + octa-bento-block sucessores do hero:
   *    isolation: isolate cria novo stacking context root, então
   *    nenhum filho com will-change consegue subir acima do editor
   *    (que é elemento de section anterior). */
  body section.hero + section.octa-lead-block,
  body section.hero + script + section.octa-lead-block {
    position: relative;
    z-index: 1;
    /* isolation removida 2026-05-11 — criava stacking context que cobria o editor demo */
  }
  body section.octa-lead-block + section.octa-bento-block {
    position: relative;
    z-index: 1;
  }

  /* 3) editor archetype dentro de .octa-canvas-section: o margin-bottom
   *    -60px do .octa-editor-demo (linha 8713 base) faz o editor vazar
   *    sobre o CTA seguinte. Subir z-index do editor; baixar wrapper do CTA. */
  .octa-canvas-section .octa-editor-demo {
    z-index: var(--z-overlay);
    margin-bottom: 0; /* não vaza p/ baixo no §5 frameworks — não há lead-block seguinte */
  }
  .octa-canvas-section > .container > .text-center {
    position: relative;
    z-index: var(--z-content);
    margin-top: var(--space-16);
  }
}


/* FIX 2026-05-09 · z-index editor hero por cima do .octa-lead-block (Rubens) */
/* FIX 2026-05-11 · hero precisa ser stacking context com z-index > lead-block isolation (Rubens) */
section.hero { position: relative; z-index: 50; }
/* FIX 2026-05-11 v13 · hero engloba editor inteiro pra escapar do stacking lead-block */
section.hero { padding-bottom: 0 !important; }
section.hero:has(.hero-editor-overlap) { padding-bottom: 0 !important; }
.hero .hero-editor-overlap { margin-bottom: 0 !important; }
.hero .hero-editor-overlap .octa-editor-demo { margin-bottom: 0 !important; }
/* lead-block: padding-top reduzido (não precisa mais acomodar overlap) */
body section.hero + section.octa-lead-block,
body section.hero + script + section.octa-lead-block { padding-top: clamp(24px, 3vw, 48px) !important; }

/* FIX 2026-05-11 final: editor demo SEMPRE acima do conteúdo subsequente */
.hero .hero-editor-overlap { position: relative; z-index: 999 !important; isolation: isolate; transform: translateZ(0); will-change: transform; }
.hero .hero-editor-overlap .octa-editor-demo { position: relative; z-index: 1; }



/* Skip-link — WCAG keyboard nav (P1 auditoria 2026-05-11) */
.octa-skip-link {
  position: absolute; top: -40px; left: 8px;
  background: var(--accent); color: #fff; padding: 8px 16px;
  border-radius: var(--radius-md); font-weight: 600; font-size: 14px;
  text-decoration: none; z-index: 10000; transition: top 0.15s ease;
}
.octa-skip-link:focus { top: 8px; outline: 2px solid #fff; outline-offset: 2px; }

/* ============================================================
 * Bp 6 — .demo-prose-pad: tudo centralizado, exceto listas e .is-highlight
 * v3 — 2026-05-13
 * Cobre fluxos-livres + filhas (frameworks-inteligentes, broadcast, sms).
 * Heading + lead + parágrafos + sub-h3 = centro.
 * Listas (ul/ol) = LEFT em coluna estreita centralizada (bullets demandam left).
 * .octa-prose.is-highlight = bloco em destaque (border-left accent), LEFT centrado como block.
 * ============================================================ */
@layer overrides {
  .demo-prose-pad {
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
  }
  .demo-prose-pad .octa-lead,
  .demo-prose-pad > .octa-prose {
    max-width: none;
    margin-inline: 0;
    text-align: center;
  }
  /* Listas: LEFT em coluna estreita centralizada como bloco */
  .demo-prose-pad ul.octa-prose,
  .demo-prose-pad ol.octa-prose,
  .demo-prose-pad .octa-prose ul,
  .demo-prose-pad .octa-prose ol {
    text-align: left;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
  /* .octa-prose.is-highlight: coluna estreita centralizada, texto LEFT (border-left accent) */
  .demo-prose-pad > .octa-prose.is-highlight {
    max-width: 640px;
    margin-inline: auto;
    text-align: left;
  }
}

/* ============================================================
 * Header global — variants is-cols-2-cats e is-cols-3 (2026-05-13)
 * .octa-panel-cols: layout multi-coluna com eyebrow por bloco
 * .octa-panel-col-eyebrow: rótulo da categoria
 * .is-feature-col: variant pra coluna Blog com texto descritivo
 * ============================================================ */
@layer overrides {
  .octa-panel.is-cols-2-cats { max-width: min(800px, calc(100vw - 64px)); padding: var(--space-4); }
  .octa-panel.is-cols-3 { max-width: min(960px, calc(100vw - 64px)); padding: var(--space-4); }

  .octa-panel-cols {
    display: grid;
    gap: var(--space-4);
  }
  .octa-panel.is-cols-2-cats .octa-panel-cols { grid-template-columns: repeat(2, 1fr); }
  .octa-panel.is-cols-3 .octa-panel-cols { grid-template-columns: 1fr 1fr 1.1fr; }

  .octa-panel-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1-5);
  }
  .octa-panel-col + .octa-panel-col {
    padding-left: var(--space-3);
    border-left: 0.5px solid var(--border);
  }
  .octa-panel-col .octa-panel-list {
    min-width: 0;
    gap: var(--space-0-5);
  }
  .octa-panel-col-eyebrow {
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    padding: 0 var(--space-2-5);
    margin-bottom: var(--space-1);
  }
  .octa-panel-col.is-feature-col {
    position: relative;
    background: transparent;
    border-radius: var(--radius-md, 12px);
    padding: var(--space-2-5);
    border: 0.5px solid var(--border);
    overflow: hidden;
  }
  .octa-panel-col.is-feature-col > .octa-bento-card-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;
  }
  .octa-panel-col.is-feature-col > .octa-panel-col-eyebrow,
  .octa-panel-col.is-feature-col > .octa-feature-intro,
  .octa-panel-col.is-feature-col > .octa-feature-main,
  .octa-panel-col.is-feature-col > .octa-feature-post,
  .octa-panel-col.is-feature-col > .octa-feature-foot {
    position: relative;
    z-index: 1;
  }
  .octa-panel-col.is-feature-col + .octa-panel-col,
  .octa-panel-col + .octa-panel-col.is-feature-col {
    padding-left: var(--space-2-5);
    border-left: 0.5px solid var(--border);
  }
  .octa-panel-col.is-feature-col .octa-panel-col-eyebrow {
    padding: 0;
    margin-bottom: var(--space-2);
  }
  /* Padrão de panel-item: ico esquerda + body (title + intro) direita */
  .octa-panel-col.is-feature-col .octa-feature-main {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: 0;
    background: transparent;
    margin-bottom: var(--space-3);
    text-decoration: none;
  }
  .octa-panel-col.is-feature-col .octa-feature-main:hover { background: transparent; }
  .octa-panel-col.is-feature-col .octa-feature-main:hover .octa-feature-title { color: var(--accent); }
  .octa-panel-col.is-feature-col .octa-feature-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
    min-width: 0;
  }
  .octa-panel-col.is-feature-col .octa-feature-title {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
    transition: color 160ms;
  }
  .octa-panel-col.is-feature-col .octa-feature-intro {
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted-foreground);
    margin: 0;
  }
  .octa-panel-col.is-feature-col .octa-feature-post {
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
    padding: var(--space-2) 0 var(--space-2) var(--space-3);
    text-decoration: none;
    border-top: 0.5px solid var(--border);
    margin-bottom: var(--space-2);
  }
  .octa-panel-col.is-feature-col .octa-feature-post:hover .octa-feature-post-title {
    color: var(--accent);
  }
  .octa-panel-col.is-feature-col .octa-feature-post-label {
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-foreground);
  }
  .octa-panel-col.is-feature-col .octa-feature-post-title {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--foreground);
    transition: color 160ms;
  }
  .octa-panel-col.is-feature-col .octa-feature-foot {
    padding: var(--space-2) 0 0;
    border-top: 0.5px solid var(--border);
  }

  @media (max-width: 720px) {
    .octa-panel.is-cols-2-cats .octa-panel-cols,
    .octa-panel.is-cols-3 .octa-panel-cols {
      grid-template-columns: 1fr;
    }
    .octa-panel-col + .octa-panel-col {
      padding-left: 0;
      padding-top: var(--space-3);
      border-left: 0;
      border-top: 0.5px solid var(--border);
    }
  }
}