@font-face {
      font-family: 'Ubuntu';
      src: url('./fonts/Ubuntu-Light.woff2') format('woff2');
      font-weight: 300;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Ubuntu';
      src: url('./fonts/Ubuntu-Regular.woff2') format('woff2');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Ubuntu';
      src: url('./fonts/Ubuntu-Medium.woff2') format('woff2');
      font-weight: 500;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Ubuntu';
      src: url('./fonts/Ubuntu-Bold.woff2') format('woff2');
      font-weight: 700;
      font-style: normal;
      font-display: swap;
    }

    /* ─── RESET ──────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: auto; } /* Lenis gerencia o scroll suave */
    img  { display: block; }
    a    { text-decoration: none; color: inherit; }
    button { cursor: pointer; border: none; outline: none; background: none; font-family: inherit; }

    /* ─── CSS VARIABLES ──────────────────────────────────── */
    :root {
      --bg:               #000;
      --bg-card:          #151924;
      --bg-navbar:        rgba(35,38,65,.67);
      --bg-btn-dark:      #2d304d;
      --blue-primary:     #4D73E6;
      --blue-mid:         #6e99ff;
      --blue-accent:      #719bff;
      --blue-light:       #99b7ff;
      --blue-deep:        #2b4687;
      --purple:           #878ed2;
      --text-100:         #fff;
      --text-83:          rgba(255,255,255,.83);
      --text-80:          rgba(255,255,255,.80);
      --text-70:          rgba(255,255,255,.70);
      --text-gray:        #d9d9d9;
      --grad-headline:    linear-gradient(113deg,#fff 9.6%,#e3e6ff 45%,#c5cbff 81%);
      --grad-section:     linear-gradient(91deg, #FFF 23.04%, #E3E6FF 61.44%, #C5CBFF 99.85%);
      --grad-btn:         linear-gradient(105deg,#878ed2 5.4%,#4d77dd 91.1%);
      --grad-process:     linear-gradient(180deg, #000 0%, #2B4687 100.08%, #99B7FF 121.48%);
      --font: 'Ubuntu';
    }
    html {
      filter: hue-rotate(6deg) saturate(1.28) contrast(1.12) brightness(1.02);
    }
    body {
      background: #ffffff;
      color: var(--text-100);
      font-family: var(--font);
      overflow-x: hidden;
    }


    /* ─── TEXT REVEAL — clip-path mask slide-up ─────────────── */
    .reveal-lines {
      overflow: hidden;
    }

    .reveal-line-wrap {
      overflow: hidden;
      display: block;
    }

    .reveal-line-inner {
      display: block;
      transform: translateY(110%);
      opacity: 0;
      transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
                  opacity 0.4s ease;
    }

    .reveal-lines.is-revealed .reveal-line-inner {
      transform: translateY(0);
      opacity: 1;
    }

    .reveal-eyebrow {
      clip-path: inset(0 100% 0 0);
      transition: clip-path 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .reveal-eyebrow.is-revealed {
      clip-path: inset(0 0% 0 0);
    }

    /* ─── ASSETS ─────────────────────────────────────────── */
    /* All Figma asset URLs */

    /* ─── SECTION COMMON ─────────────────────────────────── */
    .section-eyebrow {
      font-size: 15px;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: var(--blue-accent);
      font-weight: 400;
    }
    .section-headline {
      font-size: 60px;
      font-weight: 400;
      line-height: 73px;
      letter-spacing: -2.4px;
      background: var(--grad-section);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .section-sub {
      font-size: 18px;
      font-weight: 400;
      line-height: 1.6;
      color: var(--text-83);
    }

    /* ─── BUTTON ─────────────────────────────────────────── */
    .btn-cta {
      display: inline-flex;
      align-items: center;
      gap: 17px;
      background: #4d77dd;
      color: #fff;
      font-family: var(--font);
      font-weight: 500;
      font-size: 18px;
      letter-spacing: -.36px;
      height: 61px;
      padding: 10px 15px 10px 20px;
      border-radius: 35px;
      min-width: 234px;
      justify-content: center;
      transition: opacity .2s;
    }
    .btn-cta:hover { opacity: .88; }
    .btn-cta-icon {
      display: flex;
      width: 42px;
      height: 42px;
      padding: 9px;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
      aspect-ratio: 1 / 1;
      border-radius: 30px;
      background: #fff;
      overflow: hidden;
      position: relative;
    }
    .btn-cta-icon svg {
      display: block;
      width: 12px;
      height: 12px;
    }

    /* ══════════════════════════════════════════════════════ */
    /* HERO — sticky wrapper para transição                   */
    /* ══════════════════════════════════════════════════════ */
    #hero {
      position: relative;
      z-index: 1;
      overflow: hidden;
    }

    /* ══════════════════════════════════════════════════════ */
    /* STATEMENT                                              */
    /* ══════════════════════════════════════════════════════ */
    #statement {
      background: #000;
      width: 100%;
      min-height: 100vh;
      padding: 0 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      position: relative;
      z-index: 2;
      pointer-events: auto;
    }
    .statement-inner {
      width: 100%;
      position: relative;
      z-index: 20;
    }
    .statement-text {
      display: flex;
      flex-direction: column;
      gap: 0.15em;
    }
    .statement-line {
      display: block;
      font-size: clamp(36px, 5.5vw, 99px);
      font-weight: 400;
      line-height: 1.32;
      letter-spacing: -0.03em;
      color: transparent;
      overflow: hidden;
    }
    /* cada char gerado pelo JS */
    .statement-line .char {
      display: inline-block;
      color: rgba(255,255,255,0.15);
      will-change: color;
    }

    @media (max-width: 768px) {
      #statement { padding: 0 24px; }
      .statement-line { font-size: clamp(28px, 7.5vw, 48px); }
    }
    @media (max-width: 480px) {
      #statement { padding: 0 20px; }
    }

    /* ─── GLOW DIVIDER ───────────────────────────────────── */
    .glow-divider {
      width: 100%;
      height: 1px;
      background: linear-gradient(to right,rgba(113,155,255,0),rgba(113,155,255,.3),rgba(113,155,255,0));
      flex-shrink: 0;
    }

    /* ══════════════════════════════════════════════════════ */
    /* NAVBAR                                                 */
    /* ══════════════════════════════════════════════════════ */
    #navbar {
      position: fixed;
      top: 0; left: 0;
      width: 100%;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 80px 90px;
      z-index: 100;
      background: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border-bottom: none;
      transition: background 0.7s ease, backdrop-filter 0.7s ease, border-color 0.7s ease, height 0.7s ease, padding 0.7s ease, transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    }
    #navbar.navbar--hidden {
      transform: translateY(-110%);
    }
    #navbar.scrolled {
      background: rgba(255, 255, 255, 0.559);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      height: 75px;
      padding: 0 90px;
    }
    .navbar-logo .logo-blue { display: none; }
    #navbar.scrolled .logo-white { display: none; }
    #navbar.scrolled .logo-blue { display: block; }
    #navbar.scrolled .navbar-hamburger span { background: #4d77dd; }
    .navbar-inner {
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;
      padding: 0;
      background: none;
      backdrop-filter: none;
      border-radius: 0;
      gap: 0;
    }
    .navbar-logo { flex-shrink: 0; margin-right: 0; }
    .navbar-logo img { width: 110px; height: 110px; object-fit: contain; }
    .navbar-links {
      display: flex;
      gap: 4px;
      align-items: center;
      justify-content: center;
      flex: 1;
    }
    .navbar-links a {
      font-size: 15px;
      letter-spacing: -.3px;
      color: rgba(255,255,255,0.65);
      white-space: nowrap;
      transition: color .2s, background .2s;
      padding: 7px 16px;
      border-radius: 8px;
    }
    .navbar-links a:hover { color: #fff; background: rgba(255,255,255,0.06); }
    .navbar-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #4d77dd;
      color: #fff;
      font-family: var(--font);
      font-weight: 500;
      font-size: 15px;
      letter-spacing: -.2px;
      height: 44px;
      padding: 0 28px;
      border-radius: 12px;
      white-space: nowrap;
      flex-shrink: 0;
      transition: opacity .2s;
    }
    .navbar-btn:hover { opacity: .85; }

    /* ══════════════════════════════════════════════════════ */
    /* HERO                                                   */
    /* ══════════════════════════════════════════════════════ */
    #hero {
      position: relative;
      width: 100%;
      height: 100vh;
      flex-shrink: 0;
      background: url('assets/hero_background.webp') center top / cover no-repeat;
    }
    .hero-video {
      display: none;
    }
    .hero-overlay { display: none; }


    /* ─── HERO CONTENT ENTRADA ───────────────────────────── */
    .hero-headline {
      opacity: 0;
      transform: translateY(32px);
      animation: hero-fade-up 1s cubic-bezier(0.16,1,0.3,1) 0.2s forwards;
    }
    .hero-sub {
      opacity: 0;
      transform: translateY(24px);
      animation: hero-fade-up 1s cubic-bezier(0.16,1,0.3,1) 0.45s forwards;
    }
    .hero-buttons {
      opacity: 0;
      transform: translateY(20px);
      animation: hero-fade-up 1s cubic-bezier(0.16,1,0.3,1) 0.65s forwards;
    }
    @keyframes hero-fade-up {
      to { opacity: 1; transform: translateY(0); }
    }

    /* ─── SCROLL INDICATOR ───────────────────────────────── */
    .scroll-indicator {
      position: absolute;
      bottom: 64px;
      right: 48px;
      z-index: 1;
      width: 110px;
      height: 110px;
      border-radius: 50%;
      background: rgba(60, 65, 120, 0.45);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      cursor: default;
    }
    .scroll-ring {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      animation: scroll-ring-spin 12s linear infinite;
    }
    @keyframes scroll-ring-spin {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }
    .scroll-arrow-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      animation: scroll-arrow-bounce 1.8s ease-in-out infinite;
    }
    .scroll-arrow {
      width: 20px;
      height: 20px;
      opacity: 0.9;
    }
    @keyframes scroll-arrow-bounce {
      0%, 100% { transform: translateY(-4px); opacity: 0.7; }
      50%       { transform: translateY(4px);  opacity: 1;   }
    }

    /* ─── SCROLL INDICATOR GLOBAL ───────────────────────── */
    .scroll-indicator-global {
      display: none;
    }
    .scroll-indicator-label {
      display: none;
    }

    /* ─── LANGUAGE SWITCHER ──────────────────────────────── */
    .lang-switcher {
      position: absolute;
      bottom: 100px;
      left: 40px;
      z-index: 1;
      display: flex;
      flex-direction: column-reverse;
      align-items: flex-start;
      gap: 8px;
    }
    .lang-dropdown {
      background: rgba(60, 65, 120, 0.45);
      border-radius: 16px;
      padding: 22px 16px;
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 148px;
      opacity: 0;
      transform: translateY(-6px);
      pointer-events: none;
      transition: opacity 0.2s ease, transform 0.2s ease;
    }
    .lang-switcher.is-open .lang-dropdown {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
    .lang-option {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 16px;
      border-radius: 10px;
      font-size: 20px;
      font-family: var(--font);
      color: #ffffff;
      background: none;
      cursor: pointer;
      width: 100%;
      text-align: left;
      transition: background 0.15s;
    }
    .lang-option:hover { background: rgba(255,255,255,0.18); }
    .lang-radio {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 1.5px solid rgba(0,0,0,0.25);
      flex-shrink: 0;
      position: relative;
      transition: border-color 0.15s;
    }
    .lang-radio--active {
      border-color: #4d77dd;
    }
    .lang-radio--active::after {
      content: '';
      position: absolute;
      inset: 3px;
      border-radius: 50%;
      background: #4d77dd;
    }
    .lang-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 22px 28px;
      border-radius: 999px;
      background: rgba(60, 65, 120, 0.45);
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
      color: #ffffff;
      font-size: 22px;
      font-family: var(--font);
      font-weight: 400;
      cursor: pointer;
      transition: background 0.2s;
    }
    .lang-btn:hover { background: rgba(60, 65, 120, 0.45); }
    .lang-chevron {
      transition: transform 0.2s ease;
    }
    .lang-switcher.is-open .lang-chevron {
      transform: rotate(180deg);
    }

    .hero-transition {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 9;
      display: flex;
      pointer-events: none;
    }
    .hero-transition div {
      width: 100%;
      height: 0%;
      background-color: #4D77DD;
      align-self: flex-end;
    }
    .textoTransicao {
      width: 100%;
      height: 100lvh;
      position: absolute;
      top: 0;
      z-index: 10;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 4vw;
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
    }
    .textoTransicao p {
      font-size: 5.8rem;
      font-weight: 400;
      line-height: 1.3;
      color: rgba(255, 255, 255, 0.90);
      text-align: start;
    }
    .textoTransicao .word {
      display: inline-block;
      white-space: nowrap;
    }
    .textoTransicao .char {
      display: inline-block;
      will-change: transform, opacity;
    }

    .hero-content {
      position: absolute;
      left: 50%;
      top: 40%;
      transform: translate(-50%, -50%);
      width: 58%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 48px;
      z-index: 2;
    }
    .hero-headline {
      font-size: 92px;
      font-weight: 400;
      line-height: 1.08;
      letter-spacing: -3.5px;
      text-align: center;
      color:rgba(255, 255, 255, 0.918);
      width: 100%;
      text-wrap: balance;
    }
    .hero-sub {
      font-size: 18px;
      line-height: 160%;
      text-align: center;
      color: rgba(255, 255, 255, 0.92);
      width: 65%;
      letter-spacing: -.1%;
      font-weight: 300;
      text-shadow: 0 2px 18px rgba(0, 0, 0, 0.18);
    }
    .hero-sub strong { font-weight: 500; color: #fff; }
    .hero-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 10px 20px;
      border-radius: 20px;
      border: 0.5px solid #4d77dd;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      background: radial-gradient(ellipse at 50% 26%,
        rgba(1,1,1,0.7)    0%,
        rgba(1,6,20,0.7)   12.5%,
        rgba(1,12,39,0.7)  25%,
        rgba(0,23,77,0.7)  50%,
        rgba(10,35,95,0.7) 56%,
        rgba(19,47,113,0.7)62.5%,
        rgba(39,71,149,0.7)75%,
        rgba(58,95,185,0.7)87.5%,
        rgba(77,119,221,0.7)100%
      );
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: #84a8ff;
      white-space: nowrap;
    }
    .hero-buttons {
      display: flex;
      gap: 17px;
      align-items: center;
    }
    .btn-hero-white {
      display: inline-flex;
      align-items: center;
      gap: 17px;
      background: #4d77dd;
      color: #fff;
      font-family: var(--font);
      font-weight: 500;
      font-size: 18px;
      letter-spacing: -.36px;
      height: 61px;
      padding: 10px 15px 10px 20px;
      border-radius: 35px;
      justify-content: center;
      transition: opacity .2s;
      position: relative;
    }
    .btn-hero-white:hover { opacity: .88; }
    .btn-hero-white-icon {
      display: flex;
      width: 42px;
      height: 42px;
      padding: 9px;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
      aspect-ratio: 1 / 1;
      border-radius: 30px;
      background: #fff;
      overflow: hidden;
      position: relative;
    }
    .btn-hero-white-icon svg {
      display: block;
      width: 12px;
      height: 12px;
    }
    .btn-hero-dark {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
      gap: 17px;
      font-family: var(--font);
      font-weight: 500;
      font-size: 18px;
      letter-spacing: -.36px;
      height: 61px;
      padding: 10px 15px 10px 20px;
      border-radius: 35px;
      border: 2px solid #4d77dd;
      background: #ffffff;
      color: #4d77dd;
    }
    .btn-hero-dark-label { color: #4d77dd; }
    .btn-hero-dark:hover { opacity: .88; }

    .btn-hero-dark-icon {
      display: flex;
      width: 42px;
      height: 42px;
      padding: 9px;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      aspect-ratio: 1 / 1;
      border-radius: 30px;
      background: #4d77dd;
    }
    .btn-hero-dark-icon svg { display: block; width: 16px; height: 16px; fill: #fff; color: #fff; }

    /* ─── HERO CLIENTS CAROUSEL ──────────────────────────── */
    .hero-clients {
      position: absolute;
      bottom: 100px;
      left: 50%;
      transform: translateX(-50%);
      width: 60%;
      background: rgba(60, 65, 120, 0.45);
      backdrop-filter: blur(2px);
      padding: 19px 0;
      overflow: hidden;
      border-radius: 40px;
      z-index: 2;
    }
    .hero-clients-track {
      display: flex;
      width: 100%;
      animation: heroClientsScroll 28s linear infinite;
    }
    .hero-clients-set {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0;
      padding: 0 40px;
      width: 100%;
      flex-shrink: 0;
    }
    .hero-clients-set img {
      height: 42px;
      width: auto;
      object-fit: contain;
      filter: brightness(0) invert(1);
    }
    @keyframes heroClientsScroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }

    /* ══════════════════════════════════════════════════════ */
    /* CLIENTS                                                */
    /* ══════════════════════════════════════════════════════ */
    #clients {
      background: #000;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 74px;
      padding: 100px 87px;
      overflow: hidden;
      position: relative;
    }
    .clients-label {
      font-size: 18px;
      font-weight: 300;
      line-height: 1.6;
      color: var(--text-83);
      text-align: center;
      letter-spacing: -.18px;
      width: 702px;
    }
    .clients-carousel {
      width: 100%;
      max-width: 100%;
      overflow: hidden;
      position: relative;
    }
    .clients-track {
      --clients-logo-gap: 106px;
      display: flex;
      width: max-content;
      align-items: center;
      gap: var(--clients-logo-gap);
      animation: clients-marquee 40s linear infinite;
    }
    .clients-carousel:hover .clients-track {
      animation-play-state: paused;
    }
    @keyframes clients-marquee {
      0%   { transform: translateX(0); }
      100% {
        transform: translateX(calc(-50% - (var(--clients-logo-gap) / 2)));
      }
    }
    .clients-logos--set {
      display: flex;
      gap: var(--clients-logo-gap);
      align-items: center;
      flex-shrink: 0;
    }
    .clients-logos--set img {
      width: auto;
      max-width: min(300px, 32vw);
      height: auto;
      max-height: 110px;
      object-fit: contain;
      object-position: center;
      flex-shrink: 0;
      filter: brightness(0);
    }
    @media (prefers-reduced-motion: reduce) {
      .clients-track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        max-width: 1100px;
        margin: 0 auto;
      }
      .clients-logos--set[aria-hidden="true"] {
        display: none;
      }
    }

    /* ══════════════════════════════════════════════════════ */
    /* MICRO-INTERAÇÕES — botões                              */
    /* ══════════════════════════════════════════════════════ */
    .btn-hero-white,
    .btn-cta {
      overflow: hidden;
    }
    .btn-hero-white::after,
    .btn-cta::after {
      content: '';
      position: absolute;
      top: 0; left: -100%;
      width: 60%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
      transform: skewX(-20deg);
      transition: none;
      pointer-events: none;
    }
    .btn-hero-white:hover::after,
    .btn-cta:hover::after {
      animation: btn-shimmer 0.55s ease forwards;
    }
    @keyframes btn-shimmer {
      0%   { left: -100%; }
      100% { left: 160%;  }
    }
    .btn-cta { position: relative; }

    /* Rocket launch — seta decola em diagonal na direção que aponta */
    .btn-cta:hover .btn-cta-icon svg,
    .btn-hero-white:hover .btn-hero-white-icon svg {
      animation: rocket-launch 0.46s cubic-bezier(0.4, 0, 0.2, 1) both;
    }
    @keyframes rocket-launch {
      0%   { transform: translate(0, 0);          opacity: 1; }
      38%  { transform: translate(130%, -130%);   opacity: 0; }
      39%  { transform: translate(-130%, 130%);   opacity: 0; }
      100% { transform: translate(0, 0);          opacity: 1; }
    }

    /* Ripple ao clicar */
    .btn-ripple {
      position: absolute;
      border-radius: 50%;
      background: rgba(255,255,255,0.25);
      transform: scale(0);
      animation: ripple-expand 0.55s ease-out forwards;
      pointer-events: none;
    }
    @keyframes ripple-expand {
      to { transform: scale(4); opacity: 0; }
    }

    /* Nav links — underline deslizante */
    .navbar-links a {
      position: relative;
    }
    .navbar-links a::after {
      content: '';
      position: absolute;
      bottom: 2px; left: 16px; right: 16px;
      height: 1px;
      background: rgba(255,255,255,0.7);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
    }
    .navbar-links a:hover::after { transform: scaleX(1); }

    /* ══════════════════════════════════════════════════════ */
    /* SERVICES — sticky fullscreen scroll                    */
    /* ══════════════════════════════════════════════════════ */
    #services {
      position: relative;
    }
    .svc-outer {
      height: calc(6 * 100vh);
      position: relative;
    }
    .svc-sticky {
      position: sticky;
      top: 0;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 80px 0 98px;
      overflow: hidden;
      background: #ffffff;
    }
    /* ── Stepper de Progresso ──────────────────────────── */
    .svc-stepper {
      display: flex;
      flex-direction: column;
      justify-content: center;
      z-index: 10;
      padding-top: 50px;
    }
    .svc-step-item {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      gap: 14px;
      position: relative;
    }
    .svc-step-left-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex-shrink: 0;
    }
    .svc-step-num {
      font-size: 97px;
      font-weight: 300;
      line-height: 1;
      color: #222323;
      padding-bottom: 4px;
      letter-spacing: -4px;
      font-family: var(--font);
      opacity: 0.07;
      transition: opacity 0.4s ease;
      pointer-events: none;
      user-select: none;
    }
    .svc-step-item.is-active .svc-step-num {
      opacity: 1;
    }
    .svc-step-node {
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--blue-primary);
      cursor: pointer;
      flex-shrink: 0;
      position: relative;
      z-index: 2;
      transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
      /* começa invisível — GSAP pinta de cima pra baixo */
      clip-path: inset(0 0 100% 0);
    }
    .svc-step-node svg { width: 41px; height: 41px; display: block; }
    .svc-step-node.is-active {
      transform: scale(1.18);
    }
    .svc-step-connector {
      width: 4px;
      height: 70px;
      background: transparent; /* sem ghost — só aparece a parte pintada */
      position: relative;
      overflow: hidden;
      border-radius: 4px;
    }
    .svc-step-conn-fill {
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 0%;
      background: linear-gradient(180deg, #4D77DD, #757BAF);
      border-radius: 2px;
    }
    .svc-section-lbl {
      position: absolute;
      top: 44px;
      left: 60px;
      font-size: 12px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--blue-primary);
      font-weight: 400;
    }
    .svc-counter {
      position: absolute;
      top: 44px;
      right: 80px;
      font-size: 14px;
      color: rgba(0,0,0,0.35);
      font-weight: 300;
    }
    .svc-counter em {
      font-style: normal;
      font-size: 18px;
      color: #1a0a3e;
      font-weight: 500;
    }
    .svc-content {
      display: grid;
      grid-template-columns: auto 1fr 1fr;
      gap: 160px;
      align-items: center;
      width: 100%;
    }
    .svc-left {
      display: flex;
      flex-direction: column;
      gap: 24px;
      order: 2;
      width: 87%;
      margin-left: 90px;
    }
    .svc-right {
      order: 1;
    }
    .svc-index {
      font-size: 13px;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--blue-primary);
      font-weight: 400;
    }
    .svc-title {
      font-size: clamp(38px, 4vw, 114px);
      font-weight: 400;
      line-height: 1.1;
      letter-spacing: -2px;
      background: #222323;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .svc-desc {
      font-size: 18px;
      font-weight: 300;
      line-height: 1.7;
      color: rgba(0,0,0,0.6);
    }
    .svc-feats {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .svc-feats li {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      font-size: 15px;
      font-weight: 400;
      color: #1a0a3e;
      border-radius: 40px;
      padding: 8px 12px 8px 20px;
      transition: transform 0.2s;
    }
    .svc-feats li::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 40px;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.50) 0%, rgba(204, 204, 204, 0.50) 50%, rgba(77, 119, 221, 0.50) 100%);
      z-index: 0;
    }
    .svc-feats li:hover { transform: translateY(-1px); }
    .svc-feats li:hover::before {
      background: linear-gradient(90deg, rgba(135,142,210,0.22) 0%, rgba(77,119,221,0.18) 100%);
      border-color: rgba(77,119,221,0.35);
    }
    .svc-feats li span {
      position: relative;
      z-index: 1;
    }
    .svc-feats li svg {
      position: relative;
      z-index: 1;
      flex-shrink: 0;
    }
    .svc-btn { align-self: flex-start; margin-top: 8px; }
    .svc-right {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .svc-visual-wrap {
      position: relative;
      width: 580px;
      height: 520px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .svc-orb-bg {
      position: absolute;
      inset: -80px;
      border-radius: 50%;
      filter: blur(90px);
      opacity: 0.45;
      transition: background 0.6s ease;
      pointer-events: none;
    }
    .svc-visual {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.4s ease, transform 0.4s ease;
    }
    .svc-visual > div { width: 100%; font-family: var(--font); }

    /* ── Slide com imagem ── */
    .illo-img-wrap {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .illo-img {
      width: 110%;
      height: 110%;
      object-fit: contain;
      border-radius: 16px;
      display: block;
    }

    /* ════════════════════════════════════
       01 · SOCIAL — Calendário de Conteúdo
    ════════════════════════════════════ */
    .illo-social {
      background: #fff;
      border: 1px solid rgba(77,119,221,0.15);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 8px 40px rgba(77,119,221,0.10);
    }
    .iso-header {
      display: flex; align-items: center; gap: 10px;
      padding: 12px 16px;
      border-bottom: 1px solid rgba(77,119,221,0.1);
    }
    .iso-dots { display: flex; gap: 5px; }
    .iso-dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(0,0,0,0.1); }
    .iso-label { font-size: 11px; color: rgba(0,0,0,0.4); flex: 1; }
    .iso-live { font-size: 10px; color: var(--blue-primary); }
    .iso-grid { display: flex; gap: 8px; padding: 18px 20px; }
    .iso-col { display: flex; flex-direction: column; gap: 8px; flex: 1; }
    .iso-day { font-size: 10px; color: rgba(0,0,0,0.35); text-align: center; letter-spacing: 1px; }
    .iso-post {
      background: rgba(77,119,221,0.07); border: 1px solid rgba(77,119,221,0.15);
      border-radius: 10px; padding: 10px;
      display: flex; flex-direction: column; gap: 6px; position: relative;
    }
    .iso-post.p2 { background: rgba(135,142,210,0.08); border-color: rgba(135,142,210,0.2); }
    .iso-post.p3 { background: rgba(43,70,135,0.07); border-color: rgba(77,119,221,0.15); }
    .iso-thumb { width: 100%; height: 38px; background: rgba(77,119,221,0.1); border-radius: 5px; }
    .iso-lines div { height: 4px; background: rgba(0,0,0,0.08); border-radius: 2px; margin-bottom: 4px; }
    .iso-lines div:last-child { width: 60%; }
    .iso-badge {
      position: absolute; top: 5px; right: 5px;
      font-size: 9px; background: var(--grad-btn); color: #fff; border-radius: 4px; padding: 2px 6px;
    }
    @keyframes iso-pulse { 0%,100%{ box-shadow: 0 0 0 0 rgba(113,155,255,0.4); } 50%{ box-shadow: 0 0 0 5px rgba(113,155,255,0); } }
    .iso-post.pulse { animation: iso-pulse 2s ease-in-out infinite; }
    .iso-stats { display: flex; border-top: 1px solid rgba(77,119,221,0.1); padding: 14px 20px; }
    .iso-stat { flex: 1; text-align: center; }
    .iso-num { display: block; font-size: 18px; font-weight: 500; color: var(--blue-primary); }
    .iso-stat span:last-child { font-size: 10px; color: rgba(0,0,0,0.35); }

    /* ════════════════════════════════════
       02 · AUDIOVISUAL — Player de vídeo
    ════════════════════════════════════ */
    .illo-video { display: flex; flex-direction: column; gap: 12px; }
    .ivd-screen {
      background: #eef0fa; border: 1px solid rgba(77,119,221,0.18);
      border-radius: 14px; height: 280px; position: relative;
      overflow: hidden; display: flex; align-items: center; justify-content: center;
      box-shadow: 0 8px 40px rgba(77,119,221,0.10);
    }
    .ivd-play-ring {
      width: 80px; height: 80px; border-radius: 50%;
      border: 2px solid rgba(113,155,255,0.5);
      display: flex; align-items: center; justify-content: center;
      animation: ivd-ring 3s ease-in-out infinite;
    }
    @keyframes ivd-ring { 0%,100%{ transform: scale(1); opacity:1; } 50%{ transform: scale(1.1); opacity:0.7; } }
    .ivd-play-btn {
      width: 0; height: 0; border-style: solid;
      border-width: 13px 0 13px 22px;
      border-color: transparent transparent transparent var(--blue-accent);
      margin-left: 5px;
    }
    .ivd-scan {
      position: absolute; inset: 0;
      background: linear-gradient(180deg, transparent 0%, rgba(113,155,255,0.04) 50%, transparent 100%);
      animation: ivd-scan 3s linear infinite;
    }
    @keyframes ivd-scan { 0%{ transform: translateY(-100%); } 100%{ transform: translateY(100%); } }
    .ivd-overlay-top {
      position: absolute; top: 10px; left: 12px; right: 12px;
      display: flex; align-items: center; gap: 6px; font-size: 10px; color: rgba(26,10,62,0.5);
    }
    .ivd-rec-dot { width: 6px; height: 6px; border-radius: 50%; background: #ff4444; animation: ivd-rec 1s ease-in-out infinite alternate; }
    @keyframes ivd-rec { from{ opacity:1; } to{ opacity:0.2; } }
    .ivd-overlay-bot { position: absolute; bottom: 10px; left: 12px; right: 12px; display: flex; flex-direction: column; gap: 4px; }
    .ivd-timeline { height: 3px; background: rgba(0,0,0,0.1); border-radius: 2px; position: relative; }
    .ivd-tl-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 45%; background: var(--blue-accent); border-radius: 2px; }
    .ivd-tl-head { position: absolute; top: 50%; left: 45%; transform: translate(-50%,-50%); width: 10px; height: 10px; border-radius: 50%; background: #fff; }
    .ivd-timecode { font-size: 9px; color: rgba(0,0,0,0.35); text-align: right; }
    .ivd-strips { display: flex; gap: 6px; }
    .ivd-strip { flex: 1; height: 44px; border-radius: 6px; background: rgba(77,119,221,0.12); border: 1px solid rgba(77,119,221,0.18); animation: ivd-strip 2s ease-in-out infinite; }
    .ivd-strip.s2 { animation-delay: 0.3s; background: rgba(135,142,210,0.2); }
    .ivd-strip.s3 { animation-delay: 0.6s; background: rgba(43,70,135,0.3); }
    @keyframes ivd-strip { 0%,100%{ opacity:0.6; } 50%{ opacity:1; } }
    .ivd-meta { display: flex; gap: 8px; }
    .ivd-chip { font-size: 10px; color: var(--blue-primary); border: 1px solid rgba(77,119,221,0.25); border-radius: 20px; padding: 4px 10px; background: rgba(77,119,221,0.07); }

    /* ════════════════════════════════════
       03 · PERFORMANCE — Dashboard
    ════════════════════════════════════ */
    .illo-dash { background: #fff; border: 1px solid rgba(77,119,221,0.15); border-radius: 18px; padding: 22px; box-shadow: 0 8px 40px rgba(77,119,221,0.10); }
    .idash-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
    .idash-title { font-size: 13px; color: rgba(0,0,0,0.4); }
    .idash-status { font-size: 12px; color: #22c55e; }
    .idash-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
    .idash-kpi { background: rgba(77,119,221,0.06); border: 1px solid rgba(77,119,221,0.12); border-radius: 12px; padding: 14px; }
    .idash-kpi-val { display: block; font-size: 24px; font-weight: 500; color: var(--blue-primary); }
    .idash-kpi-lbl { display: block; font-size: 11px; color: rgba(0,0,0,0.35); margin-bottom: 8px; }
    .idash-bar { height: 4px; background: rgba(0,0,0,0.07); border-radius: 2px; }
    .idash-bar-fill { height: 100%; border-radius: 2px; animation: idash-grow 2s ease forwards; }
    @keyframes idash-grow { from{ width:0; } }
    .b1 { width: 82%; background: var(--blue-primary); }
    .b2 { width: 65%; background: var(--purple); }
    .b3 { width: 74%; background: var(--blue-mid); }
    .b4 { width: 48%; background: var(--blue-deep); }
    .idash-chart { margin-bottom: 16px; }
    .idash-chart-bars { display: flex; align-items: flex-end; gap: 6px; height: 80px; }
    .idash-cb { flex: 1; border-radius: 4px 4px 0 0; background: rgba(77,119,221,0.15); height: var(--h); animation: idash-bar-in 1s ease forwards; }
    .idash-cb.active { background: var(--blue-primary); }
    @keyframes idash-bar-in { from{ transform: scaleY(0); transform-origin: bottom; } }
    .idash-foot { display: flex; gap: 6px; }
    .idash-tag { font-size: 10px; color: rgba(0,0,0,0.45); border: 1px solid rgba(77,119,221,0.18); border-radius: 20px; padding: 3px 8px; }

    /* ════════════════════════════════════
       04 · SITES — Mockup de browser
    ════════════════════════════════════ */
    .illo-browser { background: #fff; border: 1px solid rgba(77,119,221,0.15); border-radius: 14px; overflow: hidden; position: relative; box-shadow: 0 8px 40px rgba(77,119,221,0.10); }
    .ibr-bar { display: flex; align-items: center; gap: 12px; padding: 13px 18px; background: #f4f5fb; border-bottom: 1px solid rgba(77,119,221,0.1); }
    .ibr-dots { display: flex; gap: 6px; }
    .ibr-dots span { width: 11px; height: 11px; border-radius: 50%; }
    .ibr-dots span:nth-child(1) { background: #ff5f57; }
    .ibr-dots span:nth-child(2) { background: #febc2e; }
    .ibr-dots span:nth-child(3) { background: #28c840; }
    .ibr-url { flex: 1; text-align: center; font-size: 11px; color: rgba(0,0,0,0.35); background: rgba(255,255,255,0.8); border-radius: 4px; padding: 4px 10px; border: 1px solid rgba(77,119,221,0.1); }
    .ibr-live { font-size: 11px; color: var(--blue-primary); }
    .ibr-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
    .ibr-nav { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #f4f5fb; border-radius: 8px; }
    .ibr-nav-logo { width: 30px; height: 10px; background: var(--blue-primary); border-radius: 2px; }
    .ibr-nav-links { display: flex; gap: 8px; flex: 1; }
    .ibr-nav-links div { height: 7px; width: 34px; background: rgba(0,0,0,0.08); border-radius: 3px; }
    .ibr-nav-btn { width: 50px; height: 18px; background: var(--grad-btn); border-radius: 5px; }
    .ibr-hero-block { display: flex; flex-direction: column; gap: 7px; }
    .ibr-h1 { height: 18px; width: 80%; background: rgba(26,10,62,0.12); border-radius: 4px; animation: ibr-fade 2s ease-in-out infinite alternate; }
    .ibr-h2 { height: 13px; width: 60%; background: rgba(26,10,62,0.07); border-radius: 4px; }
    .ibr-h3 { height: 10px; width: 45%; background: rgba(26,10,62,0.04); border-radius: 4px; }
    @keyframes ibr-fade { from{ opacity:0.5; } to{ opacity:1; } }
    .ibr-cta-row { display: flex; gap: 8px; margin-top: 6px; }
    .ibr-cta { height: 24px; width: 86px; background: var(--grad-btn); border-radius: 12px; }
    .ibr-cta.ghost { background: transparent; border: 1px solid rgba(77,119,221,0.3); }
    .ibr-cards { display: flex; gap: 8px; }
    .ibr-card { flex: 1; height: 46px; background: rgba(77,119,221,0.07); border: 1px solid rgba(77,119,221,0.12); border-radius: 8px; }
    .ibr-card.active { background: rgba(77,119,221,0.15); border-color: rgba(77,119,221,0.25); }
    .ibr-metrics {
      display: flex; align-items: center; justify-content: space-around;
      padding: 10px 18px;
      border-top: 1px solid rgba(77,119,221,0.1);
      background: #f4f5fb;
    }
    .ibr-metric { display: flex; flex-direction: column; align-items: center; gap: 2px; }
    .ibr-metric-val { font-size: 14px; font-weight: 700; line-height: 1; }
    .ibr-metric-val.green { color: #22c55e; }
    .ibr-metric-val.blue  { color: var(--blue-primary); }
    .ibr-metric-lbl { font-size: 9px; color: rgba(0,0,0,0.35); letter-spacing: 0.5px; }
    .ibr-metric-sep { width: 1px; height: 28px; background: rgba(77,119,221,0.12); }

    /* ════════════════════════════════════
       05 · SISTEMAS — Mockup de app
    ════════════════════════════════════ */
    /* ── App · Device shell ── */
    .illo-app { display: flex; flex-direction: column; align-items: center; gap: 18px; }
    .iapp-device {
      position: relative;
      width: 240px;
    }
    /* Botões laterais */
    .iapp-btn-vol-up, .iapp-btn-vol-dn, .iapp-btn-power {
      position: absolute;
      background: #c8cce8;
      border-radius: 3px;
    }
    .iapp-btn-vol-up { left: -4px; top: 80px; width: 4px; height: 28px; }
    .iapp-btn-vol-dn { left: -4px; top: 116px; width: 4px; height: 28px; }
    .iapp-btn-power   { right: -4px; top: 96px; width: 4px; height: 44px; }
    /* Frame */
    .iapp-frame {
      background: #f4f5fb;
      border: 2px solid rgba(77,119,221,0.22);
      border-radius: 38px;
      overflow: hidden;
      box-shadow:
        0 0 0 1px rgba(77,119,221,0.12),
        0 24px 64px rgba(77,119,221,0.15);
      display: flex;
      flex-direction: column;
    }
    /* Status bar */
    .iapp-statusbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 20px 4px;
    }
    .iapp-time { font-size: 12px; font-weight: 600; color: rgba(26,10,62,0.8); letter-spacing: 0.5px; }
    .iapp-statusbar-icons { display: flex; align-items: center; gap: 5px; }
    .iapp-battery { width: 22px; height: 11px; border: 1.5px solid rgba(26,10,62,0.3); border-radius: 3px; position: relative; padding: 1.5px; }
    .iapp-battery::after { content: ''; position: absolute; right: -5px; top: 50%; transform: translateY(-50%); width: 3px; height: 5px; background: rgba(26,10,62,0.25); border-radius: 0 2px 2px 0; }
    .iapp-battery-fill { height: 100%; width: 70%; background: #4ade80; border-radius: 1px; }
    /* Dynamic island */
    .iapp-island {
      width: 88px; height: 28px;
      background: #000;
      border-radius: 20px;
      margin: 0 auto 8px;
      position: relative;
    }
    .iapp-island::after {
      content: '';
      position: absolute;
      right: 10px; top: 50%; transform: translateY(-50%);
      width: 8px; height: 8px;
      border-radius: 50%;
      background: rgba(77,119,221,0.6);
      box-shadow: 0 0 6px rgba(77,119,221,0.8);
      animation: iapp-blink 2s ease-in-out infinite;
    }
    @keyframes iapp-blink { 0%,100%{ opacity:1; } 50%{ opacity:0.3; } }
    /* Tela */
    .iapp-screen { padding: 0 16px 12px; flex: 1; }
    .iapp-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
    .iapp-greeting { font-size: 10px; color: rgba(26,10,62,0.4); margin-bottom: 1px; }
    .iapp-appname { font-size: 16px; font-weight: 600; color: #1a0a3e; }
    .iapp-avatar {
      width: 32px; height: 32px; border-radius: 50%;
      background: var(--grad-btn);
      display: flex; align-items: center; justify-content: center;
      font-size: 11px; font-weight: 700; color: #fff;
    }
    /* Cards */
    .iapp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
    .iapp-card {
      background: #fff;
      border: 1px solid rgba(77,119,221,0.15);
      border-radius: 14px; padding: 12px 10px;
    }
    .iapp-card.c2 { background: #fff; border-color: rgba(135,142,210,0.2); }
    .iapp-card-label { font-size: 10px; color: rgba(26,10,62,0.4); margin-bottom: 4px; }
    .iapp-card-val { font-size: 22px; font-weight: 600; color: var(--blue-primary); line-height: 1; }
    .iapp-sparkline { height: 18px; position: relative; overflow: hidden; margin-top: 6px; }
    .iapp-spark { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(113,155,255,0.5), transparent); animation: iapp-spark 2s linear infinite; }
    @keyframes iapp-spark { from{ transform: translateX(-100%); } to{ transform: translateX(100%); } }
    /* Lista */
    .iapp-section-lbl { font-size: 10px; color: rgba(26,10,62,0.35); letter-spacing: 0.8px; text-transform: uppercase; margin-bottom: 8px; }
    .iapp-list { display: flex; flex-direction: column; gap: 6px; }
    .iapp-row {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 10px; border-radius: 12px;
      background: rgba(77,119,221,0.04);
    }
    .iapp-row.active { background: rgba(77,119,221,0.1); border: 1px solid rgba(77,119,221,0.2); }
    .iapp-row-icon { font-size: 16px; line-height: 1; flex-shrink: 0; }
    .iapp-row-lines { flex: 1; display: flex; flex-direction: column; gap: 2px; }
    .iapp-row-name { font-size: 11px; color: rgba(26,10,62,0.75); font-weight: 500; }
    .iapp-row-sub  { font-size: 9px;  color: rgba(26,10,62,0.35); }
    .iapp-row-val  { font-size: 12px; color: #22c55e; font-weight: 600; white-space: nowrap; }
    /* Home bar */
    .iapp-home-bar {
      width: 100px; height: 4px;
      background: rgba(77,119,221,0.15);
      border-radius: 3px;
      margin: 8px auto 12px;
    }
    /* Pills */
    .iapp-pills { display: flex; gap: 8px; }
    .iapp-pills span { font-size: 11px; color: rgba(26,10,62,0.5); border: 1px solid rgba(77,119,221,0.2); border-radius: 20px; padding: 5px 14px; }

    /* ════════════════════════════════════
       06 · AUTOMAÇÃO — Fluxo de nós
    ════════════════════════════════════ */
    /* ── Flow redesign ── */
    .illo-flow {
      background: #fff;
      border: 1px solid rgba(77,119,221,0.15);
      border-radius: 18px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-shadow: 0 8px 40px rgba(77,119,221,0.10);
    }
    .ifl-header {
      display: flex; align-items: center; gap: 8px;
      padding: 13px 18px;
      border-bottom: 1px solid rgba(77,119,221,0.1);
      background: #f4f5fb;
    }
    .ifl-header-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; animation: ifl-hd-blink 2s ease-in-out infinite; flex-shrink: 0; }
    @keyframes ifl-hd-blink { 0%,100%{ opacity:1; } 50%{ opacity:0.3; } }
    .ifl-header-lbl { font-size: 12px; color: rgba(26,10,62,0.65); font-weight: 500; flex: 1; }
    .ifl-header-count { font-size: 10px; color: rgba(26,10,62,0.35); }

    .ifl-canvas {
      padding: 20px 20px 16px;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      position: relative;
    }

    /* Steps (nós principais) */
    .ifl-step { position: relative; z-index: 1; }
    .ifl-node {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 14px;
      border-radius: 12px;
      border: 1px solid rgba(77,119,221,0.15);
      background: #f4f5fb;
    }
    .ifl-node.trigger { border-color: rgba(77,119,221,0.3); background: rgba(77,119,221,0.08); }
    .ifl-node.ai      { border-color: rgba(135,142,210,0.3); background: rgba(135,142,210,0.08); }
    .ifl-node-icon {
      width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
      background: rgba(77,119,221,0.1);
      display: flex; align-items: center; justify-content: center;
    }
    .ifl-node-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
    .ifl-node-type { font-size: 9px; color: rgba(26,10,62,0.35); letter-spacing: 0.8px; text-transform: uppercase; }
    .ifl-node-name { font-size: 12px; color: rgba(26,10,62,0.8); font-weight: 500; }
    .ifl-node-status {
      width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
    }
    .ifl-node-status.active { background: #4ade80; box-shadow: 0 0 6px rgba(74,222,128,0.6); animation: ifl-hd-blink 2s ease-in-out infinite; }
    .ifl-node-status.ai-pulse { background: var(--purple); box-shadow: 0 0 6px rgba(135,142,210,0.6); animation: ifl-ai-pulse 1.5s ease-in-out infinite; }
    @keyframes ifl-ai-pulse { 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.5); opacity:0.5; } }

    /* Conectores verticais */
    .ifl-connector {
      height: 32px; position: relative;
      display: flex; align-items: center; justify-content: center;
    }
    .ifl-conn-line {
      width: 2px; height: 100%;
      background: linear-gradient(180deg, rgba(113,155,255,0.5) 0%, rgba(113,155,255,0.15) 100%);
    }
    .ifl-conn-dot {
      position: absolute; top: 0;
      width: 9px; height: 9px; border-radius: 50%;
      background: var(--blue-accent);
      box-shadow: 0 0 6px rgba(113,155,255,0.8);
      animation: ifl-travel 1.8s ease-in-out infinite;
    }
    .cd2 { animation-delay: 0.9s; }
    @keyframes ifl-travel { 0%{ top:0; opacity:1; } 100%{ top:32px; opacity:0; } }

    /* Nós de saída */
    .ifl-outputs {
      display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
      position: relative; z-index: 1;
    }
    .ifl-out-node {
      display: flex; flex-direction: column; align-items: center; gap: 6px;
      padding: 10px 6px;
      border-radius: 10px;
      border: 1px solid rgba(77,119,221,0.2);
      background: rgba(77,119,221,0.07);
    }
    .ifl-out-icon {
      width: 28px; height: 28px; border-radius: 7px;
      background: rgba(77,119,221,0.12);
      display: flex; align-items: center; justify-content: center;
    }
    .ifl-out-node span { font-size: 10px; color: rgba(26,10,62,0.55); }

    /* Footer de métricas */
    .ifl-footer {
      display: flex; align-items: center; justify-content: space-around;
      padding: 11px 18px;
      border-top: 1px solid rgba(77,119,221,0.1);
      background: #f4f5fb;
    }
    .ifl-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
    .ifl-stat-val { font-size: 13px; font-weight: 600; color: var(--blue-primary); }
    .ifl-stat-lbl { font-size: 9px; color: rgba(26,10,62,0.35); letter-spacing: 0.5px; }
    .ifl-stat-sep { width: 1px; height: 28px; background: rgba(77,119,221,0.12); }

    /* ícones SVG app (substituem emojis) */
    .iapp-row-icon {
      width: 28px; height: 28px; border-radius: 8px;
      background: rgba(77,119,221,0.12);
      flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .iapp-icon-bag::after {
      content: '';
      display: block;
      width: 14px; height: 13px;
      background: rgba(113,155,255,0.7);
      clip-path: polygon(25% 0%, 75% 0%, 100% 30%, 100% 100%, 0% 100%, 0% 30%);
    }
    .iapp-icon-star::after {
      content: '';
      display: block;
      width: 14px; height: 14px;
      background: #878ED2;
      clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    }
    .svc-dots {
      display: none;
    }
    .svc-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: rgba(113,155,255,0.25);
      transition: background 0.3s, transform 0.3s;
      cursor: pointer;
    }
    .svc-dot.active {
      background: var(--blue-accent);
      transform: scale(1.5);
    }

    /* ══════════════════════════════════════════════════════ */
    /* PROCESS — sticky stack                                 */
    /* ══════════════════════════════════════════════════════ */
    #process {
      background: #ffffff;
      position: relative;
      padding: 40px 0;
    }
    .proc-header {
      text-align: center;
      padding: 0 80px 80px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }
    .proc-headline {
      font-size: clamp(36px, 4vw, 64px);
      font-weight: 400;
      line-height: 1.15;
      letter-spacing: -0.02em;
      color: rgba(255,255,255,0.92);
    }
    /* ── Mobile tabs (hidden on desktop) ─────────── */
    .proc-tabs {
      display: none;
    }
    .proc-tab {
      padding: 10px 32px;
      border-radius: 40px;
      font-size: 14px;
      font-weight: 500;
      font-family: var(--font);
      background: transparent;
      border: 1px solid rgba(0,0,0,0.15);
      color: rgba(0,0,0,0.45);
      cursor: pointer;
      transition: all 0.25s ease;
    }
    .proc-tab.is-active {
      background: linear-gradient(135deg, #878ed2 0%, #4d77dd 100%);
      border-color: transparent;
      color: #fff;
    }

    /* ── Two-column layout ────────────────────────── */
    .proc-columns {
      padding: 0 85px 0 98px;
      display: grid;
      /* Coluna única (Tecnologia comentada). Para reativar as 2 colunas,
         volte para: grid-template-columns: 1fr 160px 1fr; */
      grid-template-columns: minmax(0, 760px);
      justify-content: center;
      gap: 0;
      align-items: start;
    }
    .proc-divider {
      background: rgba(0,0,0,0.08);
      width: 1px;
      align-self: stretch;
      margin: 0 auto;
    }
    .proc-col-label {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 0 36px;
    }
    .proc-col-label span {
      font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--blue-primary);
    font-weight: 400;
    }

    /* ── proc-list inside column (reset outer padding) */
    .proc-col .proc-list {
      padding: 0;
      max-width: none;
      margin: 0;
    }

    .proc-list {
      max-width: 1000px;
      margin: 0 auto;
      padding: 0 80px;
    }
    .proc-item {
      position: sticky;
      top: 80px;
      background: #ffffff;
      border-top: 1px solid rgba(0,0,0,0.1);
      z-index: 1;
    }
    .proc-item:first-child { border-top: none; }
    .proc-item--no-border { border-top-color: transparent; }
    /* cada item empilha acima do anterior */
    .proc-item:nth-child(1) { z-index: 1; }
    .proc-item:nth-child(2) { z-index: 2; }
    .proc-item:nth-child(3) { z-index: 3; }
    .proc-item:nth-child(4) { z-index: 4; }
    .proc-item:last-child {
      border-bottom: 1px solid rgba(0,0,0,0.1);
    }

    /* ── name max-width reset for two-column context ── */
    .proc-col .proc-name {
      max-width: none;
    }
    .proc-item-inner {
      padding: 48px 0 56px;
    }
    .proc-item-top {
      display: flex;
      align-items: center;
      gap: 13px;
    }
    .proc-num {
      font-size: clamp(64px, 8vw, 120px);
      font-weight: 700;
      line-height: 0.9;
      background: linear-gradient(135deg, #878ed2 0%, #4d77dd 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      flex-shrink: 0;
      width: clamp(80px, 10vw, 150px);
    }
    .proc-name {
      font-size: 49px;
      font-weight: 400;
      line-height: 1.1;
      color: #0a0a0a;
      flex: 1;
      letter-spacing: -1px;
      max-width: 100%;
      white-space: nowrap;
    }
    .proc-slash {
      color: #000000;
      margin-right: 2px;
      font-weight: 700;
    }
    .proc-icon { display: none; }
    .proc-desc {
      font-size: 15px;
      line-height: 1.75;
      color: rgba(0,0,0,0.5);
      margin-top: 20px;
    }
    .proc-tags {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 20px;
    }
    .proc-tags span {
      font-size: 12px;
      padding: 5px 14px;
      border-radius: 40px;
      border: 1px solid #4d77dd;
      color: #4d77dd;
      letter-spacing: 0.5px;
    }
    .proc-cta-wrap {
      display: flex;
      justify-content: center;
      padding: 80px 0 20px;
    }
    @media (max-width: 1024px) {
      /* Mobile/tablet: show tabs, single visible column */
      .proc-tabs {
        display: flex;
        gap: 8px;
        padding: 0 24px 36px;
        justify-content: center;
      }
      .proc-columns {
        grid-template-columns: 1fr;
        padding: 0;
      }
      .proc-divider { display: none; }
      .proc-col { display: none; padding: 0; }
      .proc-col.is-active { display: block; }
      .proc-col-label { display: none; }
      .proc-col .proc-list { padding: 0 20px; }
      .proc-header { padding: 0 10px 60px; }
      .proc-item { top: 10px; }

      .proc-col .proc-name { font-size: 28px; white-space: normal; }
      .proc-col .proc-num { font-size: 52px; width: 64px; }
    }

    /* ══════════════════════════════════════════════════════ */
    /* SOCIAL PROOF — layout editorial estilo referência      */
    /* ══════════════════════════════════════════════════════ */
    #social-proof {
      background: #4d77dd;
      overflow-x: clip; /* overflow: hidden quebra position: sticky — usar clip no eixo X */
    }
    .sp-outer {
      /* altura calculada dinamicamente pelo JS — esse valor é só fallback */
      height: 350vh;
      position: relative;
    }
    .sp-inner {
      position: sticky;
      top: 0;
      height: 100vh;
      display: flex;
      align-items: flex-start;
      overflow: hidden;
    }
    .sp-left {
      width: 50%;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 80px;
      flex-shrink: 0;
    }
    .sp-eyebrow {
      font-size: 13px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: rgba(255,255,255,0.55);
      font-weight: 400;
      margin-bottom: 24px;
      clip-path: none !important;
    }
    .sp-title {
      font-size: clamp(48px, 5.5vw, 88px);
      font-weight: 400;
      line-height: 1.05;
      letter-spacing: -0.03em;
      color: #fff;
    }
    .sp-right {
      width: 50%;
      height: 70vh;
      position: sticky;
      top: 15vh;
      overflow: hidden;
      padding: 0 80px 0 40px;
      /* fade topo e fundo */
      -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
      mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
    }
    .sp-track {
      display: flex;
      flex-direction: column;
      gap: 0;
      will-change: transform;
      
    }
    .sp-item {
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      -webkit-backdrop-filter: blur(20px) saturate(1.4);
      /* Borda de luz — simula o reflexo do vidro */
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-bottom-color: rgba(255, 255, 255, 0.06);
      border-right-color: rgba(255, 255, 255, 0.06);
      border-radius: 20px;
      padding: 40px 48px;
      gap: 20px;
      transform-style: preserve-3d;
      will-change: transform;
      /* Sombra interna de luz no topo — efeito de espessura do vidro */
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        0 8px 32px rgba(30, 60, 140, 0.25),
        0 2px 8px rgba(0, 0, 0, 0.12);
      position: relative;
      overflow: hidden;
      transition: box-shadow 0.4s ease, transform 0.4s ease;
    }

    /* Reflexo interno — camada de luz difusa no topo do card */
    .sp-item::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 50%;
      background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.07) 0%,
        rgba(255, 255, 255, 0) 100%
      );
      border-radius: 20px 20px 0 0;
      pointer-events: none;
    }

    /* Fio de luz diagonal — detalhe de vidro premium */
    .sp-item::after {
      content: '';
      position: absolute;
      top: -30%;
      left: -10%;
      width: 60%;
      height: 160%;
      background: linear-gradient(
        105deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.04) 40%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.04) 60%,
        rgba(255, 255, 255, 0) 100%
      );
      pointer-events: none;
      transform: skewX(-15deg);
      z-index: 0;
    }

    /* Glare do VanillaTilt fica acima dos pseudo-elementos, abaixo do conteúdo */
    .sp-item .js-tilt-glare {
      border-radius: 20px;
      z-index: 2;
    }
    .sp-body {
      display: flex;
      flex-direction: column;
      gap: 8px;
      position: relative;
      z-index: 1;
    }
    .sp-qq {
      display: block;
      font-size: 38px;
      color: rgba(255,255,255,0.4);
      line-height: 1;
      margin-bottom: 0;
      font-family: Georgia, serif;
    }
    .sp-quote {
      font-size: 20px;
      font-weight: 400;
      line-height: 1.6;
      color: #fff;
      margin-bottom: 10px;
    }
    .sp-reinforcement {
      font-size: 14px;
      font-weight: 400;
      line-height: 1.6;
      color: rgba(186, 209, 255, 0.74);
      margin-top: -12px;
    }
    .sp-author {
      display: flex;
      align-items: center;
      gap: 14px;
      position: relative;
      z-index: 1;
    }
    .sp-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
      border: 2px solid rgba(255,255,255,0.3);
    }
    .sp-name {
      font-size: 15px;
      font-weight: 600;
      color: #fff;
    }
    .sp-role {
      font-size: 13px;
      font-weight: 400;
      color: rgba(255,255,255,0.6);
      margin-top: 2px;
    }
    @media (max-width: 1024px) {
      /* ── Social Proof mobile/tablet — carrossel horizontal ── */
      .sp-outer { height: auto; }
      .sp-inner {
        position: relative;
        height: auto;
        flex-direction: column;
        overflow: visible;
      }
      .sp-left {
        position: relative;
        width: 100%;
        height: auto;
        padding: 40px 24px 28px;
      }
      .sp-right {
        position: relative;
        top: auto;
        width: 100%;
        height: auto;
        padding: 0;
        -webkit-mask-image: none;
        mask-image: none;
        overflow: visible;
      }
      .sp-track {
        transform: none !important;
        display: flex;
        flex-direction: row;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding: 16px 24px;
        scroll-padding-left: 24px;
        scrollbar-width: none;
        -ms-overflow-style: none;
      }
      .sp-track::-webkit-scrollbar { display: none; }
      .sp-item {
        flex: 0 0 76vw;
        scroll-snap-align: start;
        padding: 20px 18px;
        gap: 12px;
      }
      .sp-quote { font-size: 18px; }
      .sp-item { gap: 16px; }
      /* controles */
      .sp-controls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        padding: 24px 24px 56px;
      }
      .sp-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgba(255,255,255,0.15);
        border: 1px solid rgba(255,255,255,0.25);
        color: #fff;
        cursor: pointer;
        transition: background 0.2s;
        flex-shrink: 0;
      }
      .sp-btn:hover { background: rgba(255,255,255,0.25); }
      .sp-btn:disabled { opacity: 0.3; cursor: default; }
      .sp-dots {
        display: flex;
        gap: 6px;
        align-items: center;
      }
      .sp-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(255,255,255,0.4);
        transition: all 0.25s ease;
        cursor: pointer;
      }
      .sp-dot.active {
        width: 20px;
        border-radius: 3px;
        background: #fff;
      }
      /* ── Manifesto mobile — ver bloco @media 768px no final do arquivo ── */
    }
    /* controles visíveis apenas no mobile — o @media acima já define display:flex */
    .sp-controls { display: none; }
    @media (max-width: 1024px) {
      .sp-controls { display: flex; }
    }

    /* ══════════════════════════════════════════════════════ */
    /* MANIFESTO                                              */
    /* ══════════════════════════════════════════════════════ */
    #manifesto {
      background: #ffffff;
      overflow-x: clip;
    }
    .mf-outer {
      height: 400vh;
      position: relative;
    }
    .mf-inner {
      position: sticky;
      top: 0;
      height: 100vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 48px;
      width: 100%;
      padding: 0 40px;
    }
    /* blob — nasce do centro do símbolo */
    .mf-blob {
      position: absolute;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: #4d77dd;
      transform: translate(-50%, -50%) scale(0);
      z-index: 3;
      pointer-events: none;
    }
    /* frase 2 — sobre o blob azul */
    .mf-phrases {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 4;
      pointer-events: none;
    }
    .mf-phrase2-group {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 32px;
      opacity: 0;
      filter: blur(12px);
      will-change: opacity, filter;
      width: min(1300px, 100vw);
      padding: 0 40px;
    }
    .mf-sym-white {
      width: 200px;
      height: 200px;
      opacity: 0;
      transform: scale(0.7);
      will-change: opacity, transform;
    }
    .mf-sym-white svg { width: 100%; height: 100%; }
    /* grupo: coroa + frase */
    .mf-group {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 48px;
      width: 100%;
    }
    /* símbolo único centralizado */
    .mf-symbols {
      position: relative;
      width: 200px;
      height: 170px;
      flex-shrink: 0;
    }
    .mf-sym {
      position: absolute;
      width: 200px;
      height: 200px;
    }
    .mf-sym svg { width: 100%; height: 100%; }
    /* mostra apenas a coroa do centro (gradiente) e oculta as outras */
    .mf-sym--top, .mf-sym--left, .mf-sym--right { display: none; }
    .mf-sym--center {
      top: 0; left: 0;
      opacity: 1;
    }
    /* frase 1 — dentro do .mf-group, flui no flex */
    #mfPhrase1 {
      position: relative;
      text-align: center;
      max-width: 1300px;
      padding: 0 40px;
      font-size: 92.8px;
      font-weight: 400;
      line-height: 1.2;
      letter-spacing: -0.02em;
      color: rgba(10,10,10,0.85);
      opacity: 1;
      will-change: transform, opacity, color;
    }
    #mfPhrase2 {
      text-align: center;
      width: 100%;
      font-size: 92.8px;
      font-weight: 400;
      line-height: 1.2;
      letter-spacing: -0.02em;
      color: #fff;
    }
    /* frases wrapper (phrase2) */
    .mf-phrases {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 4;
      pointer-events: none;
    }
    @media (max-width: 1024px) {
      .mf-symbols { width: 240px; height: 200px; }
      .mf-sym { width: 80px; height: 80px; }
      .mf-phrase { font-size: clamp(28px, 6vw, 42px); }
    }
    /* ══════════════════════════════════════════════════════ */
    /* WE — Sobre nós / Fundadores                           */
    /* ══════════════════════════════════════════════════════ */
    #we {
      background: #fff;
      padding: 120px 40px;
    }
    .we-inner {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 64px;
    }
    /* no desktop, we-header agrupa label/título/subtítulo sem alterar o layout */
    .we-header {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24px;
    }
    .we-header .we-title { margin-top: 0; }
    .we-header .we-subtitle { margin-top: 0; }
    .we-label {
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--blue-primary);
      clip-path: none !important;
    }
    .we-title {
      font-size: clamp(36px, 5vw, 72px);
      font-weight: 400;
      line-height: 1.15;
      letter-spacing: -0.02em;
      color: #0a0a0a;
      text-align: center;
      margin-top: -40px;
    }
    .we-subtitle {
      font-size: 16px;
      line-height: 1.7;
      color: rgba(0,0,0,0.45);
      text-align: center;
      max-width: 580px;
      margin-top: -40px;
    }
    .we-founders {
      display: flex;
      gap: 160px;
      align-items: flex-start;
      justify-content: center;
    }
    .we-founder {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24px;
      transform-style: preserve-3d;
      cursor: pointer;
      will-change: transform;
      border-radius: 20px;
      padding: 16px;
    }
    .we-photo {
      width: 380px;
      height: 380px;
      position: relative;
    }
    .we-photo {
      position: relative;
      width: 380px;
      height: 380px;
      clip-path: path('M310.6 94.5C289.0 50.0 243.0 19.6 190.2 19.6C137.5 19.6 91.5 49.9 69.8 94.4C33.7 111.0 7.6 148.2 7.6 191.3C7.6 234.4 32.4 271.6 68.4 288.2C89.8 333.2 135.9 363.9 188.9 363.9C241.6 363.9 287.6 333.4 309.2 288.6C345.5 272.1 371.2 234.7 371.2 191.8C371.2 148.9 345.5 111.2 310.6 94.5Z');
    }
    .we-photo-ring { display: none; }
    .we-photo-bg { display: none; }
    .we-photo-img-wrap {
      position: absolute;
      inset: 0;
      z-index: 2;
      transition: transform 0.6s ease;
      clip-path: path('M310.6 94.5C289.0 50.0 243.0 19.6 190.2 19.6C137.5 19.6 91.5 49.9 69.8 94.4C33.7 111.0 7.6 148.2 7.6 191.3C7.6 234.4 32.4 271.6 68.4 288.2C89.8 333.2 135.9 363.9 188.9 363.9C241.6 363.9 287.6 333.4 309.2 288.6C345.5 272.1 371.2 234.7 371.2 191.8C371.2 148.9 345.5 111.2 310.6 94.5Z');
      background: #3a3a3a;
    }
    .we-founder:hover .we-photo-img-wrap {
      transform: rotate(25deg);
    }
    .we-photo-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      display: block;
      transition: transform 0.6s ease;
      transform-origin: center center;
    }
    .we-founder:hover .we-photo-img {
      transform: rotate(-25deg) scale(0.95);
    }
    .we-more {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 16px;
      font-weight: 500;
      color: #0a0a0a;
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.3s ease, transform 0.3s ease;
      cursor: pointer;
    }
    .we-founder:hover .we-more {
      opacity: 1;
      transform: translateY(0);
    }
    .we-name {
      font-size: clamp(28px, 3vw, 48px);
      font-weight: 400;
      line-height: 1.15;
      letter-spacing: -0.02em;
      color: #0a0a0a;
      text-align: center;
    }

    /* ══════════════════════════════════════════════════════ */
    /* MODAIS — Fundadores                                   */
    /* ══════════════════════════════════════════════════════ */
    .we-modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.4);
      z-index: 1000;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s ease;
    }
    .we-modal-overlay.active { opacity: 1; pointer-events: all; }
    .we-modal {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      transform: translateY(100%);
      background: #fff;
      border-radius: 24px 24px 0 0;
      height: 90vh;
      width: 100%;
      overflow: hidden;
      z-index: 1001;
      display: flex;
      flex-direction: column;
      opacity: 1;
      pointer-events: none;
      transition: transform 0.45s cubic-bezier(0.4,0,0.2,1);
    }
    .we-modal-body {
      display: flex;
      width: 100%;
      flex-direction: row;
      justify-content: space-between;
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      gap: 64px;
      padding: 56px 80px 80px;
    }
    .we-modal.active {
      transform: translateY(0);
      pointer-events: all;
    }
    .we-modal-close {
      position: absolute;
      top: 24px;
      right: 24px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: #f0f0f0;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border: none;
      transition: background 0.2s;
    }
    .we-modal-close:hover { background: #e0e0e0; }
    .we-modal-photo {
      display: flex;
      flex-direction: column;
      gap: 24px;
      width: 60%;
      flex-shrink: 0;
      padding: 8vh 5rem 2.5rem 3rem;
    }
    .we-modal-photo .we-photo-img-wrap {
      width: 420px;
      height: 420px;
      position: relative;
      clip-path: path('M343.3 104.4C319.3 55.3 268.5 21.7 210.1 21.7C151.9 21.7 101.1 55.2 77.1 104.3C37.2 122.6 8.4 163.8 8.4 211.4C8.4 259 35.8 300.2 75.6 318.5C99.3 368.2 150.2 402.1 208.7 402.1C267 402.1 317.8 368.5 341.6 318.9C381.8 300.7 410.2 259.4 410.2 212C410.2 164.5 381.8 122.9 343.3 104.4Z');
      background: #3a3a3a;
      margin: 0 auto 10vh;
    }
    .we-modal-photo .we-photo-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      
    }
    .we-modal-social-label {
      font-size: 15px;
      color: #888;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 12px;
    }
    .we-modal-social-links {
      display: flex;
      gap: 16px;
    }
    .we-modal-social-links svg {
      width: 28px;
      height: 28px;
    }
    .we-modal-social-links a { color: #0a0a0a; transition: color 0.2s; }
    .we-modal-social-links a:hover { color: var(--blue-primary); }
    .we-modal-info {
      display: flex;
      flex-direction: column;
      gap: 24px;
      padding-top: 10vh;
      padding-right: 5rem;
      justify-content: start;
    }
    .we-modal-name {
      font-size: clamp(40px, 5vw, 72px);
      font-weight: 400;
      line-height: 1.1;
      letter-spacing: -0.02em;
      color: #0a0a0a;
    }
    .we-modal-role {
      font-size: 17px;
      line-height: 1.5;
      color: #888;
      max-width: 640px;
    }
    .we-modal-section {
      font-size: 15px;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #aaa;
      margin-top: 16px;
    }
    .we-modal-bio:last-child {
      padding-bottom: 80px;
    }
    .we-modal-bio {
      font-size: 18px;
      line-height: 1.75;
      color: #444;
      max-width: 640px;
    }

    /* ══════════════════════════════════════════════════════ */
    /* CTA                                                    */
    /* ══════════════════════════════════════════════════════ */
    #cta {
      background: #000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 100px 120px;
    }
    .cta-card {
      background: var(--grad-process);
      border-radius: 20px;
      width: 100%;
      height: 647px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .cta-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 40px;
      width: 1205px;
      padding-bottom: 56px;
      text-align: center;
    }
    .cta-logo { width: 224px; height: 116px; object-fit: contain; }
    .cta-headline {
      font-size: 70px;
      font-weight: 400;
      line-height: 85px;
      letter-spacing: -3.5px;
      background: linear-gradient(95deg,#fff 23%,#e2e5ff 61%,#c5cbff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      width: 1034px;
    }
    .cta-body {
      font-size: 18px;
      font-weight: 400;
      line-height: 1.6;
      color: var(--text-83);
      width: 814px;
    }
    /* ══════════════════════════════════════════════════════ */
    /* FAQ                                                   */
    /* ══════════════════════════════════════════════════════ */
    #faq {
      background: #ffffff;
      padding: 140px 90px;
    }
    .faq-inner {
      max-width: none;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 72px;
    }
    .faq-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 64px;
      flex-wrap: wrap;
    }
    .faq-title {
      font-size: clamp(36px, 4.8vw, 64px);
      font-weight: 400;
      line-height: 1.1;
      letter-spacing: -0.02em;
      color: #0a0a0a;
    }
    .faq-title-slash {
      color: var(--blue-primary);
      font-weight: 500;
    }
    .faq-sub {
      font-size: 15px;
      line-height: 1.7;
      color: rgba(10,10,10,0.55);
      max-width: 360px;
      text-align: right;
    }
    .faq-list {
      display: flex;
      flex-direction: column;
      border-top: 1px solid rgba(10,10,10,0.12);
    }
    .faq-item {
      border-bottom: 1px solid rgba(10,10,10,0.12);
    }
    .faq-q {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 28px;
      padding: 26px 4px;
      background: none;
      border: none;
      cursor: pointer;
      text-align: left;
      font-family: var(--font);
      color: #0a0a0a;
      transition: color 0.25s ease;
    }
    .faq-q:hover { color: var(--blue-primary); }
    .faq-q-num {
      flex-shrink: 0;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.08em;
      color: rgba(10,10,10,0.4);
      width: 52px;
    }
    .faq-q-text {
      flex: 1;
      font-size: clamp(16px, 1.5vw, 19px);
      font-weight: 500;
    }
    .faq-q-icon {
      position: relative;
      flex-shrink: 0;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(10,10,10,0.4);
      transition: transform 0.35s ease, color 0.25s ease;
    }
    .faq-item.is-active .faq-q-icon {
      transform: rotate(135deg);
      color: var(--blue-primary);
    }
    .faq-a {
      display: grid;
      grid-template-rows: 0fr;
      opacity: 0;
      transition: grid-template-rows 0.4s ease, opacity 0.3s ease;
    }
    .faq-a p {
      overflow: hidden;
      min-height: 0;
      font-size: 15px;
      line-height: 1.7;
      color: rgba(10,10,10,0.55);
      max-width: 720px;
      padding-left: 80px;
      padding-right: 44px;
    }
    .faq-item.is-active .faq-a {
      grid-template-rows: 1fr;
      opacity: 1;
    }
    .faq-item.is-active .faq-a p { padding-bottom: 26px; }

    /* ══════════════════════════════════════════════════════ */
    /* FOOTER                                                 */
    /* ══════════════════════════════════════════════════════ */
    .site-footer {
      background: var(--blue-primary);
      padding: 80px 48px 48px;
      overflow: hidden;
    }
    .footer-wordmark-wrap {
      padding-bottom: 64px;
      border-bottom: 1px solid rgba(255,255,255,0.15);
    }
    .footer-logo-svg {
      width: 100%;
      height: auto;
      display: block;
      color: #fff;
      user-select: none;
      pointer-events: none;
    }
    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding-top: 28px;
    }
    .footer-copy {
      font-size: 13px;
      color: rgba(255,255,255,0.5);
    }
    .footer-nav {
      display: flex;
      gap: 28px;
    }
    .footer-nav a {
      font-size: 13px;
      color: rgba(255,255,255,0.6);
      text-decoration: none;
      text-transform: lowercase;
      transition: color 0.2s;
    }
    .footer-nav a:hover { color: #fff; }
    .footer-social {
      display: flex;
      gap: 20px;
      align-items: center;
    }
    .footer-social a {
      font-size: 13px;
      color: rgba(255,255,255,0.6);
      text-decoration: none;
      transition: color 0.2s;
      display: flex;
    }
    .footer-social a:hover { color: #fff; }

    /* ─── CARD FLOAT — animação 3D autônoma nos depoimentos ── */
    @keyframes cardFloat {
      0%   { transform: perspective(1200px) rotateX(0deg)    rotateY(0deg)    translateZ(0px); }
      20%  { transform: perspective(1200px) rotateX(4deg)    rotateY(-6deg)   translateZ(14px); }
      40%  { transform: perspective(1200px) rotateX(-3deg)   rotateY(7deg)    translateZ(10px); }
      60%  { transform: perspective(1200px) rotateX(6deg)    rotateY(3deg)    translateZ(18px); }
      80%  { transform: perspective(1200px) rotateX(-4deg)   rotateY(-4deg)   translateZ(8px); }
      100% { transform: perspective(1200px) rotateX(0deg)    rotateY(0deg)    translateZ(0px); }
    }

    /* Cada card tem duração e delay diferentes — nunca ficam em sincronia */
    .sp-item:nth-child(1) { animation: cardFloat 9s ease-in-out infinite; animation-delay: 0s; }
    .sp-item:nth-child(2) { animation: cardFloat 11s ease-in-out infinite; animation-delay: -3.5s; }
    .sp-item:nth-child(3) { animation: cardFloat 8.5s ease-in-out infinite; animation-delay: -6s; }
    .sp-item:nth-child(4) { animation: cardFloat 10s ease-in-out infinite; animation-delay: -1.5s; }
    .sp-item:nth-child(5) { animation: cardFloat 9.5s ease-in-out infinite; animation-delay: -5s; }

    /* Quando o mouse passa por cima, pausa a animação CSS para o VanillaTilt assumir */
    .sp-item:hover { animation-play-state: paused; }

    /* ─── ANIMATIONS ─────────────────────────────────────── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(32px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .animate-on-scroll {
      opacity: 0;
      transform: translateY(32px);
      transition: opacity .7s ease, transform .7s ease;
    }
    .animate-on-scroll.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .delay-1 { transition-delay: .1s; }
    .delay-2 { transition-delay: .2s; }
    .delay-3 { transition-delay: .3s; }
    .delay-4 { transition-delay: .4s; }
    .delay-5 { transition-delay: .5s; }

    /* ─── HERO INITIAL ANIMATION ─────────────────────────── */
    .hero-headline {
      animation: fadeUp .9s ease both;
      animation-delay: .1s;
    }
    .hero-sub      { animation: fadeUp .9s ease both; animation-delay: .3s; }
    .hero-buttons  { animation: fadeUp .9s ease both; animation-delay: .5s; }

    /* ─── CURSOR GLOW ────────────────────────────────────── */
    .cursor-glow {
      position: fixed;
      top: -300px;
      left: -300px;
      width: 600px;
      height: 600px;
      border-radius: 50%;
      background: radial-gradient(circle,
        rgba(113, 155, 255, 0.16) 0%,
        rgba(77, 119, 221, 0.08) 40%,
        transparent 70%
      );
      pointer-events: none;
      z-index: 9998;
      will-change: transform;
      opacity: 0;
      transition: opacity 0.4s ease;
    }

    /* ══════════════════════════════════════════════════════ */
    /* HAMBURGER MENU                                         */
    /* ══════════════════════════════════════════════════════ */
    .navbar-mobile-menu {
      display: none;
    }

    /* ══════════════════════════════════════════════════════ */
    /* MENU OVERLAY                                           */
    /* ══════════════════════════════════════════════════════ */
    .menu-overlay {
      position: fixed;
      inset: 0;
      z-index: 200;
      pointer-events: none;
    }
    .menu-overlay.open {
      pointer-events: all;
    }
    /* bolinha que expande */
    .menu-overlay-bg {
      position: absolute;
      /* começa no canto superior direito (onde fica o hamburger) */
      top: 40px;
      right: 90px;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: #4d77dd;
      transform: scale(0);
      transform-origin: center;
      transition: transform 0.7s cubic-bezier(0.77, 0, 0.18, 1), border-radius 0.7s ease;
    }
    .menu-overlay.open .menu-overlay-bg {
      transform: scale(80);
      border-radius: 0;
    }
    /* conteúdo do menu */
    .menu-overlay-content {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 80px;
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.35s ease 0.45s, transform 0.35s ease 0.45s;
      pointer-events: none;
    }
    .menu-overlay.open .menu-overlay-content {
      opacity: 1;
      transform: translateY(0);
      pointer-events: all;
    }
    .menu-overlay-close {
      position: absolute;
      top: 36px;
      right: 90px;
      display: flex;
      align-items: center;
      gap: 10px;
      color: #fff;
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      cursor: pointer;
      background: none;
      border: none;
      font-family: var(--font);
    }
    .menu-overlay-nav {
      display: flex;
      flex-direction: column;
      gap: 0;
      margin-top: clamp(16px, 4vh, 40px);
    }
    .menu-overlay-link {
      display: flex;
      align-items: baseline;
      gap: 16px;
      /* considera largura E altura (min entre vw e vh) para não estourar a
         altura da tela em notebooks (telas largas mas baixas) */
      font-size: clamp(48px, min(7vw, 11vh), 100px);
      font-weight: 400;
      color: #fff;
      line-height: 1.1;
      letter-spacing: -0.03em;
      text-decoration: none;
      border-top: 1px solid rgba(255,255,255,0.15);
      padding: clamp(12px, 2vh, 20px) 0;
      transition: opacity 0.2s ease;
    }
    .menu-overlay-link:last-child {
      border-bottom: 1px solid rgba(255,255,255,0.15);
    }
    .menu-overlay-link:hover { opacity: 0.6; }
    .mol-num {
      font-size: 14px;
      font-weight: 400;
      color: rgba(255,255,255,0.45);
      letter-spacing: 1px;
      align-self: flex-start;
      margin-top: 14px;
    }
    .menu-overlay-cta {
      margin-top: clamp(20px, 4vh, 48px);
      font-size: 16px;
      font-weight: 500;
      color: rgba(255,255,255,0.6);
      text-decoration: underline;
      text-underline-offset: 4px;
      transition: color 0.2s;
    }
    .menu-overlay-cta:hover { color: #fff; }
    .menu-overlay-lang {
      display: none;
    }
    .menu-lang-btn {
      background: none;
      border: none;
      color: rgba(255,255,255,0.4);
      font-size: 15px;
      font-weight: 500;
      letter-spacing: 0.06em;
      cursor: pointer;
      padding: 0;
      transition: color 0.2s;
    }
    .menu-lang-btn.active { color: #fff; }
    .menu-lang-btn:hover { color: #fff; }
    .menu-lang-sep {
      color: rgba(255,255,255,0.25);
      font-size: 15px;
    }

    /* Telas de altura reduzida (notebooks ~720–800px): mantém o menu centralizado
       e ajusta a fonte pela altura para os 5 links + CTA caberem sem cortar. */
    @media (max-height: 800px) {
      .menu-overlay-link { font-size: clamp(40px, 10vh, 72px); padding: clamp(8px, 1.6vh, 16px) 0; }
      .mol-num { margin-top: 10px; }
      .menu-overlay-nav { margin-top: clamp(12px, 3vh, 32px); }
      .menu-overlay-cta { margin-top: clamp(16px, 3.5vh, 40px); }
    }

    .navbar-hamburger {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 7px;
      cursor: pointer;
      padding: 0;
      flex-shrink: 0;
      margin-left: auto;
      background: none;
      border: none;
      width: auto;
      height: auto;
    }
    .navbar-hamburger span {
      display: block;
      width: 32px;
      height: 2px;
      background: #ffffff;
      border-radius: 2px;
      transition: transform .3s, opacity .3s;
    }
    .navbar-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .navbar-hamburger.open span:nth-child(2) { opacity: 0; }
    .navbar-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* ══════════════════════════════════════════════════════ */
    /* RESPONSIVE NOTEBOOKS — hero section                   */
    /* ══════════════════════════════════════════════════════ */

    /* 1728px — MacBook Pro 16 (1117px altura) */
    @media (max-width: 1728px) {
      .hero-content { top: 46%; width: 62%; gap: 40px; }
      .hero-headline { font-size: 84px; letter-spacing: -3px; }
      .textoTransicao p { font-size: 5.27rem; }
      /* Services */
      .svc-content { gap: 120px; }
      .svc-visual-wrap { width: 500px; height: 480px; }
      .svc-step-num { font-size: 82px; }
      .svc-left { margin-left: 50px; }
      .svc-stepper { padding-top: 44px; }
      .svc-step-connector { height: 62px; }
      /* Founders */
      #we { padding: 100px 40px; }
      .we-photo { transform: scale(0.88); margin-top: -23px; margin-bottom: -23px; }
      .we-founders { gap: 130px; }
      /* Modal */
      .we-modal-photo .we-photo-img-wrap { transform: scale(0.88); margin-top: -25px; margin-bottom: -25px; }
      .we-modal-name { font-size: clamp(38px, 4.5vw, 68px); }
      /* FAQ — mantém padding lateral igual ao do navbar (90px) para alinhar
         o conteúdo com a logo e o ícone de menu; só reduz o vertical. */
      #faq { padding: 110px 90px; }
    }

    /* 1643px */
    @media (max-width: 1643px) {
      .hero-content { top: 45%; width: 65%; }
      .hero-headline { font-size: 78px; letter-spacing: -2.8px; }
      .textoTransicao p { font-size: 5rem; }
      /* Services */
      .svc-content { gap: 100px; }
      .svc-visual-wrap { width: 460px; height: 440px; }
      .svc-step-num { font-size: 76px; }
      .svc-left { margin-left: 32px; }
      .svc-stepper { padding-top: 40px; }
      .svc-step-connector { height: 56px; }
      /* Founders */
      #we { padding: 92px 40px; }
      .we-photo { transform: scale(0.83); margin-top: -32px; margin-bottom: -32px; }
      .we-founders { gap: 110px; }
      /* Modal */
      .we-modal-photo .we-photo-img-wrap { transform: scale(0.83); margin-top: -36px; margin-bottom: -36px; }
      .we-modal-name { font-size: clamp(36px, 4.2vw, 64px); }
    }

    /* 1559px — MacBook Air (975px altura) */
    @media (max-width: 1559px) {
      .hero-content { top: 45%; width: 68%; }
      .hero-headline { font-size: 72px; letter-spacing: -2.6px; }
      .textoTransicao p { font-size: 4.75rem; }
      #navbar {
      padding: 50px 60px;
      }
      .hero-clients { bottom: 50px; }
      .lang-switcher { bottom: 50px; }
      .scroll-indicator { bottom: 48px; }
      /* Services */
      .svc-content { gap: 80px; }
      .svc-visual-wrap { width: 420px; height: 400px; }
      .svc-step-num { font-size: 70px; }
      .svc-left { margin-left: 16px; width: 95%; }
      .svc-stepper { padding-top: 36px; }
      .svc-step-connector { height: 50px; }
      /* Founders */
      #we { padding: 84px 40px; }
      .we-photo { transform: scale(0.79); margin-top: -40px; margin-bottom: -40px; }
      .we-founders { gap: 90px; }
      /* Modal */
      .we-modal-body { padding: 56px 64px 80px; }
      .we-modal-photo .we-photo-img-wrap { transform: scale(0.79); margin-top: -44px; margin-bottom: -44px; }
      .we-modal-name { font-size: clamp(34px, 4vw, 60px); }
      .we-modal-bio { font-size: 16px; }
    }

    /* 1536px — MacBook Air (975px altura) */
    @media (max-width: 1536px) {
      .textoTransicao p { font-size: 4.63rem; }
      .svc-stepper { padding-top: 34px; }
      .svc-step-connector { height: 46px; }
    }

    /* 1504px — Pro Display XDR (846px altura) */
    @media (max-width: 1504px) {
      .hero-content { top: 45%; width: 72%; gap: 36px; }
      .hero-headline { font-size: 56px; letter-spacing: -2.4px; }
      .textoTransicao p { font-size: 4.5rem; }
      /* Services */
      .svc-sticky { padding: 0 64px 0 80px; }
      .svc-content { gap: 70px; }
      .svc-visual-wrap { width: 380px; height: 360px; }
      .svc-step-num { font-size: 64px; }
      .svc-left { margin-left: 0; width: 100%; }
      .svc-stepper { padding-top: 30px; }
      .svc-step-connector { height: 42px; }
      /* Founders */
      #we { padding: 76px 40px; }
      .we-photo { transform: scale(0.74); margin-top: -49px; margin-bottom: -49px; }
      .we-founders { gap: 76px; }
      /* Modal */
      .we-modal-body { padding: 48px 56px 80px; }
      .we-modal-photo .we-photo-img-wrap { transform: scale(0.74); margin-top: -55px; margin-bottom: -55px; }
      .we-modal-name { font-size: clamp(32px, 3.8vw, 56px); }
      .we-modal-bio { font-size: 16px; }
    }

    /* 1350px — VW Emulator PS (942px altura) */
    @media (max-width: 1350px) {
      .hero-content { top: 44%; width: 78%; gap: 32px; }
      .hero-headline { font-size: 52px; letter-spacing: -2.2px; }
      .hero-sub { font-size: 16px; }
      .hero-clients { bottom: 40px; }
      .lang-switcher { bottom: 40px; }
      .scroll-indicator { bottom: 28px; }
      .textoTransicao p { font-size: 4.12rem; }
      /* Services */
      .svc-sticky { padding: 0 52px 0 68px; }
      .svc-content { gap: 56px; }
      .svc-visual-wrap { width: 340px; height: 320px; }
      .svc-step-num { font-size: 58px; letter-spacing: -3px; }
      .svc-left { margin-left: 0; width: 100%; }
      .svc-feats li { font-size: 13px; padding: 6px 10px 6px 16px; }
      /* Founders */
      #we { padding: 56px 40px; }
      .we-inner { gap: 48px; }
      .we-title { font-size: clamp(28px, 3.8vw, 56px); }
      .we-subtitle { font-size: 15px; }
      .we-photo { transform: scale(0.60); margin-top: -76px; margin-bottom: -76px; }
      .we-founders { gap: 52px; }
      .we-name { font-size: clamp(22px, 2.4vw, 36px); }
      /* Modal */
      .we-modal-body { padding: 48px 48px 80px; }
      .we-modal-photo { padding: 5vh 3rem 2rem 2rem; }
      .we-modal-photo .we-photo-img-wrap { transform: scale(0.75); margin-top: -53px; margin-bottom: -53px; }
      .we-modal-info { padding-top: 6vh; padding-right: 3rem; }
      .we-modal-name { font-size: clamp(32px, 3.8vw, 54px); }
      .we-modal-bio { font-size: 15px; }
      /* Manifesto */
      #mfPhrase1, #mfPhrase2 { font-size: 54px; }
      .mf-sym-white { width: 160px; height: 160px; }
      .mf-symbols { width: 160px; height: 136px; }
      .mf-sym { width: 160px; height: 160px; }
    }

    /* ══════════════════════════════════════════════════════ */
    /* RESPONSIVE — 1280px (large laptops)                   */
    /* ══════════════════════════════════════════════════════ */
    @media (max-width: 1280px) {
      .navbar-inner {
        width: auto;
        gap: 32px;
        padding: 0 16px;
      }
      /* Studio Display 1280x720 — altura crítica de 720px */
      .hero-content { top: 46%; width: 84%; gap: 28px; }
      .hero-headline { font-size: 48px; letter-spacing: -2px; }
      .hero-sub { font-size: 15px; width: 82%; }
      .hero-clients { bottom: 24px; }
      .scroll-indicator { bottom: 24px; }
      .lang-switcher { bottom: 40px; }
      .textoTransicao p { font-size: 2.2rem; }
      .section-headline { font-size: 50px; line-height: 62px; }
      .we-headline { font-size: 68px; line-height: 78px; letter-spacing: -3px; white-space: normal; }
      .we-inner { width: 100%; height: auto; }
      .we-image { width: 480px; height: 460px; }
      .cta-headline { font-size: 56px; line-height: 68px; width: 90%; }
      .cta-body { width: 90%; }
      .cta-inner { width: 90%; }
      .footer-cols { gap: 80px; }
      .footer-content { padding: 83px 80px 0; }
      .testimonial-card { width: 460px; }
      .testimonial-quote { width: 100%; }
      .testimonial-body { width: 100%; }
      /* FAQ — navbar aqui fica a 90px (#navbar) + 16px (.navbar-inner) = 106px
         da borda; o FAQ acompanha para manter o alinhamento com logo/menu. */
      #faq { padding: 100px 106px; }
      /* Services — Studio Display 1280x720 */
      .svc-sticky { padding: 0 40px 0 56px; }
      .svc-content { gap: 48px; }
      .svc-visual-wrap { width: 300px; height: 290px; }
      .svc-step-num { font-size: 52px; letter-spacing: -2px; }
      .svc-left { margin-left: 0; width: 100%; }
      /* Founders */
      #we { padding: 48px 40px; }
      .we-inner { gap: 40px; }
      .we-title { font-size: clamp(26px, 3.4vw, 48px); }
      .we-subtitle { font-size: 14px; }
      .we-photo { transform: scale(0.54); margin-top: -87px; margin-bottom: -87px; }
      .we-founders { gap: 44px; }
      .we-name { font-size: clamp(20px, 2.2vw, 32px); }
      /* Modal */
      .we-modal-body { padding: 40px 40px 80px; }
      .we-modal-photo { padding: 4vh 2.5rem 1.5rem 1.5rem; }
      .we-modal-photo .we-photo-img-wrap { transform: scale(0.64); margin-top: -76px; margin-bottom: -76px; }
      .we-modal-info { padding-top: 5vh; padding-right: 2.5rem; }
      .we-modal-name { font-size: clamp(28px, 3.4vw, 48px); }
      .we-modal-bio { font-size: 14px; }
    }

    /* ══════════════════════════════════════════════════════ */
    /* RESPONSIVE — 1024px (tablets landscape / small laptop) */
    /* ══════════════════════════════════════════════════════ */
    @media (max-width: 1024px) {
      .menu-overlay-lang { display: flex; align-items: center; gap: 10px; margin-top: 32px; }
      .lang-switcher { display: none; }

      /* Navbar */
      #navbar { padding: 0 32px; height: 72px; }
      .navbar-logo { margin-right: 32px; }
      .navbar-links { gap: 4px; }
      .navbar-links a { font-size: 13px; }
      .navbar-btn { font-size: 13px; padding: 0 16px; }

      /* Hero */
      #hero { height: auto; min-height: 780px; }
      .hero-content { top: 50%; transform: translate(-50%,-50%); width: 88%; gap: 24px; }
      .hero-headline { font-size: 52px; letter-spacing: -2.2px; }
      .hero-sub { font-size: 16px; width: 90%; }

      /* Services sticky */
      .svc-sticky { padding: 0 40px 0 64px; }
      .svc-content { gap: 48px; }
      .svc-visual-wrap { width: 280px; height: 280px; }
      .svc-icon-large { width: 140px; height: 140px; }

      /* Social proof — sem padding no #social-proof (sticky layout usa sp-outer/sp-inner) */
      .testimonials-row { flex-wrap: wrap; justify-content: center; }
      .testimonial-card { width: 420px; height: auto; }

      /* We */
      #we { padding: 80px 40px; }
      .we-inner { gap: 40px; }
      .we-headline { font-size: 56px; line-height: 66px; letter-spacing: -2.5px; }
      .we-mission { width: 100%; max-width: 420px; }
      .we-image { width: 380px; height: 380px; }

      /* CTA */
      #cta { padding: 80px 40px; }
      .cta-card { height: auto; padding: 60px 24px; }
      .cta-headline { font-size: 48px; line-height: 58px; width: 100%; }
      .cta-body { width: 100%; }
      .cta-inner { width: 100%; padding-bottom: 0; }

      /* Footer */
      .site-footer { padding: 48px 24px 40px; }
      .footer-wordmark-wrap { padding-bottom: 40px; }
      .footer-bottom { flex-direction: column; align-items: flex-start; gap: 20px; }
      .footer-nav { flex-wrap: wrap; gap: 16px 24px; }
      .footer-social { gap: 16px; }
    }

    /* ══════════════════════════════════════════════════════ */
    /* RESPONSIVE — ≤1024px (tablets + phones)                */
    /* ══════════════════════════════════════════════════════ */
    @media (max-width: 1024px) {
      /* Navbar — hamburger */
      #navbar { padding: 0 20px; height: 64px; }
      .navbar-inner {
        width: 100%;
        height: 48px;
        gap: 0;
        padding: 0 14px;
        position: relative;
      }
      .navbar-links { display: none; }
      .navbar-btn { display: none; }
      .navbar-hamburger { display: flex; }

      /* Mobile menu overlay */
      .navbar-mobile-menu {
        display: none;
        position: fixed;
        top: 72px;
        left: 0;
        width: 100%;
        background: rgba(10,12,24,.97);
        backdrop-filter: blur(12px);
        flex-direction: column;
        align-items: center;
        gap: 0;
        z-index: 99;
        padding: 24px 24px 32px;
        border-bottom: 1px solid rgba(113,155,255,.15);
      }
      .menu-overlay-content { padding: 96px 24px 40px; }
      .menu-overlay-close { top: 28px; right: 24px; }
      .menu-overlay-bg { right: 24px; }

      /* Menu overlay — links: fonte que cabe a palavra mais longa
         ("/depoimentos") sem transbordar, e nav abaixo do botão CLOSE. */
      .menu-overlay-nav { margin-top: 8px; }
      .menu-overlay-link {
        font-size: clamp(30px, 8.5vw, 44px);
        gap: 12px;
        padding: 14px 0;
        white-space: nowrap;
      }
      .menu-overlay-link span:not(.mol-num) {
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .mol-num { font-size: 12px; margin-top: 8px; }
      .menu-overlay-cta { margin-top: 24px; font-size: 15px; }
      .navbar-mobile-menu.open { display: flex; }
      .navbar-mobile-menu a {
        width: 100%;
        text-align: center;
        font-size: 18px;
        color: var(--text-83);
        padding: 16px 0;
        border-bottom: 1px solid rgba(255,255,255,.06);
        transition: color .2s;
      }
      .navbar-mobile-menu a:last-child { border-bottom: none; }
      .navbar-mobile-menu a:hover { color: #fff; }
      .navbar-mobile-cta {
        margin-top: 20px;
        background: #fff !important;
        color: var(--purple) !important;
        border-radius: 10px;
        padding: 12px 28px !important;
        width: auto !important;
        font-weight: 500;
        border-bottom: none !important;
      }

      /* Hero */
      #hero {
        min-height: 100vh;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 120px;
        padding-bottom: 32px;
        background: url('assets/hero_background.webp') center 10% / auto 125% no-repeat;
      }
      .hero-content {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        width: 100%;
        padding: 0 10px;
        margin: 0 auto;
        gap: 28px;
        box-sizing: border-box;
      }
      .hero-headline { font-size: 52px; letter-spacing: -2px; line-height: 1.08; }
      .hero-sub { font-size: 15px; width: 100%; }
      .hero-buttons { flex-direction: column; gap: 12px; width: 100%; align-items: center; }
      .btn-hero-white, .btn-hero-dark {
        width: 278px;
        min-width: unset;
        white-space: nowrap;
        justify-content: center;
        height: 54px;
        font-size: 18px;
      }
      .btn-hero-white { gap: 18px; }
      .btn-hero-dark { gap: 50px; }
      .btn-hero-white-icon, .btn-hero-dark-icon { width: 36px; height: 36px; }
      /* hero-transition e textoTransicao são controlados pelo GSAP — não usar display:none */
      html { background-color: #4D77DD; } /* evita barra branca do pin-spacer no iOS */
      .scroll-indicator { display: none; }
      .textoTransicao p { font-size: clamp(2rem, 4.8vw, 2.5rem); line-height: 1.45; padding: 0 10px; }

      /* ── Scroll indicator global — fixo em toda a página ── */
      .scroll-indicator-global {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 7px;
        position: fixed;
        bottom: 32px;
        right: 20px;
        z-index: 9999;
        color: rgba(255, 255, 255, 0.5);
        pointer-events: none;
        transition: color 0.4s ease, opacity 0.5s ease;
      }
      .scroll-indicator-global.on-light {
        color: rgba(0, 0, 0, 0.25);
      }
      .scroll-indicator-label {
        display: block;
        font-size: 8px;
        font-weight: 500;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        font-family: var(--font);
      }
      .scroll-dot {
        animation: scroll-dot-move 1.6s ease-in-out infinite;
        transform-origin: center;
      }
      @keyframes scroll-dot-move {
        0%   { transform: translateY(0px);  opacity: 1;   }
        60%  { transform: translateY(7px);  opacity: 0.3; }
        100% { transform: translateY(0px);  opacity: 1;   }
      }

      .hero-clients {
        position: relative;
        left: auto;
        bottom: auto;
        transform: none;
        width: 92%;
        margin: 60px auto 0;
        padding: 20px 0;
        border-radius: 20px;
        overflow: hidden;
      }
      .hero-clients-track { animation: heroClientsScroll 18s linear infinite; }
      .hero-clients-set { padding: 0 24px; justify-content: flex-start; gap: 32px; width: max-content; flex-shrink: 0; }
      .hero-clients-set img { height: 28px; }
      .hero-clients-set img { height: 30px; }

      /* Clients */
      #clients { padding: 60px 10px; gap: 40px; }
      .clients-label { width: 100%; font-size: 16px; }

      /* Section headlines (outros) */
      .section-headline { font-size: 38px; line-height: 48px; letter-spacing: -1.5px; }
      .section-sub { width: 100% !important; font-size: 16px; }

      /* ── Services — Opção A mobile ─────────────────── */

      /* Sticky: flex coluna, começa do topo */
      .svc-sticky {
        padding: 0 10px;
        justify-content: flex-start;
        overflow: hidden;
      }
      .svc-section-lbl { left: 16px; top: 14px; font-size: 10px; }
      .svc-counter { top: 14px; right: 16px; }

      /* Conteúdo: flex coluna, ocupa espaço restante */
      .svc-content {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        overflow: hidden;
        padding-top: 46px; /* espaço para label/counter absolutos */
        padding-left: 0;
        padding-right: 0;
      }

      /* Stepper oculto */
      .svc-stepper { display: none; }

      /* Imagem: sobe para o topo (order -1) dentro do svc-content */
      .svc-right {
        display: flex;
        order: -1;
        width: 100%;
        flex-shrink: 0;
        position: relative;
      }
      .svc-visual-wrap { width: 100%; height: 260px; }
      .svc-orb-bg { display: none; }

      /* Dots: overlay no fundo da imagem */
      .svc-dots {
        display: flex;
        position: absolute;
        bottom: 12px;
        left: 0; right: 0;
        justify-content: center;
        align-items: center;
        gap: 6px;
        padding: 0;
        z-index: 5;
      }
      .svc-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.5); }
      .svc-dot.active { width: 22px; border-radius: 3px; transform: none; background: #fff; }

      /* Texto: abaixo da imagem, scrollável se necessário */
      .svc-left {
        flex: 1;
        min-height: 0;
        padding: 12px 10px 20px;
        margin-left: 0;
        width: 100%;
        overflow-y: auto;
      }

      .svc-title { font-size: 30px; letter-spacing: -1.5px; white-space: nowrap; }
      .svc-desc { font-size: 14px; max-width: 100%; }
      .svc-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
      .svc-feats li { font-size: 12px; padding: 5px 8px 5px 12px; gap: 5px; min-width: 0; }
      .svc-feats li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
      .svc-feats li svg { width: 22px; height: 22px; flex-shrink: 0; }
      .svc-btn { width: 240px; min-width: unset; height: 54px; flex-shrink: 0; align-self: center; justify-content: center; }
      .service-card h3 { white-space: normal; font-size: 22px; }

      /* Process */
      #process { padding-top: 80px; padding-bottom: 60px; }
      .proc-item { top: 120px; }

      /* Social proof */
      .testimonials-row { flex-direction: column; align-items: stretch; }
      .testimonial-card { width: 100%; height: auto; padding: 28px 24px; }
      .testimonial-quote { font-size: 18px; line-height: 26px; }
      .testimonial-body { font-size: 15px; }

      /* We */
      #we { padding: 60px 10px; overflow: hidden; }
      .we-inner { flex-direction: column; height: auto; gap: 40px; }
      .we-header {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }
      .we-title { margin-top: 0; }
      .we-left { gap: 28px; padding-bottom: 0; }
      .we-headline { font-size: 48px; line-height: 56px; letter-spacing: -2px; white-space: normal; }
      .we-mission { width: 100%; max-width: 100%; }
      .we-mission p { font-size: 22px; }
      .we-image { width: 100%; height: 320px; }
      .we-image img { position: relative; top: auto; height: 100%; width: 100%; object-fit: cover; }
      .we-founders { flex-direction: column; gap: 40px; align-items: center; }
      .we-founder { width: 100%; max-width: 340px; }
      .we-photo { width: 280px; height: 280px; clip-path: circle(50%); }
      .we-photo-img-wrap { clip-path: circle(50%); }
      .we-more { opacity: 1; transform: translateY(0); }

      /* Modal mobile */
      .we-modal {
        height: 92dvh;
        overflow: hidden;
      }
      .we-modal-body {
        flex-direction: column;
        align-items: center;
        gap: 0;
        padding: 24px 0 0;
        overflow-y: auto;
      }
      .we-modal-photo {
        width: 100%;
        padding: 16px 24px 0;
        align-items: center;
        gap: 16px;
      }
      .we-modal-photo .we-photo-img-wrap {
        width: 180px;
        height: 180px;
        margin: 0 auto 0;
        clip-path: circle(50%);
        transform: none;
      }
      .we-modal-info {
        width: 100%;
        padding: 24px 24px 48px;
        gap: 16px;
      }
      .we-modal-name { font-size: clamp(32px, 8vw, 48px); }
      .we-modal-bio { font-size: 15px; line-height: 1.7; }

      /* CTA */
      #cta { padding: 60px 10px; }
      .cta-card { height: auto; padding: 48px 24px; border-radius: 16px; }
      .cta-headline { font-size: 36px; line-height: 46px; letter-spacing: -1.5px; }
      .cta-logo { width: 160px; height: auto; }
      .cta-body { font-size: 16px; }

      /* FAQ */
      #faq { padding: 64px 34px; }
      .faq-inner { gap: 40px; }
      .faq-header { flex-direction: column; align-items: flex-start; gap: 15px; }
      .faq-sub { text-align: left; max-width: 100%; }
      .faq-q { gap: 16px; padding: 22px 0; }
      .faq-q-num { width: 40px; font-size: 11px; }
      .faq-a p { padding-left: 56px; padding-right: 0; }

      /* Footer */
      #footer { height: auto; }
      .footer-nav { gap: 14px 20px; }
      .footer-social { gap: 14px; }

      /* Manifesto */
      .mf-inner { padding: 0 6px; }
      .mf-phrase2-group { padding: 0; }
      #mfPhrase1 { padding: 0 !important; font-size: clamp(40px, 11vw, 64px); }
      #mfPhrase2 { padding: 0; font-size: clamp(40px, 11vw, 64px); }
    }

    /* ══════════════════════════════════════════════════════ */
    /* RESPONSIVE — 480px (phones)                           */
    /* ══════════════════════════════════════════════════════ */
    @media (max-width: 480px) {
      /* Hero */
      #hero {padding-bottom: 24px; }
      .hero-content { gap: 20px; }
      .hero-headline { font-size: 42px; letter-spacing: -1.6px; }
      .hero-sub { font-size: 14px; }
      .hero-clients-set img { height: 26px; }

      /* Section titles */
      .section-headline { font-size: 32px; line-height: 40px; letter-spacing: -1px; }

      /* Services */
      .service-card { padding: 24px 20px; }

      /* We */
      .we-headline { font-size: 38px; line-height: 46px; }
      .we-stat img { width: 150px; }
      .we-stat-text { font-size: 18px; }

      /* CTA */
      .cta-headline { font-size: 28px; line-height: 36px; }
      .cta-body { font-size: 14px; }
      .btn-cta { font-size: 16px; height: 54px; min-width: unset; width: 240px; }
      .svc-btn { width: 240px; }

      /* Process */
      .process-card { padding: 24px 20px; min-height: unset; gap: 32px; }
      .process-card-title h3 { font-size: 22px; }
      .process-card p { font-size: 15px; }

      /* Testimonials */
      .testimonial-avatar { width: 52px; height: 52px; }
      .testimonial-name { font-size: 18px; }

      .hero-buttons {
        margin-top: 30px;
    }
    }

    /* ══════════════════════════════════════════════════════ */
    /* TABLET (609–1024px) — escala maior sobre o layout      */
    /* mobile. Abaixo de 608px (celular) tudo permanece como  */
    /* está; aqui só aumentamos fontes/espaços para a tela    */
    /* maior do tablet.                                        */
    /* ══════════════════════════════════════════════════════ */
    @media (min-width: 609px) and (max-width: 1024px) {
      /* ── Hero ── */
      .hero-headline { font-size: 52px; letter-spacing: -2.2px; }
      .hero-sub { font-size: 17px; }

      /* ── Services ── */
      .svc-feats li { font-size: 15px; padding: 9px 14px 9px 18px; }
    }