:root {
      --bg: #ffffff;
      --panel: #ffffff;
      --text: #0f172a;
      /* slate-900 */
      --muted: #475569;
      /* slate-600 */
      --line: #e5e7eb;
      /* gray-200 */
      --shadow: 0 22px 60px rgba(15, 23, 42, .10);

      --accent: #0ea5e9;
      /* sky-500 */
      --accent2: #6366f1;
      /* indigo-500 */
      --radius: 22px;
  }

  * {
      box-sizing: border-box;
  }

  html,
  body {
      height: 100%;
  }

  body {
      margin: 0;
      color: var(--text);
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      background: var(--bg);
      overflow-x: hidden;
  }

  .grid {
      pointer-events: none;
      position: fixed;
      inset: 0;
      opacity: .08;
      background-image:
          linear-gradient(to right, rgba(2, 6, 23, .16) 1px, transparent 1px),
          linear-gradient(to bottom, rgba(2, 6, 23, .16) 1px, transparent 1px);
      background-size: 56px 56px;
      mask-image: radial-gradient(closest-side at 50% 30%, black 25%, transparent 80%);
  }

  .wrap {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
  }

  main {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: clamp(16px, 3vw, 40px);
  }

  .card {
      width: min(1120px, 100%);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--panel);
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
  }

  .split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: clamp(420px, 62vh, 640px);
  }

  .left {
      padding: clamp(26px, 4vw, 54px);
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      gap: 14px;
      position: relative;
  }

  .kicker {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      width: fit-content;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(2, 6, 23, .02);
      color: var(--muted);
      font-size: 12px;
      letter-spacing: .10em;
      text-transform: uppercase;
  }

  .dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      box-shadow: 0 0 0 6px rgba(14, 165, 233, .12);
      animation: pulse 1.8s ease-in-out infinite;
  }

  @keyframes pulse {

      0%,
      100% {
          transform: scale(1);
          opacity: 1;
      }

      50% {
          transform: scale(1.08);
          opacity: .65;
      }
  }

  h1 {
      margin: 0;
      font-size: clamp(30px, 3.4vw, 46px);
      line-height: 1.12;
      letter-spacing: -0.02em;
  }

  .sub {
      margin: 0;
      color: var(--muted);
      font-size: clamp(14px, 1.35vw, 16px);
      line-height: 1.65;
      max-width: 54ch;
  }

  .right {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: clamp(18px, 3vw, 40px);
      border-left: 1px solid var(--line);
      background:
          radial-gradient(520px 360px at 35% 30%, rgba(14, 165, 233, .10), transparent 60%),
          radial-gradient(520px 360px at 70% 75%, rgba(99, 102, 241, .09), transparent 60%),
          linear-gradient(180deg, #fff, #fbfbff);
  }

  .svg-shell {
      width: min(420px, 90%);
      aspect-ratio: 1/1;
      border-radius: 26px;
      border: 1px dashed rgba(2, 6, 23, .18);
      background:
          radial-gradient(300px 220px at 30% 30%, rgba(14, 165, 233, .12), transparent 60%),
          radial-gradient(280px 220px at 70% 70%, rgba(99, 102, 241, .10), transparent 60%),
          linear-gradient(180deg, rgba(2, 6, 23, .02), rgba(2, 6, 23, .00));
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      position: relative;
  }

  .svg-shell::after {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .10;
      background-image:
          linear-gradient(to right, rgba(2, 6, 23, .18) 1px, transparent 1px),
          linear-gradient(to bottom, rgba(2, 6, 23, .18) 1px, transparent 1px);
      background-size: 34px 34px;
      mask-image: radial-gradient(circle at 50% 50%, black 35%, transparent 78%);
      pointer-events: none;
  }

  .svg-shell>* {
      width: 78%;
      height: auto;
      position: relative;
      z-index: 1;
      filter: drop-shadow(0 16px 22px rgba(2, 6, 23, .12));
  }

  /* faixa de logos embaixo */
  .logos-row {
      border-top: 1px solid var(--line);
      padding: 14px clamp(18px, 3vw, 32px);

      background: #fff;
  }

  .logo-box {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: clamp(14px, 2vw, 28px);
      flex-wrap: wrap;
  }

  .logos-row p {
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 9px;
      padding-top: 0px;
      text-align: center;
      text-transform: uppercase;
      margin-top: 0px;
      font-weight: 600;
      font-size: large;
  }

  .logos-row img {
      height: clamp(40px, 4.2vw, 80px);
      width: auto;
      display: block;
      opacity: .98;
      filter: drop-shadow(0 10px 18px rgba(2, 6, 23, .10));
      border-radius: 4px;
  }

  .sep {
      width: 1px;
      height: 34px;
      background: var(--line);
  }

  footer {
      padding: 18px clamp(18px, 3vw, 28px);
      display: flex;
      justify-content: center;
  }

  .footer-inner {
      width: min(1120px, 100%);
      border-top: 1px solid var(--line);
      padding-top: 14px;
      color: rgba(2, 6, 23, .60);
      font-size: 13px;
      background: transparent;
  }

  /* responsivo */
  @media (max-width: 900px) {
      .split {
          grid-template-columns: 1fr;
      }

      .right {
          border-left: 0;
          border-top: 1px solid var(--line);
      }

      .left {
          text-align: center;
          align-items: center;
      }

      .kicker {
          margin-inline: auto;
      }

      .sub {
          max-width: 62ch;
      }

      .sep {
          display: none;
      }
  }
  
  @media (max-width:767px){
      .logos-row p {
      
          font-size: small;
      }
  }

  @media (prefers-reduced-motion: reduce) {
      .dot {
          animation: none;
      }
  }