:root{
    --radius: 14px;
    --logo-c1: #125c99;
  }
  html[data-theme="dark"]{
    --bg: #0b0d12;
    --bg-soft: #12151c;
    --bg-alt: #171a23;
    --card: #1a1d27;
    --line: #262a36;
    --text: #f3f4f7;
    --muted: #9a9fae;
    --accent: #3697d3;
    --accent-strong: #2b7ab0;
    --accent-soft: rgba(54,151,211,.14);
    --logo-c1: #c5e8ff;
  }
  html[data-theme="light"]{
    --bg: #ffffff;
    --bg-soft: #f4f6fa;
    --bg-alt: #eaeef5;
    --card: #ffffff;
    --line: #e2e6ee;
    --text: #10131a;
    --muted: #5c6270;
    --accent: #2563eb;
    --accent-strong: #1d4ed8;
    --accent-soft: rgba(37,99,235,.10);
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter',sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    transition:background .25s ease, color .25s ease;
  }
  h1,h2,h3,h4{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    line-height:1.1;
    letter-spacing:-0.01em;
  }
  a{color:inherit;text-decoration:none;}
  img,svg.media{max-width:100%;display:block;}
  .container{
    width:100%;
    max-width:1180px;
    margin:0 auto;
    padding:0 24px;
  }
  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:.78rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--accent);
    font-weight:600;
    margin-bottom:14px;
  }
  .eyebrow::before{
    content:"";
    width:22px;height:2px;
    background:var(--accent);
    display:inline-block;
  }
  section{padding:96px 0;transition:background .25s ease;}
  @media(max-width:720px){ section{padding:64px 0;} }
  .bg-a{background:var(--bg);}
  .bg-b{background:var(--bg-soft);}
  .bg-c{background:var(--bg-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}

  /* HEADER */
  header{
    position:fixed;top:0;left:0;right:0;
    z-index:1000;
    background:color-mix(in srgb, var(--bg) 78%, transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav{
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 24px;
    max-width:1180px;margin:0 auto;
    gap:20px;
  }
  .logo{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:1.3rem;
    letter-spacing:-.02em;
    display:flex;align-items:center;gap:8px;
  }
  .logo svg{flex-shrink:0;}
  .logo span{color:var(--accent);}
  .nav-links{
    display:flex;gap:36px;
    list-style:none;
    font-size:.92rem;
    font-weight:500;
    margin-right:auto;
    margin-left:40px;
  }
  .nav-links a{
    opacity:.85;
    transition:opacity .2s;
    position:relative;
  }
  .nav-links a:hover{opacity:1;color:var(--accent);}
  .nav-right{display:flex;align-items:center;gap:14px;}
  .theme-toggle{
    width:40px;height:40px;
    border-radius:50%;
    border:1px solid var(--line);
    background:var(--card);
    color:var(--text);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    transition:border-color .2s, background .2s;
    flex-shrink:0;
  }
  .theme-toggle:hover{border-color:var(--accent);}
  .theme-toggle svg{width:18px;height:18px;}
  .theme-toggle .sun{display:none;}
  html[data-theme="light"] .theme-toggle .moon{display:none;}
  html[data-theme="light"] .theme-toggle .sun{display:block;}
  .nav-cta{
    background:var(--accent);
    color:#fff;
    padding:10px 22px;
    border-radius:999px;
    font-weight:600;
    font-size:.88rem;
    transition:transform .2s, background .2s;
    white-space:nowrap;
  }
  .nav-cta:hover{background:var(--accent-strong);transform:translateY(-1px);}
  .burger{display:none;background:none;border:0;color:var(--text);font-size:1.6rem;cursor:pointer;}
  @media(max-width:860px){
    .nav-links, .nav-cta{display:none;}
    .burger{display:block;}
    .nav-links.open{
      display:flex;flex-direction:column;
      position:absolute;top:100%;left:0;right:0;
      background:var(--bg-soft);
      padding:24px;gap:20px;margin:0;
      border-bottom:1px solid var(--line);
    }
  }

  /* HERO */
  .hero{
    padding:170px 0 110px;
    position:relative;
    overflow:hidden;
  }
  @media(max-width:900px){ .hero{padding:130px 0 70px;} }
  @media(max-width:600px){ .hero{padding:110px 0 56px;} }
  .hero::before{
    content:"";
    position:absolute;
    top:-200px;right:-200px;
    width:600px;height:600px;
    background:radial-gradient(circle, var(--accent-soft), transparent 70%);
    pointer-events:none;
  }
  .hero-inner{
    position:relative;
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:48px;
    align-items:center;
  }
  @media(max-width:900px){ .hero-inner{grid-template-columns:1fr;} }
  .hero h1{
    font-size:clamp(1.9rem, 3.6vw, 2.7rem);
    margin-bottom:22px;
  }
  .hero h1 .stack{
    display:inline-grid;
    align-items:center;
    margin-top:6px;
    max-width:100%;
  }
  .stack-cell{
    grid-area:1/1;
    display:inline-flex;
    align-items:center;
  }
  .stack-sizer{
    visibility:hidden;
  }
  .typewriter{
    display:inline-block;
    color:#fff;
    background:var(--accent);
    padding:2px 14px;
    border-radius:8px;
    font-size:.85em;
    white-space:nowrap;
  }
  .caret{
    display:inline-block;
    margin-left:6px;
    color:var(--accent);
    font-weight:400;
    animation:blink 1s step-end infinite;
  }
  @keyframes blink{ 50%{ opacity:0; } }
  .hero p{
    color:var(--muted);
    font-size:1.1rem;
    max-width:480px;
    margin-bottom:34px;
  }
  .btn{
    display:inline-flex;align-items:center;gap:10px;
    background:var(--accent);
    color:#fff;
    padding:15px 30px;
    border-radius:999px;
    font-weight:600;
    font-size:.95rem;
    border:none;
    cursor:pointer;
    transition:transform .2s, background .2s;
  }
  .btn:hover{transform:translateY(-2px);background:var(--accent-strong);}
  .btn-outline{
    background:transparent;
    border:1px solid var(--line);
    color:var(--text);
  }
  .btn-outline:hover{border-color:var(--accent);background:transparent;color:var(--accent);}
  .hero-actions{display:flex;gap:14px;flex-wrap:wrap;}
  .hero-visual{
    position:relative;
    aspect-ratio:2/1;
    display:flex;align-items:center;justify-content:center;
  }
  .hero-visual svg{width:92%;}

  /* SERVICES */
  .section-head{max-width:620px;margin-bottom:56px;}
  .section-head h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:14px;}
  .section-head p{color:var(--muted);font-size:1.05rem;}

  .grid-3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
  }
  @media(max-width:860px){ .grid-3{grid-template-columns:1fr 1fr;} }
  @media(max-width:560px){ .grid-3{grid-template-columns:1fr;} }

  .card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:32px 26px;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    transition:transform .25s, border-color .25s;
  }
  .card:hover{transform:translateY(-6px);border-color:var(--accent);}
  .card .icn{
    color:var(--accent);
    display:flex;align-items:center;justify-content:center;
    margin-bottom:18px;
  }
  .card .icn svg{width:36px;height:36px;}
  .card h3{font-size:1.15rem;margin-bottom:10px;}
  .card p{color:var(--muted);font-size:.94rem;}

  .why-strip{
    margin-top:22px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
  }
  @media(max-width:860px){ .why-strip{grid-template-columns:1fr;} }

  /* TRAJETORIA */
  .trajetoria-inner{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:60px;
    align-items:center;
  }
  @media(max-width:900px){ .trajetoria-inner{grid-template-columns:1fr;} }
  .trajetoria-visual{
    aspect-ratio:264.1/332.8;
    display:flex;align-items:center;justify-content:center;
  }
  .trajetoria-visual svg{width:62%;}
  .trajetoria h2{font-size:clamp(1.8rem,3.4vw,2.5rem);margin-bottom:18px;}
  .trajetoria p{color:var(--muted);margin-bottom:32px;}
  .stats{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
  }
  .stat b{
    font-family:'Space Grotesk',sans-serif;
    font-size:2.2rem;
    color:var(--accent);
    display:block;
  }
  .stat span{color:var(--muted);font-size:.88rem;}

  /* SOCIAL */
  .social-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
    flex-wrap:wrap;
  }
  .social-links{display:flex;gap:16px;}
  .social-links a{
    width:52px;height:52px;
    border-radius:50%;
    background:var(--card);
    border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;
    transition:.2s;
  }
  .social-links a:hover{background:var(--accent);border-color:var(--accent);color:#fff;}
  /* O desenho do ícone do Facebook tem o peso visual (massa do glifo)
     levemente deslocado para a esquerda dentro do próprio viewBox, então
     mesmo centralizado pelo flex ele parecia "puxado" para a esquerda.
     Este pequeno ajuste recentraliza opticamente o ícone. */
  .icon-fb{ transform:translateX(1px); }
  @media(max-width:640px){
    .social-inner{justify-content:center;text-align:center;}
    .social-links{justify-content:center;width:100%;}
  }

  /* CLIENTES */
  .clients-track-wrap{
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .clients-track{
    display:flex;
    width:max-content;
    will-change:transform;
    animation:clients-scroll 50s linear infinite;
  }
  /* -50% é sempre relativo à largura atual da trilha (2 conjuntos iguais),
     então o loop fecha perfeitamente mesmo que as imagens ainda estejam
     carregando ou tenham tamanhos diferentes — nada de medir pixels em JS.
     Importante: o espaçamento é feito com margin-right em cada imagem
     (em vez de "gap" no flex). Com "gap", o primeiro conjunto some com
     17 espaços internos + só metade do espaço de conexão entre os dois
     conjuntos, então -50% ficava meio "gap" mais curto que a largura real
     de um conjunto — daí o salto visível a cada volta. Com margin-right em
     cada item, cada conjunto já carrega seu próprio espaçamento (18 gaps),
     os dois conjuntos ficam com larguras idênticas e -50% fecha o loop
     com precisão de pixel. */
  @keyframes clients-scroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }
  .clients-track:hover{ animation-play-state:paused; }
  .clients-track img{
    height:64px;width:auto;
    object-fit:contain;
    opacity:.65;
    filter:grayscale(1);
    transition:opacity .2s, filter .2s;
    margin-right:56px;
  }
  .clients-track img:hover{opacity:1;filter:none;}

  /* FAQ */
  .faq-item{
    border-bottom:1px solid var(--line);
  }
  .faq-q{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:24px 4px;
    cursor:pointer;
    font-weight:600;
    font-size:1.02rem;
  }
  .faq-q .plus{
    font-size:1.4rem;
    color:var(--accent);
    transition:transform .25s;
    flex-shrink:0;
    margin-left:20px;
  }
  .faq-item.open .plus{transform:rotate(45deg);}
  .faq-a{
    max-height:0;
    overflow:hidden;
    transition:max-height .3s ease;
    color:var(--muted);
    font-size:.96rem;
  }
  .faq-a-inner{padding:0 4px 24px;}
  .faq-a a{color:var(--accent);text-decoration:underline;}

  /* CONTATO */
  .contato-wrap{max-width:1080px;margin:0 auto;text-align:center;}
  .contato-wrap p.lead{color:var(--muted);max-width:560px;margin:0 auto 40px;}
  .contato-columns{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:28px;
    text-align:left;
    align-items:stretch;
    margin-top:8px;
  }
  @media(max-width:860px){ .contato-columns{grid-template-columns:1fr;} }

  /* CARTÃO DE WHATSAPP */
  .contato-whatsapp-card{
    background:linear-gradient(155deg, var(--accent-soft), var(--card) 55%);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:40px 32px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:14px;
    position:relative;
    overflow:hidden;
  }
  .contato-whatsapp-card::before{
    content:"";
    position:absolute;
    top:-80px;right:-80px;
    width:220px;height:220px;
    background:radial-gradient(circle, var(--accent-soft), transparent 70%);
    pointer-events:none;
  }
  .contato-whatsapp-card .icn{
    color:var(--accent);
    display:flex;align-items:center;justify-content:center;
    margin-bottom:6px;
  }
  .contato-whatsapp-card .icn svg{width:44px;height:44px;}
  .contato-whatsapp-card h3{font-size:1.3rem;}
  .contato-whatsapp-card p{color:var(--muted);font-size:.95rem;}
  .contato-whatsapp-card .value{
    font-weight:600;
    font-size:1.25rem;
    font-family:'Space Grotesk',sans-serif;
    color:var(--text);
  }
  .contato-whatsapp-card .wa-cta{margin-top:6px;}

  /* FORMULARIO DE CONTATO */
  .contato-form-wrap{
    text-align:left;
  }
  .contact-form{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:36px;
    display:flex;
    flex-direction:column;
    gap:20px;
  }
  .form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
  }
  @media(max-width:560px){ .form-row{grid-template-columns:1fr;} }
  .form-group{display:flex;flex-direction:column;gap:8px;}
  .form-group label{font-size:.88rem;font-weight:600;color:var(--text);}
  .form-group input[type="text"],
  .form-group input[type="tel"],
  .form-group input[type="email"],
  .form-group textarea{
    background:var(--bg-soft);
    border:1px solid var(--line);
    border-radius:10px;
    padding:12px 14px;
    color:var(--text);
    font-family:'Inter',sans-serif;
    font-size:.95rem;
    resize:vertical;
    transition:border-color .2s;
  }
  .form-group input:focus,
  .form-group textarea:focus{
    outline:none;
    border-color:var(--accent);
  }
  .form-group input.invalid{
    border-color:#ef4444;
  }
  .field-error{
    color:#ef4444;
    font-size:.82rem;
    display:none;
  }
  .field-error.show{display:block;}
  .form-group.pref-group{gap:12px;}
  .radio-group{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
  }
  .radio-option{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:.9rem;
    font-weight:500;
    cursor:pointer;
  }
  .radio-option input{accent-color:var(--accent);width:16px;height:16px;cursor:pointer;}
  .form-actions{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    margin-top:6px;
  }
  .contact-form .btn{
    align-self:center;
    margin-top:0;
  }
  .contact-form .btn:disabled{opacity:.65;cursor:not-allowed;transform:none;}
  .form-error{
    color:#ef4444;
    font-size:.88rem;
    display:none;
    text-align:center;
  }
  .form-error.show{display:block;}
  .g-recaptcha-wrap{
    margin-top:4px;
    border-radius:0;
    overflow:hidden;
    transform:scale(1);
  }
  .g-recaptcha-wrap .g-recaptcha > div{border-radius:0 !important;overflow:hidden;}
  .form-success{
    display:none;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:48px 36px;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:16px;
  }
  .form-success.show{display:flex;}
  .form-success .icn-success{
    width:56px;height:56px;
    border-radius:50%;
    background:var(--accent-soft);
    color:var(--accent);
    display:flex;align-items:center;justify-content:center;
  }
  .form-success .icn-success svg{width:28px;height:28px;}
  .form-success p{font-size:1.05rem;font-weight:600;max-width:360px;}

  /* FOOTER */
  footer{
    border-top:1px solid var(--line);
    padding:40px 0;
    text-align:center;
    color:var(--muted);
    font-size:.85rem;
  }
  footer .flogo{
    margin-bottom:14px;
    display:flex;justify-content:center;
  }
  footer .flogo svg{height:44px;width:auto;}
  .back-to-top{
    display:inline-flex;
    align-items:center;justify-content:center;
    width:40px;height:40px;
    margin-top:18px;
    border-radius:50%;
    border:1px solid var(--line);
    background:var(--card);
    color:var(--text);
    transition:border-color .2s, color .2s, transform .2s;
  }
  .back-to-top svg{width:18px;height:18px;}
  .back-to-top:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-3px);}

  /* WHATSAPP FLOAT */
  .wa-float{
    position:fixed;
    right:24px;bottom:24px;
    z-index:1200;
    width:60px;height:60px;
    border-radius:50%;
    background:#25D366;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 10px 30px rgba(0,0,0,.35);
    color:#fff;
    transition:transform .2s;
  }
  .wa-float:hover{transform:translateY(-4px) scale(1.05);}
  .wa-float svg{width:30px;height:30px;}
  .wa-float::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    background:#25D366;
    animation:pulse 2.2s ease-out infinite;
    z-index:-1;
  }
  @keyframes pulse{
    0%{transform:scale(1);opacity:.6;}
    100%{transform:scale(1.9);opacity:0;}
  }

  .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  :focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
  }