/* ============ DESIGN TOKENS ============ */
  :root {
      --cobalt: #0047FF;
      --cobalt-deep: #001C66;
      --ice: #F1F5F9;
      --silver: #D9D9D9;
      --midnight: #121212;
      --graphite: #6B7280;

      --font-body: 'Inter', system-ui, sans-serif;
      --font-display: 'Merriweather', Georgia, serif;

      --radius: 14px;
      --maxw: 1120px;
  }

  * {
      box-sizing: border-box;
  }

  html {
      -webkit-text-size-adjust: 100%;
  }

  body {
      margin: 0;
      font-family: var(--font-body);
      font-size: 1rem;
      /* corpo nunca abaixo de 1rem */
      line-height: 1.6;
      background: var(--ice);
      color: var(--midnight);
      overflow-x: hidden;
  }

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

  a {
      color: inherit;
  }

  /* ---- Tipografia: títulos ---- */
  h1,
  h2,
  .display-title {
      font-family: var(--font-body);
      font-weight: 600;
      letter-spacing: -0.01em;
      line-height: 1.1;
      margin: 0 0 16px;
  }

  h1,
  .display-title {
      font-size: 2rem;
  }

  /* mobile: 2rem */
  h2 {
      font-size: 2rem;
  }

  @media (min-width:768px) {

      h1,
      .display-title {
          font-size: 3rem;
      }

      /* >=768px: 4rem */
      h2 {
          font-size: 2.75rem;
      }
  }

  .accent-serif {
      font-family: var(--font-display);
      font-style: italic;
      font-weight: 400;
  }

  .eyebrow {
      font-size: 1rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      font-weight: 700;
      color: var(--graphite);
      margin: 0 0 10px;
  }

  .sub {
      font-size: 1rem;
      color: var(--graphite);
      margin: 0 0 20px;
      max-width: 56ch;
  }

  .page {
      width: 100%;
  }

  section {
      padding: 56px 20px;
  }

  .inner {
      width: 100%;
      max-width: var(--maxw);
      margin: 0 auto;
      display: flex;
  }

  @media (min-width:768px) {
      section {
          padding: 88px 40px;
      }
  }

  /* ============ BOTÕES ============ */
  .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 52px;
      padding: 0 22px;
      border-radius: 999px;
      font-weight: 700;
      font-size: 1rem;
      border: 1.5px solid var(--cobalt);
      background: var(--cobalt);
      color: #fff;
      text-decoration: none;
      transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
      font-family: var(--font-body);
  }

  .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 24px rgba(0, 71, 255, .35);
  }

  .btn.ghost {
      background: transparent;
      color: #fff;
      border: 1.5px solid rgba(255, 255, 255, .5);
  }

  .btn.ghost:hover {
      background: rgba(255, 255, 255, .08);
      box-shadow: none;
  }

  .btn.on-light {
      color: var(--midnight);
  }

  .wa-ico {
      width: 19px;
      height: 19px;
      fill: currentColor;
      flex: none;
  }

  /* ============ PRELOADER ============ */
  #preloader {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      background:
          radial-gradient(900px circle at 50% 30%, #0d1c4d 0%, #0a0a0f 65%);
      transition: opacity .7s ease, visibility .7s ease;
  }

  #preloader.is-hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
  }

  .glass-wrap {
      perspective: 1200px;
      width: min(72vw, 340px);
  }

  .glass-logo {
      width: 100%;
      height: auto;
      display: block;
      animation: glassRotate 6s ease-in-out infinite;
      transform-style: preserve-3d;
      filter:
          drop-shadow(0 -1px 0 rgba(255, 255, 255, .85)) drop-shadow(0 2px 4px rgba(120, 170, 255, .55)) drop-shadow(0 10px 26px rgba(0, 71, 255, .5)) drop-shadow(0 22px 46px rgba(0, 10, 50, .55));
  }

  @keyframes glassRotate {

      0%,
      100% {
          transform: rotateY(-20deg) rotateX(8deg);
      }

      50% {
          transform: rotateY(20deg) rotateX(-6deg);
      }
  }

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

  /* ============ TOPO (dentro do hero) ============ */
  .hero header.topbar {
      background: transparent;
      padding: 20px 24px;
      position: relative;
      z-index: 10;
  }

  .hero .topbar-inner {
      display: flex;
      align-items: center;
      gap: 14px;
      max-width: var(--maxw);
      margin: 0 auto;
      justify-content: space-between;
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-radius: 50px;
      border: 1px solid var(--ice);
      padding: 8px 24px 8px 24px;
  }

  .hero .logo-nav {
      width: 60px;
      color: var(--ice);
  }

  .hero .topbar .btn {
      background: var(--ice);
      border-color: var(--ice);
      color: var(--midnight);
      min-height: 40px;
      padding: 0 16px;
      font-size: 0.95rem;
      margin-left: 0;
  }

  .hero .topbar .btn:hover {
      background: var(--cobalt);
      border-color: var(--cobalt);
      color: var(--ice);
      box-shadow: none;
      transform: none;
  }

  /* ============ HERO ============ */
  .hero {
      position: relative;
      background: var(--midnight);
      color: #fff;
      overflow: hidden;
      isolation: isolate;
      --mx: 50%;
      --my: -10%;
      border-radius: 12px;
      margin: 16px;
      padding: 0;
  }

  .hero-grid {
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Crect x='2' y='2' width='28' height='28' rx='4' ry='4' fill='none' stroke='rgba(140,180,255,0.4)' stroke-width='0.3'/%3E%3C/svg%3E");
      background-size: 56px 56px;
      -webkit-mask-image: radial-gradient(300px circle at var(--mx) var(--my), #000 0%, #000 12%, transparent 55%);
      mask-image: radial-gradient(300px circle at var(--mx) var(--my), #000 0%, #000 12%, transparent 55%);
      opacity: .55;
      transition: mask-position .05s linear;
  }

  .hero-glow {
      position: absolute;
      inset: 0;
      background: radial-gradient(240px circle at var(--mx) var(--my), rgba(70, 160, 255, .22), rgba(0, 71, 255, .08) 45%, transparent 70%);
      mix-blend-mode: screen;
  }

  .hero-base {
      position: absolute;
      inset: -15%;
      background:
          radial-gradient(32% 26% at 18% 22%, rgba(0, 71, 255, .5), transparent 65%),
          radial-gradient(26% 22% at 78% 16%, rgba(0, 71, 255, .32), transparent 65%),
          radial-gradient(34% 30% at 65% 78%, rgba(0, 71, 255, .4), transparent 65%),
          radial-gradient(30% 28% at 12% 82%, rgba(0, 71, 255, .28), transparent 65%),
          var(--midnight);
      filter: blur(60px) saturate(115%);
      animation: meshDrift 24s ease-in-out infinite alternate;
      z-index: -1;
  }

  @keyframes meshDrift {
      0% {
          transform: translate3d(0, 0, 0) scale(1);
      }

      50% {
          transform: translate3d(-3%, 3%, 0) scale(1.06);
      }

      100% {
          transform: translate3d(3%, -2%, 0) scale(1);
      }
  }

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

  .hero-inner {
      position: relative;
      z-index: 2;
      padding: 32px 24px 64px;
  }

  @media (min-width:768px) {
      .hero-inner {
          display: grid;
          grid-template-columns: 1.05fr .95fr;
          gap: 56px;
          align-items: center;
      }

      .hero-inner .hero-text {
          order: 1;
      }

      .hero-inner .hero-img {
          order: 2;
      }
  }

  .hero-img {
      border-radius: var(--radius);
      border: 1px solid rgba(255, 255, 255, .14);
      background: linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
      aspect-ratio: 4/3;
      min-height: 220px;
      max-height: 420px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, .45);
      font-size: 1rem;
      text-align: center;
      padding: 20px;
      margin-top: 28px;
  }

  @media (min-width:768px) {
      .hero-img {
          margin-top: 0;
      }
  }

  .hero .eyebrow {
      color: var(--graphite);
  }

  .hero .sub {
      color: #C8D2E6;
  }

  @keyframes cta-pulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(241, 245, 249, 0.5); }
      50%       { box-shadow: 0 0 0 6px rgba(241, 245, 249, 0.1); }
  }

  .hero-cta {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin: 22px 0;
  }

  .hero-cta .btn {
      animation: cta-pulse 2.4s ease-in-out infinite;
  }

  .hero-cta .btn:hover {
      animation: none;
      box-shadow: 0 0 0 6px rgba(241, 245, 249, 0.5);
      transform: translateY(-2px);
  }

  @media (min-width:560px) {
      .hero-cta {
          flex-direction: row;
      }
  }

  .hero .chips {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin-top: 22px;
  }

  .hero .chip {
      font-size: 1rem;
      color: #C8D2E6;
      padding: 0 18px;
      border-left: 1px solid rgba(255, 255, 255, .25);
  }

  .hero .chip:first-child {
      padding-left: 0;
      border-left: none;
  }

  /* ============ VÍDEOS (base preta) ============ */
  .section-video {
      background: var(--midnight);
      color: #fff;
  }

  .section-video .eyebrow {
      color: var(--silver);
  }

  .section-video .sub {
      color: #B9C2D6;
  }

  .grid {
      display: grid;
      gap: 14px;
  }

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

  @media (min-width:1024px) {
      .grid.g-video {
          grid-template-columns: repeat(3, 1fr);
      }
  }

  .ph-video {
      position: relative;
      border-radius: var(--radius);
      border: 1px solid rgba(255, 255, 255, .16);
      background: linear-gradient(150deg, rgba(0, 71, 255, .14), rgba(255, 255, 255, .02));
      min-height: 190px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, .55);
      font-size: 1rem;
      text-align: center;
      padding: 16px;
      cursor: pointer;
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
  }

  .ph-video::before {
      content: "▶";
      display: block;
      font-size: 22px;
      margin-bottom: 8px;
      color: var(--cobalt);
      transition: color .2s ease;
  }

  .ph-video:hover {
      transform: translateY(-4px);
      border-color: var(--cobalt);
      background: linear-gradient(150deg, rgba(0, 71, 255, .28), rgba(255, 255, 255, .03));
      box-shadow: 0 14px 34px rgba(0, 71, 255, .35);
  }

  .ph-video:hover::before {
      color: #fff;
  }

  @media (prefers-reduced-motion:reduce) {
      .ph-video {
          transition: none;
      }
  }

  /* ============ CTA FINAL — container com gradiente azul ============ */
  .final-wrap {
      background: var(--ice);
  }

  .final-card {
      width: 90%;
      max-width: 820px;
      margin: 0 auto;
      border-radius: 12px;
      padding: 48px 24px;
      background: linear-gradient(160deg, var(--cobalt) 0%, var(--cobalt-deep) 55%, var(--midnight) 100%);
      color: #fff;
      text-align: center;
  }

  @media (min-width:768px) {
      .final-card {
          padding: 72px 40px;
      }
  }

  .final-card .sub {
      color: #DCE6FF;
      margin-left: auto;
      margin-right: auto;
  }

  /* ============ RODAPÉ (base preta) ============ */
  footer {
      background: var(--midnight);
      color: var(--silver);
      padding: 40px 20px;
  }

  footer .foot-inner {
      max-width: var(--maxw);
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: center;
      text-align: center;
  }

  @media (min-width:768px) {
      footer .foot-inner {
          flex-direction: row;
          justify-content: space-between;
          text-align: left;
      }
  }

  .logo-footer {
      width: 110px;
      color: #fff;
  }

  footer p {
      font-size: 1rem;
      color: var(--graphite);
      margin: 0;
  }

  /* placeholders neutros usados nas próximas seções (a detalhar) */
  .ph-neutral {
      border: 1px dashed var(--silver);
      border-radius: var(--radius);
      background: #fff;
      min-height: 120px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--graphite);
      font-size: 1rem;
      text-align: center;
      padding: 14px;
  }