@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

    :root {
      color-scheme: dark;
      --bg: #0b0d12;
      --panel: #141820;
      --line: #323842;
      --text: #a8212a;
      --muted: #a5abb0;
      --accent: #ed4b55;
      --logo-bg: #0b0d12;
      --max: 1440px;
      font-family: 'DM Sans', Arial, sans-serif;
      font-size: 16px
    }

    * {
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth
    }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      overflow-x: hidden
    }

    a {
      color: inherit;
      text-decoration: none
    }

    button,
    input,
    select {
      font: inherit
    }

    button {
      cursor: pointer
    }

    ::selection {
      background: var(--accent);
      color: #0b0d12
    }

    .wrap {
      max-width: var(--max);
      margin: auto;
      padding-left: clamp(24px, 5vw, 88px);
      padding-right: clamp(24px, 5vw, 88px)
    }

    .skip {
      position: absolute;
      left: -9999px;
      top: 12px;
      background: var(--accent);
      color: #0b0d12;
      padding: 10px;
      z-index: 99
    }

    .skip:focus {
      left: 12px
    }

    header {
      height: 88px;
      border-bottom: 1px solid rgba(255, 255, 255, .12);
      position: relative;
      z-index: 5;
      background: rgba(11, 13, 18, .84);
      backdrop-filter: blur(20px)
    }

    .nav {
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 30px
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 13px;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -.07em;
      white-space: nowrap
    }

    .brand-icon {
      width: 31px;
      height: 31px;
      border: 6px solid var(--accent);
      border-radius: 50%;
      position: relative
    }

    .brand-icon:after {
      content: "";
      position: absolute;
      left: 10px;
      top: -6px;
      width: 6px;
      height: 17px;
      background: var(--accent)
    }

    .brand-logo {
      width: 49px;
      height: 49px;
      background: var(--logo-bg);
      border-radius: 6px;
      display: block;
      overflow: hidden;
      flex: none
    }

    .brand-logo img {
      width: 66px;
      height: auto;
      display: block;
      transform: translate(-8px, -1px)
    }

    .brand small {
      font-family: 'DM Sans', sans-serif;
      font-size: 10px;
      letter-spacing: .19em;
      text-transform: uppercase;
      font-weight: 600;
      color: var(--muted);
      margin-left: 3px
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 35px;
      font-size: 13px;
      font-weight: 600
    }

    .nav-links a:not(.nav-contact) {
      color: #c5cacb;
      transition: color .25s
    }

    .nav-links a:hover,
    .nav-links a:focus-visible {
      color: var(--accent)
    }

    .nav-contact {
      border: 1px solid #6d756a;
      border-radius: 999px;
      padding: 12px 20px;
      transition: background .25s, color .25s
    }

    .nav-contact:hover {
      background: var(--accent);
      color: #0b0d12
    }

    .menu-toggle {
      display: none
    }

    .hero {
      position: relative;
      min-height: 690px;
      display: flex;
      align-items: center;
      isolation: isolate;
      overflow: hidden;
      border-bottom: 1px solid var(--line)
    }

    .hero:before {
      content: "";
      position: absolute;
      z-index: -2;
      inset: 0;
      background: radial-gradient(ellipse 34% 55% at 87% 49%, rgba(170, 40, 48, .23), transparent 75%), radial-gradient(ellipse 33% 50% at 95% 93%, rgba(92, 35, 49, .24), transparent 75%)
    }

    .hero:after {
      content: "";
      position: absolute;
      z-index: -1;
      width: min(53vw, 720px);
      height: min(53vw, 720px);
      right: -10%;
      top: 4%;
      border: 1px solid rgba(208, 55, 65, .19);
      border-radius: 50%;
      box-shadow: 0 0 0 90px rgba(208, 55, 65, .025), 0 0 0 185px rgba(208, 55, 65, .016), inset 0 0 90px rgba(208, 55, 65, .04)
    }

    .hero-inner {
      width: 100%;
      padding-top: 90px;
      padding-bottom: 96px
    }

    .eyebrow {
      display: flex;
      align-items: center;
      gap: 11px;
      text-transform: uppercase;
      letter-spacing: .17em;
      font-size: 12px;
      font-weight: 700;
      color: var(--accent)
    }

    .eyebrow:before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: currentColor;
      box-shadow: 0 0 15px currentColor
    }

    .hero h1,
    .section-heading h2,
    .cta-copy h2 {
      font-family: 'Space Grotesk', sans-serif;
      letter-spacing: -.068em;
      font-weight: 500
    }

    .hero h1 {
      font-size: clamp(56px, 7.4vw, 112px);
      line-height: .99;
      max-width: 1100px;
      margin: 31px 0 30px
    }

    .hero h1 em {
      font-style: normal;
      color: var(--accent)
    }

    .hero-copy {
      max-width: 550px;
      color: #bcc3c2;
      font-size: 18px;
      line-height: 1.6
    }

    .hero-actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 37px
    }

    .btn {
      min-height: 53px;
      border-radius: 100px;
      padding: 16px 23px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 22px;
      font-size: 14px;
      font-weight: 700;
      transition: transform .25s, background .25s, border-color .25s
    }

    .btn:hover {
      transform: translateY(-3px)
    }

    .btn-primary {
      background: var(--accent);
      color: #fff
    }

    .btn-primary:hover {
      background: #e04b56
    }

    .btn-outline {
      border: 1px solid #727a7a
    }

    .btn-outline:hover {
      border-color: var(--accent);
      background: rgba(208, 55, 65, .07)
    }

    .arrow {
      font-size: 19px;
      line-height: 0
    }

    .hero-bottom {
      position: absolute;
      bottom: 28px;
      left: 0;
      right: 0;
      display: flex;
      justify-content: space-between;
      color: #8b9396;
      font-size: 11px;
      letter-spacing: .16em;
      text-transform: uppercase
    }

    .section {
      padding-top: 120px;
      padding-bottom: 120px
    }

    .section-head {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 40px;
      margin-bottom: 55px
    }

    .kicker {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .17em;
      color: var(--accent);
      font-weight: 700;
      padding-top: 12px
    }

    .section-heading h2 {
      font-size: clamp(42px, 5vw, 74px);
      line-height: 1.05;
      margin: 0;
      max-width: 840px
    }

    .section-heading p {
      color: var(--muted);
      max-width: 580px;
      line-height: 1.65;
      margin: 24px 0 0;
      font-size: 17px
    }

    .signals {
      padding-top: 55px;
      padding-bottom: 65px;
      border-bottom: 1px solid var(--line)
    }

    .signals-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0
    }

    .signal {
      padding: 24px 45px;
      border-left: 1px solid var(--line)
    }

    .signal:first-child {
      border-left: 0;
      padding-left: 0
    }

    .signal span {
      display: block;
      font-family: 'Space Grotesk', sans-serif;
      color: var(--accent);
      font-size: clamp(28px, 3vw, 43px);
      letter-spacing: -.06em
    }

    .signal p {
      color: #b3bbbc;
      font-size: 14px;
      line-height: 1.55;
      margin: 10px 0 0;
      max-width: 260px
    }

    .services {
      background: #101319
    }

    .service-grid {
      display: grid;
      grid-template-columns: 1.12fr .88fr;
      gap: 16px
    }

    .service-card {
      position: relative;
      min-height: 520px;
      border: 1px solid #333b43;
      border-radius: 5px;
      padding: 40px;
      overflow: hidden;
      background: linear-gradient(145deg, #1b2328, #14191e 62%, #11161b);
      display: flex;
      flex-direction: column;
      transition: border-color .3s, transform .3s, background .3s
    }

    .service-card:hover {
      border-color: #e04b56;
      transform: translateY(-5px)
    }

    .service-card:nth-child(2) {
      background: linear-gradient(145deg, #1a1e28, #151922 65%, #11151d)
    }

    .service-card .num {
      font-size: 12px;
      letter-spacing: .15em;
      color: var(--accent)
    }

    .service-graphic {
      height: 160px;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: .9
    }

    .network-graphic {
      position: relative;
      width: 180px;
      height: 120px;
      margin: auto
    }

    .network-graphic i {
      position: absolute;
      width: 9px;
      height: 9px;
      border: 2px solid var(--accent);
      background: #23171a;
      border-radius: 50%;
      box-shadow: 0 0 20px #ef5b62
    }

    .network-graphic i:nth-child(1) {
      left: 85px;
      top: 55px;
      width: 20px;
      height: 20px
    }

    .network-graphic i:nth-child(2) {
      left: 5px;
      top: 10px
    }

    .network-graphic i:nth-child(3) {
      right: 8px;
      top: 16px
    }

    .network-graphic i:nth-child(4) {
      left: 14px;
      bottom: 9px
    }

    .network-graphic i:nth-child(5) {
      right: 0;
      bottom: 0
    }

    .network-graphic svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: visible
    }

    .code-graphic {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 70px;
      letter-spacing: -.15em;
      color: var(--accent);
      text-shadow: 0 0 40px rgba(208, 55, 65, .25)
    }

    .service-card h3 {
      font-family: 'Space Grotesk', sans-serif;
      font-size: clamp(29px, 3vw, 44px);
      line-height: 1.12;
      letter-spacing: -.055em;
      font-weight: 500;
      margin: auto 0 17px;
      max-width: 450px
    }

    .service-card p {
      color: #b3bcbd;
      line-height: 1.6;
      margin: 0 0 26px;
      max-width: 480px
    }

    .chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px
    }

    .chips span {
      font-size: 12px;
      border: 1px solid #4a5456;
      color: #c4cdcb;
      border-radius: 100px;
      padding: 8px 11px
    }

    .process {
      border-top: 1px solid var(--line)
    }

    .process-list {
      border-top: 1px solid var(--line)
    }

    .process-row {
      display: grid;
      grid-template-columns: 90px 1fr 1.2fr;
      gap: 25px;
      align-items: center;
      border-bottom: 1px solid var(--line);
      padding: 31px 0;
      transition: padding-left .25s, background .25s
    }

    .process-row:hover {
      padding-left: 14px;
      background: rgba(208, 55, 65, .025)
    }

    .process-row b {
      color: var(--accent);
      font-size: 13px;
      font-weight: 500
    }

    .process-row h3 {
      font-family: 'Space Grotesk', sans-serif;
      font-size: clamp(23px, 2.5vw, 35px);
      letter-spacing: -.05em;
      margin: 0;
      font-weight: 500
    }

    .process-row p {
      color: var(--muted);
      line-height: 1.6;
      margin: 0;
      font-size: 15px;
      max-width: 480px
    }

    .contact-section {
      background: #a8212a;
      color: #fff;
      padding-top: 110px;
      padding-bottom: 110px
    }

    .contact-section .kicker {
      color: #ffc0c4
    }

    .contact-section .section-head {
      grid-template-columns: 1fr 1.2fr
    }

    .contact-section .section-heading h2 {
      font-size: clamp(42px, 5.5vw, 78px)
    }

    .contact-section .section-heading p {
      color: #ffe1e3
    }

    .contact-grid {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: clamp(45px, 8vw, 130px)
    }

    .contact-note {
      max-width: 350px;
      color: #ffe3e5;
      font-size: 16px;
      line-height: 1.65
    }

    .contact-form {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 26px 20px
    }

    .field {
      display: flex;
      flex-direction: column;
      gap: 9px
    }

    .field label {
      font-size: 13px;
      font-weight: 700
    }

    .field input,
    .field select {
      width: 100%;
      height: 52px;
      padding: 10px 0;
      color: #fff;
      border: 0;
      border-bottom: 1px solid #efa1a6;
      border-radius: 0;
      background: transparent;
      outline: none
    }

    .field input::placeholder {
      color: #f1b7bb
    }

    .field select option {
      background: #6f1920;
      color: #fff
    }

    .field input:focus,
    .field select:focus {
      border-bottom: 2px solid #fff
    }

    .form-actions {
      grid-column: 1/-1;
      display: flex;
      align-items: center;
      gap: 18px;
      flex-wrap: wrap;
      margin-top: 7px
    }

    .form-submit {
      background: #fff;
      color: #7b1620;
      border: 0
    }

    .form-submit:hover {
      background: #ffe3e5
    }

    .form-status {
      font-size: 13px;
      color: #fff;
      line-height: 1.4
    }

    .form-hint {
      font-size: 12px;
      color: #f2bec2;
      grid-column: 1/-1;
      margin: -11px 0 0
    }

    footer {
      padding-top: 58px;
      padding-bottom: 30px;
      background: #0b0d12
    }

    .footer-top {
      display: flex;
      justify-content: space-between;
      gap: 30px;
      padding-bottom: 90px
    }

    .footer-logo {
      width: 125px;
      height: auto;
      border-radius: 5px;
      display: block
    }

    .footer-top p {
      max-width: 350px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.6
    }

    .footer-links {
      display: flex;
      gap: 75px
    }

    .footer-links div {
      display: flex;
      flex-direction: column;
      gap: 12px;
      font-size: 14px
    }

    .footer-links b {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .15em;
      color: #858d91;
      margin-bottom: 8px
    }

    .footer-links a:hover {
      color: var(--accent)
    }

    .footer-bottom {
      border-top: 1px solid var(--line);
      padding-top: 25px;
      display: flex;
      justify-content: space-between;
      gap: 20px;
      color: #8d9698;
      font-size: 12px
    }

    .reveal {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity .7s, transform .7s
    }

    .reveal.visible {
      opacity: 1;
      transform: none
    }

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

    @media(max-width:900px) {
      .hero {
        min-height: 650px
      }

      .hero h1 {
        font-size: clamp(52px, 9vw, 82px)
      }

      .section-head,
      .contact-section .section-head {
        grid-template-columns: 1fr;
        gap: 18px
      }

      .service-grid {
        grid-template-columns: 1fr 1fr
      }

      .service-card {
        min-height: 560px;
        padding: 28px
      }

      .contact-grid {
        grid-template-columns: 1fr 1.3fr;
        gap: 35px
      }

      .footer-links {
        gap: 35px
      }
    }

    @media(max-width:700px) {
      header {
        height: 72px
      }

      .brand {
        font-size: 20px
      }

      .brand-logo {
        width: 49px;
        height: 49px;
        border-radius: 6px;
        display: block;
        overflow: hidden;
        flex: none
      }

      .brand-logo img {
        width: 66px;
        height: auto;
        display: block;
        transform: translate(-8px, -1px)
      }

      .brand small {
        display: none
      }

      .menu-toggle {
        display: block;
        color: var(--text);
        border: 1px solid var(--line);
        background: transparent;
        border-radius: 50%;
        width: 43px;
        height: 43px;
        font-size: 21px
      }

      .nav-links {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 72px;
        padding: 24px;
        background: #171b21;
        border-bottom: 1px solid var(--line);
        flex-direction: column;
        align-items: stretch;
        gap: 22px
      }

      .nav-links.open {
        display: flex
      }

      .nav-contact {
        text-align: center
      }

      .hero {
        min-height: 680px
      }

      .hero-inner {
        padding-top: 75px;
        padding-bottom: 100px
      }

      .hero h1 {
        font-size: clamp(47px, 10.4vw, 74px);
        margin-top: 25px
      }

      .hero-copy {
        font-size: 16px
      }

      .hero:after {
        width: 450px;
        height: 450px;
        right: -300px;
        top: 150px
      }

      .hero-bottom span:last-child {
        display: none
      }

      .section {
        padding-top: 78px;
        padding-bottom: 78px
      }

      .section-head {
        margin-bottom: 35px
      }

      .signals {
        padding-top: 28px;
        padding-bottom: 32px
      }

      .signals-grid {
        grid-template-columns: 1fr
      }

      .signal,
      .signal:first-child {
        border-left: 0;
        border-bottom: 1px solid var(--line);
        padding: 20px 0
      }

      .signal:last-child {
        border-bottom: 0
      }

      .service-grid {
        grid-template-columns: 1fr
      }

      .service-card {
        min-height: 465px
      }

      .service-graphic {
        height: 125px
      }

      .process-row {
        grid-template-columns: 40px 1fr;
        gap: 12px;
        padding: 25px 0
      }

      .process-row p {
        grid-column: 2
      }

      .contact-section {
        padding-top: 75px;
        padding-bottom: 75px
      }

      .contact-grid {
        grid-template-columns: 1fr;
        gap: 25px
      }

      .contact-form {
        grid-template-columns: 1fr
      }

      .form-actions,
      .form-hint {
        grid-column: 1
      }

      .footer-top {
        flex-direction: column;
        padding-bottom: 55px
      }

      .footer-links {
        justify-content: space-between
      }

      .footer-bottom {
        flex-direction: column
      }
    }

    /* Tema claro preserva a versão branca; a base acima recupera o tema escuro original. */
    html[data-theme="light"] {
      color-scheme: light;
      --bg: #fff;
      --panel: #f6f7f8;
      --line: #d5d9dc;
      --text: #101317;
      --muted: #525b61;
      --logo-bg: #fff
    }

    html[data-theme="dark"] {
      --logo-bg: #0b0d12
    }

    html[data-theme="light"] header {
      border-bottom-color: rgba(0, 0, 0, .13);
      background: rgba(255, 255, 255, .9)
    }

    html[data-theme="light"] .nav-links a:not(.nav-contact) {
      color: #30383c
    }

    html[data-theme="light"] .nav-contact {
      border-color: #5f686c
    }

    html[data-theme="light"] .nav-contact:hover {
      color: #fff
    }

    html[data-theme="light"] .hero-copy,
    html[data-theme="light"] .signal p,
    html[data-theme="light"] .service-card p {
      color: #424c51
    }

    html[data-theme="light"] .hero-bottom {
      color: #586167
    }

    html[data-theme="light"] .btn-primary {
      color: #fff
    }

    html[data-theme="light"] .btn-outline {
      border-color: #858d91
    }

    html[data-theme="light"] .services {
      background: #f5f6f7
    }

    html[data-theme="light"] .service-card {
      border-color: #d4d8db;
      background: linear-gradient(145deg, #fff, #f6f7f8 62%, #eff1f2)
    }

    html[data-theme="light"] .service-card:nth-child(2) {
      background: linear-gradient(145deg, #fff, #f7f8f9 65%, #f0f2f3)
    }

    .service-image {
      display: block;
      width: 100%;
      height: 220px;
      object-fit: cover;
      border-radius: 3px;
      margin: 22px 0 28px
    }

    .service-card h3 {
      margin-top: 0
    }

    html[data-theme="light"] .network-graphic i {
      background: #fff
    }

    html[data-theme="light"] .chips span {
      border-color: #bcc3c6;
      color: #333c41
    }

    html[data-theme="light"] footer {
      background: #fff
    }

    html[data-theme="light"] .footer-links b,
    html[data-theme="light"] .footer-bottom {
      color: #586167
    }

    @media(max-width:700px) {
      html[data-theme="light"] .nav-links {
        background: #fff
      }
    }

    .theme-toggle {
      border: 1px solid var(--line);
      border-radius: 100px;
      background: transparent;
      color: var(--text);
      padding: 10px 14px;
      white-space: nowrap;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer
    }

    .theme-toggle:hover {
      border-color: var(--accent);
      color: var(--accent)
    }

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

    @media(max-width:700px) {
      .theme-toggle {
        width: 100%;
        text-align: center;
        padding: 12px
      }
    }

    .whatsapp-contact {
      position: fixed;
      right: clamp(18px, 3vw, 42px);
      bottom: clamp(18px, 3vw, 36px);
      z-index: 20;
      display: inline-flex;
      align-items: center;
      gap: 11px;
      padding: 13px 18px;
      background: #fff;
      color: #a8212a;
      border: 1px solid #d9c7c9;
      border-radius: 100px;
      box-shadow: 0 9px 30px rgba(15, 19, 23, .16);
      font-size: 14px;
      font-weight: 700;
      transition: transform .2s, border-color .2s
    }

    .whatsapp-contact:hover {
      transform: translateY(-3px);
      border-color: #a8212a
    }

    .whatsapp-contact svg {
      width: 24px;
      height: 24px;
      fill: currentColor;
      flex: none
    }

    @media(max-width:450px) {
      .whatsapp-contact {
        right: 16px;
        bottom: 16px;
        padding: 12px 15px
      }
    }

    @media(prefers-reduced-motion:reduce) {
      html {
        scroll-behavior: auto
      }

      *,
      *:before,
      *:after {
        transition: none !important;
        animation: none !important
      }

      .reveal {
        opacity: 1;
        transform: none
      }
    }