:root {
      --bg: #080705;
      --panel: #14100d;
      --panel-2: #1f1712;
      --text: #f7f2ec;
      --muted: #c7b7a8;
      --soft: #8f7a69;
      --gold: #d8ad7c;
      --gold-2: #f0c891;
      --line: rgba(255, 255, 255, .14);
      --shadow: 0 24px 70px rgba(0, 0, 0, .42);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      color: var(--text);
      background:
        radial-gradient(circle at 80% 0%, rgba(216, 173, 124, .18), transparent 34rem),
        linear-gradient(135deg, #050403, #120d0a 48%, #080705);
      line-height: 1.55;
      --light-level: .35;
      --lamp-glow: .38;
      --security-glow: .18;
      --curtain-shade: .16;
      --curtain-panel: .58;
      --curtain-offset: 0%;
    }

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

    img {
      display: block;
      max-width: 100%;
    }

    .shell {
      width: min(1180px, calc(100% - 40px));
      margin: 0 auto;
    }

    .nav {
      position: fixed;
      inset: 0 0 auto;
      z-index: 10;
      border-bottom: 1px solid rgba(255, 255, 255, .08);
      background: rgba(8, 7, 5, .72);
      backdrop-filter: blur(18px);
    }

    .nav__inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      min-height: 76px;
    }

    .brand {
      display: grid;
      gap: 6px;
      width: min(228px, 50vw);
      text-transform: uppercase;
    }

    .brand img {
      width: 100%;
      height: auto;
    }

    .brand span {
      color: var(--muted);
      font-size: .68rem;
      letter-spacing: .22em;
    }

    .nav__links {
      display: flex;
      align-items: center;
      gap: 22px;
      color: rgba(247, 242, 236, .78);
      font-size: .9rem;
    }

    .nav__mobile {
      display: none;
    }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 0 20px;
      border: 1px solid rgba(216, 173, 124, .5);
      border-radius: 999px;
      background: linear-gradient(135deg, var(--gold), #a9784f);
      color: #18100b;
      font-weight: 700;
      box-shadow: 0 12px 34px rgba(216, 173, 124, .22);
      white-space: nowrap;
    }

    .button--ghost {
      background: rgba(255, 255, 255, .06);
      color: var(--text);
      box-shadow: none;
    }

    .whatsapp-float {
      position: fixed;
      right: 22px;
      bottom: 22px;
      z-index: 20;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 58px;
      width: 58px;
      height: 58px;
      padding: 0;
      border: 1px solid rgba(255, 255, 255, .18);
      border-radius: 50%;
      background: linear-gradient(135deg, #25d366, #128c4a);
      color: #fff;
      font-weight: 800;
      box-shadow: 0 18px 50px rgba(0, 0, 0, .36), 0 10px 28px rgba(37, 211, 102, .24);
      transition: transform .22s ease, box-shadow .22s ease;
    }

    .whatsapp-float:hover,
    .whatsapp-float:focus-visible {
      outline: none;
      transform: translateY(-2px);
      box-shadow: 0 24px 58px rgba(0, 0, 0, .42), 0 14px 32px rgba(37, 211, 102, .28);
    }

    .whatsapp-float__icon {
      width: 30px;
      height: 30px;
      fill: currentColor;
    }

    .curtain-effect {
      position: fixed;
      inset: 0;
      z-index: 7;
      pointer-events: none;
      overflow: hidden;
    }

    .curtain-effect::before,
    .curtain-effect::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 29vw;
      opacity: var(--curtain-panel);
      transition: opacity .45s ease, transform .55s ease;
    }

    .curtain-effect::before {
      left: 0;
      background:
        linear-gradient(90deg, rgba(0, 0, 0, .74), rgba(0, 0, 0, .28) 68%, transparent),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .055) 0 1px, transparent 1px 26px);
      transform: translateX(calc(var(--curtain-offset) * -1));
    }

    .curtain-effect::after {
      right: 0;
      background:
        linear-gradient(270deg, rgba(0, 0, 0, .74), rgba(0, 0, 0, .28) 68%, transparent),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 26px);
      transform: translateX(var(--curtain-offset));
    }

    .hero {
      min-height: 100vh;
      display: grid;
      align-items: end;
      position: relative;
      overflow: hidden;
      padding: 120px 0 58px;
    }

    .portfolio-hero {
      min-height: 38vh;
      display: grid;
      align-items: end;
      position: relative;
      overflow: hidden;
      padding: 104px 0 26px;
      background:
        radial-gradient(circle at 82% 0%, rgba(216, 173, 124, .16), transparent 32rem),
        linear-gradient(135deg, #050403, #120d0a 58%, #080705);
    }

    .portfolio-hero::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 42%;
      background: linear-gradient(180deg, transparent, var(--bg));
      pointer-events: none;
    }

    .portfolio-hero__grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr;
      gap: 46px;
      align-items: end;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      background:
        linear-gradient(90deg, rgba(5, 4, 3, .98) 0%, rgba(5, 4, 3, .82) 34%, rgba(5, 4, 3, calc(.9 - var(--light-level) * .72)) 70%, rgba(5, 4, 3, calc(.94 - var(--light-level) * .34)) 100%),
        linear-gradient(0deg, rgba(8, 7, 5, .98) 0%, transparent 34%),
        url("../imagens/hero-automacao-clean.png") right center / min(52vw, 680px) auto no-repeat;
      transition: filter .45s ease, opacity .45s ease;
      filter: brightness(calc(.42 + var(--light-level) * 1.28)) saturate(calc(.72 + var(--light-level) * .62));
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        radial-gradient(circle at 78% 20%, rgba(255, 205, 142, calc(var(--lamp-glow) * .62)), transparent 20rem),
        radial-gradient(circle at 90% 40%, rgba(216, 173, 124, calc(var(--lamp-glow) * .42)), transparent 18rem),
        radial-gradient(circle at 75% 20%, rgba(216, 173, 124, calc(var(--lamp-glow) * .36)), transparent 26rem),
        linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, var(--curtain-shade)) 72%, rgba(0, 0, 0, calc(var(--curtain-shade) + .18))),
        radial-gradient(circle at 82% 74%, rgba(88, 170, 136, calc(var(--security-glow) * .34)), transparent 18rem);
      pointer-events: none;
      transition: background .45s ease;
    }

    .hero__grid {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(300px, .54fr);
      gap: 56px;
      align-items: end;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--gold-2);
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .2em;
      text-transform: uppercase;
    }

    .eyebrow::before {
      content: "";
      width: 36px;
      height: 1px;
      background: var(--gold);
    }

    h1,
    h2,
    h3,
    p {
      margin-top: 0;
    }

    h1 {
      max-width: 820px;
      margin-bottom: 22px;
      font-size: clamp(2.6rem, 5.8vw, 5.8rem);
      line-height: .92;
      font-weight: 500;
      letter-spacing: 0;
    }

    .lead {
      max-width: 630px;
      color: rgba(247, 242, 236, .84);
      font-size: clamp(1.1rem, 1.8vw, 1.35rem);
    }

    .hero__actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin: 34px 0 0;
    }

    .hero-proof {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 24px;
      color: rgba(247, 242, 236, .78);
      font-size: .86rem;
      font-weight: 700;
    }

    .hero-proof span {
      display: inline-flex;
      align-items: center;
      min-height: 34px;
      padding: 7px 12px;
      border: 1px solid rgba(216, 173, 124, .26);
      border-radius: 999px;
      background: rgba(255, 255, 255, .055);
    }

    .device {
      position: relative;
      width: min(100%, 390px);
      aspect-ratio: 9 / 19.4;
      justify-self: center;
      align-self: center;
      padding: 10px;
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 36px;
      background: #050403;
      box-shadow: 0 34px 90px rgba(0, 0, 0, .62);
    }

    .device::before {
      display: none;
    }

    .device::after {
      content: "";
      position: absolute;
      right: 50%;
      bottom: 8px;
      z-index: 3;
      width: 96px;
      height: 4px;
      border-radius: 999px;
      background: rgba(247, 242, 236, .62);
      transform: translateX(50%);
      pointer-events: none;
    }

    .device__screen {
      position: relative;
      height: 100%;
      min-height: 0;
      display: grid;
      grid-template-rows: 22px 142px 104px 38px 42px minmax(0, 1fr) 58px;
      gap: 10px;
      overflow: hidden;
      padding: 16px 12px 18px;
      border-radius: 30px;
      background: #040302;
      border: 1px solid rgba(255, 255, 255, .12);
    }

    .device__top,
    .scene-card,
    .app-stats,
    .app-filters,
    .app-section-title,
    .controls,
    .phone-dock {
      position: relative;
      z-index: 1;
    }

    .device__top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 0 6px;
      color: rgba(247, 242, 236, .9);
      font-size: .72rem;
      font-weight: 760;
    }

    .device__time {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }

    .scene-card {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-rows: 48px 18px 40px;
      align-items: start;
      gap: 6px 14px;
      overflow: hidden;
      min-height: 142px;
      padding: 16px;
      border-radius: 18px 18px 22px 22px;
      background:
        linear-gradient(74deg, transparent 67%, rgba(87, 53, 31, .42) 67.3%),
        linear-gradient(145deg, #dbb27e, #bd8958);
      color: #fff;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
    }

    .scene-card__brand {
      display: grid;
      align-content: start;
      gap: 3px;
    }

    .scene-card__brand img {
      width: 142px;
      height: auto;
    }

    .scene-card__brand span,
    .scene-card__label {
      font-size: .72rem;
      font-weight: 800;
      color: rgba(255, 255, 255, .9);
    }

    .scene-card__actions {
      display: flex;
      gap: 8px;
    }

    .scene-card__actions button {
      appearance: none;
      width: 34px;
      height: 34px;
      border: 0;
      border-radius: 50%;
      color: #fff;
      background: rgba(255, 255, 255, .24);
      font: inherit;
      cursor: pointer;
    }

    .scene-card__actions button:last-child {
      background: #0d0b09;
    }

    .scene-card__label {
      grid-column: 1 / -1;
      align-self: end;
    }

    .scene-card h2 {
      grid-column: 1 / -1;
      margin: 0;
      font-size: 1.66rem;
      line-height: 1;
      font-weight: 850;
      overflow: hidden;
      white-space: nowrap;
    }

    .app-stats {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .app-stats article {
      min-width: 0;
      display: grid;
      align-content: space-between;
      gap: 6px;
      min-height: 104px;
      padding: 10px 8px;
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 15px;
      background: #120d0b;
    }

    .app-stats article > span,
    .control__icon {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 10px;
      color: var(--gold-2);
      background: rgba(216, 173, 124, .12);
    }

    .app-stats strong {
      color: #fff;
      font-size: .76rem;
      line-height: 1.1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .app-stats small {
      color: rgba(247, 242, 236, .72);
      font-size: .62rem;
      line-height: 1.25;
    }

    .app-filters {
      display: flex;
      gap: 8px;
      overflow: hidden;
      overflow-x: auto;
      padding-bottom: 2px;
      scrollbar-width: none;
    }

    .app-filters::-webkit-scrollbar {
      display: none;
    }

    .app-filters button {
      appearance: none;
      flex: 0 0 auto;
      min-height: 34px;
      padding: 0 12px;
      border: 1px solid rgba(255, 255, 255, .15);
      border-radius: 999px;
      background: #120d0b;
      color: rgba(247, 242, 236, .8);
      font: inherit;
      font-size: .66rem;
      font-weight: 800;
      cursor: pointer;
      white-space: nowrap;
    }

    .app-filters button.is-active {
      border-color: transparent;
      background: var(--gold-2);
      color: #3a2518;
    }

    .app-section-title {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 12px;
    }

    .app-section-title h3 {
      margin: 0;
      color: #fff;
      font-size: 1.12rem;
      line-height: 1;
    }

    .app-section-title span {
      display: block;
      margin-top: 4px;
      color: rgba(247, 242, 236, .82);
      font-size: .66rem;
      font-weight: 760;
    }

    .app-section-title button {
      appearance: none;
      border: 0;
      padding: 0;
      color: var(--gold-2);
      background: transparent;
      font: inherit;
      font-size: .66rem;
      font-weight: 850;
      cursor: pointer;
    }

    .controls {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-content: start;
      gap: 10px;
      overflow: hidden;
    }

    .controls.is-scenes {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .controls.is-sensors,
    .controls.is-settings {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .control {
      appearance: none;
      width: 100%;
      color: var(--text);
      display: grid;
      grid-template-columns: auto auto;
      grid-template-rows: 42px 20px 18px;
      align-items: start;
      justify-content: space-between;
      gap: 8px;
      min-height: 100px;
      padding: 10px;
      border: 1px solid rgba(255, 255, 255, .13);
      border-radius: 15px;
      background: #120d0b;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
      font: inherit;
      font-size: .8rem;
      font-weight: 650;
      cursor: pointer;
      transition: border-color .22s ease, background .22s ease, transform .22s ease;
    }

    .control--status {
      cursor: default;
    }

    .control--status:hover,
    .control--status:focus-visible {
      transform: none;
    }

    .control--status:focus-visible {
      border-color: rgba(255, 255, 255, .13);
    }

    .control__meta {
      flex: 0 0 auto;
      color: var(--gold-2);
      font-size: .78rem;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .scene-tile {
      min-height: 112px;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 34px 1fr auto;
      align-content: space-between;
      justify-items: start;
      gap: 10px;
      padding: 14px;
    }

    .scene-tile strong {
      font-size: 1.45rem;
      line-height: 1;
    }

    .scene-tile span {
      max-width: 100%;
      color: rgba(247, 242, 236, .9);
      font-size: .9rem;
      font-weight: 760;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .scene-tile .control__meta {
      justify-self: stretch;
      padding-top: 8px;
      border-top: 1px solid rgba(255, 255, 255, .08);
    }

    .sensor-row .control__meta::before {
      content: "";
      display: inline-block;
      width: 8px;
      height: 8px;
      margin-right: 7px;
      border-radius: 999px;
      background: #77d9a5;
      box-shadow: 0 0 12px rgba(119, 217, 165, .58);
    }

    .control:hover,
    .control:focus-visible {
      border-color: rgba(216, 173, 124, .5);
      background: rgba(255, 255, 255, .082);
      outline: none;
      transform: translateY(-1px);
    }

    .control.is-off {
      color: rgba(247, 242, 236, .56);
      background: #100b09;
    }

    .control__name {
      grid-column: 1 / -1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #fff;
      font-size: .9rem;
      font-weight: 840;
    }

    .toggle {
      flex: 0 0 auto;
      width: 42px;
      height: 24px;
      padding: 3px;
      border-radius: 999px;
      background: #dfe4f2;
      transition: background .22s ease;
    }

    .control:not(.is-off) .toggle {
      background: #22c55e;
    }

    .toggle::after {
      content: "";
      display: block;
      width: 18px;
      height: 18px;
      margin-left: auto;
      border-radius: 50%;
      background: #0b0705;
      transition: transform .22s ease, margin .22s ease;
    }

    .control.is-off .toggle {
      background: #dfe4f2;
    }

    .control.is-off .toggle::after {
      margin-left: 0;
      background: #0b0705;
    }

    .control__room {
      grid-column: 1 / -1;
      color: rgba(247, 242, 236, .64);
      font-size: .72rem;
      font-weight: 720;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .control__status {
      justify-self: end;
      align-self: end;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #25d36b;
      box-shadow: 0 0 10px rgba(37, 211, 107, .7);
    }

    .phone-dock {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
      padding: 8px;
      border: 1px solid rgba(255, 255, 255, .13);
      border-radius: 20px;
      background: #120d0b;
    }

    .dock-item {
      appearance: none;
      border: 0;
      min-height: 42px;
      display: grid;
      gap: 3px;
      place-items: center;
      border-radius: 16px;
      color: rgba(247, 242, 236, .86);
      background: transparent;
      font: inherit;
      font-size: .86rem;
      cursor: pointer;
      transition: background .22s ease, color .22s ease, transform .22s ease;
    }

    .dock-item span {
      font-size: .6rem;
      font-weight: 820;
    }

    .dock-item:hover,
    .dock-item:focus-visible {
      outline: none;
      transform: translateY(-1px);
      background: rgba(216, 173, 124, .16);
    }

    .dock-item.is-active {
      color: var(--gold-2);
      background: rgba(216, 173, 124, .12);
    }

    section {
      padding: 96px 0;
    }

    .section-head {
      display: grid;
      gap: 12px;
      max-width: 820px;
      margin-right: auto;
      margin-left: auto;
      margin-bottom: 38px;
      text-align: center;
    }

    .section-head h2 {
      max-width: 720px;
      margin-bottom: 0;
      font-size: 36px;
      line-height: 1;
      font-weight: 500;
    }

    .section-head p {
      max-width: 700px;
      margin: 0 auto;
      color: var(--muted);
    }

    .section-head > .eyebrow,
    .trust__grid > div:first-child .eyebrow {
      display: flex;
      justify-content: center;
    }

    .benefits {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
    }

    .benefit {
      min-height: 230px;
      padding: 24px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025));
    }

    .icon {
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      margin-bottom: 34px;
      border: 1px solid rgba(216, 173, 124, .42);
      border-radius: 50%;
      color: var(--gold-2);
      font-size: 1.35rem;
    }

    .benefit h3,
    .step h3 {
      margin-bottom: 10px;
      font-size: 1.25rem;
      font-weight: 600;
    }

    .benefit p,
    .step p {
      color: var(--muted);
      margin-bottom: 0;
    }

    .solutions {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }

    #categorias {
      padding-top: 34px;
    }

    .portfolio-filters {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      margin-bottom: 34px;
    }

    .portfolio-filters button,
    .portfolio-filters a {
      appearance: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      min-height: 42px;
      padding: 0 15px;
      border: 1px solid rgba(216, 173, 124, .22);
      border-radius: 999px;
      background: rgba(255, 255, 255, .045);
      color: rgba(247, 242, 236, .82);
      font: inherit;
      font-size: .84rem;
      font-weight: 750;
      cursor: pointer;
      transition: background .22s ease, border-color .22s ease, color .22s ease, transform .22s ease;
    }

    .portfolio-filters button:hover,
    .portfolio-filters button:focus-visible,
    .portfolio-filters button.is-active,
    .portfolio-filters a:hover,
    .portfolio-filters a:focus-visible,
    .portfolio-filters a.is-active {
      outline: none;
      border-color: rgba(216, 173, 124, .62);
      background: linear-gradient(135deg, rgba(216, 173, 124, .92), rgba(169, 120, 79, .92));
      color: #18100b;
      transform: translateY(-1px);
    }

    .portfolio-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 20px;
      align-items: start;
    }

    .portfolio-project {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: linear-gradient(145deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .026));
      box-shadow: var(--shadow);
    }

    .portfolio-project[hidden] { display: none; }

    .portfolio-project__media {
      position: relative;
      min-height: 280px;
      overflow: hidden;
      background: #100d0b;
    }

    .portfolio-project__media::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      z-index: 1;
      height: 42%;
      background: linear-gradient(180deg, transparent, rgba(8, 7, 5, .76));
      pointer-events: none;
    }

    .portfolio-project__media img,
    .portfolio-project__media video {
      width: 100%;
      height: 100%;
      min-height: inherit;
      object-fit: cover;
    }

    .portfolio-project__media video { display: block; background: #000; }

    .portfolio-video-thumb {
      appearance: none;
      position: relative;
      z-index: 2;
      width: 100%;
      min-height: inherit;
      display: block;
      overflow: hidden;
      padding: 0;
      border: 0;
      background: #100d0b;
      color: var(--gold-2);
      cursor: pointer;
    }

    .portfolio-video-thumb img {
      width: 100%;
      height: 100%;
      min-height: inherit;
      object-fit: cover;
      transition: transform .32s ease, filter .32s ease;
    }

    .portfolio-video-thumb::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(8, 7, 5, .08), rgba(8, 7, 5, .46));
      pointer-events: none;
    }

    .portfolio-video-thumb span {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 1;
      display: grid;
      place-items: center;
      width: 72px;
      height: 72px;
      border: 1px solid rgba(255, 255, 255, .34);
      border-radius: 50%;
      background: rgba(8, 7, 5, .62);
      box-shadow: 0 16px 42px rgba(0, 0, 0, .38);
      transform: translate(-50%, -50%);
      color: var(--muted);
      font-size: .9rem;
    }

    .portfolio-video-thumb:hover img,
    .portfolio-video-thumb:focus-visible img { filter: brightness(1.1); transform: scale(1.035); }
    .portfolio-video-thumb:focus-visible { outline: 2px solid var(--gold-2); outline-offset: -2px; }

    .portfolio-modal[hidden] { display: none; }

    .portfolio-modal {
      position: fixed;
      inset: 0;
      z-index: 50;
      display: grid;
      place-items: center;
      padding: 24px;
    }

    .portfolio-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .78); backdrop-filter: blur(10px); }

    .portfolio-modal__dialog {
      position: relative;
      z-index: 1;
      width: min(1040px, 100%);
      display: grid;
      gap: 14px;
      padding: 18px;
      border: 1px solid rgba(216, 173, 124, .24);
      border-radius: 8px;
      background: #100d0b;
      box-shadow: 0 30px 90px rgba(0, 0, 0, .58);
    }

    .portfolio-modal__dialog h2 { margin: 0; padding-right: 48px; font-size: 1.1rem; line-height: 1.2; }
    .portfolio-modal__dialog video { width: 100%; max-height: min(72vh, 780px); border-radius: 8px; background: #000; }

    .portfolio-modal__close {
      appearance: none;
      position: absolute;
      top: 12px;
      right: 12px;
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255, 255, 255, .18);
      border-radius: 50%;
      background: rgba(255, 255, 255, .06);
      color: var(--text);
      font: inherit;
      font-size: 1.4rem;
      cursor: pointer;
    }

    .is-portfolio-modal-open { overflow: hidden; }

    .portfolio-project__body { display: grid; gap: 10px; padding: 20px; }
    .portfolio-project__body span,
    .portfolio-project__body strong { color: var(--gold-2); font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
    .portfolio-project__body h3 { margin-bottom: 0; font-size: 1.35rem; line-height: 1.1; }
    .portfolio-project__body p { margin-bottom: 0; color: var(--muted); font-size: .94rem; line-height: 1.42; }

    .solution {
      position: relative;
      min-height: 500px;
      overflow: hidden;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: var(--panel);
      box-shadow: var(--shadow);
    }

    .solution img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .solution::after {
      content: "";
      position: absolute;
      inset: 34% 0 0;
      background: linear-gradient(180deg, transparent, rgba(8, 7, 5, .92));
      pointer-events: none;
    }

    .solution div {
      position: absolute;
      inset: auto 0 0;
      z-index: 1;
      padding: 24px;
    }

    .solution h3 {
      margin-bottom: 8px;
      font-size: 1.35rem;
      line-height: 1.12;
      font-weight: 700;
    }

    .solution p {
      color: rgba(247, 242, 236, .82);
      margin-bottom: 0;
      font-size: .94rem;
      line-height: 1.4;
    }

    .trust {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .025), transparent),
        rgba(255, 255, 255, .018);
      border-block: 1px solid rgba(255, 255, 255, .08);
    }

    .trust__grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 42px;
      align-items: start;
    }

    .trust__grid > div:first-child {
      max-width: 820px;
      margin: 0 auto;
      text-align: center;
    }

    .trust__grid > div:first-child .eyebrow {
      justify-content: center;
    }

    .trust__grid > div:first-child p {
      max-width: 700px;
      margin-right: auto;
      margin-left: auto;
    }

    .trust h2 {
      margin: 18px 0;
      font-size: 36px;
      line-height: 1;
      font-weight: 500;
    }

    .trust p {
      color: var(--muted);
      margin-bottom: 0;
    }

    .trust__items {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }

    .trust__items article,
    .audience__grid article,
    .faq__grid article {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255, 255, 255, .045);
    }

    .trust__items article {
      position: relative;
      isolation: isolate;
      display: grid;
      grid-template-rows: auto 1fr;
      align-content: start;
      min-height: 236px;
      padding: 28px 22px 22px;
      overflow: hidden;
      border-color: rgba(216, 173, 124, .28);
      background: linear-gradient(145deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .035));
      box-shadow: 0 18px 38px rgba(0, 0, 0, .2);
    }

    .trust__items article::before {
      content: "";
      position: absolute;
      z-index: -1;
      inset: 0 0 auto;
      height: 4px;
      background: var(--trust-accent);
    }

    .trust__items article::after {
      content: attr(data-step);
      position: absolute;
      z-index: -1;
      right: 14px;
      bottom: -20px;
      color: var(--trust-accent);
      font-size: 7.4rem;
      font-weight: 800;
      line-height: 1;
      opacity: .08;
    }

    .trust__items article:nth-child(1) { --trust-accent: #e7b978; }
    .trust__items article:nth-child(2) { --trust-accent: #8bc7c3; }
    .trust__items article:nth-child(3) { --trust-accent: #d98c72; }

    .trust__items article strong {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      margin-bottom: 24px;
      border: 1px solid var(--trust-accent);
      border-radius: 50%;
      color: var(--trust-accent);
      font-size: .85rem;
      letter-spacing: .08em;
    }

    .trust__items h3 {
      margin-bottom: 8px;
      color: var(--trust-accent);
      font-size: 1.18rem;
      line-height: 1.2;
    }

    .trust__items p {
      grid-column: auto;
      font-size: .92rem;
      line-height: 1.45;
    }

    .process {
      position: relative;
      display: grid;
      gap: 34px;
      scroll-margin-top: 126px;
    }

    .process > div > .eyebrow {
      display: flex;
      justify-content: center;
    }

    .steps {
      display: grid;
      gap: 16px;
    }

    .steps--roadmap {
      position: relative;
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 18px;
      margin: 54px 0 18px;
      padding: 0;
      list-style: none;
    }

    .step {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-rows: auto 1fr;
      gap: 18px;
      min-width: 0;
      min-height: 240px;
      padding: 0 8px;
      text-align: center;
    }

    .step:nth-child(1) { --step-accent: #e7b978; }
    .step:nth-child(2) { --step-accent: #8bc7c3; }
    .step:nth-child(3) { --step-accent: #d98c72; }
    .step:nth-child(4) { --step-accent: #a9b5dd; }
    .step:nth-child(5) { --step-accent: #c89bc4; }
    .step:nth-child(6) { --step-accent: #9fc78f; }

    .step--upper,
    .step--lower {
      grid-row: auto;
      align-self: stretch;
    }

    .step__content {
      display: grid;
      align-content: start;
      gap: 7px;
      max-width: 180px;
      margin: 0 auto;
      padding-top: 14px;
      border-top: 3px solid var(--step-accent);
    }

    .step__content h3 {
      margin-bottom: 0;
      color: var(--step-accent);
      font-size: 1.04rem;
      line-height: 1.2;
    }

    .step__content p {
      margin-bottom: 0;
      color: var(--muted);
      font-size: .9rem;
      line-height: 1.38;
    }

    .step__marker {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 1;
      width: 90px;
      height: 90px;
      margin: 0 auto;
      padding: 0;
      border: 5px solid var(--bg);
      border-radius: 50%;
      background: color-mix(in srgb, var(--step-accent) 18%, var(--panel-2));
      color: var(--step-accent);
      outline: 2px solid var(--step-accent);
      box-shadow: 0 8px 24px rgba(216, 173, 124, .32);
    }

    .step__marker strong {
      font-size: 1.42rem;
      line-height: 1;
    }

    .steps--roadmap .step:not(:last-child)::after {
      content: "→";
      position: absolute;
      z-index: 3;
      top: 41px;
      right: -19px;
      color: var(--gold-2);
      font-size: 1.7rem;
      line-height: 1;
    }

    .steps--roadmap .step:nth-child(6)::after {
      display: none;
    }

    .audience__grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
      counter-reset: audience-card;
    }

    .audience__grid article {
      position: relative;
      isolation: isolate;
      min-height: 190px;
      display: grid;
      align-content: center;
      padding: 26px 22px 24px 78px;
      overflow: hidden;
      border-color: rgba(216, 173, 124, .28);
      background: linear-gradient(145deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .035));
      color: rgba(247, 242, 236, .9);
      font-size: 1rem;
      font-weight: 650;
      line-height: 1.32;
      counter-increment: audience-card;
      box-shadow: 0 16px 34px rgba(0, 0, 0, .18);
    }

    .audience__grid article::before {
      content: counter(audience-card, decimal-leading-zero);
      position: absolute;
      top: 24px;
      left: 20px;
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border: 1px solid var(--audience-accent);
      border-radius: 50%;
      color: var(--audience-accent);
      font-size: .8rem;
      font-weight: 800;
      letter-spacing: .06em;
    }

    .audience__grid article::after {
      content: "";
      position: absolute;
      z-index: -1;
      inset: auto 0 0;
      height: 3px;
      background: var(--audience-accent);
    }

    .audience__grid article:nth-child(1) { --audience-accent: #e7b978; }
    .audience__grid article:nth-child(2) { --audience-accent: #8bc7c3; }
    .audience__grid article:nth-child(3) { --audience-accent: #d98c72; }
    .audience__grid article:nth-child(4) { --audience-accent: #a9b5dd; }

    .faq {
      padding-top: 72px;
    }

    .faq__grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }

    .faq__grid article {
      padding: 24px;
    }

    .faq__grid h3 {
      margin-bottom: 10px;
      font-size: 1.16rem;
      line-height: 1.25;
    }

    .faq__grid p {
      margin-bottom: 0;
      color: var(--muted);
    }

    .cta {
      padding-bottom: 44px;
    }

    .cta__box {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 28px;
      align-items: center;
      padding: clamp(28px, 5vw, 58px);
      border: 1px solid rgba(216, 173, 124, .32);
      border-radius: 8px;
      background:
        radial-gradient(circle at 86% 0%, rgba(216, 173, 124, .2), transparent 26rem),
        linear-gradient(135deg, #17110d, #0a0806);
      box-shadow: var(--shadow);
    }

    .cta h2 {
      margin-bottom: 14px;
      font-size: 36px;
      line-height: 1;
      font-weight: 500;
    }

    .cta p {
      max-width: 660px;
      color: var(--muted);
      margin-bottom: 0;
    }

    footer {
      padding: 56px 0 64px;
      color: var(--soft);
      border-top: 1px solid var(--line);
    }

    .footer__inner {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 64px;
      flex-wrap: wrap;
    }

    .footer__inner > div,
    .footer__contact {
      display: grid;
      gap: 7px;
    }

    .footer__inner > div:first-child {
      max-width: 520px;
      gap: 12px;
    }

    .footer__inner > div:first-child span {
      max-width: 390px;
      line-height: 1.5;
    }

    .footer__inner strong {
      color: var(--text);
    }

    .footer__contact {
      justify-items: end;
      min-width: 220px;
      text-align: right;
      gap: 11px;
    }

    .footer__contact a {
      color: var(--gold-2);
    }

    .footer__contact a,
    .footer__contact span {
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap: 9px;
    }

    .footer__icon {
      width: 18px;
      height: 18px;
      flex: 0 0 18px;
      font-size: 18px;
      line-height: 18px;
      text-align: center;
    }

    @media (max-width: 920px) {
      .nav__inner {
        position: relative;
        gap: 12px;
        min-height: 72px;
      }

      .nav__links {
        display: none;
      }

      .nav__mobile {
        display: block;
      }

      .nav__mobile summary {
        list-style: none;
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 0 15px;
        border: 1px solid rgba(216, 173, 124, .34);
        border-radius: 999px;
        background: rgba(255, 255, 255, .07);
        color: var(--gold-2);
        font-size: .82rem;
        font-weight: 800;
        cursor: pointer;
        user-select: none;
      }

      .nav__mobile summary::-webkit-details-marker {
        display: none;
      }

      .nav__mobile-panel {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        width: min(320px, calc(100vw - 28px));
        display: grid;
        gap: 8px;
        padding: 12px;
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: 18px;
        background: rgba(12, 9, 7, .97);
        box-shadow: 0 22px 50px rgba(0, 0, 0, .45);
      }

      .nav__mobile:not([open]) .nav__mobile-panel {
        display: none;
      }

      .nav__mobile-panel a {
        min-height: 42px;
        display: flex;
        align-items: center;
        padding: 0 13px;
        border-radius: 12px;
        color: rgba(247, 242, 236, .84);
        background: rgba(255, 255, 255, .045);
        font-size: .88rem;
        font-weight: 750;
      }

      .nav__mobile-panel .button {
        justify-content: center;
        gap: 8px;
        min-height: 44px;
        margin-top: 2px;
        border-color: rgba(216, 173, 124, .5);
        background: linear-gradient(135deg, var(--gold), #a9784f);
        color: #18100b;
        box-shadow: 0 12px 34px rgba(216, 173, 124, .18);
      }

      .hero {
        min-height: auto;
        padding-top: 124px;
      }

      .hero::before {
        background:
          linear-gradient(180deg, rgba(5, 4, 3, .56), rgba(5, 4, 3, .94) 62%, rgba(5, 4, 3, 1)),
          url("../imagens/hero-automacao-clean.png") top center / cover no-repeat;
      }

      .hero__grid,
      .trust__grid,
      .process,
      .cta__box {
        grid-template-columns: 1fr;
      }

      .trust__items {
        grid-template-columns: 1fr;
      }

      .device {
        width: min(100%, 340px);
      }

      .benefits,
      .solutions,
      .portfolio-grid,
      .audience__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .section-head {
        display: grid;
      }

      .footer__contact {
        justify-items: start;
        text-align: left;
      }

      .steps--roadmap {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: 18px;
        margin-top: 38px;
        padding-left: 0;
      }

      .steps--roadmap::before {
        display: none;
      }

      .step {
        min-height: 0;
      }

      .step--top,
      .step--bottom {
        grid-row: auto;
        align-self: stretch;
        padding-top: 0;
        padding-bottom: 0;
      }

      .steps--roadmap .step:nth-child(n) {
        grid-column: auto;
      }

      .steps--roadmap .step:not(:last-child)::after {
        content: "↓";
        top: auto;
        right: 50%;
        bottom: -24px;
        left: auto;
        transform: translateX(50%);
      }

      .step__marker,
      .step--top .step__marker,
      .step--bottom .step__marker {
        position: static;
        width: 58px;
        height: 58px;
        transform: none;
      }
    }

    @media (max-width: 620px) {
      .shell {
        width: min(100% - 28px, 1180px);
      }

      .steps--roadmap {
        gap: 18px;
        margin-top: 30px;
      }

      .step {
        min-height: 0;
        padding: 20px;
      }

      .step__marker,
      .step--top .step__marker,
      .step--bottom .step__marker {
        position: static;
      }

      .brand {
        letter-spacing: .18em;
      }

      .whatsapp-float {
        right: 14px;
        bottom: 14px;
        width: 54px;
        height: 54px;
        min-height: 54px;
      }

      .device {
        width: min(100%, 310px);
        aspect-ratio: 9 / 19.4;
      }

      .device__screen {
        grid-template-rows: 20px 124px 88px 32px 38px minmax(0, 1fr) 52px;
        gap: 8px;
        padding: 14px 10px 16px;
      }

      .scene-card {
        grid-template-rows: 40px 16px 32px;
        min-height: 124px;
        padding: 12px;
      }

      .scene-card__brand img {
        width: 118px;
      }

      .scene-card__actions {
        gap: 6px;
      }

      .scene-card__actions button {
        width: 27px;
        height: 27px;
        font-size: .7rem;
      }

      .scene-card h2 {
        font-size: 1.42rem;
      }

      .app-stats {
        gap: 7px;
      }

      .app-stats article {
        min-height: 88px;
        padding: 8px 6px;
        border-radius: 13px;
      }

      .app-stats article > span,
      .control__icon {
        width: 26px;
        height: 26px;
        border-radius: 9px;
      }

      .app-stats strong {
        font-size: .66rem;
      }

      .app-stats small {
        font-size: .56rem;
      }

      .app-filters {
        gap: 6px;
      }

      .app-filters button {
        min-height: 30px;
        padding-inline: 10px;
        font-size: .6rem;
      }

      .app-section-title h3 {
        font-size: .98rem;
      }

      .app-section-title span,
      .app-section-title button {
        font-size: .66rem;
      }

      .controls {
        gap: 8px;
      }

      .control {
        grid-template-rows: 30px 16px 14px;
        min-height: 82px;
        padding: 8px;
        border-radius: 13px;
        font-size: .78rem;
      }

      .control__name {
        font-size: .72rem;
      }

      .control__room {
        font-size: .58rem;
      }

      .scene-tile {
        padding: 10px;
      }

      .scene-tile strong {
        font-size: 1.18rem;
      }

      .scene-tile span {
        font-size: .76rem;
      }

      .toggle {
        width: 36px;
        height: 21px;
        padding: 3px;
      }

      .toggle::after {
        width: 15px;
        height: 15px;
      }

      .phone-dock {
        gap: 5px;
        padding: 6px;
        border-radius: 18px;
      }

      .dock-item {
        min-height: 38px;
        border-radius: 12px;
        font-size: .76rem;
      }

      .dock-item span {
        font-size: .6rem;
      }

      .benefits,
      .solutions,
      .portfolio-grid,
      .audience__grid,
      .faq__grid {
        grid-template-columns: 1fr;
      }

      .portfolio-hero {
        min-height: auto;
        padding-top: 104px;
      }

      .portfolio-filters {
        justify-content: flex-start;
      }

      .portfolio-project__media {
        min-height: 330px;
      }

      .solution {
        min-height: 450px;
      }

      .step {
        grid-template-columns: 1fr;
      }

      .trust__items article {
        grid-template-columns: 1fr;
      }

      .trust__items p {
        grid-column: auto;
      }
    }