/* Arista Digital - estilos do site institucional */
:root {
      color-scheme: light;
      --ink: #080a10;
      --muted: #5f6678;
      --line: rgba(11, 18, 32, .11);
      --paper: #ffffff;
      --paper-soft: #f4f6fb;
      --night: #070913;
      --night-2: #0c1020;
      --orange: #ff8a00;
      --amber: #ffc400;
      --blue: #0b73ce;
      --rose: #b23168;
      --violet: #6e64ff;
      --green: #1fb879;
      --shadow: 0 30px 90px rgba(7, 9, 19, .18);
      --radius-xl: 34px;
      --radius-lg: 24px;
      --radius-md: 16px;
      --max: 1180px;
      --ease: cubic-bezier(.16, 1, .3, 1);
      --brand: var(--orange);
      --mx: 50%;
      --my: 50%;
      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(--ink);
      background:
        radial-gradient(circle at 20% 0%, rgba(255, 196, 0, .13), transparent 30rem),
        radial-gradient(circle at 100% 15%, rgba(11, 115, 206, .12), transparent 34rem),
        linear-gradient(180deg, #f8f9fc 0%, #fff 50%, #f5f7fb 100%);
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: -2;
      opacity: .35;
      background-image:
        linear-gradient(rgba(10, 16, 28, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(10, 16, 28, .05) 1px, transparent 1px);
      background-size: 42px 42px;
      mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
    }

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

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

    button,
    input,
    textarea,
    select {
      font: inherit;
    }

    .page-shell {
      position: relative;
      isolation: isolate;
    }

    .site-header {
      position: fixed;
      top: 18px;
      left: 50%;
      z-index: 50;
      width: min(calc(100% - 32px), var(--max));
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 10px 12px 10px 18px;
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 999px;
      color: #fff;
      background: rgba(7, 9, 19, .68);
      box-shadow: 0 22px 70px rgba(0, 0, 0, .28);
      backdrop-filter: blur(18px);
    }

    .brand-lockup {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-weight: 900;
      letter-spacing: -.04em;
    }

    .brand-mark {
      position: relative;
      width: 34px;
      height: 34px;
      border-radius: 13px;
      background:
        radial-gradient(circle at 30% 28%, var(--amber), transparent 28%),
        linear-gradient(135deg, var(--orange), #ff5f2e 45%, #111 46%);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
    }

    .brand-mark::after {
      content: "";
      position: absolute;
      left: 9px;
      right: 6px;
      top: 10px;
      height: 5px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .88);
      transform: rotate(-12deg);
    }

    .nav-links {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      color: rgba(255, 255, 255, .72);
      font-size: 14px;
    }

    .nav-links a {
      padding: 10px 12px;
      border-radius: 999px;
      transition: color .25s var(--ease), background .25s var(--ease);
    }

    .nav-links a:hover {
      color: #fff;
      background: rgba(255, 255, 255, .1);
    }

    .nav-cta,
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 44px;
      padding: 0 18px;
      border: 1px solid rgba(255, 255, 255, .14);
      border-radius: 999px;
      background: linear-gradient(135deg, #fff, #f4f6fb);
      color: #080a10;
      font-weight: 750;
      box-shadow: 0 18px 45px rgba(0, 0, 0, .18);
      transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
    }

    .nav-cta:hover,
    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 24px 60px rgba(0, 0, 0, .24);
    }

    .btn.dark {
      background: rgba(255, 255, 255, .08);
      color: #fff;
      border-color: rgba(255, 255, 255, .16);
    }

    .btn.orange {
      color: #0a0a0a;
      border: 0;
      background: linear-gradient(135deg, var(--amber), var(--orange));
      box-shadow: 0 18px 60px rgba(255, 138, 0, .28);
    }

    .hero {
      position: relative;
      min-height: 100svh;
      display: grid;
      place-items: center;
      padding: 140px 22px 84px;
      color: #fff;
      background:
        radial-gradient(circle at var(--mx) var(--my), rgba(255, 196, 0, .22), transparent 26rem),
        radial-gradient(circle at 78% 22%, rgba(11, 115, 206, .28), transparent 28rem),
        radial-gradient(circle at 16% 74%, rgba(178, 49, 104, .22), transparent 30rem),
        linear-gradient(135deg, var(--night) 0%, var(--night-2) 100%);
      overflow: hidden;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255, 255, 255, .075) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
      background-size: 56px 56px;
      mask-image: radial-gradient(circle at 50% 42%, #000, transparent 68%);
      opacity: .55;
    }

    .hero::after {
      content: "";
      position: absolute;
      width: min(72vw, 760px);
      aspect-ratio: 1;
      right: -18%;
      top: 9%;
      border-radius: 50%;
      background: conic-gradient(from 130deg, rgba(255, 196, 0, .1), rgba(255, 138, 0, .32), rgba(11, 115, 206, .15), rgba(255, 196, 0, .1));
      filter: blur(2px);
      opacity: .65;
      animation: slowSpin 24s linear infinite;
    }

    .hero-inner {
      position: relative;
      z-index: 2;
      width: min(100%, var(--max));
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
      align-items: center;
      gap: clamp(34px, 6vw, 86px);
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      width: fit-content;
      padding: 8px 12px;
      border: 1px solid rgba(255, 255, 255, .14);
      border-radius: 999px;
      color: rgba(255, 255, 255, .78);
      background: rgba(255, 255, 255, .07);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
      backdrop-filter: blur(14px);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .02em;
    }

    .eyebrow .pulse {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--amber);
      box-shadow: 0 0 0 0 rgba(255, 196, 0, .65);
      animation: pulse 1.8s var(--ease) infinite;
    }

    .hero h1 {
      max-width: 780px;
      margin: 22px 0 0;
      font-size: clamp(48px, 8vw, 96px);
      line-height: .9;
      letter-spacing: -.075em;
    }

    .hero h1 span {
      display: inline-block;
      background: linear-gradient(135deg, #fff 0%, #e8edf7 45%, #ffc400 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .hero-copy {
      max-width: 650px;
      margin: 26px 0 0;
      color: rgba(255, 255, 255, .72);
      font-size: clamp(18px, 2vw, 22px);
      line-height: 1.55;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 34px;
    }

    .hero-metrics {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-top: 42px;
      max-width: 680px;
    }

    .metric {
      padding: 18px;
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 22px;
      background: rgba(255, 255, 255, .06);
      backdrop-filter: blur(18px);
    }

    .metric strong {
      display: block;
      font-size: clamp(24px, 3vw, 34px);
      letter-spacing: -.04em;
    }

    .metric span {
      display: block;
      margin-top: 5px;
      color: rgba(255, 255, 255, .58);
      font-size: 13px;
      line-height: 1.35;
    }

    .hero-visual {
      position: relative;
      min-height: 620px;
      display: grid;
      place-items: center;
      perspective: 1200px;
    }

    .command-card {
      position: relative;
      width: min(100%, 500px);
      padding: 18px;
      border: 1px solid rgba(255, 255, 255, .14);
      border-radius: 34px;
      background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .055));
      box-shadow: 0 40px 110px rgba(0, 0, 0, .35);
      backdrop-filter: blur(24px);
      transform: rotateX(7deg) rotateY(-9deg);
      transform-style: preserve-3d;
      animation: floatPanel 7s var(--ease) infinite;
    }

    .command-card::before {
      content: "";
      position: absolute;
      inset: -1px;
      z-index: -1;
      border-radius: inherit;
      padding: 1px;
      background: linear-gradient(135deg, rgba(255, 196, 0, .7), rgba(11, 115, 206, .35), rgba(255, 255, 255, .1));
      mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      mask-composite: exclude;
    }

    .command-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 12px;
    }

    .window-dots {
      display: flex;
      gap: 7px;
    }

    .window-dots i {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .26);
    }

    .search-pill {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 14px;
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 18px;
      color: rgba(255, 255, 255, .64);
      background: rgba(0, 0, 0, .18);
      font-size: 14px;
    }

    .search-pill kbd {
      margin-left: auto;
      padding: 4px 8px;
      border-radius: 8px;
      background: rgba(255, 255, 255, .1);
      color: rgba(255, 255, 255, .72);
      font: 700 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    }

    .stack-list {
      display: grid;
      gap: 12px;
      margin-top: 16px;
    }

    .stack-item {
      position: relative;
      display: grid;
      grid-template-columns: 46px 1fr auto;
      gap: 14px;
      align-items: center;
      padding: 14px;
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 22px;
      background: rgba(255, 255, 255, .08);
      overflow: hidden;
    }

    .stack-item::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .42;
      background: radial-gradient(circle at 10% 10%, var(--tint, rgba(255, 138, 0, .28)), transparent 50%);
      transform: translateX(-20%);
      transition: transform .6s var(--ease);
    }

    .stack-item:hover::before {
      transform: translateX(0);
    }

    .stack-icon {
      position: relative;
      display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
      border-radius: 16px;
      background: rgba(255, 255, 255, .12);
      color: #fff;
      font-weight: 900;
      letter-spacing: -.05em;
    }

    .stack-copy {
      position: relative;
    }

    .stack-copy strong {
      display: block;
      color: #fff;
      letter-spacing: -.02em;
    }

    .stack-copy span {
      display: block;
      margin-top: 3px;
      color: rgba(255, 255, 255, .56);
      font-size: 13px;
    }

    .stack-chip {
      position: relative;
      padding: 6px 9px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .1);
      color: rgba(255, 255, 255, .74);
      font-size: 12px;
      font-weight: 800;
    }

    .floating-badge {
      position: absolute;
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 11px 13px;
      border: 1px solid rgba(255, 255, 255, .13);
      border-radius: 999px;
      background: rgba(255, 255, 255, .1);
      box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
      backdrop-filter: blur(16px);
      color: rgba(255, 255, 255, .78);
      font-size: 13px;
      font-weight: 750;
      animation: drift 6s var(--ease) infinite;
    }

    .floating-badge.one {
      left: 0;
      top: 92px;
      animation-delay: -.8s;
    }

    .floating-badge.two {
      right: 0;
      bottom: 112px;
      animation-delay: -2.4s;
    }

    .floating-badge.three {
      left: 42px;
      bottom: 40px;
      animation-delay: -3.2s;
    }

    .badge-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--accent, var(--orange));
      box-shadow: 0 0 26px var(--accent, var(--orange));
    }

    section {
      position: relative;
    }

    .section-pad {
      padding: clamp(72px, 10vw, 132px) 22px;
    }

    .section-inner {
      width: min(100%, var(--max));
      margin: 0 auto;
    }

    .section-label {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: #30384a;
      background: rgba(255, 255, 255, .72);
      box-shadow: 0 14px 40px rgba(7, 9, 19, .05);
      font-size: 13px;
      font-weight: 800;
    }

    .section-label::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--orange);
    }

    .section-heading {
      margin: 18px 0 0;
      max-width: 790px;
      font-size: clamp(23px, 3vw, 42px);
      line-height: .96;
      letter-spacing: -.06em;
    }

    .section-lead {
      max-width: 760px;
      margin: 20px 0 0;
      color: var(--muted);
      font-size: clamp(17px, 2vw, 20px);
      line-height: 1.65;
    }

    .mandala-section {
      z-index: 3;
      color: #10131c;
      background:
        radial-gradient(circle at 18% 18%, rgba(255, 196, 0, .18), transparent 28rem),
        radial-gradient(circle at 90% 18%, rgba(11, 115, 206, .14), transparent 32rem),
        linear-gradient(180deg, #f6f8fd, #ffffff 58%, #f5f7fb);
    }

    .mandala-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.12fr) minmax(330px, .82fr);
      align-items: center;
      gap: clamp(26px, 5vw, 64px);
      margin-top: clamp(34px, 5vw, 64px);
    }

    .mandala-board {
      position: relative;
      min-width: 0;
      padding: clamp(22px, 3vw, 38px) clamp(12px, 2vw, 22px) clamp(12px, 2vw, 22px);
      border: 1px solid rgba(7, 9, 19, .09);
      border-radius: clamp(28px, 5vw, 48px);
      background:
        radial-gradient(circle at 50% 46%, rgba(255, 255, 255, .96), rgba(246, 248, 253, .84) 45%, rgba(255, 255, 255, .74)),
        linear-gradient(135deg, rgba(255, 255, 255, .8), rgba(245, 247, 252, .9));
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .mandala-board::before {
      content: "";
      position: absolute;
      width: 360px;
      aspect-ratio: 1;
      left: -140px;
      top: 18%;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 138, 0, .2), transparent 64%);
      filter: blur(10px);
    }

    .mandala-board::after {
      content: "";
      position: absolute;
      width: 360px;
      aspect-ratio: 1;
      right: -160px;
      bottom: 8%;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(11, 115, 206, .18), transparent 64%);
      filter: blur(10px);
    }

    .mandala-stage {
      position: relative;
      z-index: 2;
      width: min(100%, 760px);
      aspect-ratio: 1092 / 1091;
      margin: 0 auto;
      transform-style: preserve-3d;
    }

    .mandala-stage::before {
      content: "";
      position: absolute;
      inset: 3.5%;
      z-index: -1;
      border-radius: 50%;
      background: conic-gradient(from 180deg, rgba(255, 196, 0, .4), rgba(255, 99, 0, .32), rgba(11, 115, 206, .32), rgba(178, 49, 104, .3), rgba(31, 184, 121, .18), rgba(255, 196, 0, .4));
      filter: blur(22px);
      opacity: .5;
      animation: slowSpin 28s linear infinite;
    }

    .mandala-center {
      position: absolute;
      left: 15.84%;
      top: 15.58%;
      width: 67.86%;
      z-index: 1;
      pointer-events: none;
      filter: drop-shadow(0 20px 40px rgba(7, 9, 19, .14));
    }

    .segment {
      position: absolute;
      z-index: 3;
      display: block;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: pointer;
      transform: translate3d(0, 0, 0) scale(1) rotate(0);
      transform-origin: center;
      transition:
        transform .48s var(--ease),
        filter .48s var(--ease),
        opacity .32s var(--ease);
      will-change: transform, filter;
    }

    .segment img {
      width: 100%;
      height: auto;
      pointer-events: none;
      user-select: none;
    }

    .segment:hover,
    .segment:focus-visible,
    .segment.is-active {
      z-index: 9;
      transform:
        translate3d(var(--tx, 0), var(--ty, 0), 36px)
        scale(1.045)
        rotate(var(--rot, 0deg));
      filter:
        drop-shadow(0 24px 34px color-mix(in srgb, var(--accent) 28%, transparent))
        drop-shadow(0 22px 52px rgba(7, 9, 19, .18));
    }

    .segment:focus-visible {
      outline: 3px solid color-mix(in srgb, var(--accent) 55%, white);
      outline-offset: 6px;
      border-radius: 24px;
    }

    .segment:not(.is-active) {
      opacity: .93;
    }

    .segment.beneo {
      left: 23.04%;
      top: -1.69%;
      width: 54.21%;
      --accent: #f5a900;
      --tx: 0px;
      --ty: -6px;
      --rot: .35deg;
    }

    .segment.rh {
      left: .09%;
      top: 7.06%;
      width: 39.65%;
      --accent: #ff4a12;
      --tx: -14px;
      --ty: -8px;
      --rot: -1.2deg;
    }

    .segment.olos {
      left: 60.35%;
      top: 7.06%;
      width: 39.65%;
      --accent: #0b73ce;
      --tx: 14px;
      --ty: -8px;
      --rot: 1.2deg;
    }

    .segment.zipag {
      left: 0%;
      top: 49.59%;
      width: 39.65%;
      --accent: #19394f;
      --tx: -14px;
      --ty: 12px;
      --rot: 1.1deg;
    }

    .segment.hubbrasil {
      left: 60.35%;
      top: 49.59%;
      width: 39.65%;
      --accent: #111111;
      --tx: 14px;
      --ty: 12px;
      --rot: -1.1deg;
    }

    .segment.livve {
      left: 25.18%;
      top: 64.44%;
      width: 49.45%;
      --accent: #b23168;
      --tx: 0px;
      --ty: 16px;
      --rot: -.25deg;
    }

    .detail-card {
      position: sticky;
      top: 110px;
      min-height: 560px;
      padding: 24px;
      border: 1px solid rgba(7, 9, 19, .09);
      border-radius: 34px;
      background:
        radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 18rem),
        linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(247, 249, 253, .9));
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .detail-card::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent);
      transform: translateX(-130%);
      opacity: 0;
    }

    .detail-card.detail-enter::before {
      animation: sheen .78s var(--ease);
    }

    .detail-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .detail-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      border: 1px solid color-mix(in srgb, var(--brand) 22%, rgba(7, 9, 19, .1));
      border-radius: 999px;
      color: #30384a;
      background: color-mix(in srgb, var(--brand) 9%, white);
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .detail-tag::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--brand);
      box-shadow: 0 0 22px color-mix(in srgb, var(--brand) 70%, transparent);
    }

    .detail-site {
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
    }

    .detail-card h3 {
      margin: 26px 0 0;
      font-size: clamp(22px, 2.4vw, 32px);
      line-height: .94;
      letter-spacing: -.06em;
    }

    .detail-subtitle {
      margin: 12px 0 0;
      color: #2c3343;
      font-size: 18px;
      font-weight: 800;
      line-height: 1.32;
    }

    .detail-text {
      margin: 16px 0 0;
      color: var(--muted);
      line-height: 1.68;
      font-size: 16px;
    }

    .detail-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 22px;
    }

    .detail-mini {
      padding: 16px;
      border: 1px solid rgba(7, 9, 19, .08);
      border-radius: 20px;
      background: rgba(255, 255, 255, .72);
    }

    .detail-mini strong {
      display: block;
      color: #151a26;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .detail-mini span {
      display: block;
      margin-top: 8px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.5;
    }

    .detail-list {
      display: grid;
      gap: 10px;
      margin: 22px 0 0;
      padding: 0;
      list-style: none;
    }

    .detail-list li {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      color: #30384a;
      line-height: 1.45;
      font-weight: 650;
    }

    .detail-list li::before {
      content: "";
      flex: 0 0 auto;
      width: 9px;
      height: 9px;
      margin-top: .42em;
      border-radius: 50%;
      background: var(--brand);
      box-shadow: 0 0 18px color-mix(in srgb, var(--brand) 65%, transparent);
    }

    .detail-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 28px;
    }

    .detail-actions .btn {
      border-color: rgba(7, 9, 19, .08);
      box-shadow: 0 16px 40px rgba(7, 9, 19, .08);
    }

    .detail-actions .btn.primary {
      color: #070913;
      border: 0;
      background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 90%, white), color-mix(in srgb, var(--brand) 58%, #fff));
    }

    .tap-hint {
      margin-top: 18px;
      color: var(--muted);
      font-size: 13px;
      text-align: center;
    }

    .builder-section {
      background:
        radial-gradient(circle at 12% 0%, rgba(255, 196, 0, .15), transparent 26rem),
        radial-gradient(circle at 100% 28%, rgba(178, 49, 104, .12), transparent 30rem),
        #fff;
    }

    .builder-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 14px;
      margin-top: 42px;
    }

    .builder-card {
      position: relative;
      min-height: 230px;
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: 28px;
      background: rgba(255, 255, 255, .76);
      box-shadow: 0 22px 60px rgba(7, 9, 19, .07);
      overflow: hidden;
      transition: transform .38s var(--ease), box-shadow .38s var(--ease);
    }

    .builder-card::before {
      content: "";
      position: absolute;
      inset: -40% -30% auto auto;
      width: 150px;
      aspect-ratio: 1;
      border-radius: 50%;
      background: color-mix(in srgb, var(--tone, var(--orange)) 18%, transparent);
      filter: blur(8px);
    }

    .builder-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 32px 90px rgba(7, 9, 19, .11);
    }

    .builder-number {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border-radius: 16px;
      color: #0b0e15;
      background: color-mix(in srgb, var(--tone, var(--orange)) 20%, white);
      font-weight: 950;
    }

    .builder-card h3 {
      margin: 24px 0 0;
      font-size: 19px;
      letter-spacing: -.03em;
    }

    .builder-card p {
      margin: 12px 0 0;
      color: var(--muted);
      line-height: 1.58;
      font-size: 14px;
    }

    .group-section {
      color: #fff;
      background:
        radial-gradient(circle at 15% 14%, rgba(255, 196, 0, .2), transparent 28rem),
        radial-gradient(circle at 80% 0%, rgba(11, 115, 206, .24), transparent 30rem),
        linear-gradient(135deg, var(--night), #0e1326 64%, #14101d);
      overflow: hidden;
    }

    .group-section .section-label {
      color: rgba(255, 255, 255, .8);
      border-color: rgba(255, 255, 255, .12);
      background: rgba(255, 255, 255, .08);
    }

    .group-section .section-lead {
      color: rgba(255, 255, 255, .68);
    }

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

    .group-card {
      position: relative;
      min-height: 300px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 24px;
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 32px;
      background: linear-gradient(180deg, rgba(255, 255, 255, .105), rgba(255, 255, 255, .055));
      box-shadow: 0 28px 80px rgba(0, 0, 0, .24);
      overflow: hidden;
      transition: transform .38s var(--ease), border-color .38s var(--ease);
    }

    .group-card::before {
      content: "";
      position: absolute;
      width: 260px;
      aspect-ratio: 1;
      right: -120px;
      top: -120px;
      border-radius: 50%;
      background: radial-gradient(circle, var(--glow, rgba(255, 138, 0, .28)), transparent 68%);
      opacity: .8;
    }

    .group-card:hover {
      transform: translateY(-8px);
      border-color: rgba(255, 255, 255, .24);
    }

    .group-logo {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      width: fit-content;
      color: #fff;
      font-size: 34px;
      font-weight: 950;
      letter-spacing: -.055em;
    }

    .group-logo i {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: var(--glow, var(--orange));
      box-shadow: 0 0 30px var(--glow, var(--orange));
    }

    .group-card h3 {
      margin: 34px 0 0;
      font-size: 22px;
      letter-spacing: -.03em;
    }

    .group-card p {
      margin: 12px 0 0;
      color: rgba(255, 255, 255, .66);
      line-height: 1.65;
    }

    .group-foot {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 28px;
      color: rgba(255, 255, 255, .74);
      font-size: 13px;
      font-weight: 850;
    }

    .contact-section {
      background:
        radial-gradient(circle at 20% 10%, rgba(255, 196, 0, .15), transparent 26rem),
        radial-gradient(circle at 90% 36%, rgba(11, 115, 206, .13), transparent 28rem),
        linear-gradient(180deg, #fff, #f5f7fb);
    }

    .contact-layout {
      display: grid;
      grid-template-columns: minmax(0, .86fr) minmax(360px, 1fr);
      align-items: start;
      gap: clamp(26px, 5vw, 64px);
      margin-top: 42px;
    }

    .contact-aside {
      position: sticky;
      top: 120px;
      padding: 26px;
      border: 1px solid var(--line);
      border-radius: 34px;
      background:
        radial-gradient(circle at 0% 0%, rgba(255, 138, 0, .14), transparent 18rem),
        rgba(255, 255, 255, .74);
      box-shadow: 0 24px 70px rgba(7, 9, 19, .09);
    }

    .contact-aside h3 {
      margin: 0;
      font-size: 26px;
      letter-spacing: -.04em;
    }

    .contact-aside p {
      color: var(--muted);
      line-height: 1.65;
    }

    .contact-list {
      display: grid;
      gap: 12px;
      margin-top: 24px;
    }

    .contact-line {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      padding: 14px;
      border: 1px solid rgba(7, 9, 19, .08);
      border-radius: 18px;
      background: rgba(255, 255, 255, .7);
    }

    .contact-line i {
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      border-radius: 14px;
      background: linear-gradient(135deg, var(--amber), var(--orange));
      font-style: normal;
    }

    .contact-line strong {
      display: block;
      font-size: 14px;
    }

    .contact-line span {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.45;
    }

    .contact-form {
      padding: clamp(20px, 4vw, 34px);
      border: 1px solid rgba(7, 9, 19, .09);
      border-radius: 36px;
      background:
        radial-gradient(circle at 100% 0%, rgba(11, 115, 206, .1), transparent 20rem),
        rgba(255, 255, 255, .9);
      box-shadow: var(--shadow);
    }

    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    .field {
      display: grid;
      gap: 8px;
    }

    .field.full {
      grid-column: 1 / -1;
    }

    .field label {
      color: #30384a;
      font-size: 13px;
      font-weight: 850;
    }

    .field input,
    .field select,
    .field textarea {
      width: 100%;
      border: 1px solid rgba(7, 9, 19, .12);
      border-radius: 18px;
      background: #fff;
      color: var(--ink);
      outline: none;
      padding: 14px 15px;
      transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
    }

    .field textarea {
      min-height: 150px;
      resize: vertical;
    }

    .field input:focus,
    .field select:focus,
    .field textarea:focus {
      border-color: rgba(255, 138, 0, .72);
      box-shadow: 0 0 0 5px rgba(255, 138, 0, .12);
      transform: translateY(-1px);
    }

    .form-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      margin-top: 18px;
    }

    .form-note {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
    }

    .form-message {
      min-height: 22px;
      margin-top: 14px;
      color: #18865a;
      font-weight: 800;
      font-size: 14px;
    }

    .site-footer {
      padding: 30px 22px;
      color: rgba(255, 255, 255, .64);
      background: #070913;
    }

    .footer-inner {
      width: min(100%, var(--max));
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      font-size: 13px;
    }

    .footer-inner strong {
      color: #fff;
      letter-spacing: -.03em;
    }

    .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .7s var(--ease), transform .7s var(--ease);
    }

    .reveal.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    @keyframes slowSpin {
      to {
        transform: rotate(360deg);
      }
    }

    @keyframes pulse {
      70% {
        box-shadow: 0 0 0 14px rgba(255, 196, 0, 0);
      }
      100% {
        box-shadow: 0 0 0 0 rgba(255, 196, 0, 0);
      }
    }

    @keyframes floatPanel {
      0%, 100% {
        transform: rotateX(7deg) rotateY(-9deg) translateY(0);
      }
      50% {
        transform: rotateX(5deg) rotateY(-6deg) translateY(-14px);
      }
    }

    @keyframes drift {
      0%, 100% {
        transform: translate3d(0, 0, 0);
      }
      50% {
        transform: translate3d(0, -14px, 0);
      }
    }

    @keyframes sheen {
      0% {
        opacity: 0;
        transform: translateX(-130%);
      }
      25% {
        opacity: .75;
      }
      100% {
        opacity: 0;
        transform: translateX(130%);
      }
    }



    .brand-lockup {
      min-width: 132px;
    }

    .brand-logo {
      display: block;
      width: 118px;
      height: auto;
    }

    .brand-logo-white {
      filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .22));
    }

    .hero-original {
      min-height: 100svh;
      padding: 136px 22px 78px;
      background:
        radial-gradient(circle at var(--mx) var(--my), rgba(255, 196, 0, .18), transparent 28rem),
        radial-gradient(circle at 80% 20%, rgba(11, 115, 206, .22), transparent 30rem),
        linear-gradient(135deg, #05070d 0%, #0d1120 100%);
    }

    .hero-original .hero-inner {
      grid-template-columns: minmax(0, .92fr) minmax(360px, 1.08fr);
      gap: clamp(36px, 6vw, 84px);
    }

    .hero-logo {
      width: min(390px, 68vw);
      height: auto;
      margin-bottom: clamp(28px, 6vw, 72px);
      filter: drop-shadow(0 18px 44px rgba(0, 0, 0, .35));
    }

    .hero-original h1 {
      max-width: 720px;
      font-size: clamp(24px, 5.4vw, 49px);
      line-height: 1.04;
      letter-spacing: -.055em;
      color: #fff;
    }

    .hero-image-wrap {
      min-height: 620px;
      align-items: end;
      perspective: 1000px;
    }

    .hero-image {
      width: min(100%, 660px);
      height: auto;
      border-radius: 0 0 0 28px;
      opacity: .92;
      filter: drop-shadow(0 42px 90px rgba(0, 0, 0, .42));
      transform: translateX(2vw) rotateY(-5deg) rotateX(2deg);
      transform-origin: center;
      animation: floatPanel 8s var(--ease) infinite;
    }

    .about-section {
      background:
        radial-gradient(circle at 12% 0%, rgba(255, 196, 0, .14), transparent 26rem),
        radial-gradient(circle at 96% 22%, rgba(11, 115, 206, .1), transparent 32rem),
        #fff;
    }

    .about-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: clamp(24px, 5vw, 64px);
      align-items: start;
    }

    .about-copy {
      position: relative;
      min-height: 430px;
      padding: clamp(22px, 4vw, 38px);
      border: 1px solid var(--line);
      border-radius: 36px;
      background:
        radial-gradient(circle at 0 0, rgba(255, 138, 0, .12), transparent 19rem),
        rgba(255, 255, 255, .82);
      box-shadow: 0 24px 70px rgba(7, 9, 19, .08);
      overflow: hidden;
    }

    .about-copy:nth-child(2) {
      background:
        radial-gradient(circle at 100% 0, rgba(11, 115, 206, .12), transparent 19rem),
        rgba(255, 255, 255, .82);
    }

    .about-copy .section-heading {
      font-size: clamp(20px, 2.4vw, 35px);
    }

    .process-strip {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 14px;
      margin-top: 26px;
    }

    .process-item {
      position: relative;
      min-height: 170px;
      padding: 20px;
      border: 1px solid var(--line);
      border-radius: 28px;
      background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(245, 247, 251, .84));
      box-shadow: 0 20px 58px rgba(7, 9, 19, .07);
      overflow: hidden;
      transition: transform .38s var(--ease), box-shadow .38s var(--ease);
    }

    .process-item::before {
      content: "";
      position: absolute;
      width: 150px;
      aspect-ratio: 1;
      right: -78px;
      top: -78px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 138, 0, .2), transparent 68%);
    }

    .process-item:hover {
      transform: translateY(-7px);
      box-shadow: 0 30px 80px rgba(7, 9, 19, .11);
    }

    .process-item span {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border-radius: 16px;
      background: linear-gradient(135deg, var(--amber), var(--orange));
      color: #0b0e15;
      font-weight: 950;
    }

    .process-item strong {
      display: block;
      margin-top: 28px;
      color: #10131c;
      font-size: clamp(18px, 1.7vw, 24px);
      line-height: 1.05;
      letter-spacing: -.04em;
    }

    .footer-logo {
      width: 118px;
      height: auto;
    }

    .footer-links {
      display: inline-flex;
      align-items: center;
      gap: 18px;
      flex-wrap: wrap;
    }

    .detail-next {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 38px;
      padding: 0 14px;
      border: 1px solid rgba(7, 9, 19, .1);
      border-radius: 999px;
      background: rgba(255, 255, 255, .78);
      color: #121722;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: -.01em;
      cursor: pointer;
      box-shadow: 0 12px 30px rgba(7, 9, 19, .08);
      transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
    }

    .detail-next:hover,
    .detail-next:focus-visible {
      transform: translateY(-2px);
      color: #fff;
      background: #111;
      box-shadow: 0 18px 45px rgba(7, 9, 19, .16);
      outline: none;
    }

    .detail-actions .btn.primary:hover,
    .detail-actions .btn.primary:focus-visible {
      color: #fff;
    }


    .detail-card.is-hub .detail-actions .btn.primary {
      color: #fff;
      background: #111;
    }

    .detail-card.is-hub .detail-actions .btn.primary:hover,
    .detail-card.is-hub .detail-actions .btn.primary:focus-visible {
      color: #fff;
      background: #000;
    }

    a.contact-line {
      color: inherit;
      text-decoration: none;
      transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
    }

    a.contact-line:hover {
      transform: translateY(-2px);
      border-color: rgba(7, 9, 19, .16);
      box-shadow: 0 18px 42px rgba(7, 9, 19, .08);
    }

    a.contact-line i {
      font-weight: 950;
      letter-spacing: -.04em;
    }

    @media (max-width: 1100px) {
      .hero-inner,
      .hero-original .hero-inner,
      .about-grid,
      .mandala-layout,
      .contact-layout {
        grid-template-columns: 1fr;
      }

      .process-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .hero-visual {
        min-height: 520px;
      }

      .hero-image-wrap {
        min-height: auto;
      }

      .hero-image {
        transform: none;
        margin: 0 auto;
      }

      .about-copy {
        min-height: auto;
      }

      .command-card {
        transform: none;
      }

      .detail-card,
      .contact-aside {
        position: relative;
        top: auto;
      }

      .detail-card {
        min-height: auto;
      }

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

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

    @media (max-width: 760px) {
      .site-header {
        top: 10px;
        width: calc(100% - 18px);
      }

      .nav-links {
        display: none;
      }

      .brand-logo {
        width: 96px;
      }

      .hero {
        padding-top: 112px;
      }

      .hero h1 {
        font-size: clamp(42px, 16vw, 64px);
      }

      .hero-original h1 {
        font-size: clamp(32px, 10.8vw, 48px);
        line-height: 1.05;
      }

      .hero-metrics,
      .form-grid,
      .detail-grid,
      .builder-grid,
      .process-strip {
        grid-template-columns: 1fr;
      }

      .hero-visual {
        min-height: 430px;
      }

      .floating-badge {
        display: none;
      }

      .command-card {
        border-radius: 26px;
      }

      .stack-item {
        grid-template-columns: 42px 1fr;
      }

      .stack-chip {
        display: none;
      }

      .section-pad {
        padding-left: 16px;
        padding-right: 16px;
      }

      .mandala-board {
        margin-left: -6px;
        margin-right: -6px;
        border-radius: 30px;
      }

      .segment:hover,
      .segment:focus-visible,
      .segment.is-active {
        transform:
          translate3d(calc(var(--tx, 0) * .55), calc(var(--ty, 0) * .55), 24px)
          scale(1.035)
          rotate(var(--rot, 0deg));
      }

      .detail-card,
      .contact-form,
      .contact-aside {
        border-radius: 28px;
      }

      .form-foot {
        align-items: stretch;
        flex-direction: column;
      }

      .footer-inner {
        align-items: flex-start;
        flex-direction: column;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
      }

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

/* ==========================================================================
   Página Imprensa
   ========================================================================== */

.press-hero {
  min-height: 68svh;
  padding: 150px 22px 78px;
  color: #fff;
  background:
    radial-gradient(circle at 12% 15%, rgba(255, 196, 0, .20), transparent 28rem),
    radial-gradient(circle at 90% 20%, rgba(11, 115, 206, .24), transparent 32rem),
    linear-gradient(135deg, #05070d 0%, #0d1120 100%);
  overflow: hidden;
}

.press-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at 50% 42%, #000, transparent 68%);
  opacity: .48;
}

.press-hero .section-inner {
  position: relative;
  z-index: 2;
}

.press-hero .section-label {
  color: rgba(255, 255, 255, .82);
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .08);
}

.press-hero .section-heading {
  max-width: 860px;
  color: #fff;
}

.press-hero .section-lead {
  max-width: 720px;
  color: rgba(255, 255, 255, .70);
}

.press-section {
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 196, 0, .12), transparent 26rem),
    radial-gradient(circle at 100% 22%, rgba(11, 115, 206, .10), transparent 32rem),
    #fff;
}

.press-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 4vw, 32px);
}

.press-card {
  border: 1px solid rgba(7, 9, 19, .09);
  border-radius: 34px;
  overflow: hidden;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 24px 70px rgba(7, 9, 19, .09);
  transition: transform .34s var(--ease), box-shadow .34s var(--ease);
}

.press-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 34px 90px rgba(7, 9, 19, .13);
}

.press-thumb {
  min-height: 260px;
  background: #111827;
}

.press-thumb img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
}

.press-content {
  padding: clamp(22px, 4vw, 30px);
}

.press-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #30384a;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.press-meta::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
}

.press-content h2 {
  margin: 18px 0 0;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.02;
  letter-spacing: -.05em;
}

.press-content p {
  margin: 16px 0 0;
  color: var(--muted);
  line-height: 1.65;
}

.press-actions {
  margin-top: 24px;
}

@media (max-width: 820px) {
  .press-grid {
    grid-template-columns: 1fr;
  }
}