:root {
      --glass: rgba(255, 255, 255, 0.06);
      --glass-border: rgba(255, 255, 255, 0.14);
      --glass-strong: rgba(255, 255, 255, 0.1);
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: "source-sans-pro", system-ui, sans-serif;
      background: #07080d;
      color: #e8eaf0;
      -webkit-font-smoothing: antialiased;
    }

    .font-display,
    h1, h2, h3, .nav-brand {
      font-family: "futura-pt", Futura, system-ui, sans-serif;
      font-weight: 600;
      letter-spacing: -0.02em;
    }

    /* Aurora behind glass */
    .aurora {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
      z-index: 0;
    }
    /*
      Radiais: flutuam sozinhos (CSS) e se dissipam ao passar o mouse (JS via --spread).
      Camadas separadas para float e scale não brigarem no mesmo transform.
    */
    .aurora-orb {
      position: absolute;
      animation: float 18s ease-in-out infinite;
    }
    .aurora-orb.a { width: 44vw; height: 44vw; top: -12%; left: -10%; }
    .aurora-orb.b { width: 40vw; height: 40vw; top: 2%; right: -12%; animation-delay: -5s; animation-duration: 22s; }
    .aurora-orb.c { width: 34vw; height: 34vw; bottom: -4%; left: 26%; animation-delay: -9s; animation-duration: 20s; }
    .aurora-orb.d { width: 26vw; height: 26vw; bottom: 6%; right: 14%; animation-delay: -12s; animation-duration: 24s; }

    .aurora-blob {
      --spread: 0;
      --base: .55;
      position: absolute;
      inset: 0;
      border-radius: 9999px;
      filter: blur(90px);
      will-change: transform, opacity;
      transform: scale(calc(1 + var(--spread) * 0.62));
      opacity: calc(var(--base) * (1 - var(--spread) * 0.78));
    }
    .aurora-blob::before {
      content: "";
      position: absolute;
      inset: -14%;
      border-radius: inherit;
      background: inherit;
      filter: blur(12px);
      opacity: .22;
      transform: scale(.82);
      transform-origin: center;
      animation: aurora-breathe 15s ease-in-out infinite;
      will-change: transform, opacity;
    }
    .aurora-blob.a { background: radial-gradient(circle, #2ec4b6 0%, transparent 70%); --base: .55; }
    .aurora-blob.b { background: radial-gradient(circle, #f07a3a 0%, transparent 70%); --base: .55; }
    .aurora-blob.b::before { animation-delay: -4s; animation-duration: 17s; }
    .aurora-blob.c { background: radial-gradient(circle, #3a8dde 0%, transparent 70%); --base: .34; }
    .aurora-blob.c::before { animation-delay: -8s; animation-duration: 19s; }
    .aurora-blob.d { background: radial-gradient(circle, #e8453c 0%, transparent 70%); --base: .22; }
    .aurora-blob.d::before { animation-delay: -11s; animation-duration: 21s; }

    @keyframes aurora-breathe {
      0%, 100% {
        opacity: .18;
        transform: scale(.82);
      }
      50% {
        opacity: .82;
        transform: scale(1.18);
      }
    }

    /* Dissolve o fundo do hero na seção seguinte, sem linha de corte */
    .fade-bottom {
      position: absolute;
      inset-inline: 0;
      bottom: 0;
      height: 34vh;
      pointer-events: none;
      z-index: 1;
      background: linear-gradient(to bottom, rgba(7, 8, 13, 0) 0%, rgba(7, 8, 13, .55) 45%, #07080d 100%);
    }

    /* Textura discreta para o fundo não parecer vazio */
    .grid-texture {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
      background-size: 64px 64px;
      mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 75%);
      -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 75%);
    }

    @keyframes float {
      0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
      33% { transform: translate3d(3%, -2%, 0) scale(1.05); }
      66% { transform: translate3d(-2%, 3%, 0) scale(1.03); }
    }

    @keyframes floatY {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }

    @media (max-width: 767px) {
      .aurora-blob.a,
      .aurora-blob.b { --base: .68; }
      .aurora-blob.c { --base: .43; }
      .aurora-blob.d { --base: .3; }
      .aurora-blob::before { opacity: .3; }
    }

    @media (max-width: 767px) {
      .blog-teaser__heading {
        gap: .65rem;
        margin-bottom: 1.25rem;
      }

      .statement-section {
        padding-bottom: 1.5rem;
      }

      #blog {
        padding-top: 1.5rem;
      }
    }

    .glass {
      background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
      border: 1px solid rgba(255,255,255,.12);
      box-shadow:
        0 8px 32px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.1);
      backdrop-filter: blur(18px) saturate(140%);
      -webkit-backdrop-filter: blur(18px) saturate(140%);
    }
    header.glass {
      border-left: 0;
      border-right: 0;
      border-top: 0;
      border-radius: 0;
      /* Glass visível: sheen + tint leve + blur */
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035)),
        rgba(7, 8, 13, 0.32);
      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
      backdrop-filter: blur(22px) saturate(160%);
      -webkit-backdrop-filter: blur(22px) saturate(160%);
      transition: background .35s ease, box-shadow .35s ease, border-color .35s ease;
    }
    /* Reforça o frost quando conteúdo claro passa por trás e mantém o glass */
    header.glass.is-over-light {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05)),
        rgba(7, 8, 13, 0.7);
      border-bottom-color: rgba(255, 255, 255, 0.14);
      box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    }

    /* Cards gerais (serviços, portfólio, CTA) */
    .glass-strong {
      background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
      border: 1px solid rgba(255,255,255,.12);
      box-shadow:
        0 20px 50px rgba(0,0,0,.32),
        inset 0 1px 0 rgba(255,255,255,.1);
      backdrop-filter: blur(20px) saturate(145%);
      -webkit-backdrop-filter: blur(20px) saturate(145%);
    }

    /* Wash glass laranja→teal: aparece suave no hover (padrão de card) */
    .glass:not(header),
    .glass-strong {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      transition:
        border-color .45s ease,
        box-shadow .45s ease,
        transform .45s ease;
    }
    .glass:not(header)::before,
    .glass-strong::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      border-radius: inherit;
      pointer-events: none;
      background: linear-gradient(
        135deg,
        rgba(240, 122, 58, 0.48) 0%,
        rgba(232, 69, 60, 0.22) 36%,
        rgba(18, 36, 44, 0.55) 68%,
        rgba(46, 196, 182, 0.32) 100%
      );
      opacity: 0;
      transition: opacity .45s ease;
    }
    .glass:not(header):hover::before,
    .glass-strong:hover::before,
    .group:hover > .glass::before,
    .group:hover > .glass-strong::before {
      opacity: 1;
    }
    .glass:not(header):hover,
    .glass-strong:hover,
    .group:hover > .glass,
    .group:hover > .glass-strong {
      border-color: rgba(255, 255, 255, 0.22);
      box-shadow:
        0 22px 48px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
    }
    /* Em grupos: um card sempre ativo; hover troca o ativo (não todos no hover) */
    .card-group .glass:not(header):hover::before,
    .card-group .glass-strong:hover::before,
    .card-group .group:hover > .glass::before,
    .card-group .group:hover > .glass-strong::before {
      opacity: 0;
    }
    .card-group .glass:not(header):hover,
    .card-group .glass-strong:hover,
    .card-group .group:hover > .glass,
    .card-group .group:hover > .glass-strong {
      border-color: rgba(255, 255, 255, 0.12);
      box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    .card-group .glass.is-active::before,
    .card-group .glass-strong.is-active::before,
    .card-group .glass.is-active:hover::before,
    .card-group .glass-strong.is-active:hover::before {
      opacity: 1;
    }
    .card-group .glass.is-active,
    .card-group .glass-strong.is-active {
      border-color: rgba(255, 255, 255, 0.22);
      box-shadow:
        0 22px 48px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
    }
    .glass:not(header) > *,
    .glass-strong > * {
      position: relative;
      z-index: 1;
    }
    .glass:not(header) > .absolute,
    .glass-strong > .absolute {
      position: absolute;
      z-index: 0;
    }

    @media (prefers-reduced-motion: reduce) {
      .glass:not(header),
      .glass-strong,
      .glass:not(header)::before,
      .glass-strong::before {
        transition: none;
      }
    }

    /*
      Dispositivos: profundidade por camadas (sombra, borda, brilho de topo),
      sem listra genérica atravessando o conteúdo.
    */
    .device {
      position: relative;
      background:
        linear-gradient(180deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.03) 22%, rgba(12,14,22,.92) 100%);
      border: 1px solid rgba(255,255,255,.22);
      box-shadow:
        0 1px 0 rgba(255,255,255,.14) inset,
        0 -1px 0 rgba(0,0,0,.4) inset,
        0 0 0 1px rgba(255,255,255,.04),
        0 28px 50px -18px rgba(0,0,0,.75),
        0 12px 24px -10px rgba(0,0,0,.45);
      backdrop-filter: blur(18px) saturate(150%);
      -webkit-backdrop-filter: blur(18px) saturate(150%);
      overflow: hidden;
    }

    .device-shell {
      padding: 1px;
      border-radius: 1.15rem;
      background: linear-gradient(
        145deg,
        rgba(255,255,255,.42) 0%,
        rgba(255,255,255,.14) 26%,
        rgba(255,255,255,.05) 52%,
        rgba(255,255,255,.22) 100%
      );
      box-shadow:
        0 28px 50px -18px rgba(0,0,0,.75),
        0 12px 24px -10px rgba(0,0,0,.4);
    }
    .device-shell--tablet { border-radius: .75rem; }
    .device-shell--tablet > .device { border-radius: calc(.75rem - 1px); }
    .device-shell--phone { border-radius: 1.45rem; }
    .device-shell--phone > .device { border-radius: calc(1.45rem - 1px); }
    .device-shell > .device {
      border: 0;
      border-radius: calc(1.15rem - 1px);
      box-shadow:
        0 1px 0 rgba(255,255,255,.12) inset,
        0 -1px 0 rgba(0,0,0,.35) inset;
    }

      /* Brilho suave só no topo da moldura, sempre contido */
    .device::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 38%;
      background: linear-gradient(
        165deg,
        rgba(255,255,255,.1) 0%,
        rgba(255,255,255,.025) 32%,
        transparent 62%
      );
      pointer-events: none;
      z-index: 3;
      border-radius: inherit;
    }

    .device > * {
      position: relative;
      z-index: 1;
    }

    .device-chrome {
      display: flex;
      align-items: center;
      gap: .5rem;
      padding: .7rem 1rem;
      border-bottom: 1px solid rgba(255,255,255,.08);
      background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
    }

    .device-dot {
      width: .55rem;
      height: .55rem;
      border-radius: 999px;
      background: rgba(255,255,255,.18);
    }
    .device-dot:nth-child(1) { background: #ff5f57; opacity: .9; }
    .device-dot:nth-child(2) { background: #febc2e; opacity: .9; }
    .device-dot:nth-child(3) { background: #28c840; opacity: .9; }

    .device-url {
      flex: 1;
      margin-left: .5rem;
      padding: .28rem .75rem;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(0,0,0,.28);
      color: rgba(255,255,255,.32);
      font-size: .68rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .device-screen {
      background: #0a0c12;
      padding: 1rem;
    }

    .device-panel {
      border-radius: .85rem;
      border: 1px solid rgba(255,255,255,.08);
      background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
      padding: 1rem;
    }

    .device-metric {
      border-radius: .65rem;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.03);
      padding: .65rem;
    }

    /* Halo radial atrás do conjunto, sem faixa */
    .mock-glow {
      position: absolute;
      inset: 8% 5% 0;
      background:
        radial-gradient(ellipse 55% 50% at 70% 35%, rgba(240,122,58,.2), transparent 70%),
        radial-gradient(ellipse 45% 45% at 25% 70%, rgba(46,196,182,.14), transparent 70%);
      filter: blur(40px);
      pointer-events: none;
      z-index: 0;
    }

    .mock-ground {
      position: absolute;
      left: 12%;
      right: 12%;
      bottom: -6%;
      height: 28px;
      background: radial-gradient(ellipse at center, rgba(0,0,0,.55), transparent 70%);
      filter: blur(8px);
      pointer-events: none;
      z-index: 0;
    }

    .text-gradient {
      background: linear-gradient(115deg, #f5d06a 0%, #f07a3a 45%, #e8453c 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .btn-primary {
      background: linear-gradient(115deg, #f5b942, #f07a3a 55%, #e8453c);
      color: #0b0d14;
      font-weight: 600;
      transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
      box-shadow: 0 10px 30px rgba(240, 122, 58, .28), inset 0 1px 0 rgba(255,255,255,.35);
    }
    .btn-primary:hover {
      transform: translateY(-1px);
      filter: brightness(1.05);
      box-shadow: 0 14px 36px rgba(240, 122, 58, .4), inset 0 1px 0 rgba(255,255,255,.4);
    }

    .btn-ghost {
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.16);
      backdrop-filter: blur(12px);
      transition: background .25s ease, border-color .25s ease, transform .25s ease;
    }
    .btn-ghost:hover {
      background: rgba(255,255,255,.08);
      border-color: rgba(255,255,255,.28);
      transform: translateY(-1px);
    }

    /* Marquee contínuo: grupos idênticos mantêm a última logo emendada à primeira. */
    .marquee-wrap {
      overflow: hidden;
      mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 13%, rgba(0,0,0,.62) 23%, #000 32%, #000 68%, rgba(0,0,0,.62) 77%, rgba(0,0,0,.18) 87%, transparent 100%);
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 13%, rgba(0,0,0,.62) 23%, #000 32%, #000 68%, rgba(0,0,0,.62) 77%, rgba(0,0,0,.18) 87%, transparent 100%);
    }
    .marquee {
      display: flex;
      width: max-content;
      animation: marquee-left 90s linear infinite;
      will-change: transform;
    }
    .marquee.reverse { animation-name: marquee-right; }
    .marquee-group {
      display: flex;
      flex: 0 0 auto;
      --marquee-gap: clamp(1rem, 2.7vw, 2.8rem);
      gap: var(--marquee-gap);
      padding-right: var(--marquee-gap);
    }
    .marquee:hover { animation-play-state: paused; }
    @keyframes marquee-left {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }
    @keyframes marquee-right {
      from { transform: translateX(-33.333333%); }
      to { transform: translateX(0); }
    }

    .client-logo {
      display: flex;
      flex: 0 0 clamp(108px, 9vw, 120px);
      align-items: center;
      justify-content: center;
      height: auto;
      aspect-ratio: 151 / 102;
      overflow: hidden;
      border-radius: .65rem;
      border: 1px solid rgba(255,255,255,.1);
      background:
        linear-gradient(145deg, rgba(76,82,94,.28), rgba(30,34,43,.18) 56%, rgba(0,0,0,.38)),
        rgba(8,10,15,.5);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 8px 20px rgba(0,0,0,.1);
      backdrop-filter: blur(10px) saturate(115%);
      -webkit-backdrop-filter: blur(10px) saturate(115%);
      transition: filter .25s ease, transform .25s ease, border-color .25s ease, box-shadow .25s ease;
    }
    .client-logo img {
      display: block;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding-inline: clamp(.4rem, .6vw, .58rem);
      max-width: none;
      max-height: none;
      object-fit: contain;
      filter: none;
      opacity: 1;
      transition: opacity .25s ease, transform .25s ease;
    }
    .client-logo:hover {
      border-color: rgba(255,255,255,.25);
      filter: drop-shadow(0 10px 20px rgba(0,0,0,.2));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 14px 28px rgba(0,0,0,.2),
        0 0 18px rgba(46,196,182,.08);
    }
    .client-logo:hover img { opacity: 1; transform: scale(1.02); }

    .case-browser {
      position: relative;
      aspect-ratio: 16 / 10;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 1rem;
      background: #0b0d14;
      isolation: isolate;
    }
    .case-browser__bar {
      position: absolute;
      inset: 0 0 auto;
      z-index: 2;
      display: flex;
      align-items: center;
      gap: .35rem;
      height: 1.8rem;
      padding: 0 .7rem;
      border-bottom: 1px solid rgba(255,255,255,.1);
      background: rgba(7,8,13,.88);
      backdrop-filter: blur(12px);
    }
    .case-browser__bar span:not(.case-browser__dot) {
      overflow: hidden;
      margin-left: .3rem;
      color: rgba(255,255,255,.4);
      font-size: .55rem;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .case-browser__dot {
      width: .42rem;
      height: .42rem;
      flex: 0 0 .42rem;
      border-radius: 999px;
    }
    .case-browser > img {
      position: absolute;
      inset: 1.8rem 0 0;
      width: 100%;
      height: calc(100% - 1.8rem);
      border: 0;
      object-fit: cover;
      object-position: top center;
    }

    /* Palco 3D da composição de telas */
    .mock-stage {
      perspective: 1800px;
      transform-style: preserve-3d;
      isolation: isolate;
    }
    .mock-browser {
      position: relative;
      z-index: 1;
      transform: rotateY(-7deg) rotateX(3deg);
      transform-style: preserve-3d;
    }
    .mock-float {
      animation: floatY 10s ease-in-out infinite;
      z-index: 2;
    }
    .mock-float.delay-1 { animation-delay: -3.5s; }
    .mock-float.delay-2 { animation-delay: -7s; }

    .reveal {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity .8s ease, transform .8s ease;
    }
    .reveal.in {
      opacity: 1;
      transform: none;
    }

    @media (max-width: 767px) {
      .reveal {
        opacity: 1;
        transform: none;
        transition: none;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .aurora-orb, .marquee, .mock-float { animation: none !important; }
      .aurora-blob { --spread: 0 !important; }
      .aurora-blob::before { animation: none !important; }
      .reveal { opacity: 1; transform: none; }
    }