/* Tirvo · folha única do site (gerada a partir da página inicial; não editar à mão) */

    /* Fallbacks com métricas ajustadas para neutralizar o CLS da troca de fonte (Geist × Arial, Geist Mono × Courier New) */
    /* Pesos calibrados separadamente: regular, médio e negrito (sobre Arial Bold) */
    @font-face {
      font-family: "Geist Fallback";
      src: local("Arial"), local("ArialMT"), local("Liberation Sans");
      font-weight: 100 450;
      size-adjust: 101.35%;
      ascent-override: 99.16%;
      descent-override: 29.11%;
      line-gap-override: 0%;
    }
    @font-face {
      font-family: "Geist Fallback";
      src: local("Arial"), local("ArialMT"), local("Liberation Sans");
      font-weight: 451 549;
      size-adjust: 104.00%;
      ascent-override: 96.63%;
      descent-override: 28.37%;
      line-gap-override: 0%;
    }
    @font-face {
      font-family: "Geist Fallback";
      src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold");
      font-weight: 550 900;
      size-adjust: 99.20%;
      ascent-override: 101.31%;
      descent-override: 29.74%;
      line-gap-override: 0%;
    }
    /* Título do hero (peso 600, sem kerning): calibração própria */
    @font-face {
      font-family: "Geist Display Fallback";
      src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold");
      size-adjust: 102.50%;
      ascent-override: 98.05%;
      descent-override: 28.78%;
      line-gap-override: 0%;
    }
    /* Caixa-alta do letreiro */
    @font-face {
      font-family: "Geist Caps Fallback";
      src: local("Arial"), local("ArialMT"), local("Liberation Sans");
      size-adjust: 96.20%;
      ascent-override: 104.47%;
      descent-override: 30.67%;
      line-gap-override: 0%;
    }

    @font-face {
      font-family: "Geist Mono Fallback";
      src: local("Courier New"), local("CourierNewPSMT"), local("Liberation Mono");
      size-adjust: 99.98%;
      ascent-override: 100.52%;
      descent-override: 29.5%;
      line-gap-override: 0%;
    }

    @layer reset, tokens, base, layout, components, sections, utilities, motion;

    /* ==========================================================
       RESET
       ========================================================== */
    @layer reset {
      *, *::before, *::after { box-sizing: border-box; }
      * { margin: 0; }
      html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
      body { min-height: 100svh; }
      img, svg, canvas, picture, video { display: block; max-width: 100%; }
      img { height: auto; }
      input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
      button { background: none; border: 0; padding: 0; cursor: pointer; }
      ul[class], ol[class] { list-style: none; padding: 0; }
      a { color: inherit; }
      table { border-collapse: collapse; border-spacing: 0; }
      h1, h2, h3, h4, p, li, dd, figcaption, blockquote { overflow-wrap: break-word; }
      fieldset { border: 0; padding: 0; min-width: 0; }
      legend { padding: 0; }
      summary { cursor: pointer; }
    }

    /* ==========================================================
       TOKENS
       ========================================================== */
    @layer tokens {
      :root {
        /* Cores */
        --bg-void: #000000;
        --bg-base: #09090b;
        --bg-raised: #0f0f12;
        --bg-elevated: #16161a;
        --line-subtle: rgba(255, 255, 255, .06);
        --line: rgba(255, 255, 255, .10);
        --line-strong: rgba(255, 255, 255, .18);
        --text-primary: #fafafa;
        --text-secondary: #a1a1aa;
        --text-tertiary: #8a8a93;
        --accent: #ff5500;
        --accent-hot: #ff3300;
        --accent-soft: rgba(255, 85, 0, .12);
        --accent-glow: rgba(255, 85, 0, .45);
        --on-accent: #0a0a0a;
        --gradient-ignition: linear-gradient(135deg, #ff5500 0%, #ff3300 100%);

        /* Superfícies */
        --r-xs: 4px;
        --r-sm: 8px;
        --r-md: 12px;
        --r-lg: 18px;
        --r-pill: 999px;
        --inner-hl: inset 0 1px 0 rgba(255, 255, 255, .04);

        /* Camadas */
        --z-base: 1;
        --z-grain: 40;
        --z-header: 50;
        --z-float: 60;
        --z-menu: 80;
        --z-progress: 90;
        --z-skip: 110;

        /* Movimento */
        --ease-out: cubic-bezier(.16, 1, .3, 1);
        --ease-in-out: cubic-bezier(.65, 0, .35, 1);
        --dur-1: 160ms;
        --dur-2: 320ms;
        --dur-3: 700ms;
        --dur-4: 1100ms;

        /* Tipografia */
        --font-sans: "Geist", "Geist Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
        --font-mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
        --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
        --fs-h1: clamp(2.6rem, 1.2rem + 5.2vw, 6.25rem);
        --fs-h2: clamp(2rem, 1.1rem + 3.4vw, 4.25rem);
        --fs-h3: clamp(1.25rem, 1rem + .9vw, 1.6rem);
        --fs-lead: clamp(1.075rem, 1rem + .35vw, 1.25rem);
        --fs-mono: .78rem;

        /* Layout */
        --container: 1320px;
        --gutter: clamp(1rem, 4vw, 2.5rem);
        --pad-x: clamp(1.25rem, 5vw, 4rem);
        --section-y: clamp(5rem, 10vw, 9rem);
        --header-h: 64px;

        /* Efeitos */
        --ghost: .12;
        --shot-ratio: 16 / 10;
      }

      @media (min-width: 1024px) {
        :root { --header-h: 72px; }
      }
    }

    /* ==========================================================
       BASE
       ========================================================== */
    @layer base {
      html {
        color-scheme: dark;
        background-color: var(--bg-base);
        scrollbar-gutter: stable;
      }

      @media (prefers-reduced-motion: no-preference) {
        html { scroll-behavior: smooth; }
      }

      body {
        background-color: var(--bg-base);
        color: var(--text-primary);
        font-family: var(--font-sans);
        font-size: 1rem;
        line-height: 1.65;
        font-weight: 400;
        font-variant-numeric: tabular-nums;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

      @media (min-width: 768px) {
        body { font-size: 1.0625rem; }
      }

      h1, h2, h3, h4 {
        color: var(--text-primary);
        font-weight: 600;
        line-height: 1.1;
        text-wrap: balance;
      }

      h3 {
        font-size: var(--fs-h3);
        font-weight: 560;
        letter-spacing: -.02em;
        line-height: 1.2;
      }

      h4 { font-size: 1.0625rem; font-weight: 580; letter-spacing: -.01em; }

      p { text-wrap: pretty; }

      a { text-underline-offset: .22em; text-decoration-thickness: 1px; }

      b, strong { font-weight: 620; }

      :focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 3px;
      }

      ::selection { background: var(--accent); color: var(--on-accent); }

      [id] { scroll-margin-top: calc(var(--header-h) + 16px); }
    }

    /* ==========================================================
       LAYOUT
       ========================================================== */
    @layer layout {
      .container {
        width: 100%;
        max-width: calc(var(--container) + var(--pad-x) * 2);
        margin-inline: auto;
        padding-inline: var(--pad-x);
      }

      .l-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        row-gap: clamp(2rem, 5vw, 3.5rem);
      }

      @media (min-width: 1024px) {
        .l-grid {
          grid-template-columns: repeat(12, minmax(0, 1fr));
          column-gap: var(--gutter);
        }
        .l-grid > .l-full { grid-column: 1 / -1; }
      }

      .section {
        position: relative;
        isolation: isolate;
        overflow: clip;
        padding-block: var(--section-y);
      }

      /* Seções pesadas abaixo da dobra: renderização adiada, com alturas estimadas realistas por faixa de largura */
      .section--cv {
        content-visibility: auto;
        contain-intrinsic-size: auto var(--cis, 1400px);
      }
      .alert { --cis: 2300px; }
      .services { --cis: 3240px; }
      .team { --cis: 850px; }
      .method { --cis: 1000px; }
      .nexus { --cis: 1060px; }
      .numbers { --cis: 900px; }
      .faq { --cis: 750px; }
      .contact { --cis: 2000px; }
      .footer { --cis: 1790px; }
      @media (min-width: 480px) {
        .alert { --cis: 2050px; }
        .services { --cis: 3040px; }
        .team { --cis: 770px; }
        .method { --cis: 880px; }
        .nexus { --cis: 1040px; }
        .faq { --cis: 690px; }
        .contact { --cis: 1780px; }
      }
      @media (min-width: 768px) {
        .services { --cis: 2180px; }
        .team { --cis: 665px; }
        .method { --cis: 825px; }
        .nexus { --cis: 1180px; }
        .faq { --cis: 690px; }
        .contact { --cis: 1580px; }
        .footer { --cis: 1550px; }
      }
      @media (min-width: 900px) {
        .numbers { --cis: 600px; }
      }
      @media (min-width: 1024px) {
        .alert { --cis: 1500px; }
        .services { --cis: 2080px; }
        .team { --cis: 980px; }
        .method { --cis: 790px; }
        .nexus { --cis: 930px; }
        .numbers { --cis: 730px; }
        .faq { --cis: 560px; }
        .contact { --cis: 1120px; }
        .footer { --cis: 1500px; }
      }
      @media (min-width: 1100px) {
        .services { --cis: 1600px; }
        .team { --cis: 890px; }
        .method { --cis: 805px; }
        .nexus { --cis: 1000px; }
        .faq { --cis: 665px; }
      }
      /* Navegação por âncora: renderiza tudo para o destino ser exato */
      .is-cv-off .section--cv { content-visibility: visible; }
    }

    /* ==========================================================
       COMPONENTES
       ========================================================== */
    @layer components {
      /* Abertura: logo animada com a frase e o Next, exibida uma vez ao abrir o site */
      .intro { display: none; }
      .js .intro {
        position: fixed;
        inset: 0;
        z-index: 2147483000;
        display: block;
        overflow: hidden;
        background: radial-gradient(55% 60% at 50% 50%, rgba(255, 85, 0, .09), transparent 70%), #09090b;
        transition: opacity 600ms var(--ease-out), visibility 0s linear 600ms;
      }
      .js .intro.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
      .intro__stage { position: absolute; inset: 0; width: 100%; height: 100%; }
      .intro__stage:not(.is-live) { visibility: hidden; }
      .intro__controls {
        position: absolute;
        right: max(16px, env(safe-area-inset-right));
        bottom: max(16px, env(safe-area-inset-bottom));
        display: flex;
        gap: .5rem;
      }
      .intro__btn {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        min-height: 44px;
        padding: 0 1.1rem;
        border: 1px solid rgb(255 255 255 / .16);
        border-radius: 999px;
        background: rgb(255 255 255 / .05);
        color: #f4f4f5;
        font: 500 .875rem/1 var(--font-sans);
        transition: background-color 200ms ease, border-color 200ms ease;
      }
      .intro__btn:hover { background: rgb(255 255 255 / .1); border-color: #ff5500; }
      .intro__btn:focus-visible { outline-color: #ff5500; }
      /* Enquanto a abertura roda, a página não rola e as animações de entrada esperam */
      html.intro-on { overflow: hidden; background: #09090b; }
      html.intro-on .header,
      html.intro-on .header *,
      html.intro-on .hero,
      html.intro-on .hero * { animation-play-state: paused !important; }

      /* Ícones do sprite */
      .icon {
        display: inline-block;
        flex: none;
        width: 1.25em;
        height: 1.25em;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
        vertical-align: middle;
      }

      /* Link de pular conteúdo */
      .skip-link {
        position: fixed;
        top: .75rem;
        left: .75rem;
        z-index: var(--z-skip);
        padding: .8rem 1.1rem;
        border-radius: var(--r-sm);
        background: var(--accent);
        color: var(--on-accent);
        font-weight: 600;
        text-decoration: none;
        transform: translateY(-200%);
        transition: transform var(--dur-2) var(--ease-out);
      }
      .skip-link:focus { transform: none; }

      /* Barra de progresso de rolagem */
      .progress {
        position: fixed;
        inset: 0 0 auto 0;
        z-index: var(--z-progress);
        height: 2px;
        pointer-events: none;
      }
      .progress__bar {
        display: block;
        height: 100%;
        background: var(--gradient-ignition);
        transform: scaleX(0);
        transform-origin: 0 50%;
      }
      @supports (animation-timeline: scroll()) {
        .progress__bar {
          animation: progress-grow linear both;
          animation-timeline: scroll(root);
        }
      }

      /* Granulação estática */
      .grain {
        position: fixed;
        inset: 0;
        z-index: var(--z-grain);
        pointer-events: none;
        opacity: .045;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      }

      /* Botões */
      .btn {
        position: relative;
        isolation: isolate;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .6rem;
        min-height: 48px;
        padding: .85rem 1.35rem;
        border: 1px solid transparent;
        border-radius: var(--r-sm);
        font-family: var(--font-sans);
        font-size: .95rem;
        font-weight: 600;
        line-height: 1.1;
        letter-spacing: -.01em;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        translate: 0 0;
        transition:
          scale var(--dur-2) var(--ease-out),
          translate 600ms var(--ease-out),
          background-color var(--dur-1) ease,
          border-color var(--dur-1) ease,
          color var(--dur-1) ease;
      }
      .btn:active { scale: .98; }
      .btn .icon { transition: transform var(--dur-2) var(--ease-out); }

      .btn--primary {
        background: var(--accent);
        color: var(--on-accent);
      }
      /* Brilho pré-renderizado: só a opacidade muda */
      .btn--primary::before {
        content: "";
        position: absolute;
        inset: -1px;
        z-index: -1;
        border-radius: inherit;
        box-shadow: 0 0 0 1px rgba(255, 85, 0, .55), 0 10px 36px -8px var(--accent-glow), 0 0 22px -4px var(--accent-glow);
        opacity: 0;
        transition: opacity var(--dur-2) var(--ease-out);
      }
      .btn__sheen {
        position: absolute;
        inset: 0;
        border-radius: inherit;
        overflow: hidden;
        pointer-events: none;
      }
      .btn__sheen::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 45%;
        background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .5) 50%, transparent 100%);
        transform: translateX(-130%) skewX(-18deg);
      }

      .btn--ghost {
        border-color: var(--line-strong);
        background: transparent;
        color: var(--text-primary);
      }

      .btn--sm { min-height: 44px; padding: .65rem 1.05rem; font-size: .875rem; }
      .btn--lg { min-height: 56px; padding: 1rem 1.6rem; font-size: 1rem; }
      .btn--block { width: 100%; }

      .btn.is-magnet { will-change: translate; transition-duration: var(--dur-2), 180ms, var(--dur-1), var(--dur-1), var(--dur-1); }

      @media (hover: hover) and (pointer: fine) {
        .btn--primary:hover::before { opacity: 1; }
        .btn--primary:hover .btn__sheen::before {
          transform: translateX(330%) skewX(-18deg);
          transition: transform 900ms var(--ease-out);
        }
        .btn:hover .icon { transform: translateX(3px); }
        .btn--ghost:hover { background: var(--bg-elevated); border-color: rgba(255, 85, 0, .5); }
      }

      /* Link de texto com seta */
      .link-arrow {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        min-height: 44px;
        color: var(--text-primary);
        font-weight: 500;
        text-decoration: none;
      }
      .link-arrow::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: .55rem;
        height: 1px;
        background: var(--line-strong);
        transform-origin: 0 50%;
        transition: background-color var(--dur-2) ease, transform var(--dur-2) var(--ease-out);
      }
      .link-arrow .icon { color: var(--accent); transition: transform var(--dur-2) var(--ease-out); }
      @media (hover: hover) and (pointer: fine) {
        .link-arrow:hover::after { background: var(--accent); }
        .link-arrow:hover .icon { transform: translate(2px, 2px); }
        .link-arrow--right:hover .icon { transform: translateX(3px); }
      }

      /* Chip de status */
      .chip {
        display: inline-flex;
        align-items: center;
        gap: .65rem;
        padding: .5rem .9rem;
        border: 1px solid var(--line);
        border-radius: var(--r-pill);
        background: rgba(9, 9, 11, .6);
        color: var(--text-secondary);
        font-family: var(--font-mono);
        font-size: .75rem;
        line-height: 1.3;
        letter-spacing: .1em;
        text-transform: uppercase;
      }
      @media (max-width: 479.98px) {
        .chip { border-radius: var(--r-md); }
      }
      .chip__dot {
        position: relative;
        width: 7px;
        height: 7px;
        flex: none;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 10px var(--accent-glow);
      }
      .chip__dot::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 1px solid var(--accent);
        opacity: 0;
        animation: dot-pulse 2.4s var(--ease-out) infinite;
      }

      /* Rótulo mono de seção */
      .section-head {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
      }
      .label {
        flex: none;
        color: var(--text-secondary);
        font-family: var(--font-mono);
        font-size: var(--fs-mono);
        font-weight: 500;
        line-height: 1.3;
        letter-spacing: .12em;
        text-transform: uppercase;
        white-space: nowrap;
      }
      .label__num { color: var(--accent); }
      .section-head__rule {
        flex: 1;
        height: 1px;
        background: linear-gradient(90deg, var(--line-strong), var(--line-subtle) 60%, transparent);
      }
      .section-head__meta {
        flex: none;
        color: var(--text-tertiary);
        font-family: var(--font-mono);
        font-size: .72rem;
        letter-spacing: .12em;
        text-transform: uppercase;
      }

      /* Títulos de seção */
      .title {
        font-size: var(--fs-h2);
        font-weight: 580;
        letter-spacing: -.035em;
        line-height: 1.02;
      }
      .serif {
        font-family: var(--font-serif);
        font-style: italic;
        font-weight: 400;
        letter-spacing: -.01em;
        font-size: 1.06em;
      }
      .lead {
        max-width: 37.2em;
        color: var(--text-secondary);
        font-size: var(--fs-lead);
        line-height: 1.6;
      }
      .prose p + p { margin-top: 1em; }
      .prose p { max-width: 38.4em; color: var(--text-secondary); }

      /* Mira de blueprint */
      .crosshair {
        position: absolute;
        width: 13px;
        height: 13px;
        pointer-events: none;
        color: var(--line-strong);
      }
      .crosshair::before, .crosshair::after {
        content: "";
        position: absolute;
        background: currentColor;
      }
      .crosshair::before { left: 6px; top: 0; width: 1px; height: 13px; }
      .crosshair::after { top: 6px; left: 0; height: 1px; width: 13px; }
      .crosshair--tl { top: 1.25rem; left: 1.25rem; }
      .crosshair--tr { top: 1.25rem; right: 1.25rem; }
      .crosshair--bl { bottom: 1.25rem; left: 1.25rem; }
      .crosshair--br { bottom: 1.25rem; right: 1.25rem; }

      /* Linhas verticais alinhadas às 12 colunas */
      .blueprint {
        position: absolute;
        inset: 0;
        z-index: -1;
        width: min(100% - var(--pad-x) * 2, var(--container));
        margin-inline: auto;
        pointer-events: none;
        opacity: .9;
        background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px calc(100% / 12));
        border-right: 1px solid rgba(255, 255, 255, .035);
      }

      /* Luz ambiente estática */
      .glow {
        position: absolute;
        z-index: -1;
        width: clamp(320px, 55vw, 820px);
        aspect-ratio: 1;
        border-radius: 50%;
        background: radial-gradient(closest-side, rgba(255, 85, 0, .16), rgba(255, 85, 0, .05) 55%, transparent 72%);
        pointer-events: none;
      }

      /* Cantoneiras HUD laranja */
      .brackets {
        position: absolute;
        inset: -1px;
        pointer-events: none;
        --b: 14px;
        --t: 1.5px;
        background:
          linear-gradient(var(--accent), var(--accent)) top left / var(--b) var(--t) no-repeat,
          linear-gradient(var(--accent), var(--accent)) top left / var(--t) var(--b) no-repeat,
          linear-gradient(var(--accent), var(--accent)) top right / var(--b) var(--t) no-repeat,
          linear-gradient(var(--accent), var(--accent)) top right / var(--t) var(--b) no-repeat,
          linear-gradient(var(--accent), var(--accent)) bottom left / var(--b) var(--t) no-repeat,
          linear-gradient(var(--accent), var(--accent)) bottom left / var(--t) var(--b) no-repeat,
          linear-gradient(var(--accent), var(--accent)) bottom right / var(--b) var(--t) no-repeat,
          linear-gradient(var(--accent), var(--accent)) bottom right / var(--t) var(--b) no-repeat;
      }

      /* Cartões com holofote */
      .card {
        position: relative;
        isolation: isolate;
        border: 1px solid var(--line);
        border-radius: var(--r-lg);
        background: var(--bg-raised);
        box-shadow: var(--inner-hl);
        transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2) ease;
      }

      @media (hover: hover) and (pointer: fine) {
        [data-spotlight] { --mx: 50%; --my: 50%; }
        [data-spotlight]::before,
        [data-spotlight]::after {
          content: "";
          position: absolute;
          inset: -1px;
          border-radius: inherit;
          pointer-events: none;
          opacity: 0;
          transition: opacity var(--dur-2) var(--ease-out);
        }
        /* Luz interna que segue o ponteiro */
        [data-spotlight]::before {
          z-index: -1;
          background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 85, 0, .09), transparent 45%);
        }
        /* Brilho na borda, recortado por máscara */
        [data-spotlight]::after {
          padding: 1px;
          background: radial-gradient(320px circle at var(--mx) var(--my), rgba(255, 85, 0, .75), rgba(255, 85, 0, .15) 40%, transparent 60%);
          -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
        }
        [data-spotlight]:hover::before,
        [data-spotlight]:hover::after { opacity: 1; }
        .card[data-spotlight]:hover { transform: translateY(-4px); border-color: var(--line-strong); }
      }

      /* Marcadores de lista */
      .ticks { display: grid; gap: .55rem; }
      .ticks li {
        position: relative;
        padding-left: 1.35rem;
        color: var(--text-secondary);
        font-size: .95rem;
        line-height: 1.5;
      }
      .ticks li::before {
        content: "";
        position: absolute;
        left: 0;
        top: .72em;
        width: .7rem;
        height: 0;
        border-top: 1px solid var(--accent);
      }

      /* Etiquetas */
      .tag {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        padding: .35rem .8rem;
        border: 1px solid var(--line);
        border-radius: var(--r-pill);
        color: var(--text-secondary);
        font-family: var(--font-mono);
        font-size: .75rem;
        letter-spacing: .06em;
        white-space: nowrap;
      }

      /* Micro-CTA de fechamento de seção */
      .micro-cta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1rem 1.75rem;
      }
      .micro-cta__text {
        color: var(--text-secondary);
        font-size: .95rem;
      }
    }

    /* ==========================================================
       SEÇÕES
       ========================================================== */
    @layer sections {
      /* ---------- Cabeçalho ---------- */
      .header {
        position: fixed;
        inset: 0 0 auto 0;
        z-index: var(--z-header);
        height: var(--header-h);
        transition: transform var(--dur-3) var(--ease-out);
      }
      .header::before {
        content: "";
        position: absolute;
        inset: 0;
        border-bottom: 1px solid var(--line);
        background: rgba(9, 9, 11, .72);
        -webkit-backdrop-filter: blur(16px) saturate(140%);
        backdrop-filter: blur(16px) saturate(140%);
        opacity: 0;
        transition: opacity var(--dur-2) ease;
      }
      @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        .header::before { background: rgba(9, 9, 11, .96); }
      }
      .header.is-scrolled::before { opacity: 1; }
      /* Topo sempre fixo. Rolando, ganha fundo de vidro e um feixe de luz que percorre a borda inferior */
      .header::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 28%;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--accent), transparent);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--dur-3) ease;
      }
      .header.is-scrolled::after { opacity: .85; }
      @media (prefers-reduced-motion: no-preference) {
        .header.is-scrolled::after { animation: header-scan 7s linear infinite; }
      }
      @keyframes header-scan { from { transform: translateX(-100%); } to { transform: translateX(460%); } }

      .header__inner {
        position: relative;
        height: 100%;
        display: flex;
        align-items: center;
        gap: 1.5rem;
      }
      .header__logo {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        flex: none;
      }
      .header__logo img { width: auto; height: 30px; }

      /* ---------- Logo animada do cabeçalho: a mira se fecha, o ponto acende e o nome se forma com o cursor ---------- */
      .tl { display: block; overflow: visible; }
      .header__logo .tl--header { width: auto; height: 26px; aspect-ratio: 3780 / 823; }
      @media (min-width: 1240px) { .header__logo .tl--header { height: 28px; } }
      /* Entre um ciclo e outro, o cursor pisca e o ponto respira (o script só anima a montagem) */
      @media (prefers-reduced-motion: no-preference) {
        .tl.is-idle [data-k="cur"], .tl.is-idle [data-k="curg"] { animation: tl-blink 1.1s steps(1) infinite; }
        .tl.is-idle [data-k="halo"] { animation: tl-breathe 2.6s ease-in-out infinite; }
      }
      @keyframes tl-blink { 50% { opacity: 0; } }
      @keyframes tl-breathe { 50% { opacity: .35; } }


      /* ---------- Navegação do computador: cápsula de vidro com indicador deslizante ---------- */
      .nav { display: none; }
      .nav__list {
        position: relative;
        display: flex;
        align-items: center;
        gap: .15rem;
        padding: 4px;
        border: 1px solid var(--line);
        border-radius: var(--r-pill);
        background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 30px -18px rgba(0, 0, 0, .9);
      }
      .nav__indicator {
        position: absolute;
        top: 4px;
        bottom: 4px;
        left: 0;
        width: 0;
        border: 1px solid var(--line-strong);
        border-radius: var(--r-pill);
        background: radial-gradient(120% 140% at 50% 120%, rgba(255, 85, 0, .22), rgba(255, 255, 255, .04) 60%);
        opacity: 0;
        pointer-events: none;
        transition: transform 480ms var(--ease-out), width 480ms var(--ease-out), opacity var(--dur-2) ease;
      }
      .nav__indicator::after {
        content: "";
        position: absolute;
        left: 22%;
        right: 22%;
        bottom: -1px;
        height: 2px;
        border-radius: 2px;
        background: var(--gradient-ignition);
        box-shadow: 0 0 12px 1px var(--accent-glow);
      }
      .nav__link {
        position: relative;
        z-index: 1;
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        min-height: 40px;
        padding-inline: .95rem;
        border-radius: var(--r-pill);
        color: var(--text-secondary);
        font-size: .88rem;
        font-weight: 500;
        text-decoration: none;
        transition: color var(--dur-1) ease;
      }
      .nav__num {
        color: var(--text-tertiary);
        font-family: var(--font-mono);
        font-size: .62rem;
        letter-spacing: .08em;
        transition: color var(--dur-2) ease;
      }
      .nav__link:hover, .nav__link.is-active { color: var(--text-primary); }
      .nav__link:hover .nav__num, .nav__link.is-active .nav__num { color: var(--accent); }
      .nav__link:focus-visible { outline-offset: -2px; }

      /* Efeito de decodificação: o fantasma transparente reserva a largura, o texto vivo embaralha por cima */
      .scr { display: inline-grid; }
      .scr > * { grid-area: 1 / 1; }
      .scr__ghost { color: transparent; }
      .scr__live { overflow: hidden; white-space: nowrap; }

      .header__actions {
        display: flex;
        align-items: center;
        gap: .5rem;
        margin-left: auto;
      }
      .header__cta { display: none; }

      @media (min-width: 480px) {
        .header__cta { display: inline-flex; }
      }
      @media (min-width: 1024px) {
        .nav { display: block; margin-inline: auto; }
        .header__actions { margin-left: 0; }
      }

      /* Botão hambúrguer que vira × */
      .menu-toggle {
        position: relative;
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border-radius: var(--r-sm);
        color: var(--text-primary);
      }
      .menu-toggle__line {
        position: absolute;
        left: 12px;
        width: 20px;
        height: 1.5px;
        border-radius: 2px;
        background: currentColor;
        transition: transform var(--dur-2) var(--ease-out);
      }
      .menu-toggle__line:first-child { transform: translateY(-4px); }
      .menu-toggle__line:last-child { transform: translateY(4px); }
      .menu-toggle[aria-expanded="true"] .menu-toggle__line:first-child,
      .menu.is-open .menu-toggle__line:first-child { transform: rotate(45deg); }
      .menu-toggle[aria-expanded="true"] .menu-toggle__line:last-child,
      .menu.is-open .menu-toggle__line:last-child { transform: rotate(-45deg); }
      @media (min-width: 1024px) {
        .header .menu-toggle { display: none; }
      }

      /* ---------- Menu móvel: painel de controle com grade, varredura e itens que decodificam ---------- */
      .menu {
        position: fixed;
        inset: 0;
        z-index: var(--z-menu);
        isolation: isolate;
        display: grid;
        grid-template-rows: var(--header-h) auto 1fr auto;
        background: rgba(5, 5, 7, .94);
        -webkit-backdrop-filter: blur(18px) saturate(140%);
        backdrop-filter: blur(18px) saturate(140%);
        opacity: 0;
        transition: opacity var(--dur-2) var(--ease-out);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
      }
      .menu.is-open { opacity: 1; }
      .menu__bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
      .menu__grid {
        position: absolute;
        inset: -44px;
        background-image:
          linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
        background-size: 44px 44px;
        -webkit-mask-image: radial-gradient(ellipse 90% 70% at 80% 15%, #000 15%, transparent 75%);
        mask-image: radial-gradient(ellipse 90% 70% at 80% 15%, #000 15%, transparent 75%);
      }
      .menu__glow {
        position: absolute;
        top: -18vh;
        right: -25vw;
        width: 80vw;
        height: 60vh;
        border-radius: 50%;
        background: radial-gradient(closest-side, rgba(255, 85, 0, .22), transparent);
      }
      .menu__scan {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 120px;
        background: linear-gradient(180deg, transparent, rgba(255, 85, 0, .08) 80%, rgba(255, 120, 60, .5) 99%, transparent);
        opacity: 0;
      }
      .menu__top { display: flex; align-items: center; justify-content: space-between; }
      .menu__logo .tl--menu { width: auto; height: 26px; aspect-ratio: 3780 / 823; }
      .menu__status {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .5rem;
        padding-block: .35rem .5rem;
        color: var(--text-tertiary);
        font-family: var(--font-mono);
        font-size: .68rem;
        letter-spacing: .12em;
        text-transform: uppercase;
      }
      .menu__dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }
      .menu__sep { color: var(--line-strong); }
      .menu__nav { align-self: center; padding-block: 1.25rem; }
      .menu__list { display: grid; }
      .menu__list li { position: relative; }
      /* Linhas divisórias que se desenham da esquerda ao abrir */
      .menu__list li::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px;
        background: linear-gradient(90deg, var(--line-strong), var(--line) 70%, transparent);
        transform: scaleX(0);
        transform-origin: 0 50%;
        transition: transform 700ms var(--ease-out) calc(var(--i, 0) * 60ms + 120ms);
      }
      .menu.is-open .menu__list li::after { transform: none; }
      .menu__link {
        position: relative;
        display: grid;
        grid-template-columns: 2.1rem 1fr auto;
        align-items: center;
        gap: .75rem;
        min-height: 64px;
        padding-block: .7rem;
        color: var(--text-primary);
        text-decoration: none;
        opacity: 0;
        transform: translateX(-14px);
        transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
        transition-delay: calc(var(--i, 0) * 60ms + 80ms);
      }
      .menu.is-open .menu__link { opacity: 1; transform: none; }
      .menu__num { color: var(--accent); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; }
      .menu__text { display: grid; gap: .2rem; min-width: 0; }
      .menu__label { font-size: clamp(1.6rem, 1.15rem + 2.3vw, 2.5rem); font-weight: 560; letter-spacing: -.03em; line-height: 1.05; }
      .menu__desc {
        overflow: hidden;
        color: var(--text-tertiary);
        font-family: var(--font-mono);
        font-size: .68rem;
        letter-spacing: .08em;
        text-overflow: ellipsis;
        text-transform: uppercase;
        white-space: nowrap;
      }
      .menu__arrow {
        width: 22px;
        height: 22px;
        color: var(--text-tertiary);
        transition: transform var(--dur-2) var(--ease-out), color var(--dur-2) ease;
      }
      .menu__link:is(:hover, :active, :focus-visible) .menu__arrow { color: var(--accent); transform: translateX(4px); }
      .menu__link:is(:hover, :active) .menu__label { color: var(--accent); transition: color var(--dur-1) ease; }
      /* Seção em que o visitante está */
      .menu__link.is-active .menu__num { color: var(--text-primary); }
      .menu__link.is-active::before {
        content: "";
        position: absolute;
        left: -1rem;
        top: 22%;
        bottom: 22%;
        width: 3px;
        border-radius: 0 3px 3px 0;
        background: var(--gradient-ignition);
        box-shadow: 0 0 14px var(--accent-glow);
      }
      .menu__link.is-active .menu__desc::before { content: "● você está aqui · "; color: var(--accent); }
      .menu__foot {
        display: grid;
        gap: .9rem;
        padding-block: 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
        border-top: 1px solid var(--line);
      }
      .menu__actions { display: grid; grid-template-columns: 1fr auto; gap: .6rem; }
      .menu__wa {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        min-height: 48px;
        padding-inline: 1.1rem;
        border: 1px solid var(--line-strong);
        border-radius: var(--r-pill);
        color: var(--text-primary);
        font-size: .9rem;
        font-weight: 500;
        text-decoration: none;
        transition: border-color var(--dur-2) ease, background-color var(--dur-2) ease;
      }
      .menu__wa:hover { border-color: var(--accent); background: var(--accent-soft); }
      .menu__wa .icon { width: 18px; height: 18px; color: var(--accent); }
      .menu__addr { color: var(--text-tertiary); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; }
      @media (prefers-reduced-motion: no-preference) {
        .menu.is-open .menu__grid { animation: menu-grid 9s linear infinite; }
        .menu.is-open .menu__scan { animation: menu-scan 1.2s cubic-bezier(.5, 0, .3, 1) .05s both; }
        .menu.is-open .menu__dot { animation: menu-dot 1.8s ease-in-out infinite; }
      }
      @keyframes menu-grid { to { transform: translate(44px, 44px); } }
      @keyframes menu-scan { 0% { opacity: 1; transform: translateY(-120px); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(100vh); } }
      @keyframes menu-dot { 50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); } }

      /* ---------- Hero ---------- */
      .hero {
        position: relative;
        isolation: isolate;
        overflow: clip;
        min-height: 100svh;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 1fr auto;
        background: var(--bg-void);
      }
      .hero__canvas {
        position: absolute;
        inset: 0;
        z-index: -3;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 1.2s ease;
      }
      .hero__canvas.is-ready { opacity: 1; }
      .hero__scrim {
        position: absolute;
        inset: 0;
        z-index: -2;
        pointer-events: none;
        background:
          radial-gradient(90% 75% at 8% 88%, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .72) 42%, rgba(0, 0, 0, 0) 78%),
          linear-gradient(0deg, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .35) 42%, rgba(0, 0, 0, 0) 70%);
      }
      .hero .blueprint { z-index: -1; opacity: .7; }
      .glow--hero { top: -18%; right: -14%; }
      .hero__fig {
        position: absolute;
        top: calc(var(--header-h) + 1.5rem);
        right: var(--pad-x);
        display: none;
        color: var(--text-tertiary);
        font-family: var(--font-mono);
        font-size: .72rem;
        letter-spacing: .12em;
        text-transform: uppercase;
      }
      .hero__fig::before {
        content: "";
        display: inline-block;
        width: 2rem;
        height: 1px;
        margin-right: .75rem;
        vertical-align: middle;
        background: var(--line-strong);
      }
      @media (min-width: 1024px) {
        .hero__fig { display: block; }
      }

      .hero__body {
        align-self: end;
        padding-top: calc(var(--header-h) + 3rem);
        padding-bottom: clamp(2.25rem, 6vh, 4.5rem);
      }
      .hero__content { display: grid; justify-items: start; gap: clamp(1.25rem, 2.6vh, 1.85rem); }
      @media (min-width: 1024px) {
        .hero__content { grid-column: 1 / span 9; }
      }

      .hero__title {
        font-family: "Geist", "Geist Display Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
        font-size: var(--fs-h1);
        font-weight: 600;
        letter-spacing: -.045em;
        line-height: .98;
        font-kerning: none;
      }
      .hero__accent {
        background: var(--gradient-ignition);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
      .hero__lead {
        max-width: 33.6em;
        color: var(--text-secondary);
        font-size: var(--fs-lead);
        line-height: 1.6;
      }
      .hero__actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1rem 2rem;
        margin-top: .35rem;
      }

      .hero__cue {
        display: none;
        align-self: end;
        justify-self: end;
        align-items: center;
        gap: .9rem;
        color: var(--text-tertiary);
        font-family: var(--font-mono);
        font-size: .72rem;
        letter-spacing: .12em;
        text-transform: uppercase;
        writing-mode: vertical-rl;
      }
      .hero__cue-line {
        position: relative;
        width: 1px;
        height: 64px;
        overflow: hidden;
        background: var(--line);
      }
      .hero__cue-line::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, transparent, var(--accent), transparent);
        transform: translateY(-100%);
        animation: cue-run 2.4s var(--ease-in-out) infinite;
      }
      @media (min-width: 1024px) {
        .hero__cue { display: flex; grid-column: 12 / span 1; }
      }

      /* Títulos escritos como a logo: códigos que se embaralham e viram letra, com o cursor do terminal deitado no fim */
      @media (prefers-reduced-motion: no-preference) {
        .js main h1:not(.tt-on), .js main h2:not(.tt-on), .js .footer__closing:not(.tt-on) { visibility: hidden; animation: tt-failsafe 0s linear 4s forwards; }
      }
      @keyframes tt-failsafe { to { visibility: visible; } }
      .tt-c.is-hid, .tt-c.is-scr { visibility: hidden; }
      .tt-c.is-scr { position: relative; }
      .tt-c.is-scr::after {
        content: attr(data-s);
        position: absolute;
        left: 50%;
        top: 0;
        visibility: visible;
        color: #ff5500;
        -webkit-text-fill-color: #ff5500;
        opacity: .6;
        text-shadow: 0 0 .3em rgba(255, 85, 0, .45);
        transform: translateX(-50%) scale(.8);
        pointer-events: none;
      }
      .tt-cur { position: relative; }
      .tt-cur::before {
        content: "";
        position: absolute;
        left: .08em;
        bottom: .3em;
        width: .4em;
        height: .085em;
        min-height: 2px;
        border-radius: 1px;
        background: #ff5500;
        box-shadow: 0 0 .4em rgba(255, 85, 0, .6);
        pointer-events: none;
      }
      .tt-wait .tt-cur::before, .tt-done .tt-cur::before { animation: tt-blink 1.1s steps(1) infinite; }
      @keyframes tt-blink { 50% { opacity: 0; } }

      /* Letreiro */
      .marquee {
        position: relative;
        min-width: 0;
        overflow: clip;
        border-block: 1px solid var(--line);
        background: rgba(0, 0, 0, .55);
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
      }
      .marquee__track {
        display: flex;
        width: max-content;
        padding-block: 1.05rem;
        animation: marquee-run 40s linear infinite;
      }
      .marquee__list { display: flex; flex: none; align-items: center; }
      .marquee__item {
        display: flex;
        align-items: center;
        color: var(--text-secondary);
        font-family: "Geist", "Geist Caps Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
        font-size: clamp(1rem, 1.6vw, 1.35rem);
        font-weight: 500;
        letter-spacing: .02em;
        text-transform: uppercase;
        white-space: nowrap;
      }
      .marquee__sep {
        margin-inline: clamp(1.1rem, 2.6vw, 2.25rem);
        color: var(--accent);
        text-shadow: 0 0 12px var(--accent-glow), 0 0 2px var(--accent);
      }
      @media (hover: hover) and (pointer: fine) {
        .marquee:hover .marquee__track { animation-play-state: paused; }
      }
      [data-anim-scope].is-offscreen .marquee__track,
      [data-anim-scope].is-offscreen .chip__dot::after,
      [data-anim-scope].is-offscreen .hero__cue-line::after,
      [data-anim-scope].is-offscreen .tt-cur::before { animation-play-state: paused; }

      /* ---------- Seção 2: o alerta ---------- */
      .alert__title { max-width: 9.6em; }
      .alert__lead { align-self: end; }
      @media (min-width: 1024px) {
        .alert__title { grid-column: 1 / span 7; }
        .alert__lead { grid-column: 8 / span 5; }
      }

      .split {
        display: grid;
        gap: clamp(1.25rem, 3vw, 2.5rem);
        margin-top: clamp(3rem, 6vw, 5rem);
      }
      .split__divider {
        position: relative;
        display: grid;
        place-items: center;
        height: 1px;
        background: var(--line);
      }
      .split__divider span {
        position: relative;
        z-index: 1;
        white-space: nowrap;
        padding: .35rem .6rem;
        border: 1px solid var(--line);
        border-radius: var(--r-pill);
        background: var(--bg-base);
        color: var(--text-tertiary);
        font-family: var(--font-mono);
        font-size: .72rem;
        letter-spacing: .12em;
        text-transform: uppercase;
      }
      @media (min-width: 1024px) {
        .split { grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); }
        .split__divider { width: 1px; height: auto; }
      }

      .panel {
        position: relative;
        display: grid;
        align-content: start;
        gap: 1.5rem;
        padding: clamp(1.5rem, 3.2vw, 2.5rem);
        border-radius: var(--r-lg);
      }
      .panel__head { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; }
      .panel__icon {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border-radius: var(--r-sm);
      }
      .panel__icon .icon { width: 22px; height: 22px; }
      .panel__state {
        margin-left: auto;
        font-family: var(--font-mono);
        font-size: .72rem;
        letter-spacing: .12em;
        text-transform: uppercase;
      }
      .panel__list { display: grid; gap: .9rem; }
      .panel__list li {
        display: grid;
        grid-template-columns: 22px 1fr;
        gap: .8rem;
        align-items: start;
        font-size: .975rem;
        line-height: 1.5;
      }
      .panel__list .icon { width: 20px; height: 20px; margin-top: .1rem; }

      /* Terreno alugado: dessaturado, tracejado, frágil */
      .panel--rented {
        border: 1px dashed var(--line-strong);
        background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .012) 0 10px, transparent 10px 20px);
        color: var(--text-tertiary);
      }
      .panel--rented h3 { color: var(--text-secondary); }
      .panel--rented .panel__icon { border: 1px dashed var(--line-strong); color: var(--text-tertiary); }
      .panel--rented .panel__state { color: var(--text-tertiary); }
      .panel--rented .panel__list li { color: var(--text-tertiary); }
      .js .panel--rented.is-revealed { animation: glitch 380ms steps(1, end) 1; }

      /* Sede própria: superfície sólida e borda acesa */
      .panel--owned {
        border: 1px solid rgba(255, 85, 0, .38);
        background: linear-gradient(180deg, rgba(255, 85, 0, .06), transparent 38%), var(--bg-raised);
        box-shadow: var(--inner-hl), 0 0 0 1px rgba(255, 85, 0, .06);
      }
      .panel--owned::before {
        content: "";
        position: absolute;
        top: -1px;
        left: 12%;
        right: 12%;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--accent), transparent);
      }
      .panel--owned .panel__icon { background: var(--accent-soft); border: 1px solid rgba(255, 85, 0, .4); color: var(--accent); }
      .panel--owned .panel__state { color: var(--accent); }
      .panel--owned .panel__list li { color: var(--text-primary); }
      .panel--owned .panel__list .icon { color: var(--accent); }

      .spark { display: grid; gap: .75rem; margin-top: .5rem; }
      .spark svg { width: 100%; height: auto; overflow: visible; }
      .spark figcaption {
        font-family: var(--font-mono);
        font-size: .75rem;
        letter-spacing: .06em;
      }
      .spark__base { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 5; fill: none; }
      .spark__line { fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
      .spark--decay .spark__line { stroke: #8a8a93; }
      .spark--decay figcaption { color: var(--text-tertiary); }
      .spark--rise .spark__line { stroke: var(--accent); }
      .spark--rise .spark__halo { fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round; opacity: .14; }
      .spark--rise figcaption { color: var(--text-secondary); }
      .spark__dot { fill: var(--accent); }
      @media (prefers-reduced-motion: no-preference) {
        .js .spark__line,
        .js .spark__halo { stroke-dasharray: 1; stroke-dashoffset: 1; }
        .js .is-revealed .spark__line,
        .js .is-revealed .spark__halo { animation: draw-line 1.1s var(--ease-out) .25s forwards; }
        .js .spark__dot { opacity: 0; }
        .js .is-revealed .spark__dot { animation: fade-in 320ms ease 1.2s forwards; }
      }

      .alert__quote-wrap {
        margin-top: clamp(4rem, 9vw, 7.5rem);
        row-gap: 2rem;
      }
      .pullquote {
        font-size: clamp(2.1rem, 1rem + 4.6vw, 5rem);
        font-weight: 560;
        letter-spacing: -.04em;
        line-height: 1;
        text-wrap: balance;
      }
      .pullquote .serif { color: var(--accent); }
      .alert__bridge { display: grid; gap: 1.5rem; align-content: end; }
      .alert__bridge p { color: var(--text-secondary); font-size: var(--fs-lead); max-width: 20.4em; }
      @media (min-width: 1024px) {
        .pullquote { grid-column: 2 / span 7; }
        .alert__bridge { grid-column: 9 / span 4; }
      }

      /* ---------- Seção 3: serviços ---------- */
      .services .blueprint { opacity: .6; }
      .glow--services { bottom: -20%; left: -22%; }
      @media (min-width: 1024px) {
        .services__title { grid-column: 1 / span 8; }
        .services__lead { grid-column: 9 / span 4; align-self: end; }
      }

      .bento {
        display: grid;
        gap: clamp(.85rem, 1.6vw, 1.25rem);
        margin-top: clamp(3rem, 6vw, 4.5rem);
      }
      @media (min-width: 768px) {
        .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .svc--sites { grid-column: 1 / -1; }
      }
      @media (min-width: 1024px) {
        .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
        .svc--sites { grid-column: 1 / span 7; grid-row: 1 / span 2; }
        .svc--sistemas { grid-column: 8 / span 5; }
        .svc--marca { grid-column: 8 / span 5; }
        .svc--design { grid-column: 1 / span 5; }
        .svc--ia { grid-column: 6 / span 7; }
      }

      .svc {
        display: flex;
        flex-direction: column;
        gap: 1.1rem;
        padding: clamp(1.5rem, 2.8vw, 2.25rem);
        container-type: inline-size;
      }
      .svc__top { display: flex; align-items: center; justify-content: space-between; }
      .svc__icon {
        display: grid;
        place-items: center;
        width: 48px;
        height: 48px;
        border: 1px solid var(--line-strong);
        border-radius: var(--r-md);
        background: var(--bg-base);
        color: var(--text-primary);
        transition: color var(--dur-2) ease, border-color var(--dur-2) ease;
      }
      .svc__icon .icon { width: 24px; height: 24px; }
      .svc__index {
        color: var(--text-tertiary);
        font-family: var(--font-mono);
        font-size: .78rem;
        letter-spacing: .12em;
      }
      .svc__desc { color: var(--text-secondary); max-width: 34.8em; }
      .svc__list { margin-top: .2rem; }
      .svc__foot {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .25rem 1.5rem;
        margin-top: auto;
        padding-top: .75rem;
      }
      @media (hover: hover) and (pointer: fine) {
        .svc:hover .svc__icon { color: var(--accent); border-color: rgba(255, 85, 0, .5); }
      }
      .svc--sites .svc__title { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); letter-spacing: -.03em; }
      @container (min-width: 520px) {
        .svc__list--cols { columns: 2; column-gap: 2rem; }
        .svc__list--cols li { break-inside: avoid; margin-bottom: .55rem; }
        .svc__list--cols { display: block; }
      }

      /* Modelos de entrega lado a lado */
      .models {
        display: grid;
        gap: 1px;
        margin-block: .5rem;
        overflow: clip;
        border: 1px solid var(--line);
        border-radius: var(--r-md);
        background: var(--line);
      }
      @container (min-width: 520px) {
        .models { grid-template-columns: 1fr 1fr; }
      }
      .model {
        position: relative;
        display: grid;
        align-content: start;
        gap: .7rem;
        padding: 1.25rem;
        background: var(--bg-base);
      }
      .model__head { display: flex; align-items: center; gap: .6rem; }
      .model__head .icon { width: 20px; height: 20px; color: var(--text-secondary); }
      .model p { color: var(--text-secondary); font-size: .92rem; line-height: 1.55; }
      /* Matriz: quem cuida de cada camada em cada modelo */
      .matrix { width: 100%; margin-top: .25rem; font-size: .88rem; }
      .matrix caption {
        margin-bottom: .6rem;
        color: var(--text-tertiary);
        font-family: var(--font-mono);
        font-size: .72rem;
        letter-spacing: .12em;
        text-align: left;
        text-transform: uppercase;
      }
      .matrix th, .matrix td { padding: .55rem 0; border-bottom: 1px solid var(--line-subtle); text-align: left; vertical-align: middle; }
      .matrix thead th {
        padding-top: 0;
        color: var(--text-secondary);
        font-family: var(--font-mono);
        font-size: .7rem;
        font-weight: 500;
        letter-spacing: .08em;
        border-bottom-color: var(--line);
      }
      .matrix tbody th { padding-right: 1rem; color: var(--text-secondary); font-weight: 400; }
      .matrix td { width: 26%; color: var(--text-tertiary); font-family: var(--font-mono); font-size: .75rem; letter-spacing: .04em; white-space: nowrap; }
      .matrix__mark {
        display: inline-block;
        width: 9px;
        height: 9px;
        margin-right: .55rem;
        vertical-align: -1px;
        border: 1px dashed var(--line-strong);
        border-radius: 2px;
      }
      .matrix td.is-tirvo { color: var(--text-primary); }
      .matrix td.is-tirvo .matrix__mark { border: 0; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
      .model__spec { display: grid; gap: .35rem; margin-top: .25rem; }
      .model__spec li {
        display: flex;
        gap: .5rem;
        color: var(--text-tertiary);
        font-family: var(--font-mono);
        font-size: .74rem;
        letter-spacing: .03em;
        line-height: 1.5;
      }
      .model__spec li::before { content: "+"; color: var(--text-secondary); }
      .model--managed { background: linear-gradient(180deg, rgba(255, 85, 0, .07), transparent 60%), var(--bg-base); }
      .model--managed .model__head .icon { color: var(--accent); }
      .model--managed .model__spec li::before { color: var(--accent); }
      .model__badge {
        margin-left: auto;
        padding: .15rem .5rem;
        border: 1px solid rgba(255, 85, 0, .45);
        border-radius: var(--r-pill);
        color: var(--accent);
        font-family: var(--font-mono);
        font-size: .66rem;
        letter-spacing: .1em;
        text-transform: uppercase;
      }

      /* ---------- Seção 4: equipe ---------- */
      .team__title { max-width: 12em; }
      .team__manifesto { display: grid; gap: 1.5rem; align-content: start; }
      .team__manifesto .lead { color: var(--text-primary); }
      .team__panels { display: grid; gap: clamp(1rem, 2vw, 1.25rem); }
      @media (min-width: 1024px) {
        .team__title { grid-column: 1 / span 10; }
        .team__manifesto { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }
        .team__panels { grid-column: 6 / span 7; }
      }

      .discipline { display: grid; gap: 1.1rem; padding: clamp(1.25rem, 2.4vw, 1.75rem); }
      .discipline__head { display: flex; align-items: center; gap: .75rem; }
      .discipline__head .icon { width: 22px; height: 22px; color: var(--accent); }
      .discipline__note { color: var(--text-secondary); font-size: .95rem; }

      .code {
        overflow: clip;
        border: 1px solid var(--line);
        border-radius: var(--r-md);
        background: var(--bg-void);
      }
      .code__bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: .6rem .9rem;
        border-bottom: 1px solid var(--line);
        color: var(--text-tertiary);
        font-family: var(--font-mono);
        font-size: .72rem;
        letter-spacing: .06em;
      }
      .code__file { display: inline-flex; align-items: center; gap: .5rem; color: var(--text-secondary); }
      .code__file::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 8px var(--accent-glow);
      }
      .code pre {
        margin: 0;
        padding: 1rem .9rem 1.1rem 0;
        counter-reset: ln;
        font-family: var(--font-mono);
        font-size: .8rem;
        line-height: 1.75;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        tab-size: 2;
      }
      .code__ln {
        display: block;
        padding-left: 3rem;
        text-indent: -3rem;
        color: var(--text-primary);
      }
      .code__ln::before {
        counter-increment: ln;
        content: counter(ln);
        display: inline-block;
        width: 2.2rem;
        margin-right: .8rem;
        color: #52525b;
        text-align: right;
        text-indent: 0;
        user-select: none;
      }
      .tk-c { color: var(--text-tertiary); font-style: italic; }
      .tk-k { color: var(--accent); }
      .tk-s { color: #d4d4d8; }
      .tk-p { color: var(--text-secondary); }
      .tk-f { color: var(--text-primary); font-weight: 600; }

      .graph { display: grid; gap: .6rem; }
      .graph svg { width: 100%; height: auto; overflow: visible; }
      .graph__edge { stroke: var(--line-strong); stroke-width: 1; fill: none; }
      .graph__pulse {
        fill: none;
        stroke: var(--accent);
        stroke-width: 2;
        stroke-linecap: round;
        stroke-dasharray: .14 1;
        stroke-dashoffset: 1.14;
        animation: edge-pulse 2.4s linear infinite;
        animation-delay: var(--delay, 0s);
      }
      .graph__node { fill: var(--bg-void); stroke: var(--line-strong); stroke-width: 1; }
      .graph__core { fill: var(--text-secondary); }
      .graph__node--out { stroke: var(--accent); }
      .graph__core--out { fill: var(--accent); }
      .graph__labels {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        text-align: center;
        color: var(--text-secondary);
        font-family: var(--font-mono);
        font-size: .72rem;
        letter-spacing: .06em;
      }
      .graph__labels li:last-child { color: var(--accent); }
      [data-anim-scope].is-offscreen .graph__pulse { animation-play-state: paused; }

      .team__tags { display: flex; flex-wrap: wrap; gap: .5rem; }

      /* Tabela comparativa */
      .compare { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
      .compare table { width: 100%; text-align: left; }
      .compare caption {
        margin-bottom: 1.25rem;
        text-align: left;
        font-size: var(--fs-h3);
        font-weight: 560;
        letter-spacing: -.02em;
        caption-side: top;
      }
      .compare th, .compare td { padding: 1rem 1.1rem; vertical-align: top; border-bottom: 1px solid var(--line); }
      .compare thead th {
        color: var(--text-tertiary);
        font-family: var(--font-mono);
        font-size: .72rem;
        font-weight: 500;
        letter-spacing: .12em;
        text-transform: uppercase;
        border-bottom-color: var(--line-strong);
      }
      .compare tbody th { width: 22%; color: var(--text-primary); font-weight: 560; font-size: .98rem; }
      .compare__cell { display: flex; gap: .7rem; align-items: flex-start; font-size: .95rem; line-height: 1.5; }
      .compare__cell .icon { width: 18px; height: 18px; margin-top: .15rem; }
      .compare__generic { color: var(--text-tertiary); }
      .compare__generic .icon { color: #52525b; }
      .compare__tirvo { color: var(--text-primary); background: rgba(255, 85, 0, .03); }
      .compare__tirvo .icon { color: var(--accent); }
      .compare thead .compare__tirvo { color: var(--accent); }

      @media (max-width: 767.98px) {
        .compare thead {
          position: absolute;
          width: 1px;
          height: 1px;
          overflow: hidden;
          clip-path: inset(50%);
          white-space: nowrap;
        }
        .compare table, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: 100%; }
        .compare caption { display: block; }
        .compare tr {
          display: grid;
          margin-bottom: .85rem;
          overflow: clip;
          border: 1px solid var(--line);
          border-radius: var(--r-md);
          background: var(--bg-raised);
        }
        .compare tbody th { width: 100%; padding: .9rem 1rem; border-bottom: 1px solid var(--line); }
        .compare td { padding: .85rem 1rem; border-bottom: 0; }
        .compare td + td { border-top: 1px solid var(--line-subtle); }
        .compare td::before {
          content: attr(data-label);
          display: block;
          margin-bottom: .35rem;
          color: var(--text-tertiary);
          font-family: var(--font-mono);
          font-size: .68rem;
          letter-spacing: .12em;
          text-transform: uppercase;
        }
        .compare td.compare__tirvo::before { color: var(--accent); }
      }

      .team__cta { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

      /* ---------- Seção 5: método ---------- */
      @media (min-width: 1024px) {
        .method__title { grid-column: 1 / span 7; }
        .method__lead { grid-column: 9 / span 4; align-self: end; }
      }

      .timeline {
        --node: 56px;
        --gap: clamp(1.5rem, 3vw, 2.5rem);
        position: relative;
        display: grid;
        gap: var(--gap);
        margin-top: clamp(3rem, 6vw, 5rem);
      }
      .timeline__step {
        position: relative;
        display: grid;
        grid-template-columns: var(--node) minmax(0, 1fr);
        column-gap: 1.25rem;
        align-items: start;
      }
      /* Segmento base e preenchimento entre um nó e o próximo */
      .timeline__step:not(:last-child)::before,
      .timeline__step:not(:last-child)::after {
        content: "";
        position: absolute;
        left: calc(var(--node) / 2);
        top: var(--node);
        bottom: calc(var(--gap) * -1);
        width: 1px;
      }
      .timeline__step:not(:last-child)::before { background: var(--line); }
      .timeline__step:not(:last-child)::after {
        width: 2px;
        margin-left: -.5px;
        background: var(--gradient-ignition);
        transform-origin: 50% 0;
        transform: scaleY(1);
      }
      .timeline__node {
        position: relative;
        display: grid;
        place-items: center;
        width: var(--node);
        height: var(--node);
        border: 1px solid var(--line-strong);
        border-radius: 50%;
        background: var(--bg-base);
        color: var(--text-secondary);
        font-family: var(--font-mono);
        font-size: 1rem;
        font-weight: 500;
      }
      /* Camada acesa sobreposta: a ignição anima somente a opacidade */
      .timeline__node::before {
        content: attr(data-n);
        position: absolute;
        inset: -1px;
        display: grid;
        place-items: center;
        border: 1px solid var(--accent);
        border-radius: 50%;
        background: radial-gradient(circle at 50% 35%, rgba(255, 85, 0, .16), rgba(255, 85, 0, .06) 70%), var(--bg-base);
        color: var(--accent);
        opacity: 1;
        transition: opacity var(--dur-3) var(--ease-out);
      }
      .timeline__node::after {
        content: "";
        position: absolute;
        inset: -10px;
        z-index: -1;
        border-radius: 50%;
        background: radial-gradient(closest-side, rgba(255, 85, 0, .35), transparent);
        opacity: 1;
        transition: opacity var(--dur-3) var(--ease-out);
      }
      .timeline__body { display: grid; gap: .75rem; padding-top: .6rem; }
      .timeline__body > p { color: var(--text-secondary); max-width: 26.4em; }
      .timeline__body .ticks { margin-top: .35rem; }

      @media (min-width: 1024px) {
        .timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .timeline__step { grid-template-columns: minmax(0, 1fr); row-gap: 1.5rem; }
        .timeline__step:not(:last-child)::before,
        .timeline__step:not(:last-child)::after {
          left: var(--node);
          right: calc(var(--gap) * -1);
          top: calc(var(--node) / 2);
          bottom: auto;
          width: auto;
          height: 1px;
          margin-left: 0;
        }
        .timeline__step:not(:last-child)::after {
          height: 2px;
          margin-top: -.5px;
          transform-origin: 0 50%;
          transform: scaleX(1);
        }
      }

      /* Desenho com a rolagem (CSS scroll-driven) */
      @supports (animation-timeline: view()) {
        @media (prefers-reduced-motion: no-preference) {
          .timeline { view-timeline: --linha block; }
          .timeline__step:not(:last-child)::after {
            animation: seg-y linear both;
            animation-timeline: --linha;
          }
          .timeline__step:nth-child(1)::after { animation-range: cover 22% cover 42%; }
          .timeline__step:nth-child(2)::after { animation-range: cover 42% cover 62%; }
          .timeline__node::before,
          .timeline__node::after { animation: node-lit linear both; animation-timeline: --linha; }
          .timeline__step:nth-child(1) .timeline__node::before,
          .timeline__step:nth-child(1) .timeline__node::after { animation-range: cover 18% cover 22%; }
          .timeline__step:nth-child(2) .timeline__node::before,
          .timeline__step:nth-child(2) .timeline__node::after { animation-range: cover 40% cover 43%; }
          .timeline__step:nth-child(3) .timeline__node::before,
          .timeline__step:nth-child(3) .timeline__node::after { animation-range: cover 60% cover 63%; }
        }
        @media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
          .timeline__step:not(:last-child)::after { animation-name: seg-x; }
        }
      }
      /* Fallback via IntersectionObserver */
      @supports not (animation-timeline: view()) {
        @media (prefers-reduced-motion: no-preference) {
          .js .timeline__step:not(:last-child)::after { transform: scaleY(0); transition: transform var(--dur-4) var(--ease-out); }
          .js .timeline__node::before,
          .js .timeline__node::after { opacity: 0; }
          .js .timeline.is-drawn .timeline__step:not(:last-child)::after { transform: scaleY(1); }
          .js .timeline.is-drawn .timeline__step:nth-child(2)::after { transition-delay: 900ms; }
          .js .timeline.is-drawn .timeline__node::before,
          .js .timeline.is-drawn .timeline__node::after { opacity: 1; }
          .js .timeline.is-drawn .timeline__step:nth-child(2) .timeline__node::before,
          .js .timeline.is-drawn .timeline__step:nth-child(2) .timeline__node::after { transition-delay: 900ms; }
          .js .timeline.is-drawn .timeline__step:nth-child(3) .timeline__node::before,
          .js .timeline.is-drawn .timeline__step:nth-child(3) .timeline__node::after { transition-delay: 1800ms; }
        }
        @media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
          .js .timeline__step:not(:last-child)::after { transform: scaleX(0); }
          .js .timeline.is-drawn .timeline__step:not(:last-child)::after { transform: scaleX(1); }
        }
      }

      /* Selos */
      .seals-head {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-top: clamp(4.5rem, 9vw, 7rem);
        margin-bottom: clamp(2rem, 4vw, 3rem);
      }
      .seals-head p {
        flex: none;
        color: var(--text-secondary);
        font-family: var(--font-mono);
        font-size: var(--fs-mono);
        letter-spacing: .12em;
        text-transform: uppercase;
      }
      .seals-head span { flex: 1; height: 1px; background: var(--line); }
      .seals { display: grid; gap: 2rem 1.25rem; }
      @media (min-width: 480px) {
        .seals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      }
      @media (min-width: 1024px) {
        .seals { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      }
      .seal { display: grid; justify-items: start; gap: 1.1rem; }
      .seal__emblem {
        position: relative;
        width: 128px;
        aspect-ratio: 1;
        flex: none;
      }
      .seal__emblem::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: conic-gradient(from 200deg, rgba(255, 85, 0, 0) 0deg, rgba(255, 85, 0, .95) 70deg, rgba(255, 85, 0, 0) 150deg, rgba(255, 85, 0, 0) 360deg);
        -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 calc(100% - 1px));
        mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 calc(100% - 1px));
      }
      .seal__emblem::after {
        content: "";
        position: absolute;
        inset: 0;
        border: 1px solid var(--line);
        border-radius: 50%;
      }
      .seal__ring {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        animation: spin 28s linear infinite;
      }
      .seal__ring text {
        fill: var(--text-tertiary);
        font-family: var(--font-mono);
        font-size: 8.4px;
        letter-spacing: .08em;
        text-transform: uppercase;
      }
      .seal__core {
        position: absolute;
        inset: 30px;
        display: grid;
        place-items: center;
        border: 1px solid var(--line-strong);
        border-radius: 50%;
        background: radial-gradient(circle at 50% 30%, rgba(255, 85, 0, .12), transparent 70%), var(--bg-raised);
        color: var(--accent);
      }
      .seal__core .icon { width: 26px; height: 26px; }
      .seal h3 { font-size: 1.125rem; letter-spacing: -.015em; }
      .seal p { color: var(--text-secondary); font-size: .92rem; line-height: 1.55; max-width: 19.2em; }
      [data-anim-scope].is-offscreen .seal__ring { animation-play-state: paused; }

      /* ---------- Seção 6: Nexus ---------- */
      .nexus {
        padding-block: calc(var(--section-y) * 1.2);
        background: var(--bg-void);
      }
      .nexus__floor {
        position: absolute;
        left: -30%;
        right: -30%;
        bottom: 0;
        z-index: -2;
        height: 55%;
        pointer-events: none;
        background-image:
          linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
        background-size: 72px 72px;
        transform: perspective(640px) rotateX(64deg);
        transform-origin: 50% 100%;
        -webkit-mask-image: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, .5) 40%, transparent 80%);
        mask-image: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, .5) 40%, transparent 80%);
      }
      .nexus__scan {
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px);
      }
      .glow--nexus { top: 6%; right: -20%; }
      .nexus__copy { display: grid; gap: 1.5rem; align-content: start; }
      .nexus__claim {
        padding-left: 1rem;
        border-left: 2px solid var(--accent);
        color: var(--text-primary);
        font-family: var(--font-mono);
        font-size: .95rem;
        line-height: 1.6;
      }
      @media (min-width: 1024px) {
        .nexus__copy { grid-column: 1 / span 5; }
        .nexus__term { grid-column: 7 / span 6; align-self: center; }
      }

      /* Terminal dos agentes */
      .term { display: grid; gap: .75rem; }
      .term__window {
        position: relative;
        border: 1px solid var(--line);
        border-radius: var(--r-md);
        background: rgba(9, 9, 11, .85);
      }
      .term__bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: .65rem 1rem;
        border-bottom: 1px solid var(--line);
        color: var(--text-tertiary);
        font-family: var(--font-mono);
        font-size: .72rem;
        letter-spacing: .08em;
      }
      .term__status { display: inline-flex; align-items: center; gap: .5rem; color: var(--text-secondary); }
      .term__status::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 8px var(--accent-glow);
      }
      .term__log {
        display: grid;
        gap: .15rem;
        padding: 1.1rem 1rem 1.25rem;
        font-family: var(--font-mono);
        font-size: clamp(.72rem, .68rem + .2vw, .8rem);
        line-height: 1.65;
      }
      .term__line {
        color: var(--text-primary);
        white-space: pre-wrap;
        overflow-wrap: anywhere;
      }
      .t-tag { color: var(--accent); }
      .t-ok { color: var(--text-secondary); }
      .term__line--final { color: var(--accent); }
      .term figcaption { color: var(--text-tertiary); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; }
      @media (prefers-reduced-motion: no-preference) {
        .js .term.is-armed .term__line { clip-path: inset(0 calc((1 - var(--p, 0)) * 100%) 0 0); }
      }

      /* Pipeline do Nexus */
      .pipeline {
        --icon: 52px;
        --pgap: 1.25rem;
        position: relative;
        margin-top: clamp(3.5rem, 7vw, 5.5rem);
        padding: clamp(1.25rem, 2.5vw, 2rem);
        border: 1px solid var(--line);
        border-radius: var(--r-md);
        background: rgba(9, 9, 11, .6);
      }
      .pipeline__track {
        position: absolute;
        left: calc(clamp(1.25rem, 2.5vw, 2rem) + var(--icon) / 2);
        top: calc(clamp(1.25rem, 2.5vw, 2rem) + var(--icon) / 2);
        bottom: calc(clamp(1.25rem, 2.5vw, 2rem) + var(--icon) / 2);
        width: 1px;
        overflow: clip;
        background: var(--line-strong);
      }
      .pipeline__pulse {
        position: absolute;
        left: -1px;
        top: 0;
        width: 3px;
        height: 22%;
        background: linear-gradient(180deg, transparent, var(--accent), transparent);
        box-shadow: 0 0 12px var(--accent-glow);
        animation: pulse-y 3.2s linear infinite;
      }
      .pipeline__steps { position: relative; display: grid; gap: var(--pgap); }
      .pipeline__step {
        position: relative;
        display: grid;
        grid-template-columns: var(--icon) 1fr;
        align-items: center;
        gap: 1rem;
      }
      .pipeline__icon {
        position: relative;
        display: grid;
        place-items: center;
        width: var(--icon);
        height: var(--icon);
        border: 1px solid var(--line-strong);
        border-radius: var(--r-md);
        background: var(--bg-void);
        color: var(--text-primary);
      }
      .pipeline__icon .icon { width: 24px; height: 24px; }
      .pipeline__icon::after {
        content: "";
        position: absolute;
        inset: -1px;
        border: 1px solid var(--accent);
        border-radius: inherit;
        box-shadow: 0 0 18px -2px var(--accent-glow);
        opacity: 0;
        animation: node-hit 3.2s linear infinite;
        animation-delay: var(--t, 0s);
      }
      .pipeline__text { display: grid; gap: .1rem; }
      .pipeline__num { color: var(--text-tertiary); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; }
      .pipeline__label { color: var(--text-primary); font-size: 1rem; font-weight: 520; }
      [data-anim-scope].is-offscreen .pipeline__pulse,
      [data-anim-scope].is-offscreen .pipeline__icon::after { animation-play-state: paused; }

      @media (min-width: 1024px) {
        .pipeline { --pgap: 2rem; }
        .pipeline__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        .pipeline__track {
          top: calc(clamp(1.25rem, 2.5vw, 2rem) + var(--icon) / 2);
          bottom: auto;
          left: calc(clamp(1.25rem, 2.5vw, 2rem) + (100% - clamp(1.25rem, 2.5vw, 2rem) * 2 - var(--pgap) * 3) / 8);
          right: calc(clamp(1.25rem, 2.5vw, 2rem) + (100% - clamp(1.25rem, 2.5vw, 2rem) * 2 - var(--pgap) * 3) / 8);
          width: auto;
          height: 1px;
        }
        .pipeline__pulse {
          left: 0;
          top: -1px;
          width: 22%;
          height: 3px;
          background: linear-gradient(90deg, transparent, var(--accent), transparent);
          animation-name: pulse-x;
        }
        .pipeline__step { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: .9rem; }
        .pipeline__text { justify-items: center; }
      }

      /* Carrossel HUD */
      .carousel { position: relative; margin-top: clamp(3.5rem, 7vw, 5.5rem); }
      .carousel__frame {
        position: relative;
        border: 1px solid var(--line);
        border-radius: var(--r-md);
        background: rgba(9, 9, 11, .8);
      }
      .carousel__bar {
        display: flex;
        align-items: center;
        gap: .9rem;
        min-height: 44px;
        padding: .6rem 1rem;
        border-bottom: 1px solid var(--line);
        color: var(--text-tertiary);
        font-family: var(--font-mono);
        font-size: .72rem;
        letter-spacing: .08em;
      }
      .carousel__addr { color: var(--accent); white-space: nowrap; }
      .carousel__caption { overflow: hidden; color: var(--text-secondary); text-overflow: ellipsis; white-space: nowrap; }
      .carousel__live {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        margin-left: auto;
        white-space: nowrap;
      }
      .carousel__live::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 8px var(--accent-glow);
      }
      .carousel__viewport {
        position: relative;
        overflow: clip;
        container-type: inline-size;
        --vp-pad: clamp(1rem, 2.5vw, 2rem);
        padding-block: var(--vp-pad);
      }
      .carousel__track {
        --slide-w: 86%;
        --gap: 1rem;
        display: flex;
        gap: var(--gap);
        padding-inline: 7%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
      }
      .carousel__slide { display: flex; flex: 0 0 var(--slide-w); flex-direction: column; scroll-snap-align: center; }
      .carousel__meta { display: grid; flex: 1; align-content: start; gap: .4rem; padding: 0 .25rem 1.1rem; }
      .carousel__tag { color: var(--accent); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
      .carousel__title { font-size: var(--fs-h3); }
      .carousel__desc { max-width: 46em; color: var(--text-secondary); font-size: clamp(.92rem, .85rem + .25vw, 1.02rem); }
      .carousel__open {
        position: relative;
        display: block;
        width: 100%;
        aspect-ratio: var(--shot-ratio);
        overflow: clip;
        border: 1px solid var(--line);
        border-radius: var(--r-sm);
        background: var(--bg-void);
        cursor: zoom-in;
      }
      .carousel__open img { width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }

      /* Modo aprimorado (JS): trilho por transform com laço infinito */
      .carousel.is-enhanced .carousel__viewport { --slide-w: 100cqw; --gap: 4cqw; touch-action: pan-y; }
      .carousel.is-enhanced .carousel__track {
        gap: 0;
        padding-inline: 0;
        overflow: visible;
        scroll-snap-type: none;
        transform: translate3d(calc((100cqw - var(--slide-w)) / 2 - var(--pos, 0) * (var(--slide-w) + var(--gap)) + var(--drag, 0px)), 0, 0);
        transition: transform var(--dur-3) var(--ease-out);
      }
      .carousel.is-enhanced .carousel__slide {
        margin-right: var(--gap);
        opacity: .4;
        transform: scale(.92);
        transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-3) var(--ease-out);
      }
      .carousel.is-enhanced .carousel__slide.is-active { opacity: 1; transform: none; }
      .carousel.is-enhanced .carousel__track.is-dragging,
      .carousel.is-enhanced .carousel__track.is-jumping,
      .carousel.is-enhanced .carousel__track.is-jumping .carousel__slide { transition: none; }
      @media (min-width: 1024px) {
        .carousel.is-enhanced .carousel__viewport { --slide-w: 78cqw; --gap: 2cqw; }
      }

      /* Setas laterais, centralizadas na altura da imagem ativa */
      .carousel__side {
        position: absolute;
        z-index: 2;
        bottom: calc(var(--vp-pad) + var(--slide-w) * 10 / 16 / 2 - 24px);
        display: grid;
        place-items: center;
        width: 48px;
        height: 48px;
        border: 1px solid var(--line-strong);
        border-radius: 50%;
        background: rgba(9, 9, 11, .78);
        color: var(--text-primary);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        transition: border-color var(--dur-1) ease, background-color var(--dur-1) ease, transform var(--dur-1) ease;
      }
      .carousel__side[hidden] { display: none; }
      .carousel__side:hover { border-color: var(--accent); background: rgba(9, 9, 11, .92); transform: scale(1.06); }
      .carousel__side .icon { width: 22px; height: 22px; }
      .carousel__side--prev { left: max(.5rem, (100cqw - var(--slide-w)) / 4 - 24px); }
      .carousel__side--next { right: max(.5rem, (100cqw - var(--slide-w)) / 4 - 24px); }
      @media (max-width: 767.98px) {
        .carousel__side { width: 44px; height: 44px; bottom: calc(var(--vp-pad) + var(--slide-w) * 10 / 16 / 2 - 22px); }
      }

      /* Barra de progresso em segmentos + controles */
      .carousel__progress { display: flex; gap: 6px; padding: 0 1rem; }
      .carousel__seg {
        position: relative;
        flex: 1;
        min-width: 0;
        height: 44px;
        cursor: pointer;
      }
      .carousel__seg::before,
      .carousel__seg-fill {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: 2px;
        margin-top: -1px;
        border-radius: 2px;
      }
      .carousel__seg::before { background: var(--line-strong); }
      .carousel__seg-fill {
        display: block;
        background: var(--accent);
        transform: scaleX(0);
        transform-origin: 0 50%;
      }
      .carousel__controls {
        display: flex;
        align-items: center;
        gap: .5rem;
        margin-top: .75rem;
      }
      .carousel__btn {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border: 1px solid var(--line);
        border-radius: var(--r-sm);
        color: var(--text-primary);
        transition: border-color var(--dur-1) ease, background-color var(--dur-1) ease;
      }
      .carousel__btn:hover { border-color: var(--line-strong); background: var(--bg-elevated); }
      .carousel__btn .icon { width: 20px; height: 20px; }
      .carousel__counter {
        margin-left: auto;
        color: var(--text-secondary);
        font-family: var(--font-mono);
        font-size: .85rem;
        letter-spacing: .08em;
      }
      .nexus__cta { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

      /* Lightbox */
      .lightbox {
        position: fixed;
        inset: 0;
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: none;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--text-primary);
        overflow: hidden;
      }
      .lightbox::backdrop {
        background: rgba(0, 0, 0, .92);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
      }
      .lightbox[open] {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        animation: fade-in var(--dur-2) var(--ease-out);
      }
      .lightbox__bar,
      .lightbox__foot {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        gap: .75rem;
        padding: .6rem max(1rem, env(safe-area-inset-right)) .6rem max(1rem, env(safe-area-inset-left));
      }
      .lightbox__bar { padding-top: max(.6rem, env(safe-area-inset-top)); justify-content: space-between; }
      .lightbox__foot { padding-bottom: max(.75rem, env(safe-area-inset-bottom)); flex-wrap: wrap; justify-content: space-between; }
      .lightbox__meta { display: flex; align-items: baseline; gap: .9rem; min-width: 0; }
      .lightbox__counter { color: var(--accent); font-family: var(--font-mono); font-size: .85rem; letter-spacing: .08em; white-space: nowrap; }
      .lightbox__caption { overflow: hidden; color: var(--text-secondary); font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
      .lightbox__tools { display: flex; align-items: center; gap: .35rem; }
      .lightbox__zoom {
        min-width: 4.5ch;
        color: var(--text-secondary);
        font-family: var(--font-mono);
        font-size: .8rem;
        text-align: center;
      }
      .lb-btn {
        display: grid;
        place-items: center;
        min-width: 44px;
        height: 44px;
        padding-inline: .5rem;
        border: 1px solid var(--line);
        border-radius: var(--r-sm);
        background: rgba(9, 9, 11, .7);
        color: var(--text-primary);
        font-family: var(--font-mono);
        font-size: .8rem;
      }
      .lb-btn:hover { border-color: var(--line-strong); background: var(--bg-elevated); }
      .lb-btn .icon { width: 20px; height: 20px; }
      .lightbox__stage {
        position: relative;
        overflow: hidden;
        touch-action: none;
        user-select: none;
      }
      .lightbox__img {
        position: absolute;
        left: 0;
        top: 0;
        max-width: none;
        transform-origin: 0 0;
        cursor: zoom-in;
        -webkit-user-drag: none;
      }
      .lightbox__stage.is-zoomed .lightbox__img { cursor: grab; }
      .lightbox__stage.is-panning .lightbox__img { cursor: grabbing; }
      .lightbox__hint {
        position: absolute;
        left: 50%;
        bottom: 1.25rem;
        max-width: calc(100% - 2rem);
        padding: .55rem .9rem;
        border: 1px solid var(--line);
        border-radius: var(--r-pill);
        background: rgba(9, 9, 11, .85);
        color: var(--text-secondary);
        font-size: .85rem;
        text-align: center;
        pointer-events: none;
        transform: translateX(-50%);
        opacity: 0;
        transition: opacity 600ms ease;
      }
      .lightbox__hint.is-visible { opacity: 1; }
      .lb-nav {
        position: absolute;
        top: 50%;
        z-index: 2;
        display: grid;
        place-items: center;
        width: 48px;
        height: 48px;
        margin-top: -24px;
        border: 1px solid var(--line);
        border-radius: 50%;
        background: rgba(9, 9, 11, .75);
        color: var(--text-primary);
      }
      .lb-nav:hover { border-color: var(--line-strong); }
      .lb-nav .icon { width: 22px; height: 22px; }
      .lb-nav--prev { left: max(.75rem, env(safe-area-inset-left)); }
      .lb-nav--next { right: max(.75rem, env(safe-area-inset-right)); }

      /* ---------- Seção 7: números ---------- */
      .numbers { padding-block: calc(var(--section-y) * .72); }
      @media (min-width: 1024px) {
        .numbers__title { grid-column: 1 / span 6; }
      }
      .stats {
        position: relative;
        display: grid;
        margin-top: clamp(2.5rem, 5vw, 4rem);
        border-top: 1px solid var(--line);
      }
      .stat {
        position: relative;
        display: grid;
        align-content: start;
        gap: .85rem;
        padding: clamp(1.75rem, 3.5vw, 2.75rem) 0;
        border-bottom: 1px solid var(--line);
      }
      .stat .crosshair { top: -7px; left: -6px; }
      .stat__value {
        display: flex;
        align-items: baseline;
        color: var(--text-primary);
        font-family: var(--font-mono);
        font-size: clamp(3.5rem, 2rem + 6vw, 8rem);
        font-weight: 500;
        line-height: .95;
        letter-spacing: -.05em;
        font-variant-numeric: tabular-nums;
      }
      .stat__num { display: inline-block; text-align: right; }
      .stat__num[data-width="3"] { min-width: 3ch; }
      .stat__num[data-width="2"] { min-width: 2ch; }
      .stat__num[data-width="1"] { min-width: 1ch; }
      .stat__suffix { color: var(--accent); }
      .stat__value.is-ignited { color: var(--accent); text-shadow: 0 0 .3em rgba(255, 85, 0, .35); }
      .stat h3 { font-size: 1.125rem; }
      .stat p:not(.stat__value) { color: var(--text-secondary); max-width: 20.4em; font-size: .95rem; }
      @media (min-width: 900px) {
        .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
        .stat { padding-inline: clamp(1.25rem, 2.5vw, 2.25rem); border-bottom: 0; }
        .stat + .stat { border-left: 1px solid var(--line); }
        .stat:first-child { padding-left: 0; }
        .stat .crosshair { left: -7px; }
        .stat:first-child .crosshair { left: -6px; }
      }

      /* ---------- Seção 8: FAQ ---------- */
      .faq__aside { display: grid; gap: 1.25rem; align-content: start; }
      .faq__list { border-top: 1px solid var(--line); }
      @media (min-width: 1024px) {
        .faq__aside { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }
        .faq__list { grid-column: 6 / span 7; }
      }
      .faq__item {
        position: relative;
        border-bottom: 1px solid var(--line);
      }
      .faq__item::before {
        content: "";
        position: absolute;
        left: 0;
        top: -1px;
        bottom: -1px;
        width: 2px;
        background: var(--accent);
        box-shadow: 0 0 10px var(--accent-glow);
        transform: scaleY(0);
        transform-origin: 50% 0;
        transition: transform var(--dur-2) var(--ease-out);
      }
      .faq__item[open]::before { transform: scaleY(1); }
      .faq__q {
        display: flex;
        align-items: center;
        gap: 1rem;
        min-height: 64px;
        padding: 1.1rem .25rem 1.1rem 1.25rem;
        color: var(--text-primary);
        font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
        font-weight: 520;
        line-height: 1.4;
        list-style: none;
        transition: color var(--dur-1) ease;
      }
      .faq__q::-webkit-details-marker { display: none; }
      .faq__q:hover { color: var(--accent); }
      .faq__icon {
        position: relative;
        width: 20px;
        height: 20px;
        margin-left: auto;
        flex: none;
        color: var(--text-secondary);
        transition: transform var(--dur-2) var(--ease-out), color var(--dur-2) ease;
      }
      .faq__icon::before, .faq__icon::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        background: currentColor;
      }
      .faq__icon::before { width: 14px; height: 1.5px; margin: -.75px 0 0 -7px; }
      .faq__icon::after { width: 1.5px; height: 14px; margin: -7px 0 0 -.75px; }
      .faq__item[open] .faq__icon { transform: rotate(45deg); color: var(--accent); }
      .faq__a { padding: 0 2.5rem 1.5rem 1.25rem; }
      .faq__a p { max-width: 37.2em; color: var(--text-secondary); }
      @supports (interpolate-size: allow-keywords) and selector(::details-content) {
        :root { interpolate-size: allow-keywords; }
        .faq__item::details-content {
          block-size: 0;
          overflow: clip;
          transition: block-size var(--dur-2) var(--ease-out), content-visibility var(--dur-2) allow-discrete;
        }
        .faq__item[open]::details-content { block-size: auto; }
      }
      .faq__wa {
        display: inline-flex;
        align-items: center;
        gap: .6rem;
        min-height: 44px;
        color: var(--text-primary);
        font-weight: 500;
        text-decoration: underline;
        text-decoration-color: var(--line-strong);
        transition: text-decoration-color var(--dur-1) ease;
      }
      .faq__wa:hover { text-decoration-color: var(--accent); }
      .faq__wa .icon { color: var(--accent); }

      /* ---------- Seção 9: contato ---------- */
      .glow--contact { top: 10%; left: -25%; }
      .glow--contact-2 { bottom: -35%; right: -20%; }
      .contact__intro { display: grid; gap: 1.5rem; align-content: start; }
      .contact__intro .section-head { margin-bottom: 0; }
      @media (min-width: 1024px) {
        .contact__intro { grid-column: 1 / span 5; }
        .contact__card { grid-column: 6 / span 7; }
      }
      .assure { display: grid; gap: .8rem; margin-top: .5rem; }
      .assure li { display: flex; align-items: center; gap: .75rem; color: var(--text-primary); }
      .assure .icon {
        width: 26px;
        height: 26px;
        padding: 5px;
        border: 1px solid rgba(255, 85, 0, .4);
        border-radius: 50%;
        color: var(--accent);
      }
      .direct { display: grid; gap: .25rem; margin-top: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
      .direct__label { color: var(--text-tertiary); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
      .direct__link {
        display: inline-flex;
        align-items: center;
        gap: .65rem;
        min-height: 44px;
        color: var(--text-primary);
        text-decoration: none;
      }
      .direct__link .icon { color: var(--accent); }
      .direct__link:hover span { text-decoration: underline; text-decoration-color: var(--accent); }
      .direct__phone { font-family: var(--font-mono); font-size: 1.05rem; letter-spacing: .02em; }

      .contact__card { padding: clamp(1.25rem, 3vw, 2.5rem); }
      .contact__stack { display: grid; }
      .contact__stack > * { grid-area: 1 / 1; }
      .no-js .contact__form { display: none; }
      .no-js .success { display: none; }
      .no-js .contact__card { align-self: start; }
      .form-noscript { display: grid; gap: 1rem; }
      .form-noscript p { color: var(--text-secondary); }

      .contact__form { display: grid; gap: 1.35rem; transition: opacity var(--dur-2) ease; }
      .field { display: grid; gap: .5rem; min-width: 0; }
      .field__label, .field legend {
        color: var(--text-primary);
        font-size: .92rem;
        font-weight: 520;
      }
      .field__req { color: var(--accent); }
      .field__opt { color: var(--text-tertiary); font-weight: 400; }
      .fields-row { display: grid; gap: 1.35rem; }
      @media (min-width: 640px) {
        .fields-row { grid-template-columns: 1fr 1fr; }
      }
      .input {
        width: 100%;
        min-height: 50px;
        padding: .8rem 1rem;
        border: 1px solid var(--line-strong);
        border-radius: var(--r-sm);
        background: var(--bg-base);
        color: var(--text-primary);
        font-size: 1rem;
        transition: border-color var(--dur-1) ease, background-color var(--dur-1) ease;
      }
      .input::placeholder { color: var(--text-tertiary); }
      .input:hover { border-color: rgba(255, 255, 255, .28); }
      .input[aria-invalid="true"], .editor.is-invalid { border-color: var(--accent-hot); }
      .field__error {
        display: flex;
        align-items: center;
        gap: .45rem;
        min-height: 1.35rem;
        color: var(--accent-hot);
        font-size: .82rem;
        line-height: 1.35;
      }
      .field__error:empty { visibility: hidden; }

      .chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
      .chip-check { position: relative; display: inline-flex; }
      .chip-check input {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        opacity: 0;
        cursor: pointer;
      }
      .chip-check span {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        min-height: 44px;
        padding: .55rem .95rem;
        border: 1px solid var(--line-strong);
        border-radius: var(--r-pill);
        color: var(--text-secondary);
        font-size: .88rem;
        transition: border-color var(--dur-1) ease, color var(--dur-1) ease, background-color var(--dur-1) ease;
      }
      .chip-check .icon { width: 16px; height: 16px; }
      .chip-check__off { color: var(--text-tertiary); }
      .chip-check__on { display: none; color: var(--accent); }
      .chip-check input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--text-primary); }
      .chip-check input:checked + span .chip-check__off { display: none; }
      .chip-check input:checked + span .chip-check__on { display: inline-block; }
      .chip-check input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
      .chip-check:hover span { border-color: rgba(255, 255, 255, .3); color: var(--text-primary); }
      /* Anel de destaque quando o chip é pré-selecionado por um CTA */
      .chip-check::after {
        content: "";
        position: absolute;
        inset: 0;
        border: 1px solid var(--accent);
        border-radius: var(--r-pill);
        opacity: 0;
        pointer-events: none;
      }
      .chip-check.is-flash::after { animation: chip-flash 1.1s var(--ease-out); }

      /* Editor rico */
      .editor {
        position: relative;
        border: 1px solid var(--line-strong);
        border-radius: var(--r-sm);
        background: var(--bg-base);
        transition: border-color var(--dur-1) ease;
      }
      .editor:has(.editor__area:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
      .editor__toolbar {
        display: flex;
        align-items: center;
        gap: .2rem;
        padding: .3rem;
        border-bottom: 1px solid var(--line);
      }
      .tool {
        position: relative;
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border-radius: var(--r-xs);
        color: var(--text-secondary);
        transition: color var(--dur-1) ease, background-color var(--dur-1) ease;
      }
      .tool:hover { color: var(--text-primary); background: var(--bg-elevated); }
      .tool[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); }
      .tool .icon { width: 20px; height: 20px; }
      .tool:disabled { opacity: .45; cursor: not-allowed; }
      .editor__sep { width: 1px; height: 22px; margin-inline: .25rem; background: var(--line); }
      .tool--mic { margin-left: auto; }
      .tool--mic.is-listening { background: var(--accent); color: var(--on-accent); }
      .tool--mic::after {
        content: "";
        position: absolute;
        inset: 0;
        border: 1.5px solid var(--accent);
        border-radius: inherit;
        opacity: 0;
      }
      .tool--mic.is-listening::after { animation: mic-ring 1.4s var(--ease-out) infinite; }
      .wave { display: none; align-items: center; gap: 2px; height: 16px; }
      .wave i { display: block; width: 2px; height: 100%; border-radius: 1px; background: currentColor; transform: scaleY(.3); animation: wave 900ms ease-in-out infinite; }
      .wave i:nth-child(2) { animation-delay: -700ms; }
      .wave i:nth-child(3) { animation-delay: -400ms; }
      .wave i:nth-child(4) { animation-delay: -200ms; }
      .wave i:nth-child(5) { animation-delay: -550ms; }
      .tool--mic.is-listening .wave { display: flex; }
      .tool--mic.is-listening .tool__mic-icon { display: none; }
      .editor__area {
        position: relative;
        min-height: 180px;
        max-height: 360px;
        overflow-y: auto;
        padding: .9rem 1rem;
        color: var(--text-primary);
        font-size: 1rem;
        line-height: 1.6;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        outline: none;
      }
      .editor__area[data-empty="true"]::before {
        content: attr(data-placeholder);
        position: absolute;
        left: 1rem;
        right: 1rem;
        top: .9rem;
        color: var(--text-tertiary);
        pointer-events: none;
      }
      .editor__interim {
        min-height: 1.75rem;
        padding: 0 1rem .5rem;
        color: var(--text-secondary);
        font-size: .9rem;
        font-style: italic;
      }
      .field__meta {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: .25rem 1rem;
        color: var(--text-tertiary);
        font-size: .8rem;
      }
      .field__counter { font-family: var(--font-mono); letter-spacing: .04em; white-space: nowrap; }
      .field__counter.is-near { color: var(--text-secondary); }
      .field__counter.is-full { color: var(--accent); }
      .field__hint-voice { color: var(--text-tertiary); font-size: .8rem; }

      .form__submit { display: grid; gap: .9rem; }
      .submit-label { display: grid; }
      .submit-label > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; transition: opacity var(--dur-1) ease; }
      .submit-label__busy { opacity: 0; }
      .contact__form.is-busy .submit-label__idle { opacity: 0; }
      .contact__form.is-busy .submit-label__busy { opacity: 1; }
      .form__privacy { color: var(--text-tertiary); font-size: .82rem; line-height: 1.5; }
      .form__privacy a { color: var(--text-secondary); text-decoration-color: var(--line-strong); }
      .form__privacy a:hover { color: var(--text-primary); text-decoration-color: var(--accent); }
      @media (min-width: 640px) {
        .form__submit .btn { justify-self: start; }
      }

      .success {
        display: grid;
        align-content: center;
        justify-items: start;
        gap: 1.25rem;
        padding: clamp(.5rem, 2vw, 1.5rem);
        visibility: hidden;
        opacity: 0;
        transition: opacity var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3);
      }
      .success__icon {
        display: grid;
        place-items: center;
        width: 56px;
        height: 56px;
        border: 1px solid rgba(255, 85, 0, .45);
        border-radius: 50%;
        background: var(--accent-soft);
        color: var(--accent);
      }
      .success__icon .icon { width: 26px; height: 26px; }
      .success h3 { outline: none; }
      .success p { color: var(--text-secondary); }
      .success a { color: var(--text-primary); text-decoration-color: var(--accent); }
      .contact__stack.is-sent .success { visibility: visible; opacity: 1; transition-delay: 0s; }
      .contact__stack.is-sent .contact__form { visibility: hidden; opacity: 0; }

      /* ---------- Rodapé ---------- */
      .footer {
        position: relative;
        isolation: isolate;
        overflow: clip;
        padding-top: clamp(4.5rem, 9vw, 7.5rem);
        border-top: 1px solid var(--line);
        background: var(--bg-void);
      }
      .footer__top { row-gap: 2rem; align-items: end; }
      .footer__closing {
        font-size: var(--fs-h2);
        font-weight: 580;
        letter-spacing: -.035em;
        line-height: 1.02;
        text-wrap: balance;
      }
      .footer__closing-accent {
        background: var(--gradient-ignition);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
      @media (min-width: 1024px) {
        .footer__closing { grid-column: 1 / span 8; }
        .footer__top-cta { grid-column: 10 / span 3; justify-self: end; }
      }
      .footer__cols {
        display: grid;
        gap: 2.5rem 2rem;
        margin-top: clamp(3.5rem, 7vw, 5.5rem);
        padding-top: clamp(2.5rem, 5vw, 3.5rem);
        border-top: 1px solid var(--line);
      }
      @media (min-width: 640px) {
        .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      }
      @media (min-width: 1024px) {
        .footer__cols { grid-template-columns: 4fr 2fr 3fr 3fr; }
      }
      .footer__brand { display: grid; gap: 1rem; align-content: start; }
      .footer__brand img { width: auto; height: 30px; }
      .footer__brand p { color: var(--text-secondary); font-size: .95rem; max-width: 18em; }
      .footer__heading {
        margin-bottom: 1rem;
        color: var(--text-tertiary);
        font-family: var(--font-mono);
        font-size: .72rem;
        font-weight: 500;
        letter-spacing: .12em;
        text-transform: uppercase;
      }
      .footer__links { display: grid; gap: .1rem; }
      .footer__links a {
        display: inline-flex;
        align-items: center;
        gap: .55rem;
        min-height: 44px;
        min-width: 44px;
        color: var(--text-secondary);
        font-size: .95rem;
        text-decoration: none;
        transition: color var(--dur-1) ease;
      }
      .footer__links a:hover { color: var(--text-primary); }
      .footer__links .icon { color: var(--accent); }
      .footer__bottom {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: .5rem 2rem;
        margin-top: clamp(2.5rem, 5vw, 3.5rem);
        padding-block: 1.5rem;
        border-top: 1px solid var(--line);
        color: var(--text-tertiary);
        font-size: .85rem;
      }
      .footer__bottom a {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        min-height: 44px;
        color: var(--text-secondary);
        text-decoration: none;
      }
      .footer__bottom a:hover { color: var(--text-primary); }
      .footer__signature {
        width: min(100% - var(--pad-x) * 2, var(--container));
        height: auto;
        /* Marca inteira, sem sangrar pela borda; o respiro embaixo evita que o Next e o WhatsApp a cubram */
        margin: clamp(1rem, 3vw, 2rem) auto 0;
        padding-bottom: calc(clamp(6.5rem, 9vw, 8rem) + env(safe-area-inset-bottom));
        box-sizing: content-box;
        user-select: none;
      }
      /* ---------- Assinatura animada do rodapé: escrita a fogo, esfria e recebe um brilho de tempos em tempos ---------- */
      .sig { display: block; aspect-ratio: 3391.78 / 900; overflow: visible; pointer-events: none; -webkit-tap-highlight-color: transparent; }
      .sig__base { opacity: .07; }
      .sig__pin { opacity: .3; }
      .sig__fire { display: none; }
      .sig__shine { opacity: .22; }
      .sig__pin, .sig__pin-bob, .sig__pin-play { transform-box: fill-box; transform-origin: 50% 100%; }
      .sig__s { stroke-dasharray: 1 2; }
      @media (prefers-reduced-motion: no-preference) {
        .sig--anim .sig__fire { display: inline; }
        /* Antes de entrar na tela: contornos recolhidos, marca apagada e ponto no alto (sem transição, para reiniciar na hora) */
        .sig--anim:not(.is-drawn) .sig__s { stroke-dashoffset: 1; opacity: 0; }
        .sig--anim:not(.is-drawn) .sig__base > .sig__l, .sig--anim:not(.is-drawn) .sig__shine > .sig__l { opacity: 0; }
        .sig--anim:not(.is-drawn) .sig__pin { opacity: 0; transform: translateY(-405px) scale(.6); }
        .sig--anim.is-drawn .sig__s {
          stroke-dashoffset: 0;
          opacity: 1;
          transition: stroke-dashoffset var(--t) cubic-bezier(.65, 0, .35, 1) var(--d), opacity 0s linear var(--d);
        }
        /* A letra preenche assim que o contorno em brasa termina de escrevê-la */
        .sig--anim.is-drawn .sig__base > .sig__l, .sig--anim.is-drawn .sig__shine > .sig__l { opacity: 1; transition: opacity .45s ease calc(var(--d) + var(--t) * .8); }
        .sig--anim.is-drawn .sig__fire { opacity: 0; transition: opacity 1.3s ease 2.1s; }
        .sig--anim.is-drawn .sig__pin { transition: transform 750ms cubic-bezier(.3, 1.6, .5, 1) 1.45s, opacity 200ms ease 1.45s; }
        .sig--anim.is-drawn.is-visible .sig__pin-bob { animation: sig-bob 2.8s ease-in-out 2.3s infinite alternate; }
        .sig--anim.is-drawn.is-visible .sig__sweep { animation: sig-sweep 7s cubic-bezier(.45, 0, .25, 1) 2.9s infinite; }
      }
      @media (prefers-reduced-motion: reduce) { .sig__shine { display: none; } }
      @keyframes sig-bob { from { translate: 0 0; } to { translate: 0 -54px; } }
      @keyframes sig-sweep { 0% { transform: translateX(0); } 26%, 100% { transform: translateX(4892px); } }

      /* ---------- Brincadeiras: cada letra é uma tecla com uma acrobacia própria; a mira trava de novo ---------- */
      .sig__hit { pointer-events: all; cursor: pointer; }
      .sig__flash { opacity: .95; }
      /* O brilho fica no desenho; o movimento, no grupo da letra (assim os dois se somam) */
      .sig__flash .sig__l > * { opacity: 0; }
      .sig__l { transform-box: view-box; transition: transform 320ms var(--ease-out); }
      .sig__l--t { transform-origin: 1386px -330px; }
      .sig__l--i { transform-origin: 1690px 36px; }
      .sig__l--r { transform-origin: 2026px 36px; }
      .sig__l--v { transform-origin: 2462px 36px; }
      .sig__l--o { transform-origin: 3006px -273px; }
      .sig__l--icon { transform-origin: 392px -355px; }
      .sig.is-play-t .sig__flash .sig__l--t > *, .sig.is-play-i .sig__flash .sig__l--i > *, .sig.is-play-r .sig__flash .sig__l--r > *,
      .sig.is-play-v .sig__flash .sig__l--v > *, .sig.is-play-o .sig__flash .sig__l--o > *, .sig.is-play-pin .sig__flash .sig__l--icon > * { animation: sig-flash 900ms ease-out; }
      .sig.is-party .sig__flash .sig__l > * { animation: sig-flash 1.6s ease-out var(--wave, 0s) both; }
      .sig__l--t { --wave: .09s; } .sig__l--i { --wave: .18s; } .sig__l--r { --wave: .27s; } .sig__l--v { --wave: .36s; } .sig__l--o { --wave: .45s; }
      @media (prefers-reduced-motion: no-preference) {
        @media (hover: hover) and (pointer: fine) {
          /* Com o mouse por cima, a letra se oferece para a brincadeira */
          .sig:has(.sig__hit[data-letter="t"]:hover) .sig__l--t, .sig:has(.sig__hit[data-letter="i"]:hover) .sig__l--i,
          .sig:has(.sig__hit[data-letter="r"]:hover) .sig__l--r, .sig:has(.sig__hit[data-letter="v"]:hover) .sig__l--v,
          .sig:has(.sig__hit[data-letter="o"]:hover) .sig__l--o { transform: translateY(-45px); }
          .sig:has(.sig__hit[data-letter="pin"]:hover) .sig__l--icon { transform: scale(.94); }
          .sig:has(.sig__hit[data-letter="pin"]:hover) .sig__pin-play { transform: scale(1.25); transition: transform 320ms var(--ease-out); }
        }
        .sig.is-play-t .sig__l--t { animation: sig-flip 900ms cubic-bezier(.4, 0, .2, 1); }
        .sig.is-play-i .sig__l--i { animation: sig-hop 800ms cubic-bezier(.3, 0, .3, 1); }
        .sig.is-play-pin .sig__l--icon { animation: sig-lock 1s cubic-bezier(.3, 0, .3, 1); }
        .sig.is-play-pin .sig__pin-play { animation: sig-pin-fly 1.1s cubic-bezier(.3, 0, .3, 1); }
        .sig.is-play-r .sig__l--r { animation: sig-jelly 900ms ease-out; }
        .sig.is-play-v .sig__l--v { animation: sig-spring 850ms ease-out; }
        .sig.is-play-o .sig__l--o { animation: sig-roll 1.1s cubic-bezier(.45, 0, .3, 1); }
        .sig.is-party .sig__l { animation: sig-wave 700ms cubic-bezier(.3, 0, .3, 1) var(--wave, 0s) 2; }
        .sig.is-party .sig__pin-play { animation: sig-pin-fly 1.1s cubic-bezier(.3, 0, .3, 1) .1s; }
      }
      @keyframes sig-flash { 0% { opacity: 0; } 12% { opacity: 1; } 55% { opacity: .9; } 100% { opacity: 0; } }
      @keyframes sig-flip {
        0% { transform: none; } 30% { transform: translateY(-315px) rotate(-180deg); }
        62% { transform: translateY(-90px) rotate(-340deg); } 80% { transform: translateY(0) rotate(-360deg) scale(1.08, .9); }
        100% { transform: rotate(-360deg); }
      }
      @keyframes sig-hop {
        0% { transform: none; } 15% { transform: scale(1.1, .82); } 45% { transform: translateY(-360px) scale(.94, 1.08); }
        75% { transform: translateY(0) scale(1.12, .84); } 100% { transform: none; }
      }
      /* A mira abre e trava de novo no alvo, como na logo animada */
      @keyframes sig-lock {
        0% { transform: none; } 30% { transform: scale(1.22) rotate(-8deg); } 62% { transform: scale(.9) rotate(2deg); }
        80% { transform: scale(1.04); } 100% { transform: none; }
      }
      @keyframes sig-pin-fly {
        0% { transform: none; } 12% { transform: scale(1.15, .8); } 50% { transform: translateY(-675px) scale(1.1); }
        78% { transform: translateY(0) scale(1.25, .8); } 90% { transform: translateY(-63px); }
        100% { transform: none; }
      }
      @keyframes sig-jelly {
        0% { transform: none; } 15% { transform: skewX(-16deg) scale(1.08, .9); } 32% { transform: skewX(12deg) scale(.94, 1.08); }
        50% { transform: skewX(-7deg) scale(1.04, .96); } 68% { transform: skewX(4deg); } 84% { transform: skewX(-2deg); } 100% { transform: none; }
      }
      @keyframes sig-spring {
        0% { transform: none; } 18% { transform: scale(1.15, .55); } 40% { transform: scale(.9, 1.3) translateY(-108px); }
        60% { transform: scale(1.06, .88); } 78% { transform: scale(.98, 1.06); } 100% { transform: none; }
      }
      @keyframes sig-roll {
        0% { transform: none; } 40% { transform: translateX(405px) rotate(200deg); } 72% { transform: translateX(-135px) rotate(-60deg); }
        88% { transform: translateX(36px) rotate(10deg); } 100% { transform: none; }
      }
      @keyframes sig-wave { 0%, 100% { transform: none; } 40% { transform: translateY(-207px) scale(.96, 1.06); } 70% { transform: translateY(0) scale(1.06, .92); } }

      /* ---------- Mascote: Next, o robô guia da Tirvo ---------- */
      .mascot {
        /* Pose de descanso: ângulos de ombro (a), cotovelo (f), cabeça, pernas e direção do olhar.
           Especificidade baixa de propósito: as poses em [data-pose] sobrescrevem estes valores. */
        --al: 10deg; --fl: -10deg; --ar: -10deg; --fr: 10deg;
        --head: 0deg; --ll: 0deg; --lr: 0deg; --ex: 0px; --ey: 0px;
        --point: -100deg;
        --bot-w: 72px;
        display: none;
      }
      .js .mascot:not([hidden]) {
        position: fixed;
        left: calc(.75rem + env(safe-area-inset-left));
        bottom: calc(.5rem + env(safe-area-inset-bottom));
        z-index: var(--z-float);
        display: block;
        width: var(--bot-w);
        transform-origin: 0 0;
        pointer-events: none;
        transition: opacity var(--dur-2) ease, visibility 0s linear 0s, translate var(--dur-2) var(--ease-out);
      }
      @media (min-width: 768px) {
        .js .mascot:not([hidden]) { --bot-w: 92px; left: calc(1.25rem + env(safe-area-inset-left)); bottom: calc(.75rem + env(safe-area-inset-bottom)); }
      }
      .js .mascot.is-concealed {
        opacity: 0;
        visibility: hidden;
        translate: 0 16px;
        transition: opacity var(--dur-2) ease, visibility 0s linear var(--dur-2), translate var(--dur-2) var(--ease-out);
      }
      /* Na abertura, o robô continua ancorado no canto e só é deslocado por transform até o retângulo-âncora do palco
         da logo (ao lado dela no paisagem, embaixo da frase no retrato), então a saída não gera deslocamento de layout. */
      @media (max-aspect-ratio: 1 / 1) {
        .mascot.is-intro { --point: -168deg; }
      }
      .js .mascot.is-intro:not([hidden]),
      .js .mascot.is-flying:not([hidden]) { z-index: 2147483001; }

      .mascot__bot {
        display: block;
        width: 100%;
        aspect-ratio: 200 / 246;
        border-radius: 40% 40% 30% 30%;
        pointer-events: auto;
        -webkit-tap-highlight-color: transparent;
      }
      .mascot.is-intro .mascot__bot { pointer-events: none; }
      .mascot__pop, .mascot__jump, .mascot__breath { display: block; width: 100%; height: 100%; }
      .mascot__breath { transform-origin: 50% 94%; }
      .bot { width: 100%; height: 100%; overflow: visible; }
      .bot__shadow { fill: #ff5500; opacity: .16; }

      /* Articulações: cada grupo gira em torno da própria origem local */
      .bot__part { transform-box: view-box; transform-origin: 0 0; }
      .bot__arm, .bot__fore, .bot__leg, .bot__head { transition: transform 560ms cubic-bezier(.45, .05, .25, 1); }
      .bot__arm--l { transform: rotate(var(--al)); }
      .bot__fore--l { transform: rotate(var(--fl)); }
      .bot__arm--r { transform: rotate(var(--ar)); }
      .bot__fore--r { transform: rotate(var(--fr)); }
      .bot__leg--l { transform: rotate(var(--ll)); }
      .bot__leg--r { transform: rotate(var(--lr)); }
      .bot__head { transform: rotate(var(--head)); }
      /* A antena segue a cabeça com atraso e leve sobressalto, como uma mola */
      .bot__antenna { transform: rotate(calc(var(--head) * -1.8)); transition: transform 1.1s cubic-bezier(.3, 1.7, .45, 1); }
      .bot__eyes { transform: translate(var(--ex), var(--ey)); transition: transform 260ms var(--ease-out); }
      .bot__eye { transition: transform 90ms ease; }
      .bot__eyes-open, .bot__eyes-happy, .bot__blush, .bot__smile, .bot__o { transition: opacity 180ms ease; }
      .bot__eyes-happy, .bot__blush, .bot__o { opacity: 0; }
      /* Mão direita: aberta por padrão; nas poses de apontar vira um dedo indicador estendido */
      .bot__hand-point { opacity: 0; }
      .mascot:is([data-pose="present"], [data-pose="point"], [data-pose="point-down"], [data-pose="build"]) .bot__hand--r .bot__hand-open { opacity: 0; }
      .mascot:is([data-pose="present"], [data-pose="point"], [data-pose="point-down"], [data-pose="build"]) .bot__hand--r .bot__hand-point { opacity: 1; }

      /* Poses */
      .mascot[data-pose="wave"] { --ar: -102deg; --fr: -52deg; --al: 16deg; --fl: -14deg; --head: -4deg; }
      .mascot[data-pose="build"] { --ar: var(--point); --fr: -14deg; --al: 28deg; --fl: -72deg; --head: 6deg; --ex: 5px; --ey: -1px; }
      .mascot.is-intro[data-pose="build"] { --ey: -2px; }
      @media (max-aspect-ratio: 1 / 1) { .mascot.is-intro[data-pose="build"] { --head: 0deg; --ex: 0px; --ey: -5px; } }
      .mascot[data-pose="cheer"] { --al: 128deg; --fl: 32deg; --ar: -128deg; --fr: -32deg; --ll: 7deg; --lr: -7deg; }
      .mascot[data-pose="explain"] { --ar: -128deg; --fr: -34deg; --al: 14deg; --fl: -26deg; --head: -5deg; --ex: 3px; --ey: -3px; }
      .mascot[data-pose="look-l"] { --head: -8deg; --ex: -5px; --ey: -1px; }
      /* Falando: braço estendido apontando para o conteúdo ao lado */
      .mascot[data-pose="present"] { --ar: -116deg; --fr: -6deg; --al: 14deg; --fl: -24deg; --head: 6deg; --ex: 4px; --ey: -2px; }
      .mascot[data-pose="look-r"] { --head: 8deg; --ex: 5px; --ey: -1px; }
      .mascot[data-pose="fly"] { --al: 62deg; --fl: 24deg; --ar: -62deg; --fr: -24deg; --ll: 9deg; --lr: -9deg; }

      /* Expressões */
      .mascot[data-face="happy"] .bot__eyes-open { opacity: 0; }
      .mascot[data-face="happy"] .bot__eyes-happy { opacity: 1; }
      .mascot[data-face="happy"] .bot__blush { opacity: .45; }
      .mascot[data-face="focus"] .bot__eye { transform: scale(1.06, .72); }
      .mascot[data-face="surprised"] .bot__eye { transform: scale(1.14); }
      .mascot[data-face="surprised"] .bot__smile { opacity: 0; }
      .mascot[data-face="surprised"] .bot__o { opacity: 1; }
      .mascot.is-blink .bot__eye { transform: scaleY(.1); }

      /* Balão de fala */
      .mascot__bubble {
        position: absolute;
        left: calc(var(--bot-w) * .5);
        bottom: calc(var(--bot-w) * 1.18);
        width: max-content;
        max-width: min(18rem, calc(100vw - var(--bot-w) * .5 - 2rem - env(safe-area-inset-left) - env(safe-area-inset-right)));
        padding: .8rem 2.35rem .85rem 1rem;
        border-radius: 18px 18px 18px 6px;
        background: #f7f3ed;
        color: #1b1622;
        box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 18px 40px -16px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 85, 0, .18);
        transform-origin: 0 100%;
        opacity: 0;
        visibility: hidden;
        scale: .6;
        translate: 0 10px;
        /* O balão não bloqueia toques no que está embaixo (como as letras do rodapé); só o × é clicável */
        pointer-events: none;
        transition: opacity 200ms ease, scale 200ms ease, translate 200ms ease, visibility 0s linear 200ms;
      }
      .mascot__bubble::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -10px;
        width: 18px;
        height: 12px;
        background: inherit;
        clip-path: polygon(0 0, 100% 0, 0 100%);
      }
      .mascot.is-bubble-open .mascot__bubble {
        opacity: 1;
        visibility: visible;
        scale: 1;
        translate: 0 0;
        transition: opacity 220ms ease, scale 480ms cubic-bezier(.34, 1.56, .64, 1), translate 480ms cubic-bezier(.34, 1.56, .64, 1), visibility 0s;
      }
      .mascot.is-intro .mascot__bubble { display: none; }
      /* No rodapé, o balão sai na altura dos pés e se estende até a borda direita, sem cobrir o nome da Tirvo */
      .mascot.is-at-footer:not(.is-away) .mascot__bubble {
        left: calc(var(--bot-w) * 1.08);
        bottom: 0;
        width: min(36rem, calc(100vw - var(--bot-w) * 1.08 - 1.25rem - env(safe-area-inset-left) - env(safe-area-inset-right)));
        max-width: none;
        border-radius: 18px;
        transform-origin: 0 100%;
      }
      .mascot.is-at-footer:not(.is-away) .mascot__bubble::after {
        left: -9px;
        bottom: 16px;
        width: 12px;
        height: 18px;
        clip-path: polygon(100% 0, 100% 100%, 0 75%);
      }
      .mascot.is-at-footer:not(.is-away) .mascot__bubble { padding: .6rem 2.1rem .65rem .9rem; }
      .mascot.is-at-footer:not(.is-away) .mascot__name { margin-bottom: .12rem; font-size: .62rem; }
      .mascot.is-at-footer:not(.is-away) .mascot__text { font-size: .84rem; line-height: 1.36; }
      @media (max-width: 767px) {
        .mascot.is-at-footer:not(.is-away) .mascot__bubble { width: calc(100vw - var(--bot-w) * 1.08 - 1.25rem - env(safe-area-inset-left) - env(safe-area-inset-right)); }
      }
      .mascot__name {
        margin-bottom: .2rem;
        color: #b83d00;
        font: 600 .68rem/1 var(--font-mono);
        letter-spacing: .12em;
        text-transform: uppercase;
      }
      .mascot__text { font: 500 .9rem/1.45 var(--font-sans); letter-spacing: -.005em; text-wrap: pretty; }
      .mascot__close {
        pointer-events: auto;
        position: absolute;
        top: .35rem;
        right: .35rem;
        display: grid;
        place-items: center;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        color: rgba(27, 22, 34, .55);
        transition: background-color var(--dur-1) ease, color var(--dur-1) ease;
      }
      .mascot__close:hover { background: rgba(27, 22, 34, .08); color: #1b1622; }
      .mascot__close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
      .mascot__bubble :focus-visible { outline-color: #ff3300; outline-offset: 1px; }

      /* Resposta tátil ao toque */
      .bot { transform-origin: 50% 90%; transition: transform 140ms ease; }
      .mascot__bot:active .bot { transform: scale(1.06, .9); }
      .mascot[data-face="dizzy"] .bot__smile { opacity: 0; }
      .mascot[data-face="dizzy"] .bot__o { opacity: 1; }

      @media (prefers-reduced-motion: no-preference) {
        /* Respiração: expansão vertical sutil com os pés fixos (composta na GPU) */
        .mascot__breath { animation: bot-breath 3.4s ease-in-out infinite; }
        .mascot.is-entering .mascot__pop { animation: bot-pop 760ms cubic-bezier(.34, 1.56, .64, 1) both; }
        .mascot[data-pose="cheer"] .mascot__jump { animation: bot-jump 620ms cubic-bezier(.33, 0, .3, 1) infinite; }
        .mascot[data-pose="wave"] .bot__wiggle--r { animation: bot-wave 460ms ease-in-out infinite alternate; }
        .mascot[data-pose="wave"] .bot__hand--r { animation: bot-hand 230ms ease-in-out infinite alternate; }
        .mascot[data-pose="build"] .bot__hand--r { animation: bot-conjure 240ms ease-in-out infinite alternate; }
        .mascot[data-pose="build"] .bot__wiggle--r { animation: bot-nudge 900ms ease-in-out infinite alternate; }
        .mascot[data-pose="cheer"] .bot__wiggle--l,
        .mascot[data-pose="cheer"] .bot__wiggle--r { animation: bot-nudge 310ms ease-in-out infinite alternate; }
        .mascot[data-pose="explain"] .bot__hand--r { animation: bot-palm 1.1s ease-in-out infinite alternate; }
        .mascot[data-pose="explain"] .bot__wiggle--l { animation: bot-nudge 1.4s ease-in-out infinite alternate; }
        .mascot[data-pose="present"] .bot__hand--r { animation: bot-jab 520ms ease-in-out infinite alternate; }
        .mascot[data-pose="present"] .bot__wiggle--l { animation: bot-nudge 1.4s ease-in-out infinite alternate; }
        .mascot[data-pose="fly"] .bot__wiggle--l,
        .mascot[data-pose="fly"] .bot__wiggle--r { animation: bot-nudge 260ms ease-in-out infinite alternate; }
        .mascot.is-talking .bot__mouth { animation: bot-talk 170ms ease-in-out infinite alternate; }
        .mascot.is-talking .bot__core-glow { animation: bot-core 340ms ease-in-out infinite alternate; }
        .mascot.is-boing .bot__antenna { animation: bot-boing 800ms ease-out; }
        .mascot.is-tickle .mascot__pop { animation: bot-tickle 650ms ease-in-out; }
        .mascot.is-dizzy .mascot__pop { transform-origin: 50% 60%; animation: bot-spin 900ms cubic-bezier(.3, .6, .3, 1); }
        .mascot[data-face="dizzy"] .bot__eyes { animation: bot-dizzy 520ms linear infinite; }
      }
      @media (prefers-reduced-motion: reduce) {
        .bot__arm, .bot__fore, .bot__leg, .bot__head, .bot__antenna, .bot__eyes { transition-duration: 1ms; }
      }
      @keyframes bot-breath { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(.992, 1.028); } }
      @keyframes bot-pop { 0% { opacity: 0; transform: translateY(26%) scale(.35); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
      @keyframes bot-jump {
        0%, 100% { transform: translateY(0) scale(1, 1); }
        12% { transform: translateY(0) scale(1.05, .93); }
        45% { transform: translateY(-11%) scale(.97, 1.04); }
        78% { transform: translateY(0) scale(1.04, .95); }
      }
      @keyframes bot-wave { from { transform: rotate(-22deg); } to { transform: rotate(18deg); } }
      @keyframes bot-hand { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
      @keyframes bot-conjure { from { transform: rotate(-16deg) scale(.94); } to { transform: rotate(14deg) scale(1.06); } }
      @keyframes bot-nudge { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
      @keyframes bot-palm { from { transform: rotate(-10deg); } to { transform: rotate(12deg); } }
      @keyframes bot-talk { from { transform: scale(1, .45); } to { transform: scale(.9, 1.45); } }
      @keyframes bot-core { from { opacity: .5; } to { opacity: 1; } }
      @keyframes bot-boing {
        0% { transform: rotate(0); } 15% { transform: rotate(28deg); } 32% { transform: rotate(-22deg); }
        50% { transform: rotate(14deg); } 68% { transform: rotate(-8deg); } 84% { transform: rotate(4deg); } 100% { transform: rotate(0); }
      }
      @keyframes bot-tickle {
        0%, 100% { transform: rotate(0); } 15% { transform: rotate(-7deg) scale(1.03, .97); } 30% { transform: rotate(6deg); }
        45% { transform: rotate(-5deg) scale(1.02, .98); } 60% { transform: rotate(4deg); } 80% { transform: rotate(-2deg); }
      }
      @keyframes bot-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
      @keyframes bot-dizzy {
        0% { transform: translate(4px, 0); } 25% { transform: translate(0, 3px); } 50% { transform: translate(-4px, 0); }
        75% { transform: translate(0, -3px); } 100% { transform: translate(4px, 0); }
      }

      /* ---------- Cena do rodapé: corrida até o WhatsApp e pulos nas letras da Tirvo ---------- */
      .mascot[data-pose="run"] { --al: 30deg; --fl: -50deg; --ar: -30deg; --fr: 50deg; --head: 4deg; --ex: 4px; }
      .mascot[data-pose="point-down"] { --ar: -40deg; --fr: -14deg; --al: 142deg; --fl: 24deg; --head: 8deg; --ex: 3px; --ey: 4px; }
      .mascot[data-pose="point"] { --ar: -93deg; --fr: -3deg; --al: 146deg; --fl: 26deg; --head: 7deg; --ex: 5px; --ey: -1px; }
      /* Longe do canto, o balão sai sobre a cabeça e desliza para dentro da tela */
      .mascot.is-away .mascot__bubble { margin-left: var(--bub-dx, 0px); transition-property: opacity, scale, translate, visibility, margin-left; }
      .mascot.is-away .mascot__bubble::after { left: clamp(0px, calc(var(--bub-dx, 0px) * -1), calc(100% - 18px)); }
      /* Balão parado sobre as letras enquanto ele pula: sem rabinho, porque o robô muda de letra */
      .mascot.is-pinned .mascot__bubble { border-radius: 18px; transition-property: opacity, scale, translate, visibility; }
      .mascot.is-pinned .mascot__bubble::after { display: none; }
      /* Ao lado do WhatsApp, o balão se alinha pela direita, acima do botão */
      .mascot.is-at-wa .mascot__bubble {
        left: auto;
        right: var(--bub-right, 0px);
        margin-left: 0;
        max-width: min(18rem, calc(100vw - 2rem - env(safe-area-inset-left) - env(safe-area-inset-right)));
        border-radius: 18px 18px 6px 18px;
        transform-origin: 100% 100%;
      }
      .mascot.is-at-wa .mascot__bubble::after {
        left: auto;
        right: calc(var(--bub-right, 0px) * -1 + var(--bot-w) * .3);
        clip-path: polygon(0 0, 100% 0, 100% 100%);
      }
      @media (prefers-reduced-motion: no-preference) {
        .mascot.is-running .mascot__jump { rotate: var(--lean, 0deg); animation: bot-trot 300ms ease-in-out infinite; }
        .mascot.is-running .bot__leg--l { animation: bot-stride 300ms ease-in-out infinite alternate; }
        .mascot.is-running .bot__leg--r { animation: bot-stride 300ms ease-in-out infinite alternate-reverse; }
        .mascot.is-running .bot__arm--l { animation: bot-swing-l 300ms ease-in-out infinite alternate; }
        .mascot.is-running .bot__arm--r { animation: bot-swing-r 300ms ease-in-out infinite alternate; }
        .mascot[data-pose="point-down"] .mascot__jump,
        .mascot[data-pose="point"] .mascot__jump { animation: bot-jump 560ms cubic-bezier(.33, 0, .3, 1) infinite; }
        .mascot[data-pose="point-down"] .bot__wiggle--l,
        .mascot[data-pose="point"] .bot__wiggle--l { animation: bot-nudge 280ms ease-in-out infinite alternate; }
        .mascot[data-pose="point-down"] .bot__hand--r,
        .mascot[data-pose="point"] .bot__hand--r { animation: bot-jab 280ms ease-in-out infinite alternate; }
        .wa-float.is-called { animation: wa-called 1.1s var(--ease-out) infinite; }
      }
      .wa-float.is-called { box-shadow: 0 0 0 1px rgba(255, 85, 0, .6), 0 0 0 7px rgba(255, 85, 0, .18), 0 10px 34px -6px var(--accent-glow); }
      @keyframes bot-trot { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7%); } }
      @keyframes bot-stride { from { transform: rotate(-26deg); } to { transform: rotate(26deg); } }
      @keyframes bot-swing-l { from { transform: rotate(-30deg); } to { transform: rotate(45deg); } }
      @keyframes bot-swing-r { from { transform: rotate(-45deg); } to { transform: rotate(30deg); } }
      @keyframes bot-jab { from { transform: translateX(-2px) rotate(-6deg); } to { transform: translateX(3px) rotate(6deg); } }
      @keyframes wa-called {
        0%, 100% { transform: scale(1); } 18% { transform: scale(1.14) rotate(-9deg); }
        36% { transform: scale(1.08) rotate(7deg); } 54% { transform: scale(1.1) rotate(-4deg); } 72% { transform: scale(1); }
      }

      /* ---------- WhatsApp flutuante ---------- */
      .wa-float {
        position: fixed;
        right: calc(1rem + env(safe-area-inset-right));
        bottom: calc(1rem + env(safe-area-inset-bottom));
        z-index: var(--z-float);
        display: grid;
        place-items: center;
        width: 58px;
        height: 58px;
        border-radius: 50%;
        background: var(--accent);
        color: var(--on-accent);
        box-shadow: 0 0 0 1px rgba(255, 85, 0, .4), 0 8px 28px -8px var(--accent-glow);
        transition: opacity var(--dur-2) ease, transform var(--dur-2) var(--ease-out), visibility 0s linear 0s;
      }
      .wa-float .icon { width: 28px; height: 28px; }
      .wa-float::before, .wa-float::after {
        content: "";
        position: absolute;
        inset: 0;
        border: 1.5px solid var(--accent);
        border-radius: 50%;
        opacity: 0;
        animation: wa-ring 3.6s var(--ease-out) infinite;
        pointer-events: none;
      }
      .wa-float::after { animation-delay: .5s; }
      .wa-float__tip {
        position: absolute;
        right: calc(100% + .75rem);
        top: 50%;
        padding: .5rem .85rem;
        border: 1px solid var(--line);
        border-radius: var(--r-sm);
        background: var(--bg-elevated);
        color: var(--text-primary);
        font-size: .85rem;
        font-weight: 500;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transform: translate(8px, -50%);
        transition: opacity var(--dur-2) ease, transform var(--dur-2) var(--ease-out);
      }
      @media (hover: hover) and (pointer: fine) {
        .wa-float:hover .wa-float__tip,
        .wa-float:focus-visible .wa-float__tip { opacity: 1; transform: translate(0, -50%); }
      }
      .wa-float.is-concealed {
        opacity: 0;
        visibility: hidden;
        transform: scale(.85);
        pointer-events: none;
        transition: opacity var(--dur-2) ease, transform var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2);
      }
    }

    /* ==========================================================
       UTILITÁRIOS
       ========================================================== */
    @layer utilities {
      [hidden] { display: none; }
      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
      }
      .nowrap { white-space: nowrap; }
    }

    /* ==========================================================
       MOVIMENTO
       ========================================================== */
    @layer motion {
      /* Coreografia de entrada do hero (roda só com CSS, antes mesmo do JS) */
      @media (prefers-reduced-motion: no-preference) {
        .js .header { animation: fade-in var(--dur-3) var(--ease-out) both; }
        .js [data-hero-step] { animation: rise-in var(--dur-4) var(--ease-out) both; animation-delay: var(--d, 0ms); }

        /* Revelações: estado inicial oculto somente com JS ativo */
        .js [data-reveal] {
          opacity: 0;
          transform: translate3d(0, 22px, 0);
          transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
          transition-delay: calc(var(--i, 0) * 75ms);
        }
        .js [data-reveal="title"] {
          opacity: 1;
          clip-path: inset(0 0 100% 0);
          transform: translate3d(0, .35em, 0);
          transition: clip-path var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out);
        }
        .js [data-reveal].is-revealed { opacity: 1; transform: none; }
        .js [data-reveal="title"].is-revealed { clip-path: inset(-.3em -.3em -.4em -.3em); }
      }

      /* Aba oculta: pausa tudo que é contínuo */
      .is-tab-hidden *,
      .is-tab-hidden *::before,
      .is-tab-hidden *::after { animation-play-state: paused; }

      @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
          animation-duration: 1ms !important;
          animation-delay: 0s !important;
          animation-iteration-count: 1 !important;
          transition-duration: 1ms !important;
          transition-delay: 0s !important;
          scroll-behavior: auto !important;
        }
        .progress__bar { animation-duration: auto !important; }
        .marquee__track { flex-wrap: wrap; width: auto; }
        .marquee { -webkit-mask-image: none; mask-image: none; }
        .marquee__list { flex-wrap: wrap; justify-content: center; row-gap: .5rem; padding-inline: var(--pad-x); }
        .marquee__list[aria-hidden="true"] { display: none; }
        .hero__cue { display: none; }
        .wa-float::before, .wa-float::after, .chip__dot::after, .tool--mic::after { display: none; }
        .seal__ring, .pipeline__pulse, .graph__pulse, .pipeline__icon::after { animation: none !important; }
        .pipeline__pulse { opacity: 0; }
      }

      @keyframes progress-grow { to { transform: scaleX(1); } }
      @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
      @keyframes rise-in { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
      @keyframes caret-blink { 0% { opacity: 1; } 50% { opacity: 0; } }
      @keyframes marquee-run { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
      @keyframes dot-pulse { 0% { opacity: .9; transform: scale(1); } 70% { opacity: 0; transform: scale(3.2); } 100% { opacity: 0; transform: scale(3.2); } }
      @keyframes cue-run { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } }
      @keyframes glitch {
        0% { opacity: .35; transform: translate3d(-3px, 0, 0); }
        12% { opacity: 1; transform: none; }
        24% { opacity: .5; transform: translate3d(2px, 0, 0); }
        36% { opacity: 1; transform: none; }
        52% { opacity: .7; transform: translate3d(-1px, 0, 0); }
        64% { opacity: 1; transform: none; }
      }
      @keyframes draw-line { to { stroke-dashoffset: 0; } }
      @keyframes edge-pulse { from { stroke-dashoffset: 1.14; } to { stroke-dashoffset: 0; } }
      @keyframes spin { to { transform: rotate(360deg); } }
      @keyframes seg-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
      @keyframes seg-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
      @keyframes node-lit { from { opacity: 0; } to { opacity: 1; } }
      @keyframes pulse-x { from { transform: translateX(-100%); } to { transform: translateX(455%); } }
      @keyframes pulse-y { from { transform: translateY(-100%); } to { transform: translateY(455%); } }
      @keyframes node-hit { 0% { opacity: 1; } 16% { opacity: 0; } 100% { opacity: 0; } }
      @keyframes mic-ring { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(1.5); } }
      @keyframes wave { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
      @keyframes wa-ring { 0% { opacity: .7; transform: scale(1); } 66% { opacity: 0; transform: scale(1.75); } 100% { opacity: 0; transform: scale(1.75); } }
      @keyframes chip-flash { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18, 1.5); } }
    }

      /* ==========================================================
         SERVIÇOS · CONTORNO VIVO, LUZES DA MATRIZ E VITRINES
         ========================================================== */
      @property --beam {
        syntax: "<angle>";
        inherits: false;
        initial-value: 0deg;
      }
      /* Feixe de luz que percorre a borda do cartão, bem discreto */
      .svc__beam {
        position: absolute;
        inset: -1px;
        z-index: 1;
        padding: 1px;
        border-radius: inherit;
        pointer-events: none;
        opacity: 0;
        background: conic-gradient(from var(--beam), transparent 0 280deg, rgba(255, 85, 0, .5) 335deg, rgba(255, 190, 140, .85) 354deg, transparent 360deg);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
      }
      .svc--sites { --beam-delay: 0s; }
      .svc--sistemas { --beam-delay: -4.2s; }
      .svc--marca { --beam-delay: -8.1s; }
      .svc--design { --beam-delay: -2.3s; }
      .svc--ia { --beam-delay: -6.6s; }
      @media (prefers-reduced-motion: no-preference) {
        .svc__beam { opacity: .75; animation: svc-beam 12s linear var(--beam-delay) infinite; }
        .svc.is-offscreen .svc__beam { animation-play-state: paused; }
      }
      @keyframes svc-beam { to { --beam: 360deg; } }

      /* Quadradinhos da matriz: luzes que enfraquecem e voltam, cada vizinho no seu tempo */
      @media (prefers-reduced-motion: no-preference) {
        .matrix td.is-tirvo .matrix__mark { animation: mark-pulse 2.9s ease-in-out var(--pd, 0s) infinite; }
        .matrix tbody tr:nth-child(3n+1) td:last-child .matrix__mark { --pd: 0s; }
        .matrix tbody tr:nth-child(3n+2) td:last-child .matrix__mark { --pd: -1.75s; }
        .matrix tbody tr:nth-child(3n) td:last-child .matrix__mark { --pd: -.8s; }
        .matrix tbody tr:first-child td:nth-child(2) .matrix__mark { --pd: -2.3s; }
        .svc.is-offscreen .matrix__mark { animation-play-state: paused; }
      }
      @keyframes mark-pulse {
        0%, 62%, 100% { opacity: 1; box-shadow: 0 0 8px var(--accent-glow); }
        80% { opacity: .42; box-shadow: 0 0 2px rgba(255, 85, 0, .12); }
      }

      /* Base das vitrines */
      .demo {
        position: relative;
        overflow: clip;
        border: 1px solid var(--line);
        border-radius: var(--r-md);
        background:
          radial-gradient(110% 80% at 50% 0%, rgba(255, 85, 0, .07), transparent 62%),
          var(--bg-base);
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
      }
      .demo::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.2px);
        background-size: 18px 18px;
        -webkit-mask: radial-gradient(90% 90% at 50% 40%, #000, transparent);
        mask: radial-gradient(90% 90% at 50% 40%, #000, transparent);
      }
      .demo__hint {
        position: absolute;
        right: .7rem;
        bottom: .6rem;
        z-index: 5;
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        padding: .25rem .55rem;
        border: 1px solid var(--line);
        border-radius: var(--r-pill);
        background: rgba(9, 9, 11, .72);
        color: var(--text-secondary);
        font-family: var(--font-mono);
        font-size: .64rem;
        letter-spacing: .06em;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        transition: opacity var(--dur-2) ease;
      }
      .demo__hint-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent-glow); }
      .hint-mouse { display: none; }
      @media (hover: hover) and (pointer: fine) {
        .hint-mouse { display: inline; }
        .hint-touch { display: none; }
      }
      .demo.is-touched .demo__hint { opacity: 0; }

      /* ---------- 01 · Telas de sites premium ---------- */
      .demo--sites {
        aspect-ratio: 16 / 11.2;
        max-height: 500px;
        margin-block: .25rem .35rem;
        perspective: 1500px;
        perspective-origin: 50% 20%;
      }
      .sites__rig { position: absolute; inset: 0; --sp: 1; }
      .shot {
        position: absolute;
        top: 19%;
        left: 19%;
        width: 62%;
        overflow: hidden;
        border-radius: 9px;
        background: #111114;
        box-shadow: 0 34px 60px -24px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .09);
        container-type: inline-size;
        transition: transform .85s var(--ease-out), filter .5s ease, box-shadow .5s ease;
        will-change: transform;
      }
      .shot[data-pos="c"] { z-index: 3; transform: perspective(1500px) translate3d(0, 0, 70px); }
      @container (max-width: 480px) {
        .demo--sites { aspect-ratio: 16 / 13; }
        .shot { top: 17%; left: 12%; width: 76%; }
      }
      .shot[data-pos="l"] {
        transform-origin: 0% 50%;
        z-index: 1;
        transform: perspective(1500px) translate3d(calc(-34% * var(--sp)), 8%, -20px) rotateY(26deg) rotateZ(-2deg);
        filter: brightness(.78) saturate(.92);
      }
      .shot[data-pos="r"] {
        transform-origin: 100% 50%;
        z-index: 2;
        transform: perspective(1500px) translate3d(calc(34% * var(--sp)), 10%, -20px) rotateY(-26deg) rotateZ(2deg);
        filter: brightness(.78) saturate(.92);
      }
      @media (hover: hover) and (pointer: fine) {
        .demo--sites:hover .sites__rig { --sp: 1.12; }
        .demo--sites:hover .shot[data-pos="c"] { box-shadow: 0 40px 70px -24px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 85, 0, .45), 0 0 40px -10px rgba(255, 85, 0, .35); }
        .shot[data-pos="l"]:hover, .shot[data-pos="r"]:hover { filter: brightness(.92); }
      }
      .shot__bar {
        display: flex;
        align-items: center;
        gap: 1.2cqi;
        height: 6.4cqi;
        padding: 0 2.6cqi;
        border-bottom: 1px solid rgba(255, 255, 255, .06);
        background: #1c1c21;
      }
      .shot__bar > i { width: 1.6cqi; height: 1.6cqi; border-radius: 50%; background: #3b3b42; }
      .shot__bar > i:first-child { background: #ff5f57; }
      .shot__bar > i:nth-child(2) { background: #febc2e; }
      .shot__bar > i:nth-child(3) { background: #28c840; }
      .shot__url {
        margin-inline: auto;
        padding: .6cqi 3.4cqi;
        border-radius: 99px;
        background: rgba(255, 255, 255, .06);
        color: #9a9aa3;
        font: 500 2cqi/1 var(--font-mono);
        letter-spacing: .02em;
      }
      .shot__view { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
      .site { position: absolute; inset: 0 0 auto; padding: 0 5cqi 5cqi; }
      @media (prefers-reduced-motion: no-preference) {
        .shot[data-pos="c"] .site { animation: site-scroll 15s var(--ease-in-out) 1.2s infinite; }
        .svc.is-offscreen .site { animation-play-state: paused; }
      }
      @keyframes site-scroll {
        0%, 16% { transform: translateY(0); }
        44%, 64% { transform: translateY(calc(-100% + 62.5cqi)); }
        92%, 100% { transform: translateY(0); }
      }
      .site i { font-style: normal; }
      .st-nav { display: flex; align-items: center; gap: 3cqi; height: 9cqi; font-size: 2.1cqi; }
      .st-logo { display: inline-flex; align-items: center; gap: 1cqi; font-weight: 700; }
      .st-links { display: flex; gap: 3cqi; margin-left: auto; opacity: .7; }
      .st-cta { padding: 1cqi 2.4cqi; border-radius: 99px; font-weight: 600; }
      .st-h { display: block; font-weight: 600; letter-spacing: -.035em; line-height: 1.02; }
      .st-h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
      .st-p { display: block; font-size: 2.2cqi; line-height: 1.45; opacity: .72; }
      .st-btn { display: inline-block; padding: 1.5cqi 3.2cqi; border-radius: 99px; font-size: 2.1cqi; font-weight: 600; }

      /* Volt: fintech, azul-noite e violeta */
      .site--volt { background: radial-gradient(70cqi 50cqi at 85% 20%, rgba(139, 92, 255, .35), transparent 70%), radial-gradient(50cqi 40cqi at 10% 90%, rgba(255, 85, 0, .18), transparent 70%), #0a0a18; color: #eef0ff; }
      .site--volt .st-logo i { width: 3cqi; height: 3cqi; border-radius: .8cqi; background: linear-gradient(135deg, #b69cff, #6d3bff); }
      .site--volt .st-logo { font-size: 2.6cqi; letter-spacing: -.02em; }
      .site--volt .st-cta { background: #eef0ff; color: #0a0a18; }
      .site--volt .st-hero { display: grid; grid-template-columns: 1fr 1.05fr; gap: 4cqi; align-items: center; padding-top: 3cqi; }
      .st-pill { display: inline-block; margin-bottom: 2.4cqi; padding: .9cqi 2cqi; border: 1px solid rgba(182, 156, 255, .45); border-radius: 99px; color: #cdbdff; font-size: 1.7cqi; }
      .site--volt .st-h { font-size: 6.2cqi; }
      .site--volt .st-p { margin: 2.4cqi 0 3.4cqi; }
      .site--volt .st-btn { background: linear-gradient(135deg, #8b5cff, #5b2bff); color: #fff; box-shadow: 0 1cqi 4cqi rgba(109, 59, 255, .5); }
      .st-dash { display: grid; gap: .6cqi; padding: 3cqi; border: 1px solid rgba(255, 255, 255, .1); border-radius: 2cqi; background: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)); box-shadow: 0 3cqi 8cqi rgba(0, 0, 0, .45); }
      .st-dash__k { font-size: 1.7cqi; opacity: .6; }
      .st-dash__v { font-size: 5.2cqi; font-weight: 600; letter-spacing: -.03em; }
      .st-dash__v small { font-size: .5em; opacity: .5; }
      .st-dash__d { color: #6ee7a8; font-size: 1.7cqi; }
      .st-chart { width: 100%; height: 12cqi; margin-top: 1cqi; overflow: visible; }
      .st-bars { display: flex; align-items: end; gap: 1cqi; height: 7cqi; margin-top: 1cqi; }
      .st-bars i { flex: 1; height: 40%; border-radius: .5cqi; background: rgba(182, 156, 255, .35); }
      .st-bars i:nth-child(2) { height: 65%; } .st-bars i:nth-child(3) { height: 50%; } .st-bars i:nth-child(4) { height: 80%; }
      .st-bars i:nth-child(5) { height: 60%; } .st-bars i:nth-child(6) { height: 92%; background: #b69cff; } .st-bars i:nth-child(7) { height: 72%; }
      .site--volt .st-logos { display: flex; justify-content: space-between; margin-top: 7cqi; padding-block: 3cqi; border-block: 1px solid rgba(255, 255, 255, .08); font-size: 2.2cqi; font-weight: 700; letter-spacing: .08em; opacity: .5; }
      .site--volt .st-logos i:nth-child(2), .site--volt .st-logos i:nth-child(4) { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: 0; }
      .site--volt .st-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4cqi; margin-top: 4cqi; font-size: 1.9cqi; }
      .site--volt .st-feats span { padding: 2.4cqi; border: 1px solid rgba(255, 255, 255, .08); border-radius: 1.4cqi; background: rgba(255, 255, 255, .03); }
      .site--volt .st-feats i { display: block; width: 4cqi; height: 4cqi; margin-bottom: 2cqi; border-radius: 1cqi; background: linear-gradient(135deg, #b69cff, #6d3bff); }

      /* Atria: estúdio de arquitetura, foto sangrada e tipografia editorial */
      .site--atria { padding: 0; background: #f2ece3; color: #1c1813; }
      .at-hero { position: relative; height: 62.5cqi; overflow: hidden; color: #fbf7f0; }
      .at-hero__img, .el-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
      .at-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 14, 8, .45) 0%, transparent 28%, transparent 52%, rgba(20, 14, 8, .62) 100%); }
      .at-nav { position: relative; z-index: 1; padding: 0 5cqi; }
      .at-logo { font-size: 2.6cqi; font-weight: 500; letter-spacing: .5em; }
      .at-nav .st-cta { border: 1px solid rgba(251, 247, 240, .55); font-weight: 500; }
      .at-copy { position: absolute; left: 5cqi; bottom: 5cqi; z-index: 1; }
      .at-kicker { display: block; margin-bottom: 1.6cqi; font: 500 1.6cqi/1 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; opacity: .85; }
      .at-h { display: block; font-size: 7.6cqi; font-weight: 400; letter-spacing: -.045em; line-height: .95; }
      .at-h em, .at-h2 em, .el-h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
      .at-h em { display: block; }
      .at-index { position: absolute; right: 5cqi; bottom: 5.4cqi; z-index: 1; font: 500 1.7cqi/1 var(--font-mono); letter-spacing: .1em; opacity: .8; }
      .at-index b { font-weight: 500; opacity: 1; }
      .at-about { display: grid; grid-template-columns: 1.15fr 1fr; gap: 5cqi; align-items: center; padding: 6cqi 5cqi; }
      .at-label { display: block; margin-bottom: 2cqi; color: #8a6a48; font: 500 1.6cqi/1 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; }
      .at-h2 { display: block; font-size: 4.6cqi; letter-spacing: -.035em; line-height: 1.05; }
      .at-stats { display: flex; gap: 5cqi; margin-top: 4cqi; padding-top: 2.6cqi; border-top: 1px solid rgba(28, 24, 19, .15); font-size: 1.8cqi; color: rgba(28, 24, 19, .6); }
      .at-stats b { display: block; color: #1c1813; font-family: var(--font-serif); font-style: italic; font-size: 4.6cqi; font-weight: 400; line-height: 1.1; }
      .at-about img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: .6cqi; }

      /* Élan: perfumaria de luxo, preto profundo e dourado */
      .site--elan { padding: 0; background: #0b0907; color: #f3e9dc; }
      .el-hero { position: relative; height: 62.5cqi; overflow: hidden; }
      .el-hero .el-hero__img { top: 9cqi; height: calc(100% - 9cqi); object-position: 70% 100%; }
      .el-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 6, 4, .72) 0%, rgba(8, 6, 4, .25) 45%, transparent 70%); }
      .el-nav { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto 1fr; padding: 0 5cqi; border-bottom: 1px solid rgba(243, 233, 220, .12); }
      .el-links { margin-left: 0; gap: 2.6cqi; font-size: 1.8cqi; letter-spacing: .06em; text-transform: uppercase; opacity: .78; }
      .el-links--r { justify-content: flex-end; }
      .el-logo { font-family: Georgia, "Times New Roman", serif; font-size: 3cqi; letter-spacing: .42em; margin-right: -.42em; color: #e9c98f; }
      .el-copy { position: absolute; left: 5cqi; top: 50%; z-index: 1; width: 42%; transform: translateY(-42%); }
      .el-kicker { display: block; margin-bottom: 1.8cqi; color: #e9c98f; font: 500 1.6cqi/1 var(--font-mono); letter-spacing: .22em; text-transform: uppercase; }
      .el-h { display: block; font-size: 8.4cqi; font-weight: 300; letter-spacing: -.04em; line-height: .92; }
      .el-h em { display: block; color: #e9c98f; }
      .el-p { display: block; max-width: 24em; margin: 2.6cqi 0 3.6cqi; font-size: 2cqi; line-height: 1.5; opacity: .75; }
      .el-actions { display: flex; align-items: center; gap: 3cqi; }
      .el-btn { padding: 1.6cqi 3.6cqi; background: #f3e9dc; color: #0b0907; font-size: 1.8cqi; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
      .el-link { white-space: nowrap; padding-bottom: .4cqi; border-bottom: 1px solid rgba(243, 233, 220, .5); font-size: 1.8cqi; opacity: .85; }
      .el-dots { position: absolute; left: 5cqi; bottom: 4cqi; z-index: 1; display: flex; gap: 1cqi; }
      .el-dots i { width: 5cqi; height: 2px; background: rgba(243, 233, 220, .3); }
      .el-dots i:first-child { background: #e9c98f; }
      .el-shop { padding: 5cqi; background: #f4efe8; color: #16120d; }
      .el-shop__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 3cqi; font-family: Georgia, serif; font-size: 3.4cqi; }
      .el-shop__head i { font-family: var(--font-mono); font-size: 1.6cqi; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
      .el-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6cqi; }
      .el-grid span { display: grid; gap: .6cqi; font-size: 1.6cqi; color: rgba(22, 18, 13, .6); }
      .el-grid img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; margin-bottom: 1cqi; }
      .el-grid b { color: #16120d; font-size: 2cqi; font-weight: 600; }

      /* ---------- 02 · Fluxo de automação ---------- */
      .demo--flow { display: grid; gap: .9rem; padding: 1rem 1rem 2.6rem; }
      .flow__head { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .04em; color: var(--text-tertiary); }
      .flow__live { display: inline-flex; align-items: center; gap: .4rem; color: #6ee7a8; }
      .flow__live i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
      .demo--flow.is-running .flow__live { color: var(--accent); }
      .flow__count { margin-left: auto; }
      .flow__count b { color: var(--text-primary); font-weight: 500; font-variant-numeric: tabular-nums; }
      .flow__track { position: relative; display: flex; align-items: flex-start; }
      .flow__node { position: relative; z-index: 1; display: grid; justify-items: center; flex: none; gap: .3rem; width: 58px; text-align: center; }
      .flow__ico {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border: 1px solid var(--line-strong);
        border-radius: 12px;
        background: linear-gradient(180deg, #1a1a1f, #111114);
        color: var(--text-secondary);
        transition: color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s var(--ease-out);
      }
      .flow__ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
      .flow__label { color: var(--text-primary); font-size: .74rem; font-weight: 500; line-height: 1; }
      .flow__sub { color: var(--text-tertiary); font-family: var(--font-mono); font-size: .58rem; line-height: 1.2; }
      .flow__node.is-hit .flow__ico { color: var(--accent); border-color: rgba(255, 85, 0, .7); box-shadow: 0 0 0 4px rgba(255, 85, 0, .12), 0 0 22px rgba(255, 85, 0, .45); transform: translateY(-2px) scale(1.06); }
      .flow__node.is-hit .flow__sub { color: #6ee7a8; }
      @media (hover: hover) and (pointer: fine) {
        .demo--flow:hover .flow__ico { border-color: rgba(255, 85, 0, .35); }
      }
      .flow__wire { position: relative; flex: 1; height: 1px; margin-top: 21px; overflow: visible; clip-path: inset(-3px 0); background: repeating-linear-gradient(90deg, var(--line-strong) 0 4px, transparent 4px 8px); }
      /* Pacote: faixa do tamanho do fio com a "cabeça" luminosa na ponta direita */
      .flow__pkt { position: absolute; inset: -1.5px 0; height: 4px; background: linear-gradient(90deg, transparent calc(100% - 26px), rgba(255, 85, 0, .9) calc(100% - 4px), #ffd2b0); transform: translateX(-100%); opacity: 0; }
      @media (prefers-reduced-motion: no-preference) {
        .flow__pkt { animation: flow-pkt 2.6s linear infinite; }
        .flow__pkt--b { animation-delay: -1.3s; }
        .flow__wire:nth-of-type(4) .flow__pkt { animation-delay: -.7s; }
        .flow__wire:nth-of-type(4) .flow__pkt--b { animation-delay: -2s; }
        .flow__wire:nth-of-type(6) .flow__pkt { animation-delay: -1.6s; }
        .flow__wire:nth-of-type(6) .flow__pkt--b { animation-delay: -.3s; }
        .demo--flow.is-running .flow__pkt { animation-duration: .9s; }
        .svc.is-offscreen .flow__pkt { animation-play-state: paused; }
      }
      @keyframes flow-pkt {
        0% { transform: translateX(-100%); opacity: 0; }
        10%, 86% { opacity: 1; }
        100% { transform: translateX(8%); opacity: 0; }
      }
      .flow__log { display: grid; gap: .3rem; height: 4.6rem; overflow: hidden; padding: .55rem .7rem; border: 1px solid var(--line-subtle); border-radius: var(--r-sm); background: rgba(0, 0, 0, .35); font-family: var(--font-mono); font-size: .66rem; line-height: 1.3; }
      .flow__log p { display: flex; gap: .7rem; min-width: 0; color: var(--text-secondary); }
      .flow__log time { flex: none; color: var(--text-tertiary); }
      .flow__log span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .flow__log b { flex: none; color: #6ee7a8; font-weight: 500; }
      .flow__log p.is-new { animation: log-in .45s var(--ease-out); }
      @keyframes log-in { from { opacity: 0; transform: translateY(-6px); } }
      .flow__metrics { display: flex; flex-wrap: wrap; gap: .3rem 1rem; color: var(--text-tertiary); font-family: var(--font-mono); font-size: .64rem; }
      .flow__metrics b { color: var(--text-primary); font-weight: 500; }

      /* ---------- 03 · Logotipos 3D ---------- */
      .demo--brand {
        height: clamp(350px, 88cqi, 390px);
        background:
          radial-gradient(60% 50% at 50% 110%, rgba(255, 85, 0, .1), transparent 70%),
          radial-gradient(110% 80% at 50% 0%, rgba(255, 255, 255, .05), transparent 60%),
          #08080a;
      }
      .lg3 {
        --s: clamp(86px, 25cqi, 124px);
        position: absolute;
        display: grid;
        justify-items: center;
        width: calc(var(--s) * 1.5);
        transition: transform .7s var(--ease-out), opacity .5s ease, filter .5s ease;
      }
      .lg3--vetra { left: 5%; top: 5%; }
      .lg3--orbe { right: 6%; top: 9%; }
      .lg3--nativa { left: 13%; top: 50%; }
      .lg3--kinto { right: 3%; top: 48%; }
      .lg3__stage { position: relative; display: block; width: var(--s); height: var(--s); }
      @media (prefers-reduced-motion: no-preference) {
        .lg3__stage { animation: lg3-float 6s ease-in-out infinite; }
        .lg3--orbe .lg3__stage { animation-delay: -1.6s; animation-duration: 7s; }
        .lg3--nativa .lg3__stage { animation-delay: -3.1s; animation-duration: 6.6s; }
        .lg3--kinto .lg3__stage { animation-delay: -4.4s; animation-duration: 7.4s; }
        .svc.is-offscreen .lg3__stage { animation-play-state: paused; }
      }
      @keyframes lg3-float { 50% { transform: translateY(-5px); } }
      .lg3__mark {
        position: absolute;
        inset: 0;
        background-repeat: no-repeat;
        background-size: 600% 600%;
        -webkit-box-reflect: below -8px linear-gradient(transparent 62%, rgba(255, 255, 255, .16));
      }
      .lg3--vetra .lg3__mark { background-image: url("../vitrine-logo-vetra.webp"); background-image: image-set("../vitrine-logo-vetra.avif" type("image/avif"), "../vitrine-logo-vetra.webp" type("image/webp")); }
      .lg3--orbe .lg3__mark { background-image: url("../vitrine-logo-orbe.webp"); background-image: image-set("../vitrine-logo-orbe.avif" type("image/avif"), "../vitrine-logo-orbe.webp" type("image/webp")); }
      .lg3--nativa .lg3__mark { background-image: url("../vitrine-logo-nativa.webp"); background-image: image-set("../vitrine-logo-nativa.avif" type("image/avif"), "../vitrine-logo-nativa.webp" type("image/webp")); }
      .lg3--kinto .lg3__mark { background-image: url("../vitrine-logo-kinto.webp"); background-image: image-set("../vitrine-logo-kinto.avif" type("image/avif"), "../vitrine-logo-kinto.webp" type("image/webp")); }
      .lg3__glow {
        position: absolute;
        inset: 8%;
        border-radius: 50%;
        background: radial-gradient(circle, var(--glow) 0%, transparent 68%);
        opacity: .35;
        transform: scale(.9);
        transition: opacity .5s ease, transform .6s var(--ease-out);
      }
      .lg3--vetra { --glow: rgba(233, 180, 90, .55); --ink: linear-gradient(100deg, #9a6a22 0%, #f7e2a6 45%, #fff6dc 50%, #c9923d 60%, #9a6a22 100%); }
      .lg3--orbe { --glow: rgba(255, 150, 110, .45); --ink: linear-gradient(100deg, #8d8f96 0%, #f2f2f4 45%, #ffffff 50%, #f0b39c 62%, #8d8f96 100%); }
      .lg3--nativa { --glow: rgba(60, 220, 140, .45); --ink: linear-gradient(100deg, #1f8a58 0%, #9ff0c4 45%, #eafff3 50%, #d9b36a 62%, #1f8a58 100%); }
      .lg3--kinto { --glow: rgba(60, 110, 255, .55); --ink: linear-gradient(100deg, #2742d8 0%, #a9bcff 45%, #ffffff 50%, #5d7bff 62%, #2742d8 100%); }
      .lg3__word {
        margin-top: .35rem;
        background: var(--ink);
        background-size: 250% 100%;
        background-position: 100% 0;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        font-size: clamp(.82rem, 3.4cqi, 1rem);
        font-weight: 600;
        line-height: 1.1;
        transition: background-position 1.1s var(--ease-out), letter-spacing .9s var(--ease-out), opacity .8s ease;
      }
      .lg3--vetra .lg3__word { font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: .34em; margin-right: -.34em; }
      .lg3--orbe .lg3__word { font-size: clamp(.95rem, 4cqi, 1.18rem); font-weight: 700; letter-spacing: -.05em; }
      .lg3--nativa .lg3__word { font-family: var(--font-serif); font-style: italic; font-size: clamp(1rem, 4.2cqi, 1.25rem); font-weight: 400; }
      .lg3--kinto .lg3__word { font-weight: 800; letter-spacing: .16em; margin-right: -.16em; }
      .lg3__sub { margin-top: .2rem; color: var(--text-tertiary); font-family: var(--font-mono); font-size: .54rem; letter-spacing: .22em; text-transform: uppercase; }
      /* Entrada: as marcas giram até o lugar e os nomes aparecem */
      .demo--brand:not(.is-in) .lg3__mark { opacity: 0; transform: scale(.6); }
      .demo--brand:not(.is-in) .lg3__word, .demo--brand:not(.is-in) .lg3__sub { opacity: 0; }
      .lg3__mark { transition: opacity .8s ease, transform 1s var(--ease-out); }
      .lg3:nth-of-type(2) .lg3__mark, .lg3:nth-of-type(2) .lg3__word { transition-delay: .18s; }
      .lg3:nth-of-type(3) .lg3__mark, .lg3:nth-of-type(3) .lg3__word { transition-delay: .36s; }
      .lg3:nth-of-type(4) .lg3__mark, .lg3:nth-of-type(4) .lg3__word { transition-delay: .54s; }
      /* Em foco: sobressai, brilha e o nome recebe um reflexo */
      .demo--brand.has-focus .lg3:not(.is-focus) { opacity: .62; filter: saturate(.75); }
      .lg3.is-focus { z-index: 3; transform: translateY(-6px) scale(1.14); }
      .lg3.is-focus .lg3__glow { opacity: 1; transform: scale(1.25); }
      .lg3.is-focus .lg3__word { background-position: 0 0; }
      .lg3.is-pop .lg3__stage { animation: lg3-pop .9s var(--ease-out); }
      @keyframes lg3-pop { 30% { transform: translateY(-14px) scale(1.12); } }

      /* ---------- 04 · Peças digitais ---------- */
      .demo--pieces { height: clamp(260px, 70cqi, 310px); perspective: 1200px; container-type: inline-size; }
      .pieces__rig { position: absolute; inset: 0; --fan: 1; }
      .pc {
        position: absolute;
        top: 50%;
        left: 50%;
        overflow: hidden;
        border-radius: 10px;
        box-shadow: 0 24px 40px -18px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .08);
        transition: transform .8s var(--ease-out), filter .5s ease;
      }
      .pc[data-slot="0"] { z-index: 1; transform: translate(-50%, -50%) translate3d(calc(-27cqi * var(--fan)), 4%, 0) rotate(calc(-10deg * var(--fan))); filter: brightness(.7); }
      .pc[data-slot="1"] { z-index: 3; transform: translate(-50%, -50%) translate3d(0, -2%, 0) rotate(0deg) scale(1.06); }
      .pc[data-slot="2"] { z-index: 2; transform: translate(-50%, -50%) translate3d(calc(27cqi * var(--fan)), 6%, 0) rotate(calc(9deg * var(--fan))); filter: brightness(.7); }
      @media (hover: hover) and (pointer: fine) {
        .demo--pieces:hover .pieces__rig { --fan: 1.12; }
        .pc[data-slot="0"]:hover, .pc[data-slot="2"]:hover { filter: brightness(.95); }
      }
      /* Post de campanha (4:5) */
      .pc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
      .pc--post { width: min(42cqi, 190px); aspect-ratio: 4 / 5; background: #111; color: #f4ece0; }
      .pc--post::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 30%, transparent 55%, rgba(0, 0, 0, .75)); }
      .pc-post__brand { position: absolute; top: 9%; left: 0; right: 0; z-index: 1; text-align: center; font-size: .56rem; font-weight: 500; letter-spacing: .5em; margin-right: -.5em; }
      .pc-post__copy { position: absolute; left: 9%; right: 9%; bottom: 8%; z-index: 1; }
      .pc-post__h { display: block; font-size: 1.02rem; font-weight: 300; letter-spacing: -.03em; line-height: 1; }
      .pc-post__h em, .pc-story__h em, .pc-ban__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: 0; }
      .pc-post__h em { display: block; font-size: 1.3em; color: #e9c98f; }
      .pc-post__sub { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: .42rem; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
      /* Story (9:16) */
      .pc--story { width: min(30cqi, 140px); aspect-ratio: 9 / 16; background: #cdb89c; color: #fffaf2; }
      .pc--story::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(40, 26, 12, .45), transparent 22%, transparent 55%, rgba(40, 26, 12, .7)); }
      .pc-story__bars { position: absolute; top: 5px; left: 7px; right: 7px; z-index: 1; display: flex; gap: 3px; }
      .pc-story__bars i { position: relative; flex: 1; height: 2px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, .35); }
      .pc-story__bars i:first-child { background: #fff; }
      .pc-story__bars i:nth-child(2)::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: 0 50%; transform: scaleX(.45); }
      @media (prefers-reduced-motion: no-preference) {
        .pc-story__bars i:nth-child(2)::after { animation: story-bar 5s linear infinite; }
        .svc.is-offscreen .pc-story__bars i::after { animation-play-state: paused; }
      }
      @keyframes story-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
      .pc-story__brand { position: absolute; top: 14px; left: 8px; z-index: 1; display: flex; align-items: center; gap: 5px; font-size: .5rem; font-weight: 600; }
      .pc-story__brand i { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: #fffaf2; color: #3a2a18; font-size: .42rem; font-style: normal; font-weight: 700; letter-spacing: .05em; }
      .pc-story__copy { position: absolute; left: 9px; right: 9px; bottom: 40px; z-index: 1; }
      .pc-story__k { display: block; margin-bottom: 4px; font-family: var(--font-mono); font-size: .4rem; letter-spacing: .2em; text-transform: uppercase; opacity: .85; }
      .pc-story__h { display: block; font-size: .9rem; font-weight: 300; letter-spacing: -.03em; line-height: .95; }
      .pc-story__h em { display: block; font-size: 1.3em; }
      .pc-story__cta { position: absolute; left: 50%; bottom: 12px; z-index: 1; padding: 4px 10px; border-radius: 99px; background: #fffaf2; color: #2c1f10; font-size: .46rem; font-weight: 700; white-space: nowrap; transform: translateX(-50%); }
      /* Banner (16:10) */
      .pc--deck { width: min(52cqi, 240px); aspect-ratio: 16 / 10; background: #0b0907; color: #f3e9dc; }
      .pc--deck::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 6, 4, .8), rgba(8, 6, 4, .2) 55%, transparent); }
      .pc-ban__copy { position: absolute; left: 8%; top: 50%; z-index: 1; transform: translateY(-50%); }
      .pc-ban__logo { display: block; margin-bottom: 7px; color: #e9c98f; font-family: Georgia, serif; font-size: .46rem; letter-spacing: .42em; }
      .pc-ban__h { display: block; font-size: 1.05rem; font-weight: 300; letter-spacing: -.03em; line-height: .95; }
      .pc-ban__h em { display: block; color: #e9c98f; font-size: 1.2em; }
      .pc-ban__sub { display: block; margin: 6px 0 8px; font-size: .42rem; opacity: .7; }
      .pc-ban__btn { display: inline-block; padding: 4px 9px; background: #f3e9dc; color: #0b0907; font-size: .4rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

      /* ---------- 05 · Agente de IA ---------- */
      .demo--agent { display: grid; grid-template-columns: 1fr; gap: 1rem; padding: 1rem 1rem 2.6rem; }
      @container (min-width: 520px) {
        .demo--agent { grid-template-columns: 150px 1fr; align-items: center; gap: 1.25rem; }
      }
      .agent__orb { position: relative; display: grid; place-items: center; justify-self: center; width: clamp(104px, 28cqi, 132px); aspect-ratio: 1; }
      .agent__rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
      .agent__ring { fill: none; stroke: rgba(255, 85, 0, .45); stroke-width: 1; transform-origin: 60px 60px; }
      .agent__ring--1 { stroke-dasharray: 3 7; }
      .agent__ring--2 { stroke-dasharray: 60 22 8 22; stroke: rgba(255, 150, 90, .6); }
      .agent__ring--3 { stroke-dasharray: 2 4; stroke: rgba(255, 255, 255, .25); }
      @media (prefers-reduced-motion: no-preference) {
        .agent__ring--1 { animation: ring-spin 22s linear infinite; }
        .agent__ring--2 { animation: ring-spin 9s linear infinite reverse; }
        .agent__ring--3 { animation: ring-spin 14s linear infinite; }
        .agent__core { animation: core-breathe 3.2s ease-in-out infinite; }
        .svc.is-offscreen .agent__ring, .svc.is-offscreen .agent__core { animation-play-state: paused; }
      }
      @keyframes ring-spin { to { transform: rotate(360deg); } }
      @keyframes core-breathe { 50% { transform: scale(1.08); } }
      .agent__core {
        width: 52px;
        aspect-ratio: 1;
        border-radius: 50%;
        background: radial-gradient(circle at 35% 30%, #ffd2b0, #ff5500 45%, #7a1d00 100%);
        box-shadow: 0 0 30px rgba(255, 85, 0, .55), inset 0 -6px 14px rgba(0, 0, 0, .35);
        transition: box-shadow .4s ease, filter .4s ease;
      }
      .demo--agent.is-thinking .agent__core { box-shadow: 0 0 46px rgba(255, 85, 0, .9), inset 0 -6px 14px rgba(0, 0, 0, .35); filter: saturate(1.25) brightness(1.1); }
      @media (hover: hover) and (pointer: fine) {
        .demo--agent:hover .agent__core { box-shadow: 0 0 42px rgba(255, 85, 0, .8), inset 0 -6px 14px rgba(0, 0, 0, .35); }
      }
      .agent__tag { position: absolute; bottom: -4px; padding: .15rem .5rem; border: 1px solid rgba(110, 231, 168, .35); border-radius: var(--r-pill); background: var(--bg-base); color: #6ee7a8; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .06em; white-space: nowrap; }
      .agent__panel { display: grid; gap: .6rem; min-width: 0; }
      .agent__head { display: flex; justify-content: space-between; gap: .75rem; color: var(--text-tertiary); font-family: var(--font-mono); font-size: .66rem; letter-spacing: .04em; }
      .agent__state { color: #6ee7a8; }
      .demo--agent.is-thinking .agent__state { color: var(--accent); }
      .agent__ask { display: flex; align-items: baseline; gap: .55rem; min-height: 2.9em; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: rgba(255, 255, 255, .03); color: var(--text-primary); font-size: .84rem; line-height: 1.4; }
      .agent__who { flex: none; color: var(--accent); font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
      .agent__caret { display: none; width: 2px; height: 1em; align-self: center; background: var(--accent); }
      .demo--agent.is-typing .agent__caret { display: inline-block; }
      .agent__steps { display: grid; gap: .4rem; }
      .agent__steps li { display: flex; align-items: center; gap: .6rem; color: var(--text-tertiary); font-size: .8rem; transition: color .3s ease; }
      .agent__steps li i { position: relative; flex: none; width: 15px; height: 15px; border: 1px solid var(--line-strong); border-radius: 50%; }
      .agent__steps li.is-run { color: var(--text-primary); }
      .agent__steps li.is-run i { border-color: var(--accent); border-right-color: transparent; }
      @media (prefers-reduced-motion: no-preference) {
        .agent__steps li.is-run i { animation: ring-spin .7s linear infinite; }
      }
      .agent__steps li.is-done { color: var(--text-secondary); }
      .agent__steps li.is-done i { border-color: #6ee7a8; background: rgba(110, 231, 168, .14); }
      .agent__steps li.is-done i::after { content: ""; position: absolute; left: 4.5px; top: 2px; width: 4px; height: 7px; border: solid #6ee7a8; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
      .agent__foot { min-height: 1.4em; color: #6ee7a8; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .02em; transition: opacity .3s ease; }
      .agent__foot.is-hidden { opacity: 0; }

      /* ==========================================================
         DESTAQUES TIPOGRÁFICOS E BLOCOS DE TEXTO
         ========================================================== */
      /* Rótulos de seção em cápsula, com o número em destaque */
      .label {
        display: inline-flex;
        align-items: center;
        gap: .6rem;
        padding: .34rem .95rem .34rem .34rem;
        border: 1px solid var(--line-strong);
        border-radius: var(--r-pill);
        background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 10px 30px -18px rgba(255, 85, 0, .5);
        color: var(--text-primary);
        font-size: .82rem;
        letter-spacing: .14em;
      }
      .label__num {
        display: inline-grid;
        place-items: center;
        min-width: 2.35em;
        height: 1.9em;
        padding: 0 .5em;
        border: 1px solid rgba(255, 85, 0, .45);
        border-radius: var(--r-pill);
        background: radial-gradient(circle at 50% 30%, rgba(255, 85, 0, .28), rgba(255, 85, 0, .08));
        color: #ff7a33;
        letter-spacing: .06em;
      }
      /* Linha do cabeçalho com um feixe de luz que percorre */
      .section-head__rule { position: relative; overflow: hidden; }
      .section-head__rule::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 22%;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 120, 50, .9), transparent);
        transform: translateX(-100%);
      }
      @media (prefers-reduced-motion: no-preference) {
        .section-head__rule::after { animation: rule-beam 5.5s var(--ease-in-out) infinite; }
      }
      @keyframes rule-beam { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(560%); } }

      /* Alerta: sinalizador piscando e linha de monitor com batimento */
      .label--alert { border-color: rgba(255, 85, 0, .5); background: linear-gradient(180deg, rgba(255, 85, 0, .14), rgba(255, 85, 0, .04)); padding-left: .7rem; }
      .label__beacon { position: relative; width: 9px; height: 9px; border-radius: 50%; background: #ff3b1f; box-shadow: 0 0 10px #ff3b1f; }
      .label__beacon::after { content: ""; position: absolute; inset: -5px; border: 1.5px solid #ff3b1f; border-radius: 50%; opacity: 0; }
      @media (prefers-reduced-motion: no-preference) {
        .label__beacon { animation: beacon-blink 1.6s steps(1) infinite; }
        .label__beacon::after { animation: beacon-ping 1.6s var(--ease-out) infinite; }
      }
      @keyframes beacon-blink { 0%, 70% { opacity: 1; } 85% { opacity: .35; } }
      @keyframes beacon-ping { 0% { opacity: .8; transform: scale(.5); } 100% { opacity: 0; transform: scale(1.8); } }
      .section-head__rule--pulse { height: 24px; background: none; overflow: visible; }
      .section-head__rule--pulse::after { display: none; }
      .section-head__rule--pulse svg { width: 100%; height: 100%; overflow: visible; }
      .pulse__base, .pulse__beat { fill: none; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
      .pulse__base { stroke: rgba(255, 255, 255, .14); stroke-width: 1; }
      .pulse__beat { stroke: #ff5500; stroke-width: 1.6; stroke-dasharray: .14 .86; stroke-dashoffset: .14; filter: drop-shadow(0 0 4px rgba(255, 85, 0, .9)); }
      @media (prefers-reduced-motion: no-preference) {
        .pulse__beat { animation: pulse-run 3.2s linear infinite; }
        .alert.is-offscreen .pulse__beat { animation-play-state: paused; }
      }
      @keyframes pulse-run { from { stroke-dashoffset: .14; } to { stroke-dashoffset: -.86; } }

      /* Palavras em destaque nos títulos */
      .hl-accent {
        background: linear-gradient(100deg, #ff5500 0%, #ff8a3d 55%, #ffc08a 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
      }
      .hl-dim { color: var(--text-secondary); }
      .hl-box {
        position: relative;
        display: inline-block;
        padding: 0 .16em .04em;
        margin: 0 -.04em;
        border: 1px solid rgba(255, 255, 255, .14);
        border-radius: .16em;
        background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -2px 0 rgba(0, 0, 0, .35), 0 16px 34px -18px rgba(0, 0, 0, .9);
        line-height: 1.02;
      }
      .hl-box::before {
        content: "";
        position: absolute;
        left: -1px;
        top: -1px;
        width: .28em;
        height: .28em;
        border-top: 2px solid var(--accent);
        border-left: 2px solid var(--accent);
        border-radius: .1em 0 0 0;
      }
      .hl-box--accent {
        border-color: rgba(255, 85, 0, .45);
        background: linear-gradient(180deg, rgba(255, 85, 0, .2), rgba(255, 85, 0, .06));
        box-shadow: inset 0 1px 0 rgba(255, 170, 120, .25), 0 18px 40px -18px rgba(255, 85, 0, .55);
      }
      /* Sublinhado de pincel que se desenha quando o título aparece */
      .hl-under { position: relative; display: inline-block; }
      .hl-under::after {
        content: "";
        position: absolute;
        left: -2%;
        right: -2%;
        bottom: -.1em;
        height: .2em;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.5C40 3 90 2.5 198 6.5' fill='none' stroke='%23ff5500' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
        clip-path: inset(0 100% 0 0);
        transition: clip-path .9s var(--ease-out) .75s;
      }
      .is-revealed .hl-under::after, .no-js .hl-under::after { clip-path: inset(0 0 0 0); }
      /* Canetão por baixo da palavra */
      .hl-mark { position: relative; z-index: 0; white-space: nowrap; }
      .hl-mark::before {
        content: "";
        position: absolute;
        left: -.08em;
        right: -.1em;
        bottom: .06em;
        z-index: -1;
        height: .42em;
        border-radius: .2em .35em .25em .3em;
        background: linear-gradient(90deg, rgba(255, 85, 0, .78), rgba(255, 130, 60, .62));
        transform: scaleX(0) skewX(-8deg) rotate(-1deg);
        transform-origin: 0 50%;
        transition: transform .85s var(--ease-out) .45s;
      }
      .is-revealed .hl-mark::before, .is-revealed.hl-mark::before { transform: scaleX(1) skewX(-8deg) rotate(-1deg); }
      /* "Zero improviso": a palavra improviso é riscada */
      .hl-strike { position: relative; display: inline-block; color: var(--text-tertiary); }
      .hl-strike::after {
        content: "";
        position: absolute;
        left: -3%;
        right: -3%;
        top: 54%;
        height: .09em;
        border-radius: 1em;
        background: var(--accent);
        box-shadow: 0 0 12px rgba(255, 85, 0, .7);
        transform: scaleX(0) rotate(-3deg);
        transform-origin: 0 50%;
        transition: transform .7s var(--ease-out) .8s;
      }
      .is-revealed .hl-strike::after { transform: scaleX(1) rotate(-3deg); }
      /* "o mais alto": degradê com brilho que sobe e uma seta ascendente */
      .hl-peak {
        position: relative;
        display: inline-block;
        background: linear-gradient(100deg, #ff5500 0%, #ff9a4d 35%, #fff1e2 50%, #ff9a4d 65%, #ff5500 100%);
        background-size: 220% 100%;
        background-position: 100% 0;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
      .hl-peak::after {
        content: "";
        position: absolute;
        left: 0;
        right: -.15em;
        bottom: -.16em;
        height: .34em;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M2 17 L60 14 L110 10 L160 6 L194 3 M184 2 L195 3 L188 11' fill='none' stroke='%23ff5500' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
        clip-path: inset(0 100% 0 0);
        transition: clip-path 1s var(--ease-out) .8s;
      }
      .is-revealed .hl-peak::after { clip-path: inset(0 0 0 0); }
      @media (prefers-reduced-motion: no-preference) {
        .hl-peak { animation: peak-shine 5s ease-in-out 1.4s infinite; }
      }
      @keyframes peak-shine { 0%, 55% { background-position: 100% 0; } 85%, 100% { background-position: 0 0; } }
      /* "Nexus 1.0" em cromo com reflexo */
      .hl-chrome {
        background: linear-gradient(180deg, #ffffff 0%, #d9dce3 45%, #8b8f99 52%, #f4f5f8 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        filter: drop-shadow(0 0 18px rgba(255, 85, 0, .35));
      }

      /* Blocos de texto que antes eram texto puro */
      .lead-card {
        position: relative;
        isolation: isolate;
        padding: 1.25rem 1.35rem 1.3rem 1.5rem;
        border: 1px solid var(--line);
        border-radius: var(--r-lg);
        background: linear-gradient(160deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012) 60%), var(--bg-raised);
        box-shadow: var(--inner-hl), 0 24px 50px -30px rgba(0, 0, 0, .9);
        font-size: calc(var(--fs-lead) * .96);
        transition: border-color var(--dur-2) ease, transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) ease;
      }
      .lead-card::before {
        content: "";
        position: absolute;
        left: -1px;
        top: 1.1rem;
        bottom: 1.1rem;
        width: 2px;
        border-radius: 2px;
        background: linear-gradient(180deg, #ff5500, rgba(255, 85, 0, .1));
        box-shadow: 0 0 12px rgba(255, 85, 0, .6);
      }
      .lead-card[data-spotlight]::before { z-index: auto; }
      @media (hover: hover) and (pointer: fine) {
        .lead-card:hover { border-color: rgba(255, 85, 0, .35); transform: translateY(-2px); box-shadow: var(--inner-hl), 0 28px 60px -30px rgba(255, 85, 0, .35); }
        /* o holofote do mouse não substitui a barra lateral */
        .lead-card[data-spotlight]::before {
          opacity: 1;
          inset: auto;
          left: -1px;
          top: 1.1rem;
          bottom: 1.1rem;
          width: 2px;
          border-radius: 2px;
          background: linear-gradient(180deg, #ff5500, rgba(255, 85, 0, .1));
        }
      }
      .lead-card strong { color: var(--text-primary); font-weight: 560; }
      .lead-card strong.k { color: #ff8a4d; }
      .lead-card__punch { display: block; margin-top: .7rem; padding-top: .7rem; border-top: 1px dashed var(--line-strong); color: var(--text-primary); font-weight: 520; }
      .lead-card--warn { border-color: rgba(255, 85, 0, .28); background: linear-gradient(160deg, rgba(255, 85, 0, .09), rgba(255, 85, 0, .015) 55%), var(--bg-raised); }
      .lead-card--term { font-size: calc(var(--fs-lead) * .92); }
      .chip-code { padding: .08em .45em; border: 1px solid rgba(255, 85, 0, .4); border-radius: 6px; background: rgba(255, 85, 0, .1); color: #ff9a5c; font-family: var(--font-mono); font-size: .88em; }
      .prose strong { color: var(--text-primary); font-weight: 560; }

      /* Ponte "atrair → converter" */
      .alert__bridge .bridge { display: grid; gap: .55rem; max-width: none; color: var(--text-secondary); font-size: calc(var(--fs-lead) * 1.12); line-height: 1.35; }
      .bridge__line { display: block; }
      .bridge__line::before { content: "01"; display: inline-block; vertical-align: .2em; margin-right: .55rem; padding: .1rem .4rem; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--text-tertiary); font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em; }
      .bridge__line--go { color: var(--text-primary); }
      .bridge__line--go::before { content: "02"; border-color: rgba(255, 85, 0, .5); color: var(--accent); background: rgba(255, 85, 0, .1); }
      .bridge__word { color: var(--text-primary); font-family: var(--font-serif); font-style: italic; font-size: 1.18em; font-weight: 400; }
      .bridge__word.hl-accent { color: transparent; }

      /* FAQ: frase de impacto */
      .faq__punch { color: var(--text-secondary); font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); line-height: 1.35; letter-spacing: -.015em; }
      .faq__punch strong, .faq__punch .hl-mark { color: var(--text-primary); font-weight: 580; }

      /* Nexus: linha de comando com cursor */
      .nexus__claim {
        position: relative;
        padding: .85rem 1rem .85rem 2.1rem;
        border: 1px solid rgba(255, 85, 0, .3);
        border-left: 2px solid var(--accent);
        border-radius: 0 var(--r-md) var(--r-md) 0;
        background: linear-gradient(90deg, rgba(255, 85, 0, .1), rgba(255, 85, 0, .02));
      }
      .nexus__claim::before { content: ">"; position: absolute; left: .9rem; color: var(--accent); }
      .nexus__claim::after { content: ""; display: inline-block; width: .55em; height: 1.05em; margin-left: .3em; vertical-align: -.18em; background: var(--accent); }
      @media (prefers-reduced-motion: no-preference) {
        .nexus__claim::after { animation: caret-blink 1.1s steps(1) infinite; }
      }
      @keyframes caret-blink { 50% { opacity: 0; } }

      /* Etiquetas da equipe: nós que acendem em sequência, como o fluxo de IA acima */
      .team__tags .tag {
        position: relative;
        gap: .55rem;
        border-color: var(--line-strong);
        background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .01));
        color: var(--text-primary);
        transition: border-color var(--dur-2) ease, box-shadow var(--dur-2) ease, transform var(--dur-2) var(--ease-out);
      }
      .team__tags .tag::before { content: ""; width: 7px; height: 7px; border: 1px solid rgba(255, 85, 0, .7); border-radius: 50%; background: rgba(255, 85, 0, .2); }
      @media (prefers-reduced-motion: no-preference) {
        .team__tags .tag { animation: tag-glow 7.2s ease-in-out infinite; }
        .team__tags .tag::before { animation: tag-dot 7.2s ease-in-out infinite; }
        .team__tags .tag:nth-child(2), .team__tags .tag:nth-child(2)::before { animation-delay: 1.2s; }
        .team__tags .tag:nth-child(3), .team__tags .tag:nth-child(3)::before { animation-delay: 2.4s; }
        .team__tags .tag:nth-child(4), .team__tags .tag:nth-child(4)::before { animation-delay: 3.6s; }
        .team__tags .tag:nth-child(5), .team__tags .tag:nth-child(5)::before { animation-delay: 4.8s; }
        .team__tags .tag:nth-child(6), .team__tags .tag:nth-child(6)::before { animation-delay: 6s; }
      }
      @keyframes tag-glow { 0%, 22%, 100% { border-color: var(--line-strong); box-shadow: none; } 8% { border-color: rgba(255, 85, 0, .7); box-shadow: 0 0 18px -4px rgba(255, 85, 0, .6); } }
      @keyframes tag-dot { 0%, 22%, 100% { background: rgba(255, 85, 0, .2); box-shadow: none; } 8% { background: #ff5500; box-shadow: 0 0 8px #ff5500; } }
      @media (hover: hover) and (pointer: fine) {
        .team__tags .tag:hover { border-color: rgba(255, 85, 0, .7); box-shadow: 0 0 22px -6px rgba(255, 85, 0, .7); transform: translateY(-2px); }
      }

      /* Template genérico × Projeto Tirvo */
      .compare caption { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); }
      .compare__title { display: flex; flex-wrap: wrap; align-items: center; gap: .3em .5em; }
      .compare__vs-a { color: var(--text-tertiary); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .25); text-decoration-thickness: 2px; }
      .compare__vs-x { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--text-tertiary); font-size: .6em; }
      .compare__vs-b { display: inline-flex; align-items: center; gap: .35em; color: var(--text-primary); }
      .compare__logo { width: auto; height: 1.05em; margin-top: -.2em; filter: drop-shadow(0 0 16px rgba(255, 85, 0, .35)); }
      .compare__generic { filter: grayscale(1); opacity: .9; }
      .compare__generic .compare__cell { font-size: .9rem; }
      .compare td.compare__tirvo, .compare th.compare__tirvo {
        position: relative;
        border-left: 1px solid rgba(255, 85, 0, .45);
        border-right: 1px solid rgba(255, 85, 0, .45);
        background: linear-gradient(90deg, rgba(255, 85, 0, .1), rgba(255, 85, 0, .03));
      }
      .compare thead th.compare__tirvo { border-top: 1px solid rgba(255, 85, 0, .55); border-radius: 12px 12px 0 0; background: linear-gradient(180deg, rgba(255, 85, 0, .22), rgba(255, 85, 0, .08)); }
      .compare tbody tr:last-child td.compare__tirvo { border-bottom: 1px solid rgba(255, 85, 0, .45); }
      .compare__head { display: inline-flex; align-items: center; gap: .6rem; color: #ffb27d; font-size: .8rem; }
      .compare__badge { padding: .12rem .45rem; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-size: .6rem; letter-spacing: .1em; }
      .compare__tirvo .compare__cell { font-size: 1.02rem; font-weight: 500; }
      .compare__tirvo .icon {
        box-sizing: content-box;
        padding: 3px;
        border-radius: 50%;
        background: rgba(255, 85, 0, .16);
        box-shadow: 0 0 12px rgba(255, 85, 0, .45);
      }
      /* Reflexo de energia descendo pela coluna da Tirvo */
      @media (prefers-reduced-motion: no-preference) {
        .compare td.compare__tirvo::after {
          content: "";
          position: absolute;
          inset: 0;
          pointer-events: none;
          background: linear-gradient(180deg, transparent 0%, rgba(255, 140, 70, .16) 50%, transparent 100%);
          opacity: 0;
          animation: col-energy 7s ease-in-out infinite;
        }
        .compare tbody tr:nth-child(2) td.compare__tirvo::after { animation-delay: .35s; }
        .compare tbody tr:nth-child(3) td.compare__tirvo::after { animation-delay: .7s; }
        .compare tbody tr:nth-child(4) td.compare__tirvo::after { animation-delay: 1.05s; }
        .compare tbody tr:nth-child(5) td.compare__tirvo::after { animation-delay: 1.4s; }
        .compare tbody tr:nth-child(6) td.compare__tirvo::after { animation-delay: 1.75s; }
        .compare tbody tr:nth-child(7) td.compare__tirvo::after { animation-delay: 2.1s; }
      }
      @keyframes col-energy { 0%, 40%, 100% { opacity: 0; } 20% { opacity: 1; } }
      @media (max-width: 767.98px) {
        .compare td.compare__tirvo { border: 0; border-left: 2px solid var(--accent); }
        .compare tbody tr:last-child td.compare__tirvo { border-bottom: 0; }
      }

      /* Fases do método em blocos */
      .timeline__body {
        position: relative;
        padding: 1.2rem 1.25rem 1.3rem;
        border: 1px solid var(--line);
        border-radius: var(--r-lg);
        background: linear-gradient(170deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01) 55%), var(--bg-raised);
        box-shadow: var(--inner-hl);
        transition: border-color var(--dur-2) ease, transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) ease;
      }
      .timeline__body::before {
        content: "";
        position: absolute;
        left: 1.25rem;
        right: 1.25rem;
        top: -1px;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--accent), transparent);
        opacity: .55;
      }
      .timeline__body h3 { display: flex; align-items: center; gap: .6rem; font-size: 1.3rem; letter-spacing: -.02em; }
      .timeline__body h3::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-strong), transparent); }
      @media (hover: hover) and (pointer: fine) {
        .timeline__body:hover { border-color: rgba(255, 85, 0, .38); transform: translateY(-3px); box-shadow: var(--inner-hl), 0 24px 50px -28px rgba(255, 85, 0, .45); }
      }

      /* Selos: título da faixa em destaque e cada selo em bloco */
      .seals-head p {
        display: inline-flex;
        align-items: center;
        gap: .6rem;
        padding: .45rem 1.1rem .45rem .45rem;
        border: 1px solid rgba(255, 85, 0, .4);
        border-radius: var(--r-pill);
        background: linear-gradient(180deg, rgba(255, 85, 0, .14), rgba(255, 85, 0, .03));
        color: var(--text-primary);
        font-family: var(--font-sans);
        font-size: clamp(1rem, .9rem + .5vw, 1.25rem);
        font-weight: 580;
        letter-spacing: -.01em;
        text-transform: none;
        box-shadow: 0 14px 34px -20px rgba(255, 85, 0, .7);
      }
      .seals-head__icon { display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; background: var(--accent); color: var(--on-accent); }
      .seals-head__icon .icon { width: 1.05em; height: 1.05em; }
      .seals-head__amp { color: var(--text-tertiary); font-family: var(--font-serif); font-style: italic; font-weight: 400; }
      .seals-head span:last-child { position: relative; overflow: hidden; }
      .seal {
        padding: 1.25rem 1.2rem 1.35rem;
        border: 1px solid var(--line);
        border-radius: var(--r-lg);
        background: radial-gradient(120% 70% at 50% 0%, rgba(255, 85, 0, .07), transparent 60%), var(--bg-raised);
        transition: border-color var(--dur-2) ease, transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) ease;
      }
      .seal h3 { display: flex; align-items: center; gap: .5rem; }
      .seal h3::before { content: ""; width: 14px; height: 2px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 8px rgba(255, 85, 0, .8); }
      @media (hover: hover) and (pointer: fine) {
        .seal:hover { border-color: rgba(255, 85, 0, .38); transform: translateY(-3px); box-shadow: 0 24px 50px -28px rgba(255, 85, 0, .45); }
      }

      @media (prefers-reduced-motion: reduce) {
        .hl-under::after, .hl-mark::before, .hl-strike::after, .hl-peak::after { transition: none; }
      }

      /* ==========================================================
         SUBMENU DE SERVIÇOS E CARTÕES-RESUMO DA PÁGINA INICIAL
         ========================================================== */
      .nav__link { white-space: nowrap; }
      /* Oito itens no menu: nas larguras intermediárias a numeração sai e o espaçamento aperta */
      @media (min-width: 1024px) and (max-width: 1339.98px) {
        .nav__num { display: none; }
        .nav__link { padding-inline: .7rem; font-size: .84rem; }
        .header__inner { gap: 1rem; }
      }
      .nav__item--sub { position: relative; }
      .nav__sub-toggle { cursor: pointer; }
      .nav__chev { width: 14px; height: 14px; margin-left: -.1rem; color: var(--text-tertiary); transform: rotate(90deg); transition: transform var(--dur-2) var(--ease-out), color var(--dur-2) ease; }
      .nav__item--sub.is-open .nav__chev { transform: rotate(-90deg); color: var(--accent); }
      .nav__item--sub.is-open .nav__sub-toggle { color: var(--text-primary); }
      .subnav {
        position: absolute;
        top: calc(100% + 14px);
        left: 50%;
        z-index: 5;
        width: min(430px, 92vw);
        padding: .55rem;
        border: 1px solid var(--line-strong);
        border-radius: var(--r-lg);
        background: linear-gradient(180deg, rgba(255, 85, 0, .05), transparent 40%), #0c0c0f;
        -webkit-backdrop-filter: blur(18px) saturate(140%);
        backdrop-filter: blur(18px) saturate(140%);
        box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .95), 0 0 0 1px rgba(0, 0, 0, .4), 0 20px 60px -40px rgba(255, 85, 0, .6);
        opacity: 0;
        transform: translate(-50%, -8px);
        transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
      }
      .subnav::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
      .subnav::after { content: ""; position: absolute; left: 20%; right: 20%; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
      .subnav.is-open { opacity: 1; transform: translate(-50%, 0); }
      .subnav__head { display: flex; justify-content: space-between; padding: .45rem .7rem .6rem; color: var(--text-tertiary); font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; }
      .subnav__list { display: grid; gap: .1rem; }
      .subnav__link {
        display: grid;
        grid-template-columns: 38px 1fr auto;
        align-items: center;
        gap: .8rem;
        min-height: 58px;
        padding: .45rem .7rem;
        border-radius: var(--r-md);
        color: var(--text-primary);
        text-decoration: none;
        transition: background-color var(--dur-1) ease;
      }
      .subnav__link > .icon { width: 38px; height: 38px; padding: 9px; box-sizing: border-box; border: 1px solid rgba(255, 85, 0, .3); border-radius: 10px; background: radial-gradient(circle at 50% 30%, rgba(255, 85, 0, .2), rgba(255, 85, 0, .04)); color: var(--accent); }
      .subnav__text { display: grid; gap: .1rem; }
      .subnav__text b { font-size: .95rem; font-weight: 560; letter-spacing: -.01em; }
      .subnav__text span { color: var(--text-tertiary); font-size: .8rem; }
      .subnav__idx { color: var(--text-tertiary); font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; transition: color var(--dur-1) ease, transform var(--dur-2) var(--ease-out); }
      .subnav__link:hover, .subnav__link:focus-visible { background: rgba(255, 85, 0, .08); }
      .subnav__link:hover .subnav__idx, .subnav__link:focus-visible .subnav__idx { color: var(--accent); transform: translateX(-3px); }
      .subnav__link.is-active { background: rgba(255, 85, 0, .1); }
      .subnav__link:focus-visible { outline-offset: -2px; }

      /* Menu do celular: sanfona de serviços */
      .menu__sub-toggle { width: 100%; text-align: left; font: inherit; }
      .menu__sub-toggle .menu__arrow { transform: rotate(90deg); }
      .menu__sub-toggle[aria-expanded="true"] .menu__arrow { transform: rotate(-90deg); color: var(--accent); }
      .menu__sub { display: grid; gap: .15rem; margin: -.2rem 0 .8rem 2.85rem; padding: .3rem 0 .3rem .9rem; border-left: 1px solid rgba(255, 85, 0, .4); opacity: 0; transform: translateY(-6px); transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
      .menu__sub.is-open { opacity: 1; transform: none; }
      .menu__sub[hidden] { display: none; }
      .menu__sublink { display: flex; align-items: center; gap: .7rem; min-height: 46px; color: var(--text-secondary); font-size: 1.05rem; text-decoration: none; }
      .menu__sublink .icon { width: 20px; height: 20px; color: var(--accent); }
      .menu__sublink:hover, .menu__sublink.is-active { color: var(--text-primary); }

      /* Cartões-resumo dos serviços: o cartão inteiro leva à página */
      .hsvc-grid { display: grid; gap: 1rem; margin-top: clamp(2rem, 4vw, 3rem); }
      @media (min-width: 720px) { .hsvc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
      @media (min-width: 1100px) {
        .hsvc-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
        .hsvc-grid > :nth-child(-n+2) { grid-column: span 3; }
        .hsvc-grid > :nth-child(n+3) { grid-column: span 2; }
      }
      .hsvc { position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden; }
      .hsvc__media { position: relative; height: 190px; overflow: hidden; border-bottom: 1px solid var(--line); background: radial-gradient(110% 80% at 50% 0%, rgba(255, 85, 0, .1), transparent 62%), var(--bg-base); }
      .hsvc__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
      .hsvc__media--frame { padding: 14px 14px 0; }
      .hsvc__media--frame img { height: calc(100% - 26px); border-radius: 0 0 6px 6px; }
      .hsvc__bar { display: flex; align-items: center; gap: .3rem; height: 26px; padding: 0 .6rem; border: 1px solid var(--line-strong); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--bg-elevated); color: var(--text-tertiary); font-family: var(--font-mono); font-size: .6rem; }
      .hsvc__bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
      .hsvc__bar i:first-child { background: #ff5f57; } .hsvc__bar i:nth-child(2) { background: #febc2e; } .hsvc__bar i:nth-child(3) { background: #28c840; }
      .hsvc__bar span { margin-left: .5rem; }
      .hsvc__media--flow { display: flex; align-items: center; justify-content: center; gap: .35rem; padding: 0 1rem; }
      .hsvc__media--flow span { display: grid; justify-items: center; gap: .35rem; padding: .7rem .5rem; min-width: 70px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--bg-elevated); font-size: .74rem; font-weight: 500; }
      .hsvc__media--flow span .icon { width: 20px; height: 20px; color: var(--accent); }
      .hsvc__media--flow i { position: relative; flex: 1; max-width: 40px; height: 2px; background: var(--line-strong); overflow: hidden; }
      .hsvc__media--flow i::after { content: ""; position: absolute; top: 0; left: -40%; width: 40%; height: 100%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
      .hsvc__media--logos { display: flex; align-items: center; justify-content: center; gap: 1.2rem; background: radial-gradient(70% 70% at 50% 50%, rgba(233, 180, 90, .12), transparent 70%), #08080a; }
      .hsvc__logo { width: 84px; height: 84px; background-repeat: no-repeat; background-size: 600% 600%; background-position: 0 0; }
      .hsvc__logo--vetra { background-image: url("../vitrine-logo-vetra.webp"); }
      .hsvc__logo--nativa { background-image: url("../vitrine-logo-nativa.webp"); }
      .hsvc__logo--kinto { background-image: url("../vitrine-logo-kinto.webp"); }
      .hsvc__media--pieces { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; padding: 14px; }
      .hsvc__media--pieces img { border: 1px solid var(--line-strong); border-radius: 10px; }
      .hsvc__media--agent { display: grid; align-content: center; gap: .45rem; padding: 1rem 1.2rem; }
      .hsvc__task { padding: .55rem .75rem; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--bg-elevated); font-size: .8rem; }
      .hsvc__step { display: flex; align-items: center; gap: .55rem; color: var(--text-secondary); font-size: .8rem; }
      .hsvc__step::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
      .hsvc__body { display: grid; align-content: start; gap: .75rem; padding: 1.35rem 1.4rem 1.5rem; }
      .hsvc__top { display: flex; align-items: center; justify-content: space-between; color: var(--text-tertiary); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; }
      .hsvc__top .icon { width: 22px; height: 22px; color: var(--accent); }
      .hsvc h3 { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); }
      .hsvc__body > p:not(.hsvc__top) { color: var(--text-secondary); font-size: .95rem; line-height: 1.6; }
      .hsvc__tags { display: flex; flex-wrap: wrap; gap: .35rem; }
      .hsvc__tags li { padding: .25rem .6rem; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--text-secondary); font-family: var(--font-mono); font-size: .66rem; letter-spacing: .04em; }
      .hsvc__go, .teaser__go {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        min-height: 44px;
        margin-top: .2rem;
        color: var(--text-primary);
        font-weight: 560;
        text-decoration: none;
      }
      .hsvc__go .icon, .teaser__go .icon { width: 18px; height: 18px; color: var(--accent); transition: transform var(--dur-2) var(--ease-out); }
      /* O link se estende pelo cartão inteiro: clicar em qualquer parte leva à página */
      .hsvc__go::after, .teaser:not(.teaser--inline) .teaser__go::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
      .hsvc__go:focus-visible, .teaser__go:focus-visible { outline: none; }
      .hsvc:has(.hsvc__go:focus-visible), .teaser:has(.teaser__go:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
      @media (hover: hover) and (pointer: fine) {
        .hsvc:hover .hsvc__media img { transform: scale(1.04); }
        .hsvc:hover .hsvc__go .icon, .teaser:hover .teaser__go .icon, .teaser__go--inline:hover .icon { transform: translateX(4px); }
        .hsvc:hover, .teaser:hover { border-color: rgba(255, 85, 0, .45); }
      }
      @media (prefers-reduced-motion: no-preference) {
        .hsvc__media--flow i::after { animation: hsvc-run 2.4s linear infinite; }
        .hsvc__media--flow i:nth-of-type(2)::after { animation-delay: .6s; }
        .hsvc__media--flow i:nth-of-type(3)::after { animation-delay: 1.2s; }
        .hsvc__logo { animation: hsvc-spin 3.6s steps(1) infinite; }
        .hsvc__logo--nativa { animation-delay: -1.2s; }
        .hsvc__logo--kinto { animation-delay: -2.4s; }
      }
      @keyframes hsvc-run { to { left: 110%; } }
      @keyframes hsvc-spin {
        0% { background-position: 0 0; } 8% { background-position: 20% 0; } 16% { background-position: 40% 0; } 25% { background-position: 60% 0; }
        33% { background-position: 80% 0; } 41% { background-position: 100% 0; } 50% { background-position: 0 20%; } 58% { background-position: 20% 20%; }
        66% { background-position: 40% 20%; } 75% { background-position: 60% 20%; } 83% { background-position: 80% 20%; } 91% { background-position: 100% 20%; }
      }

      /* Blocos-resumo de equipe, método e Nexus */
      .teaser { position: relative; display: grid; gap: clamp(1.75rem, 4vw, 3rem); padding: clamp(1.5rem, 4vw, 3rem); align-items: center; }
      @media (min-width: 1024px) { .teaser { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
      .teaser__copy { display: grid; gap: 1.2rem; justify-items: start; }
      .teaser .teaser__copy > * { grid-column: 1 / -1; grid-row: auto; }
      .teaser__copy .title { max-width: 14em; }
      .teaser__copy .lead { max-width: 34em; }
      .teaser__tags { display: flex; flex-wrap: wrap; gap: .5rem; align-content: center; }
      .teaser__phases { display: grid; gap: .7rem; }
      .teaser__phases li { display: grid; grid-template-columns: auto 1fr; gap: .1rem .9rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-base); color: var(--text-secondary); font-size: .92rem; line-height: 1.5; }
      .teaser__phases span { grid-row: span 2; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 1px solid rgba(255, 85, 0, .45); border-radius: 50%; background: radial-gradient(circle at 50% 30%, rgba(255, 85, 0, .28), rgba(255, 85, 0, .08)); color: #ff7a33; font-family: var(--font-mono); font-size: .72rem; }
      .teaser__phases b { color: var(--text-primary); font-size: 1.05rem; font-weight: 560; }
      .teaser__steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; width: 100%; max-width: 30rem; }
      .teaser__steps li { padding: .65rem .8rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-base); font-size: .9rem; }
      .teaser__steps span { display: block; color: var(--accent); font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; }
      .teaser__shot { overflow: hidden; border-radius: 12px; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .95), 0 30px 70px -45px rgba(255, 85, 0, .5); }
      .teaser__shot img { width: 100%; height: auto; border: 1px solid var(--line-strong); border-top: 0; border-radius: 0 0 12px 12px; }
      .teaser__go--inline { position: relative; }
      .nexus--teaser { background: radial-gradient(70% 60% at 80% 20%, rgba(255, 85, 0, .08), transparent 60%); }
        /* Fundo único com a logo em marca d'água: fixo atrás do conteúdo, a página rola por cima.
         O topo e o rodapé têm fundo próprio e cobrem o desenho. */
      body[data-bg]::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-408.97 -1633.04 4089.72 2556.08' preserveAspectRatio='xMidYMid meet'%3E%3Cpath d='M-6408.97 -746.5H9680.75 M-6408.97 -660.2H9680.75 M-6408.97 -534.8H9680.75 M-6408.97 0H9680.75 M-6408.97 36.5H9680.75 M0 -7633.04V6923.04 M783 -7633.04V6923.04 M1161.02 -7633.04V6923.04 M3271.78 -7633.04V6923.04 M1553.02 -7633.04V6923.04 M1803.02 -7633.04V6923.04 M2165.02 -7633.04V6923.04 M2701.02 -7633.04V6923.04' stroke='rgba(255,255,255,.032)' stroke-width='1' vector-effect='non-scaling-stroke' fill='none'/%3E%3Cpath d='M-6408.97 -355H9680.75M391.5 -7633.04V6923.04' stroke='rgba(255,85,0,.07)' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='391.5' cy='-355' r='620' stroke='rgba(255,255,255,.032)' stroke-width='1' vector-effect='non-scaling-stroke' fill='none'/%3E%3Ccircle cx='391.5' cy='-355' r='980' stroke='rgba(255,255,255,.032)' stroke-width='1' vector-effect='non-scaling-stroke' fill='none' stroke-dasharray='2 7'/%3E%3Ccircle cx='391.5' cy='-355' r='1500' stroke='rgba(255,255,255,.032)' stroke-width='1' vector-effect='non-scaling-stroke' fill='none'/%3E%3Ccircle cx='391.5' cy='-355' r='2200' stroke='rgba(255,255,255,.032)' stroke-width='1' vector-effect='non-scaling-stroke' fill='none' stroke-dasharray='2 7'/%3E%3Ccircle cx='391.5' cy='-355' r='3100' stroke='rgba(255,255,255,.032)' stroke-width='1' vector-effect='non-scaling-stroke' fill='none'/%3E%3Ccircle cx='391.5' cy='-355' r='4200' stroke='rgba(255,255,255,.032)' stroke-width='1' vector-effect='non-scaling-stroke' fill='none' stroke-dasharray='2 7'/%3E%3Cpath d='M-3000 36.5v36 M-2900 36.5v16 M-2800 36.5v16 M-2700 36.5v16 M-2600 36.5v16 M-2500 36.5v36 M-2400 36.5v16 M-2300 36.5v16 M-2200 36.5v16 M-2100 36.5v16 M-2000 36.5v36 M-1900 36.5v16 M-1800 36.5v16 M-1700 36.5v16 M-1600 36.5v16 M-1500 36.5v36 M-1400 36.5v16 M-1300 36.5v16 M-1200 36.5v16 M-1100 36.5v16 M-1000 36.5v36 M-900 36.5v16 M-800 36.5v16 M-700 36.5v16 M-600 36.5v16 M-500 36.5v36 M-400 36.5v16 M-300 36.5v16 M-200 36.5v16 M-100 36.5v16 M0 36.5v36 M100 36.5v16 M200 36.5v16 M300 36.5v16 M400 36.5v16 M500 36.5v36 M600 36.5v16 M700 36.5v16 M800 36.5v16 M900 36.5v16 M1000 36.5v36 M1100 36.5v16 M1200 36.5v16 M1300 36.5v16 M1400 36.5v16 M1500 36.5v36 M1600 36.5v16 M1700 36.5v16 M1800 36.5v16 M1900 36.5v16 M2000 36.5v36 M2100 36.5v16 M2200 36.5v16 M2300 36.5v16 M2400 36.5v16 M2500 36.5v36 M2600 36.5v16 M2700 36.5v16 M2800 36.5v16 M2900 36.5v16 M3000 36.5v36 M3100 36.5v16 M3200 36.5v16 M3300 36.5v16 M3400 36.5v16 M3500 36.5v36 M3600 36.5v16 M3700 36.5v16 M3800 36.5v16 M3900 36.5v16 M4000 36.5v36 M4100 36.5v16 M4200 36.5v16 M4300 36.5v16 M4400 36.5v16 M4500 36.5v36 M4600 36.5v16 M4700 36.5v16 M4800 36.5v16 M4900 36.5v16 M5000 36.5v36 M5100 36.5v16 M5200 36.5v16 M5300 36.5v16 M5400 36.5v16 M5500 36.5v36 M5600 36.5v16 M5700 36.5v16 M5800 36.5v16 M5900 36.5v16 M6000 36.5v36 M6100 36.5v16 M6200 36.5v16 M6300 36.5v16 M6400 36.5v16 M6500 36.5v36 M6600 36.5v16 M6700 36.5v16 M6800 36.5v16 M6900 36.5v16' stroke='rgba(255,255,255,.032)' stroke-width='1' vector-effect='non-scaling-stroke' fill='none'/%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23ff5500' stop-opacity='.085'/%3E%3Cstop offset='1' stop-color='%23ff5500' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='w' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.045'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='.006'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='391.5' cy='-355' r='630' fill='url(%23g)'/%3E%3Ccircle cx='391.5' cy='-355' r='90' fill='rgba(255,85,0,.2)'/%3E%3Ccircle cx='391.5' cy='-355' r='171' fill='none' stroke='rgba(255,85,0,.22)' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3Cg transform='translate(-58.5 -805) scale(9)'%3E%3Cpath d='M6.5 35.5V6.5H35.5V13.5H13.5V35.5Z M93.5 35.5V6.5H64.5V13.5H86.5V35.5Z M6.5 64.5V93.5H35.5V86.5H13.5V64.5Z M93.5 64.5V93.5H64.5V86.5H86.5V64.5Z' fill='rgba(255,255,255,.03)' stroke='rgba(255,255,255,.1)' stroke-width='1.3' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M48.5 22h3v12h-3Z M48.5 66h3v12h-3Z M22 48.5h12v3h-12Z M66 48.5h12v3h-12Z' fill='none' stroke='rgba(255,255,255,.1)' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3Cg transform='translate(1161.02 0)' fill='url(%23w)' stroke='rgba(255,255,255,.1)' stroke-width='1.3' vector-effect='non-scaling-stroke'%3E%3Cpath transform='translate(0 0)' d='M285.5 0Q204.4 0 166.3 -37.6Q128.2 -75.1 128.2 -156.2V-660.2H265V-170.6Q265 -132.7 281.2 -118.5Q297.5 -104.2 331 -104.2H406V0ZM43.5 -430.6V-534.8H406V-430.6Z'/%3E%3Cpath transform='translate(392 0)' d='M68.5 0V-534.8H205.3V0ZM66 -603.9V-720.1H207.8V-603.9Z'/%3E%3Cpath transform='translate(642 0)' d='M68.5 0V-534.8H197.2L202.2 -383.5L191.3 -386Q203.7 -464.6 236.9 -499.7Q270.2 -534.8 328.1 -534.8H377.2V-419.3H327.7Q286.2 -419.3 259.3 -407.7Q232.3 -396 218.8 -371.1Q205.3 -346.2 205.3 -305.1V0Z'/%3E%3Cpath transform='translate(1004 0)' d='M216.4 0 21 -534.8H164.9L297.3 -137.8L429.2 -534.8H573L377.2 0Z'/%3E%3Cpath transform='translate(1540 0)' d='M304.8 12Q224.6 12 164.5 -22.5Q104.5 -57 71.4 -119.9Q38.2 -182.9 38.2 -267.4Q38.2 -352.4 71.4 -414.9Q104.5 -477.4 164.5 -512.1Q224.6 -546.8 304.8 -546.8Q385 -546.8 444.7 -512.1Q504.5 -477.4 537.6 -414.9Q570.8 -352.4 570.8 -267.4Q570.8 -182.9 537.6 -119.9Q504.5 -57 444.7 -22.5Q385 12 304.8 12ZM304.8 -96.3Q364.3 -96.3 396.9 -141.4Q429.5 -186.4 429.5 -267.4Q429.5 -347.9 396.9 -393.2Q364.3 -438.5 304.8 -438.5Q245.2 -438.5 212.4 -393.2Q179.5 -347.9 179.5 -267.4Q179.5 -186.4 212.4 -141.4Q245.2 -96.3 304.8 -96.3Z'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
      }
      @media (max-aspect-ratio: 1/1) {
        body[data-bg]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-895.55 -2193.64 2574.1 4890.78' preserveAspectRatio='xMidYMid meet'%3E%3Cpath d='M-6895.55 -746.5H7678.55 M-6895.55 503.5H7678.55 M-6895.55 -660.2H7678.55 M-6895.55 589.8H7678.55 M-6895.55 -534.8H7678.55 M-6895.55 715.2H7678.55 M-6895.55 0H7678.55 M-6895.55 1250H7678.55 M-6895.55 36.5H7678.55 M-6895.55 1286.5H7678.55 M0 -8193.64V8697.14 M783 -8193.64V8697.14 M1161.02 -8193.64V8697.14 M3271.78 -8193.64V8697.14 M1553.02 -8193.64V8697.14 M1803.02 -8193.64V8697.14 M2165.02 -8193.64V8697.14 M2701.02 -8193.64V8697.14' stroke='rgba(255,255,255,.032)' stroke-width='1' vector-effect='non-scaling-stroke' fill='none'/%3E%3Cpath d='M-6895.55 -355H7678.55M391.5 -8193.64V8697.14' stroke='rgba(255,85,0,.07)' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='391.5' cy='-355' r='620' stroke='rgba(255,255,255,.032)' stroke-width='1' vector-effect='non-scaling-stroke' fill='none'/%3E%3Ccircle cx='391.5' cy='-355' r='980' stroke='rgba(255,255,255,.032)' stroke-width='1' vector-effect='non-scaling-stroke' fill='none' stroke-dasharray='2 7'/%3E%3Ccircle cx='391.5' cy='-355' r='1500' stroke='rgba(255,255,255,.032)' stroke-width='1' vector-effect='non-scaling-stroke' fill='none'/%3E%3Ccircle cx='391.5' cy='-355' r='2200' stroke='rgba(255,255,255,.032)' stroke-width='1' vector-effect='non-scaling-stroke' fill='none' stroke-dasharray='2 7'/%3E%3Ccircle cx='391.5' cy='-355' r='3100' stroke='rgba(255,255,255,.032)' stroke-width='1' vector-effect='non-scaling-stroke' fill='none'/%3E%3Ccircle cx='391.5' cy='-355' r='4200' stroke='rgba(255,255,255,.032)' stroke-width='1' vector-effect='non-scaling-stroke' fill='none' stroke-dasharray='2 7'/%3E%3Cpath d='M-3000 36.5v36 M-2900 36.5v16 M-2800 36.5v16 M-2700 36.5v16 M-2600 36.5v16 M-2500 36.5v36 M-2400 36.5v16 M-2300 36.5v16 M-2200 36.5v16 M-2100 36.5v16 M-2000 36.5v36 M-1900 36.5v16 M-1800 36.5v16 M-1700 36.5v16 M-1600 36.5v16 M-1500 36.5v36 M-1400 36.5v16 M-1300 36.5v16 M-1200 36.5v16 M-1100 36.5v16 M-1000 36.5v36 M-900 36.5v16 M-800 36.5v16 M-700 36.5v16 M-600 36.5v16 M-500 36.5v36 M-400 36.5v16 M-300 36.5v16 M-200 36.5v16 M-100 36.5v16 M0 36.5v36 M100 36.5v16 M200 36.5v16 M300 36.5v16 M400 36.5v16 M500 36.5v36 M600 36.5v16 M700 36.5v16 M800 36.5v16 M900 36.5v16 M1000 36.5v36 M1100 36.5v16 M1200 36.5v16 M1300 36.5v16 M1400 36.5v16 M1500 36.5v36 M1600 36.5v16 M1700 36.5v16 M1800 36.5v16 M1900 36.5v16 M2000 36.5v36 M2100 36.5v16 M2200 36.5v16 M2300 36.5v16 M2400 36.5v16 M2500 36.5v36 M2600 36.5v16 M2700 36.5v16 M2800 36.5v16 M2900 36.5v16 M3000 36.5v36 M3100 36.5v16 M3200 36.5v16 M3300 36.5v16 M3400 36.5v16 M3500 36.5v36 M3600 36.5v16 M3700 36.5v16 M3800 36.5v16 M3900 36.5v16 M4000 36.5v36 M4100 36.5v16 M4200 36.5v16 M4300 36.5v16 M4400 36.5v16 M4500 36.5v36 M4600 36.5v16 M4700 36.5v16 M4800 36.5v16 M4900 36.5v16 M5000 36.5v36 M5100 36.5v16 M5200 36.5v16 M5300 36.5v16 M5400 36.5v16 M5500 36.5v36 M5600 36.5v16 M5700 36.5v16 M5800 36.5v16 M5900 36.5v16 M6000 36.5v36 M6100 36.5v16 M6200 36.5v16 M6300 36.5v16 M6400 36.5v16 M6500 36.5v36 M6600 36.5v16 M6700 36.5v16 M6800 36.5v16 M6900 36.5v16' stroke='rgba(255,255,255,.032)' stroke-width='1' vector-effect='non-scaling-stroke' fill='none'/%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23ff5500' stop-opacity='.085'/%3E%3Cstop offset='1' stop-color='%23ff5500' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='w' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.045'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='.006'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='391.5' cy='-355' r='630' fill='url(%23g)'/%3E%3Ccircle cx='391.5' cy='-355' r='90' fill='rgba(255,85,0,.2)'/%3E%3Ccircle cx='391.5' cy='-355' r='171' fill='none' stroke='rgba(255,85,0,.22)' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3Cg transform='translate(-58.5 -805) scale(9)'%3E%3Cpath d='M6.5 35.5V6.5H35.5V13.5H13.5V35.5Z M93.5 35.5V6.5H64.5V13.5H86.5V35.5Z M6.5 64.5V93.5H35.5V86.5H13.5V64.5Z M93.5 64.5V93.5H64.5V86.5H86.5V64.5Z' fill='rgba(255,255,255,.03)' stroke='rgba(255,255,255,.1)' stroke-width='1.3' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M48.5 22h3v12h-3Z M48.5 66h3v12h-3Z M22 48.5h12v3h-12Z M66 48.5h12v3h-12Z' fill='none' stroke='rgba(255,255,255,.1)' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3Cg transform='translate(-1824.9 1250)'%3E%3Cg transform='translate(1161.02 0)' fill='url(%23w)' stroke='rgba(255,255,255,.1)' stroke-width='1.3' vector-effect='non-scaling-stroke'%3E%3Cpath transform='translate(0 0)' d='M285.5 0Q204.4 0 166.3 -37.6Q128.2 -75.1 128.2 -156.2V-660.2H265V-170.6Q265 -132.7 281.2 -118.5Q297.5 -104.2 331 -104.2H406V0ZM43.5 -430.6V-534.8H406V-430.6Z'/%3E%3Cpath transform='translate(392 0)' d='M68.5 0V-534.8H205.3V0ZM66 -603.9V-720.1H207.8V-603.9Z'/%3E%3Cpath transform='translate(642 0)' d='M68.5 0V-534.8H197.2L202.2 -383.5L191.3 -386Q203.7 -464.6 236.9 -499.7Q270.2 -534.8 328.1 -534.8H377.2V-419.3H327.7Q286.2 -419.3 259.3 -407.7Q232.3 -396 218.8 -371.1Q205.3 -346.2 205.3 -305.1V0Z'/%3E%3Cpath transform='translate(1004 0)' d='M216.4 0 21 -534.8H164.9L297.3 -137.8L429.2 -534.8H573L377.2 0Z'/%3E%3Cpath transform='translate(1540 0)' d='M304.8 12Q224.6 12 164.5 -22.5Q104.5 -57 71.4 -119.9Q38.2 -182.9 38.2 -267.4Q38.2 -352.4 71.4 -414.9Q104.5 -477.4 164.5 -512.1Q224.6 -546.8 304.8 -546.8Q385 -546.8 444.7 -512.1Q504.5 -477.4 537.6 -414.9Q570.8 -352.4 570.8 -267.4Q570.8 -182.9 537.6 -119.9Q504.5 -57 444.7 -22.5Q385 12 304.8 12ZM304.8 -96.3Q364.3 -96.3 396.9 -141.4Q429.5 -186.4 429.5 -267.4Q429.5 -347.9 396.9 -393.2Q364.3 -438.5 304.8 -438.5Q245.2 -438.5 212.4 -393.2Q179.5 -347.9 179.5 -267.4Q179.5 -186.4 212.4 -141.4Q245.2 -96.3 304.8 -96.3Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
      }
      /* O fundo liso passa para o html, para o desenho ficar entre ele e o conteúdo */
      body[data-bg] { background-color: transparent; }
      /* Faixas com fundo próprio ficam translúcidas, para a marca d'água aparecer de leve por baixo */
      body[data-bg] .p-sec--raised { background: linear-gradient(rgba(15, 15, 18, .72), rgba(9, 9, 11, .55)); }
      body[data-bg] .nexus, body[data-bg] .ab-refuse, body[data-bg] .mk-band { background-color: rgba(0, 0, 0, .62); }
      body[data-bg] .nf { background-color: transparent; }
      @media print { body[data-bg]::before { display: none; } }

/* ==========================================================
   PÁGINAS INTERNAS · componentes próprios (serviços, privacidade)
   ========================================================== */
main { display: block; }
[id] { scroll-margin-top: calc(var(--header-h) + 24px); }

/* ---------- Topo da página ---------- */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: calc(var(--header-h) + clamp(2.5rem, 7vw, 5.5rem)) 0 clamp(3.5rem, 8vw, 6.5rem);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(70% 60% at 85% 0%, rgba(255, 85, 0, .13), transparent 65%),
    radial-gradient(50% 50% at 0% 100%, rgba(255, 85, 0, .06), transparent 70%),
    var(--bg-base);
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 20%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 70% at 70% 20%, #000 20%, transparent 75%);
}
.page-hero__grid { display: grid; gap: clamp(2.5rem, 6vw, 4rem); align-items: center; }
@media (min-width: 1024px) {
  .page-hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
  .page-hero--solo .page-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .page-hero--solo .page-hero__copy { max-width: 60rem; }
}
.page-hero__copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; justify-items: start; }
@media (max-width: 479.98px) {
  .page-hero__actions .btn, .cta-band__actions .btn { white-space: normal; text-align: center; }
}
.page-hero__grid > *, .p-sec__head > *, .faq-wrap > *, .deliver > *, .nexus-shot > *, .legal > * { min-width: 0; }
.page-hero .label { white-space: normal; }
.page-hero__title {
  font-size: clamp(2.35rem, 1.2rem + 4.4vw, 5rem);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1;
}
.page-hero__title .serif { font-size: 1.04em; }
.page-hero .lead { max-width: 34em; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .4rem; }
.facts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .3rem; }
.facts li {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .8rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .02);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .06em;
}
.facts li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }

/* Trilha de navegação */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .55rem; color: var(--text-tertiary); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.crumbs a { display: inline-flex; align-items: center; min-height: 32px; color: var(--text-secondary); text-decoration: none; transition: color var(--dur-1) ease; }
.crumbs a:hover { color: var(--accent); }
.crumbs li { display: inline-flex; align-items: center; gap: .55rem; }
.crumbs li + li::before { content: "/"; color: var(--line-strong); }
.crumbs [aria-current] { color: var(--text-primary); }

/* ---------- Seções internas ---------- */
.p-sec { position: relative; isolation: isolate; overflow: clip; padding-block: clamp(4.5rem, 9vw, 7.5rem); }
.p-sec + .p-sec { border-top: 1px solid var(--line-subtle); }
.p-sec--raised { background: linear-gradient(180deg, var(--bg-raised), var(--bg-base)); }
.p-sec__head { display: grid; gap: 1.25rem; margin-bottom: clamp(2.25rem, 5vw, 3.5rem); }
@media (min-width: 1024px) {
  .p-sec__head--split { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: end; column-gap: var(--gutter); }
}
.p-sec__title { font-size: clamp(1.9rem, 1.1rem + 3vw, 3.6rem); font-weight: 580; letter-spacing: -.035em; line-height: 1.04; max-width: 17em; }
.p-sec__head .lead { max-width: 34em; }

/* Modelos de entrega lado a lado nas telas largas */
@media (min-width: 768px) { .p-sec .models { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.p-sec .model { padding: 1.4rem 1.5rem; }
.p-sec .matrix { margin-top: 1.5rem; }

/* ---------- Grade de entregas ---------- */
.feat-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .feat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .feat-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.feat { display: grid; align-content: start; gap: .8rem; padding: 1.5rem 1.4rem 1.6rem; }
.feat__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 85, 0, .35);
  border-radius: 12px;
  background: radial-gradient(circle at 50% 30%, rgba(255, 85, 0, .22), rgba(255, 85, 0, .05));
  color: var(--accent);
  box-shadow: 0 10px 24px -14px rgba(255, 85, 0, .8);
}
.feat__icon .icon { width: 22px; height: 22px; }
.feat h3 { font-size: 1.15rem; }
.feat p { color: var(--text-secondary); font-size: .95rem; line-height: 1.6; }
.feat__num { position: absolute; top: 1.35rem; right: 1.4rem; color: var(--text-tertiary); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; }

/* ---------- Para quem é ---------- */
.fit { display: grid; gap: .75rem; }
@media (min-width: 768px) { .fit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fit li {
  position: relative;
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-raised);
  color: var(--text-secondary);
  line-height: 1.55;
  transition: border-color var(--dur-2) ease, transform var(--dur-2) var(--ease-out);
}
.fit li .icon { flex: none; width: 22px; height: 22px; margin-top: .05rem; padding: 3px; box-sizing: content-box; border-radius: 50%; background: rgba(255, 85, 0, .14); color: var(--accent); }
@media (hover: hover) and (pointer: fine) { .fit li:hover { border-color: rgba(255, 85, 0, .35); transform: translateX(3px); } }

/* ---------- Comparação ---------- */
.versus { display: grid; gap: 1rem; }
@media (min-width: 768px) { .versus { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.versus__col { padding: 1.6rem 1.5rem 1.75rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-raised); }
.versus__col h3 { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.1rem; font-size: 1.2rem; }
.versus__col ul { display: grid; gap: .7rem; }
.versus__col li { display: flex; gap: .7rem; align-items: flex-start; line-height: 1.5; }
.versus__col li .icon { flex: none; width: 18px; height: 18px; margin-top: .15rem; }
.versus__col--off { filter: grayscale(1); }
.versus__col--off h3 { color: var(--text-secondary); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .25); }
.versus__col--off li { color: var(--text-tertiary); }
.versus__col--on {
  border-color: rgba(255, 85, 0, .45);
  background: linear-gradient(160deg, rgba(255, 85, 0, .12), rgba(255, 85, 0, .02) 60%), var(--bg-raised);
  box-shadow: 0 30px 60px -36px rgba(255, 85, 0, .55);
}
.versus__col--on li { color: var(--text-primary); }
.versus__col--on li .icon { color: var(--accent); }
.versus__badge { margin-left: auto; padding: .15rem .55rem; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- Etapas do processo ---------- */
.steps { display: grid; gap: 1rem; counter-reset: step; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.step { position: relative; }
.step .timeline__body { height: 100%; padding-top: 1.1rem; }
.step__n {
  display: inline-grid;
  place-items: center;
  min-width: 2.6rem;
  height: 1.8rem;
  margin-bottom: .8rem;
  padding: 0 .55rem;
  border: 1px solid rgba(255, 85, 0, .45);
  border-radius: var(--r-pill);
  background: radial-gradient(circle at 50% 30%, rgba(255, 85, 0, .28), rgba(255, 85, 0, .08));
  color: #ff7a33;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
}
.step p { color: var(--text-secondary); font-size: .95rem; line-height: 1.6; margin-top: .55rem; }

/* ---------- O que você recebe ---------- */
.deliver {
  display: grid;
  gap: 2rem;
  padding: clamp(1.6rem, 4vw, 2.6rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: radial-gradient(90% 120% at 100% 0%, rgba(255, 85, 0, .1), transparent 55%), var(--bg-raised);
}
@media (min-width: 1024px) { .deliver { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; } }
.deliver h2 { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem); letter-spacing: -.03em; }
.deliver > div > p { margin-top: .8rem; color: var(--text-secondary); }
.checks { display: grid; gap: .7rem; }
@media (min-width: 640px) { .checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.checks li { display: flex; gap: .65rem; align-items: flex-start; color: var(--text-primary); line-height: 1.5; }
.checks .icon { flex: none; width: 18px; height: 18px; margin-top: .15rem; color: var(--accent); }

/* ---------- Princípios / explicações em cartões ---------- */
.trio { display: grid; gap: 1rem; }
@media (min-width: 900px) { .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.trio .seal p { margin-top: .6rem; color: var(--text-secondary); font-size: .95rem; line-height: 1.6; }
.trio .seal__term { display: block; margin-bottom: .35rem; color: var(--accent); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }

/* ---------- FAQ do serviço ---------- */
.faq-wrap { display: grid; gap: 2rem; }
@media (min-width: 1024px) {
  .faq-wrap { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: calc(var(--gutter) * 2); }
  .faq-wrap .faq__aside { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }
}

/* ---------- Chamada final ---------- */
.cta-band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  gap: 1.5rem;
  padding: clamp(2rem, 6vw, 4rem);
  border: 1px solid rgba(255, 85, 0, .35);
  border-radius: calc(var(--r-lg) + 6px);
  background:
    radial-gradient(60% 90% at 100% 0%, rgba(255, 85, 0, .22), transparent 60%),
    radial-gradient(50% 80% at 0% 100%, rgba(255, 85, 0, .08), transparent 70%),
    var(--bg-raised);
  box-shadow: 0 40px 90px -50px rgba(255, 85, 0, .6);
}
@media (min-width: 1024px) { .cta-band { grid-template-columns: minmax(0, 1.4fr) auto; align-items: end; } }
.cta-band h2 { font-size: clamp(1.9rem, 1.1rem + 3vw, 3.4rem); font-weight: 580; letter-spacing: -.035em; line-height: 1.04; }
.cta-band p { margin-top: 1rem; max-width: 34em; color: var(--text-secondary); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (min-width: 1024px) { .cta-band__actions { flex-direction: column; align-items: stretch; } }

/* ---------- Outros serviços ---------- */
.svc-links { display: grid; gap: 1rem; }
@media (min-width: 640px) { .svc-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .svc-links { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.svc-link { display: grid; gap: .8rem; align-content: start; padding: 1.4rem; color: inherit; text-decoration: none; }
.svc-link__top { display: flex; align-items: center; justify-content: space-between; }
.svc-link__top .icon { width: 22px; height: 22px; color: var(--accent); }
.svc-link__idx { color: var(--text-tertiary); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; }
.svc-link h3 { font-size: 1.08rem; }
.svc-link p { color: var(--text-secondary); font-size: .9rem; line-height: 1.55; }
.svc-link__go { display: inline-flex; align-items: center; gap: .45rem; margin-top: .2rem; color: var(--text-primary); font-size: .88rem; font-weight: 500; }
.svc-link__go .icon { width: 18px; height: 18px; color: var(--accent); transition: transform var(--dur-2) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .svc-link:hover .svc-link__go .icon { transform: translateX(4px); } }

/* ---------- Página de serviços: índice do topo ---------- */
.hub-index { padding: 1.1rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(160deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01) 60%), var(--bg-raised); box-shadow: 0 40px 80px -50px rgba(255, 85, 0, .5); }
.hub-index__head { display: flex; justify-content: space-between; padding: .2rem .5rem .8rem; border-bottom: 1px solid var(--line); color: var(--text-tertiary); font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.hub-index ol { display: grid; padding: 0; list-style: none; }
.hub-index li + li { border-top: 1px solid var(--line-subtle); }
.hub-index a { display: grid; grid-template-columns: 2rem 1.5rem 1fr auto; align-items: center; gap: .6rem; min-height: 60px; padding: .4rem .5rem; border-radius: var(--r-sm); color: var(--text-primary); font-size: clamp(1rem, .9rem + .4vw, 1.2rem); font-weight: 520; letter-spacing: -.01em; text-decoration: none; transition: background-color var(--dur-2) ease, color var(--dur-2) ease; }
.hub-index a > .icon { width: 20px; height: 20px; color: var(--accent); }
.hub-index__n { color: var(--text-tertiary); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em; }
.hub-index__go { width: 18px; height: 18px; color: var(--text-tertiary); transition: transform var(--dur-2) var(--ease-out), color var(--dur-2) ease; }
.hub-index a:hover { background: rgba(255, 85, 0, .07); }
.hub-index a:hover .hub-index__go { color: var(--accent); transform: translateX(4px); }

/* ---------- Página de serviços: cartões grandes ---------- */
.hub { display: grid; gap: 1rem; }
@media (min-width: 900px) { .hub { grid-template-columns: repeat(6, minmax(0, 1fr)); } .hub > :nth-child(-n+2) { grid-column: span 3; } .hub > :nth-child(n+3) { grid-column: span 2; } }
.hub-card { display: grid; gap: 1rem; align-content: start; padding: clamp(1.5rem, 3vw, 2rem); color: inherit; text-decoration: none; }
.hub-card .svc-link__top .icon { width: 26px; height: 26px; }
.hub-card h2 { font-size: clamp(1.35rem, 1.05rem + 1vw, 1.85rem); font-weight: 580; letter-spacing: -.025em; line-height: 1.15; }
.hub-card p { color: var(--text-secondary); line-height: 1.6; }
.hub-card .tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.hub-card .tag { min-height: 28px; font-size: .68rem; }
.join {
  display: grid;
  gap: 1.5rem;
  margin-top: 1rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
}
@media (min-width: 900px) { .join { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; } }
.join h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); letter-spacing: -.025em; }
.join__flow { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.join__flow span { padding: .45rem .8rem; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: rgba(255, 255, 255, .03); font-size: .88rem; }
.join__flow i { color: var(--accent); font-style: normal; }

/* ---------- Vitrines do topo ---------- */
.show { position: relative; min-height: 320px; }
.show__note { margin-top: .9rem; color: var(--text-tertiary); font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; text-align: center; text-transform: uppercase; }

/* Janelas de navegador (sites) */
.frame { overflow: hidden; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--bg-elevated); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .95), 0 0 0 1px rgba(0, 0, 0, .4); }
.frame__bar { display: flex; align-items: center; gap: .35rem; padding: .55rem .7rem; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .03); }
.frame__bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.frame__bar i:first-child { background: #ff5f57; } .frame__bar i:nth-child(2) { background: #febc2e; } .frame__bar i:nth-child(3) { background: #28c840; }
.frame__url { margin-left: .6rem; padding: .15rem .7rem; border-radius: var(--r-pill); background: rgba(255, 255, 255, .05); color: var(--text-secondary); font-family: var(--font-mono); font-size: .64rem; }
.frame img { width: 100%; height: auto; }
.show--sites { display: grid; padding: 0 0 2.5rem 0; }
.show--sites .frame--back { width: 78%; justify-self: end; }
.show--sites .frame--front { width: 70%; margin-top: -32%; }
.frame__cap { position: relative; }
.frame__cap figcaption { position: absolute; left: 7%; bottom: 12%; display: grid; gap: .2rem; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .6); }
.frame__cap figcaption b { font-family: Georgia, serif; font-size: clamp(.9rem, .6rem + 1vw, 1.4rem); font-weight: 400; letter-spacing: .02em; }
.frame__cap figcaption span { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
@media (prefers-reduced-motion: no-preference) {
  .show--sites .frame--back { animation: float-a 9s ease-in-out infinite; }
  .show--sites .frame--front { animation: float-b 8s ease-in-out infinite; }
}
@keyframes float-a { 50% { transform: translateY(-8px); } }
@keyframes float-b { 50% { transform: translateY(6px); } }

/* Logos 3D girando (36 quadros renderizados) */
.show--brand { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.spin-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: .3rem;
  padding: 1.4rem 1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: radial-gradient(70% 60% at 50% 40%, var(--glow, rgba(255, 85, 0, .18)), transparent 70%), #08080a;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.spin { width: clamp(96px, 22vw, 150px); aspect-ratio: 1; background-repeat: no-repeat; background-size: 600% 600%; background-position: 0 0; }
.spin-card b { font-size: 1rem; font-weight: 600; letter-spacing: .08em; }
.spin-card span { color: var(--text-tertiary); font-family: var(--font-mono); font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; }
.spin--vetra { background-image: url("../vitrine-logo-vetra.webp"); background-image: image-set("../vitrine-logo-vetra.avif" type("image/avif"), "../vitrine-logo-vetra.webp" type("image/webp")); }
.spin--orbe { background-image: url("../vitrine-logo-orbe.webp"); background-image: image-set("../vitrine-logo-orbe.avif" type("image/avif"), "../vitrine-logo-orbe.webp" type("image/webp")); }
.spin--nativa { background-image: url("../vitrine-logo-nativa.webp"); background-image: image-set("../vitrine-logo-nativa.avif" type("image/avif"), "../vitrine-logo-nativa.webp" type("image/webp")); }
.spin--kinto { background-image: url("../vitrine-logo-kinto.webp"); background-image: image-set("../vitrine-logo-kinto.avif" type("image/avif"), "../vitrine-logo-kinto.webp" type("image/webp")); }
.spin-card--vetra { --glow: rgba(233, 180, 90, .28); } .spin-card--vetra b { font-family: Georgia, serif; font-weight: 400; letter-spacing: .3em; color: #f1d898; }
.spin-card--orbe { --glow: rgba(255, 150, 110, .22); } .spin-card--orbe b { letter-spacing: -.04em; font-weight: 700; }
.spin-card--nativa { --glow: rgba(60, 220, 140, .22); } .spin-card--nativa b { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: 0; color: #a8f0c8; font-size: 1.15rem; }
.spin-card--kinto { --glow: rgba(60, 110, 255, .28); } .spin-card--kinto b { font-weight: 800; letter-spacing: .16em; color: #b4c4ff; }

/* Peças digitais */
.show--pieces { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 1rem; align-items: end; }
.piece { position: relative; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: 0 30px 60px -35px rgba(0, 0, 0, .95); }
.piece img { width: 100%; height: 100%; object-fit: cover; }
.piece__txt { position: absolute; inset: auto 0 0 0; display: grid; gap: .15rem; padding: 1rem; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); color: #fff; }
.piece__txt b { font-family: Georgia, serif; font-size: 1.05rem; font-weight: 400; }
.piece__txt span { font-family: var(--font-mono); font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.piece__brand { position: absolute; top: .8rem; left: 1rem; color: #fff; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .3em; }
.piece--post { aspect-ratio: 4 / 5; }
.piece--story { aspect-ratio: 9 / 16; grid-row: span 2; align-self: stretch; }
.piece--banner { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.show--pieces .piece--post { grid-column: 1; grid-row: 1; }
.show--pieces .piece--story { grid-column: 2; grid-row: 1 / span 1; }
@media (prefers-reduced-motion: no-preference) {
  .piece { transition: transform var(--dur-3) var(--ease-out); }
  .piece--post { animation: float-a 10s ease-in-out infinite; }
  .piece--story { animation: float-b 9s ease-in-out infinite; }
}

/* Fluxo de automação */
.flowx { padding: 1.4rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: radial-gradient(110% 80% at 50% 0%, rgba(255, 85, 0, .08), transparent 62%), var(--bg-raised); }
.flowx__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 1.4rem; color: var(--text-tertiary); font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; }
.flowx__live { display: inline-flex; align-items: center; gap: .45rem; color: #4ade80; }
.flowx__live i { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }
.flowx__track { display: grid; gap: .6rem; }
.flowx__node { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--bg-elevated); }
.flowx__node .icon { width: 20px; height: 20px; color: var(--accent); }
.flowx__node b { font-weight: 560; }
.flowx__node span { margin-left: auto; color: var(--text-tertiary); font-family: var(--font-mono); font-size: .68rem; }
.flowx__node em { margin-left: .5rem; padding: .1rem .45rem; border-radius: var(--r-pill); background: rgba(34, 197, 94, .14); color: #4ade80; font-family: var(--font-mono); font-size: .62rem; font-style: normal; }
.flowx__wire { position: relative; width: 2px; height: 18px; margin-left: 1.9rem; background: linear-gradient(var(--line-strong), var(--line-strong)); overflow: hidden; }
.flowx__wire::after { content: ""; position: absolute; left: 0; top: -8px; width: 2px; height: 8px; background: var(--accent); box-shadow: 0 0 8px var(--accent); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .flowx__wire::after { animation: wire-run 2.4s linear infinite; animation-delay: var(--d, 0s); }
  .flowx__node { animation: node-glow 2.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
}
@keyframes wire-run { 0% { opacity: 1; transform: translateY(0); } 30%, 100% { opacity: 1; transform: translateY(30px); } }
@keyframes node-glow { 0%, 100% { border-color: var(--line-strong); } 12% { border-color: rgba(255, 85, 0, .6); box-shadow: 0 0 20px -8px rgba(255, 85, 0, .7); } 30% { border-color: var(--line-strong); box-shadow: none; } }
.flowx__metrics { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px dashed var(--line-strong); color: var(--text-tertiary); font-family: var(--font-mono); font-size: .68rem; }
.flowx__metrics b { color: var(--text-primary); font-weight: 500; }

/* Agente de IA */
.agentx { padding: 1.4rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: radial-gradient(90% 70% at 20% 0%, rgba(255, 85, 0, .1), transparent 60%), var(--bg-raised); }
.agentx__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; color: var(--text-secondary); }
.agentx__state { padding: .2rem .6rem; border: 1px solid rgba(34, 197, 94, .4); border-radius: var(--r-pill); color: #4ade80; }
.agentx__ask { display: grid; gap: .35rem; padding: .9rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--bg-elevated); }
.agentx__ask span { color: var(--accent); font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; }
.agentx__steps { display: grid; gap: .55rem; margin: 1.1rem 0; }
.agentx__steps li { display: flex; align-items: center; gap: .7rem; color: var(--text-secondary); font-size: .95rem; }
.agentx__steps li::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; box-shadow: 0 0 10px var(--accent-glow); }
@media (prefers-reduced-motion: no-preference) {
  .agentx__steps li { animation: step-in 8s var(--ease-out) infinite; animation-delay: calc(var(--i) * .7s); }
  .agentx__foot { animation: step-in 8s var(--ease-out) infinite; animation-delay: 2.8s; }
}
@keyframes step-in { 0% { opacity: 0; transform: translateX(-8px); } 6%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
.agentx__foot { padding-top: .9rem; border-top: 1px dashed var(--line-strong); color: var(--text-primary); font-size: .92rem; }

/* Tela do Nexus */
.nexus-shot { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 1024px) { .nexus-shot { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.nexus-shot .ticks { margin-top: 1.2rem; }
.nexus-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: 1.4rem; }
.nexus-steps li { padding: .8rem .9rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-raised); font-size: .92rem; }
.nexus-steps li span { display: block; color: var(--accent); font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em; }

/* ---------- Política de privacidade ---------- */
.legal { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .legal { grid-template-columns: minmax(0, 3.2fr) minmax(0, 8fr); column-gap: calc(var(--gutter) * 2); } }
.legal__toc { align-self: start; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-raised); }
@media (min-width: 1024px) { .legal__toc { position: sticky; top: calc(var(--header-h) + 1.5rem); max-height: calc(100vh - var(--header-h) - 3rem); overflow: auto; } }
.legal__toc p { margin-bottom: .6rem; color: var(--text-tertiary); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
.legal__toc ol { display: grid; gap: .1rem; padding: 0; list-style: none; counter-reset: toc; }
.legal__toc a { display: flex; gap: .6rem; min-height: 40px; align-items: center; color: var(--text-secondary); font-size: .9rem; text-decoration: none; }
.legal__toc a::before { counter-increment: toc; content: counter(toc, decimal-leading-zero); color: var(--accent); font-family: var(--font-mono); font-size: .68rem; }
.legal__toc a:hover { color: var(--text-primary); }
.legal__body { max-width: 46rem; }
.legal__body section + section { margin-top: 2.75rem; padding-top: 2.75rem; border-top: 1px solid var(--line-subtle); }
.legal__body h2 { margin-bottom: 1rem; font-size: clamp(1.35rem, 1.1rem + .9vw, 1.8rem); letter-spacing: -.02em; }
.legal__body h3 { margin: 1.5rem 0 .6rem; font-size: 1.1rem; }
.legal__body p, .legal__body li { color: var(--text-secondary); }
.legal__body p + p, .legal__body ul + p, .legal__body table + p { margin-top: .9rem; }
.legal__body ul { display: grid; gap: .55rem; margin-top: .9rem; padding-left: 1.2rem; }
.legal__body li::marker { color: var(--accent); }
.legal__body strong { color: var(--text-primary); font-weight: 560; }
.legal__body a { color: var(--text-primary); text-decoration-color: var(--accent); }
.legal__note { margin-top: 1rem; padding: 1rem 1.2rem; border: 1px solid rgba(255, 85, 0, .3); border-left: 2px solid var(--accent); border-radius: 0 var(--r-md) var(--r-md) 0; background: rgba(255, 85, 0, .06); }
.legal__table { width: 100%; margin-top: 1rem; font-size: .92rem; }
.legal__table th, .legal__table td { padding: .75rem .6rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.legal__table th { color: var(--text-tertiary); font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.legal__table td:first-child { color: var(--text-primary); }
@media (max-width: 639.98px) {
  .legal__table thead { display: none; }
  .legal__table tr { display: grid; padding: .6rem 0; border-bottom: 1px solid var(--line); }
  .legal__table td { padding: .2rem 0; border: 0; }
}
.updated { color: var(--text-tertiary); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }

/* Rodapé das páginas internas: a assinatura fica só como marca-d'água */
.footer__signature--static { padding-bottom: calc(clamp(5rem, 8vw, 6.5rem) + env(safe-area-inset-bottom)); }
.footer__legal { display: inline-flex; gap: 1.25rem; flex-wrap: wrap; }

/* ---------- Páginas de equipe, método, Nexus e FAQ ---------- */
.faq-wrap > .faq__aside, .faq-wrap > .faq__list { grid-column: auto; }
@media (min-width: 1100px) { .svc-links--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.page-hero__shot { align-self: center; }

/* Equipe: disciplinas orbitando o núcleo */
.team-orbit { position: relative; width: min(100%, 420px); aspect-ratio: 1; margin-inline: auto; }
.team-orbit::before, .team-orbit::after { content: ""; position: absolute; inset: 12%; border: 1px dashed var(--line-strong); border-radius: 50%; }
.team-orbit::after { inset: 30%; border-style: solid; border-color: rgba(255, 85, 0, .25); }
.team-orbit__core { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 34%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 1px solid rgba(255, 85, 0, .5); border-radius: 50%; background: radial-gradient(circle at 50% 35%, rgba(255, 85, 0, .35), rgba(255, 85, 0, .06) 70%); box-shadow: 0 0 60px -10px var(--accent-glow); font-size: clamp(1.4rem, 1rem + 1.5vw, 2rem); font-weight: 650; letter-spacing: -.04em; }
.team-orbit__node { position: absolute; left: 50%; top: 50%; padding: .45rem .8rem; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--bg-elevated); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; white-space: nowrap; transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(min(420px, 80vw) * -.38)) rotate(calc(var(--a) * -1)); box-shadow: 0 10px 30px -15px rgba(0, 0, 0, .9); }
@media (prefers-reduced-motion: no-preference) {
  .team-orbit__node { animation: orbit-glow 6s ease-in-out infinite; animation-delay: calc(var(--a) / 60deg * 1s); }
}
@keyframes orbit-glow { 0%, 20%, 100% { border-color: var(--line-strong); } 8% { border-color: rgba(255, 85, 0, .8); box-shadow: 0 0 22px -6px rgba(255, 85, 0, .8); } }

/* Método: trilha das três fases no topo */
.phase-rail { position: relative; display: grid; gap: 1rem; padding-left: 1.6rem; }
.phase-rail::before { content: ""; position: absolute; left: .55rem; top: 1.2rem; bottom: 1.2rem; width: 2px; background: linear-gradient(var(--accent), rgba(255, 85, 0, .1)); box-shadow: 0 0 12px var(--accent-glow); }
.phase-rail li { position: relative; display: grid; gap: .2rem; padding: 1.1rem 1.3rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(170deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01) 55%), var(--bg-raised); }
.phase-rail li::before { content: ""; position: absolute; left: -1.35rem; top: 1.45rem; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(255, 85, 0, .2); }
.phase-rail span { color: var(--accent); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; }
.phase-rail b { font-size: 1.3rem; font-weight: 580; letter-spacing: -.02em; }
.phase-rail i { color: var(--text-secondary); font-style: normal; font-size: .92rem; }
/* Cada fase ganha o seu ícone vivo; a fase ativa passa de uma para a outra, como o projeto */
.phase-rail li { padding-right: 5.2rem; }
.phase-ic { position: absolute; right: 1.1rem; top: 50%; width: 3.2rem; height: 3.2rem; margin-top: -1.6rem; color: rgba(233, 233, 238, .42); transition: color .4s ease; }
.phase-ic svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.phase-ic .ph-dots { fill: currentColor; stroke: none; }
.phase-rail::after { content: ""; position: absolute; left: .55rem; top: 1.2rem; bottom: 1.2rem; width: 2px; background: linear-gradient(transparent, #fff 70%, var(--accent)); transform: scaleY(0); transform-origin: top; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .phase-rail::after { animation: pr-fill 9s linear infinite; }
  .phase-rail li { animation: pr-card 9s ease-in-out infinite; }
  .phase-rail li::before { animation: pr-dot 9s ease-in-out infinite; }
  .phase-rail .phase-ic { animation: pr-ic 9s ease-in-out infinite; }
  .phase-rail li:nth-child(2), .phase-rail li:nth-child(2)::before, .phase-rail li:nth-child(2) .phase-ic { animation-delay: 3s; }
  .phase-rail li:nth-child(3), .phase-rail li:nth-child(3)::before, .phase-rail li:nth-child(3) .phase-ic { animation-delay: 6s; }
  /* Descoberta: a lupa procura e os pontos acendem quando encontrados */
  .ph-lens { animation: ph-seek 4.5s ease-in-out infinite; }
  .ph-dots circle { animation: ph-blink 4.5s ease-in-out infinite; }
  .ph-dots circle:nth-child(2) { animation-delay: .7s; }
  .ph-dots circle:nth-child(3) { animation-delay: 1.5s; }
  .ph-dots circle:nth-child(4) { animation-delay: 2.2s; }
  .ph-dots circle:nth-child(5) { animation-delay: 3s; }
  .ph-dots circle:nth-child(6) { animation-delay: 3.7s; }
  /* Engenharia: as linhas de código são escritas entre as chaves */
  .ph-code { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ph-type 3s ease-in-out infinite; }
  .ph-code:nth-of-type(3) { animation-delay: .35s; }
  .ph-code:nth-of-type(4) { animation-delay: .7s; }
  /* Lançamento: a seta decola e o rastro fica para trás */
  .ph-arrow { animation: ph-lift 2.4s cubic-bezier(.5, 0, .3, 1) infinite; }
  .ph-trail path { animation: ph-trail 2.4s ease-in infinite; }
  .ph-trail path:nth-child(2) { animation-delay: .12s; }
  .ph-trail path:nth-child(3) { animation-delay: .24s; }
}
@keyframes pr-fill { 0% { transform: scaleY(0); opacity: 1; } 92% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
@keyframes pr-card { 0%, 36%, 100% { border-color: var(--line); box-shadow: none; } 5%, 30% { border-color: rgba(255, 85, 0, .55); box-shadow: 0 0 0 1px rgba(255, 85, 0, .12), 0 20px 44px -26px rgba(255, 85, 0, .75); } }
@keyframes pr-dot { 0%, 36%, 100% { transform: scale(1); box-shadow: 0 0 0 4px rgba(255, 85, 0, .2); } 5%, 30% { transform: scale(1.25); box-shadow: 0 0 0 6px rgba(255, 85, 0, .28), 0 0 18px var(--accent); } }
@keyframes pr-ic { 0%, 36%, 100% { color: rgba(233, 233, 238, .42); } 5%, 30% { color: var(--accent); } }
@keyframes ph-seek { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(9px, -5px); } 50% { transform: translate(5px, 9px); } 75% { transform: translate(-7px, 4px); } }
@keyframes ph-blink { 0%, 70%, 100% { opacity: .25; } 80% { opacity: 1; } }
@keyframes ph-type { 0% { stroke-dashoffset: 1; } 40%, 80% { stroke-dashoffset: 0; opacity: 1; } 95%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes ph-lift { 0% { transform: translateY(8px); opacity: 0; } 20% { opacity: 1; } 70% { transform: translateY(-6px); opacity: 1; } 100% { transform: translateY(-16px); opacity: 0; } }
@keyframes ph-trail { 0%, 15% { opacity: 0; transform: translateY(-4px); } 45% { opacity: .9; } 100% { opacity: 0; transform: translateY(6px); } }

/* Topo das páginas internas: o título é escrito como a logo; o que o acompanha surge em sequência, de baixo para cima */
@media (prefers-reduced-motion: no-preference) {
  .js .page-hero__copy > :not(h1), .js .page-hero__show, .js .page-hero .hub-index,
  .js .nf__copy > :not(h1), .js .nf__stage { animation: ph-rise .9s var(--ease-out) both; animation-delay: .95s; }
  .js .page-hero__copy > :nth-child(1), .js .nf__copy > :nth-child(1) { animation-delay: .05s; }
  .js .page-hero__copy > :nth-child(2), .js .nf__copy > :nth-child(2) { animation-delay: .15s; }
  .js .page-hero__copy > :nth-child(4), .js .nf__copy > :nth-child(4) { animation-delay: .6s; }
  .js .page-hero__copy > :nth-child(5), .js .nf__copy > :nth-child(5) { animation-delay: .75s; }
  .js .page-hero__copy > :nth-child(6), .js .nf__copy > :nth-child(6) { animation-delay: .9s; }
  .js .page-hero__show, .js .page-hero .hub-index, .js .nf__stage { animation-delay: .35s; }
}
@keyframes ph-rise { from { opacity: 0; transform: translate3d(0, 24px, 0); } }

/* Fundo vivo do topo: ocupa o topo inteiro, de cima até embaixo; cada página tem o seu (herofx.js) */
.hero-fx {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 5%, #000 92%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 5%, #000 92%, transparent 100%);
}
.hero-fx.is-ready { opacity: 1; }
.page-hero:has(> .hero-fx)::before, .mk-hero:has(> .hero-fx)::before { display: none; }
/* No Sobre, o fundo fica bem suave para não competir com a mira e o raio que gira em volta dela */
.ab-hero > .hero-fx.is-ready { opacity: .85; }
@media (min-width: 1024px) {
  /* No computador, o efeito fica mais forte do lado oposto ao texto */
  .hero-fx {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 5%, #000 92%, transparent 100%), linear-gradient(90deg, rgba(0, 0, 0, .4) 0, rgba(0, 0, 0, .55) 35%, #000 62%);
    mask-image: linear-gradient(180deg, transparent 0, #000 5%, #000 92%, transparent 100%), linear-gradient(90deg, rgba(0, 0, 0, .4) 0, rgba(0, 0, 0, .55) 35%, #000 62%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
  /* No Nexus, os agentes já trabalham fora do texto: o fundo fica inteiro, sem o esmaecimento lateral */
  .hero-fx[data-hero-fx="agents"] {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 5%, #000 92%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 5%, #000 92%, transparent 100%);
  }
}