/* ============================================================
       ESTILOS RESPONSIVOS DOS VÍDEOS (DESKTOP E MOBILE)
       ============================================================ */
    .pc-video-card {
      position: relative;
      width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-top: 3.2rem;
      margin-bottom: 3.2rem;
      overflow: hidden;
      background: radial-gradient(ellipse at 50% 55%, rgba(81, 69, 229, .2), transparent 65%), #05040c;
    }
    .pc-video-card-inner {
      width: 100%;
      height: clamp(500px, 86vh, 880px);
      position: relative;
      overflow: hidden;
    }
    .pc-auto-video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* --- MOBILE (< 768px): REDUZ VÍDEOS PARA A LARGURA DA TELA SEM CORTES --- */
    @media (max-width: 768px) {
      .pc-video-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-top: 1.8rem !important;
        margin-bottom: 2.2rem !important;
        border-radius: 14px;
        background: transparent;
      }
      .pc-video-card-inner {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
        border-radius: 14px;
        overflow: hidden;
        background: radial-gradient(ellipse at 50% 55%, rgba(81, 69, 229, .15), transparent 65%), #05040c;
        box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.7);
        border: 1px solid rgba(255, 255, 255, 0.08);
      }
      .pc-auto-video {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        border-radius: 14px;
      }

      /* Mosaico do topo no mobile */
      .pc-mosaico-wrapper {
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 1rem !important;
        margin-bottom: 2.5rem !important;
      }
      .pc-mosaico-inner {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
        border-radius: 14px;
      }

      /* Periodização no mobile */
      .pz-video-container {
        width: 100% !important;
        margin-left: 0 !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, 0.08);
      }
      .pz-video-container video {
        object-fit: contain !important;
        border-radius: 14px;
      }
      .pz-steps {
        bottom: 0.6rem !important;
        gap: 0.3rem !important;
        padding: 0 0.4rem !important;
      }
      .pz-steps span {
        font-size: 0.68rem !important;
        padding: 0.2rem 0.5rem !important;
      }

      /* Maquete Flyover no mobile: ajusta à largura da tela */
      .flyover-section {
        width: 100% !important;
        margin-left: 0 !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        position: relative !important;
        border-radius: 16px;
        overflow: hidden !important;
        margin-top: 2rem !important;
        margin-bottom: 3rem !important;
      }
      .flyover-sticky {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
        border-radius: 16px;
        overflow: hidden !important;
      }
      .flyover-map {
        position: absolute !important;
        inset: 0 !important;
      }
      .flyover-map video {
        object-fit: cover !important;
        border-radius: 16px;
      }
      .flyover-copy {
        top: 0.8rem !important;
        padding: 0 0.8rem !important;
      }
      .flyover-copy .feature-title {
        font-size: 1.3rem !important;
        line-height: 1.2 !important;
      }
      .flyover-copy .feature-subtitle {
        display: none !important;
      }
      .flyover-hud {
        bottom: 0.6rem !important;
        left: 0.6rem !important;
        right: 0.6rem !important;
        padding: 0.6rem 0.8rem 0.8rem !important;
        gap: 0.2rem 0.6rem !important;
        border-radius: 1.2rem !important;
      }
      .flyover-hud b {
        font-size: 1.15rem !important;
      }
      .flyover-hud span {
        font-size: 0.72rem !important;
      }
    }

/* ========================================================
   DESIGN SYSTEM — Based on Google Flow (design.txt)
   Font: Inter (substitute for Google Sans)
   Base: html { font-size: 10px } → 1rem = 10px
   ======================================================== */

/* === RESET === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  font-family: "Inter", sans-serif;
  background: var(--background);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }
img, video { display: block; max-width: 100%; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* === BLOCK CONTEXT MENU + SELECTION ON MEDIA === */
img, video, canvas { pointer-events: auto; }
body { -webkit-tap-highlight-color: transparent; }

/* === DESIGN TOKENS (Flow) === */
:root {
  --background: #000000;
  --background-rgb: 0, 0, 0;
  --text-primary: #ffffff;
  --text-secondary: #BDC1C6;
  --text-muted: rgba(255, 255, 255, 0.5);

  --surface-glass: rgba(255, 255, 255, 0.05);
  --surface-glass-hover: rgba(255, 255, 255, 0.15);
  --surface-white: rgba(255, 255, 255, 0.9);
  --surface-white-hover: rgba(255, 255, 255, 1);

  --border-glass: rgba(255, 255, 255, 0.1);
  --border-glass-strong: rgba(255, 255, 255, 0.2);

  --overlay-dark: rgba(0, 0, 0, 0.2);
  --overlay-medium: rgba(0, 0, 0, 0.25);

  /* Blobs — adapted: blue stays, amber → purple for Premium Coach */
  --blob-blue: rgb(81, 69, 229);
  --blob-purple: rgb(121, 58, 236);

  /* Accent — ONLY for highlights, not everywhere */
  --accent-start: #5145e5;
  --accent-end: #793aec;

  /* Layout */
  --root-columns: 4;
  --columns: var(--root-columns);
  --gutter-outer: 20px;
  --gutter-inner: 16px;
  --container-max: 129.6rem;
  --header-height: 7.2rem;

  /* Borders */
  --radius-btn-sm: 20px;
  --radius-btn-md: 30px;
  --radius-btn-lg: 3em;

  /* Effects */
  --blur-glass: blur(120px);
  --transition-btn: background-color 0.35s ease-in-out, border-color 0.35s ease-in-out, color 0.35s ease-in-out;
  --transition-fade: opacity 0.5s linear;

  /* Z-index */
  --z-blobs: -1;
  --z-content: 1;
  --z-header: 1000;
}

@media (min-width: 768px) {
  :root {
    --root-columns: 12;
    --gutter-outer: 32px;
  }
}

/* === UTILITY === */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.container {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter-outer);
  padding-right: var(--gutter-outer);
}

.gradient-text {
  background: linear-gradient(135deg, var(--accent-start), var(--accent-end));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* === NAVBAR (Flow pattern — exact progressive blur) === */
.header-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-header);
  width: 100%;
  pointer-events: none;
}

/* Backdrop container — sits behind nav, always present */
.header-backdrop {
  position: absolute;
  inset: 0;
  display: grid;
  height: var(--header-height);
  pointer-events: none;
  z-index: 0;
}
/* Dark gradient overlay */
.header-backdrop::after {
  content: "";
  grid-area: 1 / 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.2) 60%, transparent);
  transition: opacity 0.2s linear;
}
/* Progressive blur layers (6 layers — exact Flow implementation) */
.header-backdrop .blur-layer,
.header-backdrop::after {
  grid-area: 1 / 1;
}
.header-backdrop .blur-layer {
  transition: opacity 0.2s linear;
}
.header-backdrop .blur-layer:nth-child(1) {
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  -webkit-mask: linear-gradient(0deg, transparent, #000 8%);
  mask: linear-gradient(0deg, transparent, #000 8%);
}
.header-backdrop .blur-layer:nth-child(2) {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  -webkit-mask: linear-gradient(0deg, transparent 8%, #000 16%);
  mask: linear-gradient(0deg, transparent 8%, #000 16%);
}
.header-backdrop .blur-layer:nth-child(3) {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  -webkit-mask: linear-gradient(0deg, transparent 16%, #000 24%);
  mask: linear-gradient(0deg, transparent 16%, #000 24%);
}
.header-backdrop .blur-layer:nth-child(4) {
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  -webkit-mask: linear-gradient(0deg, transparent 24%, #000 36%);
  mask: linear-gradient(0deg, transparent 24%, #000 36%);
}
.header-backdrop .blur-layer:nth-child(5) {
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  -webkit-mask: linear-gradient(0deg, transparent 36%, #000 48%);
  mask: linear-gradient(0deg, transparent 36%, #000 48%);
}
.header-backdrop .blur-layer:nth-child(6) {
  -webkit-backdrop-filter: blur(32px);
  backdrop-filter: blur(32px);
  -webkit-mask: linear-gradient(0deg, transparent 48%, #000 60%);
  mask: linear-gradient(0deg, transparent 48%, #000 60%);
}
/* Hidden state (at top of page) — desktop only, mobile always visible */
.header-backdrop[data-hidden="true"] .blur-layer,
.header-backdrop[data-hidden="true"]::after {
  opacity: 0;
}
@media (max-width: 767px) {
  .header-backdrop[data-hidden="true"] .blur-layer,
  .header-backdrop[data-hidden="true"]::after {
    opacity: 1;
  }
}

.header-nav {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: var(--header-height);
  padding: 0 2.4rem;
  pointer-events: auto;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}
.header-logo-icon {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 0.6rem;
  object-fit: contain;
}

.jump-links {
  display: none;
}
@media (min-width: 768px) {
  .jump-links {
    display: flex;
    gap: 2.4rem;
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
  }
  .jump-links.visible {
    opacity: 1;
    pointer-events: auto;
  }
  .jump-links a {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--text-muted);
    transition: color 0.3s;
  }
  .jump-links a:hover { color: rgba(255,255,255,0.75); }
  .jump-links a.is-active { color: var(--text-primary); }
}
@media (min-width: 1024px) {
  .jump-links { gap: 6.4rem; }
  .jump-links a { font-size: 1.6rem; }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.btn-glass {
  display: inline-flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 2.4rem;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 2rem;
  color: white;
  background: var(--surface-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-btn-sm);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  transition: var(--transition-btn);
}
.btn-glass:hover { background: var(--surface-glass-hover); }

.btn-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6851em 1.6362em;
  font-size: 2.353rem;
  font-weight: 500;
  color: white;
  background: var(--surface-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-btn-lg);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  transition: var(--transition-btn);
}
.btn-hero-cta:hover { background: var(--surface-glass-hover); }
@media (min-width: 1024px) { .btn-hero-cta { font-size: 2.919rem; } }

.btn-white {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1.85rem 0;
  font-size: 1.6rem;
  font-weight: 500;
  color: rgb(0, 0, 0);
  background-color: var(--surface-white);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-btn-md);
  transition: var(--transition-btn);
}
.btn-white:hover { background-color: var(--surface-white-hover); }

/* === HERO SECTION (Flow pattern: 100vh grid) === */
.hero {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  align-items: center;
  justify-content: center;
  height: 100svh;
  overflow: visible;
}
@media (min-width: 1025px) { .hero { height: 100lvh; } }

.hero-content {
  display: grid;
  grid-area: 1 / 1;
  grid-template-rows: 1fr min-content min-content 1fr;
  grid-template-columns: 1fr;
  place-content: center;
  place-self: start;
  width: 100%;
  height: 100%;
  padding: 0 var(--gutter-outer);
  padding-bottom: 3.2rem;
}

.hero-title-wrapper {
  grid-row: 2 / 3;
  place-self: end center;
  text-align: center;
  max-width: 90rem;
}

.hero-title {
  font-size: 3.6rem;
  font-weight: 400;
  line-height: 110%;
  letter-spacing: -0.035em;
  color: var(--text-primary);
}
.hero-title-muted {
  display: block;
  font-size: 0.55em;
  color: var(--text-muted);
  font-weight: 400;
  margin-top: 0.3em;
}
@media (min-width: 768px) {
  .hero-title { font-size: 6.4rem; }
}
@media (min-width: 1024px) {
  .hero-title { font-size: 8.4rem; }
}
@media (min-width: 1440px) {
  .hero-title { font-size: 9.8rem; }
}

.hero-bottom {
  grid-row: 3 / 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-description {
  margin-top: 2rem;
  color: var(--text-secondary);
  text-align: center;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.6;
  max-width: 56rem;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px) { .hero-description { font-size: 2rem; max-width: 72rem; } }
@media (min-width: 1440px) { .hero-description { font-size: 2.4rem; max-width: 86rem; } }

.hero-cta-wrapper {
  margin-top: 4.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}
.hero-microcopy {
  font-size: 1.4rem;
  color: var(--text-muted);
  font-weight: 400;
}

.scroll-indicator {
  grid-row: 4 / 5;
  place-self: end center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--text-muted);
  opacity: 0;
  transition: var(--transition-fade);
  padding-bottom: 3.2rem;
}
.scroll-indicator.show { opacity: 1; }
.scroll-indicator-arrow {
  width: 2rem;
  height: 2rem;
  border-right: 1.5px solid var(--text-muted);
  border-bottom: 1.5px solid var(--text-muted);
  transform: rotate(45deg);
  animation: scrollBounce 2s ease-in-out infinite;
}
@keyframes scrollBounce {
  0%, 100% { transform: rotate(45deg) translateY(0); }
  50% { transform: rotate(45deg) translateY(5px); }
}

/* === BLOBS (Flow ambient light — adapted to blue/purple) === */
.blobs {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--z-blobs);
  width: 100%;
  height: 150%;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}
.blobs.show { opacity: 0.2; transition: opacity 3s; }
.blobs::before {
  position: absolute;
  top: 0; left: 0;
  display: block;
  content: "";
  width: 75px; height: 75px;
  border-radius: 50%;
  background: radial-gradient(circle,
    var(--blob-blue) 0px,
    rgba(81, 69, 229, 0.6) 25%,
    rgba(81, 69, 229, 0.1) 55%,
    transparent 70%
  );
  animation: float2 50s ease-in-out infinite;
}
.blobs::after {
  position: absolute;
  top: 0; left: 0;
  display: block;
  content: "";
  width: 65px; height: 65px;
  border-radius: 50%;
  background: radial-gradient(circle,
    var(--blob-purple) 0px,
    rgba(121, 58, 236, 0.6) 25%,
    rgba(121, 58, 236, 0.1) 55%,
    transparent 70%
  );
  animation: float1 50s ease-in-out infinite;
}
@keyframes float1 {
  0%   { transform: translate(20vw, 10vh) scale(30); }
  25%  { transform: translate(60vw, 30vh) scale(35); }
  50%  { transform: translate(40vw, 50vh) scale(28); }
  75%  { transform: translate(70vw, 20vh) scale(32); }
  100% { transform: translate(20vw, 10vh) scale(30); }
}
@keyframes float2 {
  0%   { transform: translate(70vw, 40vh) scale(25); }
  25%  { transform: translate(30vw, 60vh) scale(30); }
  50%  { transform: translate(50vw, 20vh) scale(35); }
  75%  { transform: translate(20vw, 50vh) scale(28); }
  100% { transform: translate(70vw, 40vh) scale(25); }
}

/* === VIDEO UNIVERSO SECTION (between hero and features) === */
.video-showcase {
  position: relative;
  width: 100%;
  overflow: visible;
  padding: 0 var(--gutter-outer);
  margin-top: -10rem;
  margin-bottom: 6rem;
  z-index: 0;
}
@media (min-width: 768px) {
  .video-showcase { margin-top: -12rem; margin-bottom: 8rem; }
}
@media (min-width: 1024px) {
  .video-showcase { margin-top: -14rem; }
}
.video-showcase-inner {
  position: relative;
  max-width: 110rem;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .video-showcase-inner { max-width: 130rem; }
}
@media (min-width: 1440px) {
  .video-showcase-inner { max-width: 140rem; }
}
.video-showcase video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Ambient glow behind video — strong gradient + heavy blur like Flow, no hard edges */
.video-showcase-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140%;
  height: 260%;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(81, 69, 229, 0.40) 0%, rgba(81, 69, 229, 0.1) 35%, transparent 60%),
    radial-gradient(ellipse at 70% 50%, rgba(121, 58, 236, 0.30) 0%, rgba(121, 58, 236, 0.08) 35%, transparent 60%),
    radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, 0.05) 0%, transparent 45%);
  filter: blur(120px);
  pointer-events: none;
  z-index: -1;
  opacity: 0.6;
}
/* Edge fades using CSS mask — top very gradual (video passes behind hero CTA), bottom normal */
.video-showcase-inner {
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.15) 5%, rgba(0,0,0,0.4) 10%, black 20%, black 85%, transparent 100%),
    linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.15) 5%, rgba(0,0,0,0.4) 10%, black 20%, black 85%, transparent 100%),
    linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  mask-composite: intersect;
}

/* === SPACER TEXT SECTION (Flow "Overview" pattern) === */
.spacer-text {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 50svh;
  max-height: 58rem;
  padding: 8rem var(--gutter-outer);
}
.spacer-text::before {
  position: absolute;
  top: 50%; left: 0;
  z-index: -1;
  width: 100%;
  height: 75%;
  content: "";
  background-color: rgb(0, 0, 0);
  filter: blur(80px);
  transform: translateY(-50%);
}
.spacer-text .section-title {
  max-width: 38rem;
  margin: 0 auto;
  text-align: center;
  font-size: 3.2rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.025em;
  color: var(--text-primary);
}
@media (min-width: 768px) { .spacer-text .section-title { max-width: 60rem; font-size: 4.8rem; } }
@media (min-width: 1024px) { .spacer-text .section-title { max-width: 84rem; } }
.spacer-text .section-subtitle {
  max-width: 60rem;
  margin: 2.4rem auto 0;
  text-align: center;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 2.7rem;
  color: var(--text-secondary);
}
@media (min-width: 768px) { .spacer-text .section-subtitle { font-size: 2.1rem; } }

/* === VIDEO CARD SECTION (Flow card style with blur) === */
.video-card-section {
  position: relative;
  padding: 4rem var(--gutter-outer) 10rem;
}
/* Ambient glow behind video card — visible gradient + blur like Flow */
.video-card-section::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: 100%;
  background:
    radial-gradient(ellipse at 35% 50%, rgba(81, 69, 229, 0.35) 0%, transparent 50%),
    radial-gradient(ellipse at 65% 50%, rgba(121, 58, 236, 0.25) 0%, transparent 50%);
  filter: blur(100px);
  pointer-events: none;
  z-index: -1;
  opacity: 0.5;
}
.video-card-container {
  max-width: var(--container-max);
  margin: 0 auto;
}
.video-card {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  background: var(--surface-glass);
  border: 0.1rem solid hsla(0,0%,100%,.15);
  box-shadow: inset 0 0 0 1px hsla(0,0%,100%,.05);
  aspect-ratio: 16 / 9;
  cursor: pointer;
}
.video-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* === CAPABILITIES / FEATURES SECTIONS (Flow pattern) === */
.capabilities {
  position: relative;
  z-index: 3;
  padding-top: 8rem;
  overflow: hidden;
  overflow: clip;            /* corta igual, mas não quebra o sticky das telas 3D */
}
/* Ambient glow behind features — like Flow's colored backdrop */
.capabilities::after {
  content: "";
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 25%;
  background:
    radial-gradient(ellipse at 40% 50%, rgba(81, 69, 229, 0.3) 0%, transparent 60%),
    radial-gradient(ellipse at 60% 50%, rgba(121, 58, 236, 0.2) 0%, transparent 60%);
  filter: blur(100px);
  pointer-events: none;
  z-index: -1;
  opacity: 0.5;
}
.capabilities .content-container {
  padding: 0 var(--gutter-outer) 3.8rem;
  max-width: var(--container-max);
  margin: 0 auto;
}
@media (min-width: 768px) { .capabilities .content-container { padding: 0 3.4rem 10rem; } }
@media (min-width: 1440px) { .capabilities .content-container { max-width: 144rem; padding: 0 7.2rem; } }

.feature-section {
  position: relative;
  padding: 10rem 0;
}
.feature-section + .feature-section {
  border-top: 1px solid var(--border-glass);
}
/* Subtle ambient glow on alternating feature sections */
.feature-section:nth-child(even)::after {
  content: "";
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 40%;
  background: radial-gradient(ellipse, rgba(81, 69, 229, 0.08) 0%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: -1;
}

.feature-header {
  text-align: center;
  margin-bottom: 6rem;
}
.feature-title {
  font-size: 3.2rem;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--text-primary);
}
@media (min-width: 768px) { .feature-title { font-size: 4.8rem; line-height: 6rem; } }

.feature-subtitle {
  margin-top: 2rem;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 2.7rem;
  color: var(--text-secondary);
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px) { .feature-subtitle { font-size: 2.1rem; } }

/* Selo de parceria oficial (seção de Automações de Instagram) */
.meta-partner-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 1.6rem;
  border-radius: 10rem;
  border: 1px solid rgba(81, 69, 229, 0.4);
  background: rgba(81, 69, 229, 0.1);
  font-size: 1.3rem;
  font-weight: 500;
  color: rgba(180, 170, 255, 0.9);
  margin-top: 2rem;
  letter-spacing: 0.04em;
}
.meta-partner-badge svg { width: 1.6rem; height: 1.6rem; flex-shrink: 0; }

/* Par de screenshots de exemplo (usado na seção de Automações de Instagram) */
.ig-example-pair {
  display: flex;
  gap: 1.6rem;
  max-width: 56rem;
  margin: 0 auto 6rem;
}
.ig-example-pair img {
  width: 50%;
  height: auto;
  border-radius: 1.6rem;
  border: 1px solid var(--border-glass);
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  display: block;
}

/* Feature grid cards (glass style) */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
}
@media (min-width: 768px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }

.feature-card {
  padding: 3.2rem;
  background: var(--surface-glass);
  border: 1px solid var(--border-glass);
  border-radius: 2rem;
  box-shadow: inset 0 0 0 1px hsla(0,0%,100%,.05);
  transition: background-color 0.35s, border-color 0.35s, box-shadow 0.35s;
}
.feature-card:hover {
  background: var(--surface-glass-hover);
  border-color: var(--border-glass-strong);
  box-shadow: inset 0 0 0 1px hsla(0,0%,100%,.15);
}
.feature-card-title {
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 1.2rem;
}
.feature-card-text {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2.2rem;
  color: var(--text-secondary);
}

/* Feature items (list style for compact sections) */
.feature-items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.4rem;
  max-width: 80rem;
  margin: 0 auto;
}
@media (min-width: 768px) { .feature-items { grid-template-columns: repeat(2, 1fr); gap: 3.2rem; } }
@media (min-width: 1024px) { .feature-items { grid-template-columns: repeat(3, 1fr); } }

.feature-item {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2.7rem;
  color: var(--text-secondary);
}
.feature-item strong {
  display: block;
  color: var(--text-primary);
  font-weight: 500;
  margin-bottom: 0.4rem;
}

/* === PROBLEM SECTION — list animation === */
.problem-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  margin-top: 4rem;
  font-size: 1.8rem;
  line-height: 2.7rem;
  color: var(--text-secondary);
}
@media (min-width: 768px) { .problem-list { font-size: 2.1rem; } }
.problem-list span {
  display: block;
}
.problem-list .emphasis {
  color: var(--text-primary);
  font-weight: 500;
  margin-top: 1.6rem;
}

/* === STATS SECTION (within page, not hero) === */
.stats-section {
  position: relative;
  padding: 8rem var(--gutter-outer);
  border-top: 1px solid var(--border-glass);
  border-bottom: 1px solid var(--border-glass);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3.2rem;
  max-width: 80rem;
  margin: 0 auto;
  text-align: center;
}
@media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }

.stat-item {}
.stat-number {
  font-size: 3.6rem;
  font-weight: 600;
  letter-spacing: -0.025em;
}
@media (min-width: 768px) { .stat-number { font-size: 4.8rem; } }
.stat-label {
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--text-secondary);
  margin-top: 0.4rem;
}

/* === PRICING (Flow pattern) === */
.pricing-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10rem var(--gutter-outer) 11rem;
}
.pricing-section::before {
  content: "";
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 30%;
  background: radial-gradient(ellipse, rgba(81, 69, 229, 0.1) 0%, rgba(121, 58, 236, 0.04) 50%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: -1;
}
@media (min-width: 768px) { .pricing-section { padding-top: 15rem; } }
@media (min-width: 1440px) { .pricing-section { padding-top: 21.7rem; } }

.pricing-header {
  text-align: center;
  margin-bottom: 2rem;
}
.pricing-note {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--text-secondary);
  max-width: 60rem;
  margin: 0 auto 6rem;
}

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 4rem;
  width: 100%;
  max-width: 46.2rem;
  margin: 0 auto;
  text-align: left;
}
@media (min-width: 768px) {
  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 2.4rem;
    row-gap: 0;
    max-width: none;
    max-width: 90rem;
  }
}

.pricing-card {
  display: flex;
  flex-direction: column;
  padding: 3.2rem 0;
}
@media (min-width: 768px) {
  .pricing-card { padding: 3.2rem; }
  .pricing-card.featured {
    background: var(--surface-glass);
    border: 1px solid var(--border-glass);
    border-radius: 2rem;
  }
}

.pricing-card-name {
  font-size: 2.1rem;
  font-weight: 400;
  color: var(--text-primary);
  margin-bottom: 1.2rem;
}
.pricing-card-price {
  font-size: 4.8rem;
  font-weight: 400;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin-bottom: 0.4rem;
}
.pricing-card-price .period {
  font-size: 1.8rem;
  color: var(--text-secondary);
  font-weight: 400;
}
.pricing-card-desc {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2.4rem;
  color: var(--text-secondary);
  margin-bottom: 3.2rem;
}

.pricing-features {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-bottom: 3.2rem;
  flex: 1;
}
.pricing-feature {
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--text-secondary);
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  line-height: 2rem;
}
.pricing-feature::before {
  content: "✓";
  color: var(--text-primary);
  font-weight: 500;
  flex-shrink: 0;
}

/* === Feature nova no plano: destaque pulsante roxo === */
@keyframes pc-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(121,58,236,0); text-shadow: none; }
  50% { box-shadow: 0 0 12px 2px rgba(121,58,236,.45); text-shadow: 0 0 8px rgba(121,58,236,.35); }
}
.pricing-feature-new {
  color: var(--text-primary) !important;
  font-weight: 500;
  background: linear-gradient(90deg, rgba(81,69,229,.08) 0%, rgba(121,58,236,.04) 100%);
  border-left: 2px solid rgba(121,58,236,.7);
  border-radius: 0 .8rem .8rem 0;
  padding-left: .8rem !important;
  margin-left: -.6rem;
  animation: pc-glow-pulse 2.4s ease-in-out infinite;
}
.pricing-feature-new::before {
  content: "✦" !important;
  color: #9b6dff !important;
  font-weight: 700;
}
.pricing-inherit-note {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .8rem 0 .4rem;
  border-bottom: 1px solid var(--border-glass);
  margin-bottom: .4rem;
  letter-spacing: .02em;
}
.pricing-inherit-note::before {
  content: "↑";
  font-size: 1.1rem;
  color: rgba(121,58,236,.6);
}

.pricing-cta-section {
  text-align: center;
  margin-top: 6rem;
}
.pricing-cta-section .btn-glass {
  padding: 1.5rem 8.1rem;
  font-size: 2.2rem;
  font-weight: 500;
  border-radius: var(--radius-btn-md);
}

/* === CTA FINAL === */
.cta-final {
  position: relative;
  padding: 10rem var(--gutter-outer);
  text-align: center;
}
.cta-final::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40%;
  height: 60%;
  background: radial-gradient(ellipse, rgba(81, 69, 229, 0.12) 0%, rgba(121, 58, 236, 0.04) 50%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: -1;
}
.cta-final-title {
  font-size: 3.2rem;
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.25;
  max-width: 70rem;
  margin: 0 auto;
}
@media (min-width: 768px) { .cta-final-title { font-size: 4.8rem; } }
.cta-final-desc {
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--text-secondary);
  margin: 2.4rem auto 0;
  max-width: 56rem;
  line-height: 2.7rem;
}
@media (min-width: 768px) { .cta-final-desc { font-size: 2.1rem; } }
.cta-final-buttons {
  margin-top: 4.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}
@media (min-width: 768px) { .cta-final-buttons { flex-direction: row; justify-content: center; } }
.cta-final-micro {
  margin-top: 2rem;
  font-size: 1.4rem;
  color: var(--text-muted);
}

/* === FOOTER (Flow pattern — minimal) === */
.site-footer {
  border-top: 1px solid var(--border-glass);
  padding: 6rem var(--gutter-outer);
}
.footer-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
}
@media (min-width: 768px) {
  .footer-inner { grid-template-columns: 2fr 1fr 1fr 1fr; }
}
@media (min-width: 1100px) {
  .footer-inner { grid-template-columns: 1.6fr 1fr 1.3fr 0.8fr 0.8fr; }
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 1.2rem;
}
.footer-desc {
  font-size: 1.4rem;
  color: var(--text-secondary);
  line-height: 2.2rem;
}
.footer-col-title {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 1.6rem;
}
.footer-col a {
  display: block;
  font-size: 1.4rem;
  color: var(--text-secondary);
  line-height: 2.8rem;
  transition: color 0.3s;
}
.footer-col a:hover { color: var(--text-primary); }
.footer-bottom {
  max-width: var(--container-max);
  margin: 4rem auto 0;
  padding-top: 3.2rem;
  border-top: 1px solid var(--border-glass);
  text-align: center;
  font-size: 1.2rem;
  color: var(--text-muted);
}

/* === SCROLL ANIMATIONS === */
.fade-up {
  opacity: 0;
  transform: translateY(3rem);
  filter: blur(6px);
  transition: opacity 1s cubic-bezier(.16, 1, .3, 1), transform 1.1s cubic-bezier(.16, 1, .3, 1), filter 1s cubic-bezier(.16, 1, .3, 1);
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
  filter: none;
}

/* === MOBILE MENU === */
.mobile-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  color: white;
}
@media (min-width: 768px) { .mobile-menu-btn { display: none; } }
.mobile-menu-btn svg { width: 2.4rem; height: 2.4rem; }

.mobile-menu {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3.2rem;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-size: 2.4rem;
  font-weight: 500;
  color: var(--text-primary);
}
.mobile-menu-close {
  position: absolute;
  top: 2rem; right: 2rem;
  width: 4rem; height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2.4rem;
}

/* === VIDEO SHOWCASE — expand beyond viewport on mobile === */
@media (max-width: 767px) {
  .video-showcase {
    padding: 0;
    margin-left: -5rem;
    margin-right: -5rem;
    width: calc(100% + 10rem);
    margin-top: -14rem;
  }
  .video-showcase-inner {
    max-width: none;
    border-radius: 0;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .video-showcase-inner { max-width: 120rem; }
}

/* (glow dimensions consolidated in main .video-showcase-glow rule above) */

/* === VIDEO CARD — autoplay style (no overlay) === */
.video-card-auto {
  cursor: default;
}
.video-card-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: opacity 0.5s;
}
.video-card-thumb.hidden {
  opacity: 0;
  pointer-events: none;
}

/* === APP MOBILE SECTION — carrossel 3D de celulares === */
/* overflow: clip (e não hidden) para não quebrar o position: sticky do palco */
.app-section {
  position: relative;
  padding: 10rem 0;
  overflow: clip;
}
.app-section-header {
  text-align: center;
  padding: 0 var(--gutter-outer);
  margin-bottom: 6rem;
}
/* Base (sem JS / movimento reduzido): faixa horizontal com scroll-snap */
.app-carousel {
  display: flex;
  gap: 2.4rem;
  padding: 1rem var(--gutter-outer) 2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.app-carousel::-webkit-scrollbar { display: none; }
.app-phone {
  flex: 0 0 auto;
  width: 22rem;
  margin: 0;
  scroll-snap-align: center;
}
@media (min-width: 768px) { .app-phone { width: 25rem; } }
/* Corpo do aparelho — moldura metálica escura com borda de luz */
.app-phone-body {
  position: relative;
  padding: 0.85rem;
  border-radius: 3.8rem;
  background: linear-gradient(150deg, #3a3a46 0%, #111117 16%, #07070a 55%, #1f1f28 88%, #3a3a46 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),
    inset 0 0 0 0.35rem #040406,
    0 50px 90px -30px rgba(0,0,0,.95),
    0 0 70px -10px rgba(81,69,229,.28);
}
/* Botões laterais */
.app-phone-body::before {
  content: "";
  position: absolute;
  right: -0.25rem;
  top: 22%;
  width: 0.3rem;
  height: 12%;
  border-radius: 0 0.3rem 0.3rem 0;
  background: linear-gradient(90deg, #1b1b22, #44444f);
}
.app-phone-screen {
  position: relative;
  overflow: hidden;
  border-radius: 3rem;
  aspect-ratio: 624 / 1192;
  background: #0b0718;
  transform: translateZ(0);
}
.app-phone-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Reflexo de vidro que desliza conforme o aparelho gira */
.app-phone-screen::after {
  content: "";
  position: absolute;
  inset: -10% -40%;
  background: linear-gradient(110deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.13) 44%, rgba(255,255,255,0) 58%);
  transform: translateX(calc(var(--g, 0) * -35%));
  pointer-events: none;
}
.app-phone-caption {
  margin-top: 2rem;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--text-secondary);
}
/* Store buttons row */
.app-store-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin-top: 5rem;
  padding: 0 var(--gutter-outer);
}
.app-store-btn {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 2.4rem;
  background: var(--surface-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-btn-md);
  color: var(--text-primary);
  font-size: 1.4rem;
  font-weight: 500;
  transition: var(--transition-btn);
}
.app-store-btn:hover { background: var(--surface-glass-hover); }
.app-store-btn svg { width: 2.2rem; height: 2.2rem; fill: white; }
.app-store-btn-label { display: flex; flex-direction: column; line-height: 1.2; }
.app-store-btn-label small { font-size: 1rem; font-weight: 400; color: var(--text-muted); }
.app-store-btn-label span { font-size: 1.5rem; font-weight: 600; }
/* Ambient glow behind app gallery */
.app-section::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  height: 80%;
  background:
    radial-gradient(ellipse at 40% 50%, rgba(81, 69, 229, 0.25) 0%, transparent 50%),
    radial-gradient(ellipse at 60% 50%, rgba(121, 58, 236, 0.15) 0%, transparent 50%);
  filter: blur(100px);
  pointer-events: none;
  z-index: -1;
  opacity: 0.5;
}

/* === BILLING COMPARISON TABLE (inline, transparent) === */
.billing-comparison {
  margin-top: 6rem;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}
.billing-comparison-title {
  text-align: center;
  font-size: 2.1rem;
  font-weight: 400;
  color: var(--text-primary);
  margin-bottom: 3.2rem;
}
.billing-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.billing-table thead th {
  padding: 1.6rem 2rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: left;
  border-bottom: 1px solid var(--border-glass);
}
.billing-table thead th:first-child {
  border-radius: 1.2rem 0 0 0;
}
.billing-table thead th:last-child {
  border-radius: 0 1.2rem 0 0;
}
.billing-table thead th.col-recommended {
  background: linear-gradient(135deg, rgba(81, 69, 229, 0.15), rgba(121, 58, 236, 0.1));
}
.billing-table tbody td {
  padding: 1.4rem 2rem;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 2rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: top;
}
.billing-table tbody tr:last-child td {
  border-bottom: none;
}
.billing-table tbody td:first-child {
  color: var(--text-muted);
  font-weight: 500;
  width: 30%;
}
.billing-table tbody td.col-recommended {
  background: rgba(81, 69, 229, 0.04);
}
.billing-table .check {
  color: #4ade80;
  font-weight: 600;
}
.billing-table .limit {
  color: var(--text-muted);
}
.billing-table .badge-recommended {
  display: inline-block;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.3rem 0.8rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, var(--accent-start), var(--accent-end));
  color: white;
  margin-left: 0.6rem;
  vertical-align: middle;
}
@media (max-width: 767px) {
  .billing-table thead th,
  .billing-table tbody td {
    padding: 1.2rem 1.2rem;
    font-size: 1.3rem;
  }
}

/* === COMPARISON SECTION === */
.comparison-section {
  position: relative;
  padding: 10rem var(--gutter-outer);
  text-align: center;
  overflow: hidden;
}
.comparison-section::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(81, 69, 229, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 60%, rgba(121, 58, 236, 0.12) 0%, transparent 55%);
  filter: blur(100px);
  pointer-events: none;
  z-index: -1;
}
.comparison-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 1.6rem;
  border-radius: 10rem;
  border: 1px solid rgba(81, 69, 229, 0.4);
  background: rgba(81, 69, 229, 0.1);
  font-size: 1.3rem;
  font-weight: 500;
  color: rgba(180, 170, 255, 0.9);
  margin-bottom: 2.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.comparison-badge::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: rgba(180, 170, 255, 0.9);
  flex-shrink: 0;
}
.comparison-title {
  font-size: 3.2rem;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  max-width: 72rem;
  margin: 0 auto 2rem;
}
@media (min-width: 768px) { .comparison-title { font-size: 4.8rem; } }
.comparison-subtitle {
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 2.7rem;
  color: var(--text-secondary);
  max-width: 56rem;
  margin: 0 auto 6rem;
}
@media (min-width: 768px) { .comparison-subtitle { font-size: 2.1rem; } }
.comparison-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  max-width: 90rem;
  margin: 0 auto;
}
@media (min-width: 600px) { .comparison-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .comparison-grid { grid-template-columns: repeat(3, 1fr); } }
.comparison-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2.4rem 3.2rem;
  background: var(--surface-glass);
  border: 1px solid var(--border-glass);
  border-radius: 2rem;
  box-shadow: inset 0 0 0 1px hsla(0,0%,100%,.05);
  text-decoration: none;
  transition: background-color 0.35s, border-color 0.35s, box-shadow 0.35s, transform 0.25s;
  text-align: left;
  gap: 1.6rem;
}
.comparison-card:hover {
  background: var(--surface-glass-hover);
  border-color: rgba(81, 69, 229, 0.4);
  box-shadow: inset 0 0 0 1px rgba(81, 69, 229, 0.15), 0 0 32px rgba(81, 69, 229, 0.12);
  transform: translateY(-2px);
}
.comparison-card-info {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.comparison-card-vs {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(180, 170, 255, 0.7);
}
.comparison-card-name {
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--text-primary);
}
.comparison-card-desc {
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 0.2rem;
}
.comparison-card-arrow {
  flex-shrink: 0;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  border: 1px solid var(--border-glass);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: border-color 0.3s, color 0.3s;
}
.comparison-card:hover .comparison-card-arrow {
  border-color: rgba(81, 69, 229, 0.5);
  color: rgba(180, 170, 255, 0.9);
}
.comparison-card-arrow svg {
  width: 1.4rem;
  height: 1.4rem;
}
.comparison-coming-soon {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}
.comparison-coming-badge {
  display: inline-block;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.3rem 0.8rem;
  border-radius: 1rem;
  background: rgba(255,255,255,0.08);
  color: var(--text-muted);
  margin-top: 0.4rem;
}

/* === FEATURE MATRIX (tabela comparativa multi-recurso) === */
.feature-matrix-section {
  position: relative;
  padding: 10rem var(--gutter-outer);
  text-align: center;
  overflow: hidden;
  border-top: 1px solid var(--border-glass);
}
.feature-matrix-section::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(81, 69, 229, 0.16) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 60%, rgba(121, 58, 236, 0.1) 0%, transparent 55%);
  filter: blur(100px);
  pointer-events: none;
  z-index: -1;
}
.feature-matrix-wrapper {
  max-width: var(--container-max);
  margin: 6rem auto 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 2rem;
  border: 1px solid var(--border-glass);
  background: var(--surface-glass);
  box-shadow: inset 0 0 0 1px hsla(0,0%,100%,.05);
}
.feature-matrix {
  width: 100%;
  min-width: 72rem;
  border-collapse: collapse;
  text-align: left;
}
.feature-matrix th,
.feature-matrix td {
  padding: 1.8rem 2rem;
  font-size: 1.4rem;
  border-bottom: 1px solid var(--border-glass);
  white-space: nowrap;
}
.feature-matrix tbody tr:last-child td,
.feature-matrix tbody tr:last-child th { border-bottom: none; }
.feature-matrix thead th {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: normal;
}
.feature-matrix .matrix-col-feature {
  color: var(--text-secondary);
  font-weight: 400;
  white-space: normal;
  min-width: 26rem;
}
.matrix-desc {
  display: block;
  margin-top: 0.4rem;
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.6rem;
  color: var(--text-muted);
}
.feature-matrix .matrix-col-pc {
  background: rgba(81, 69, 229, 0.08);
  border-left: 1px solid rgba(81, 69, 229, 0.25);
  border-right: 1px solid rgba(81, 69, 229, 0.25);
}
.feature-matrix thead .matrix-col-pc {
  color: rgba(180, 170, 255, 0.9);
}
.feature-matrix td, .feature-matrix th { text-align: center; }
.feature-matrix .matrix-col-feature,
.feature-matrix thead th.matrix-col-feature { text-align: left; }
.matrix-yes {
  color: #4ade80;
  font-weight: 600;
}
.matrix-no {
  color: rgba(248, 113, 113, 0.75);
  font-weight: 600;
}
.matrix-unknown {
  color: rgba(245, 158, 11, 0.85);
  font-weight: 600;
  font-size: 1.3rem;
}
.feature-matrix-summary {
  max-width: 80rem;
  margin: 4rem auto 0;
  font-size: 1.6rem;
  line-height: 2.5rem;
  color: var(--text-secondary);
  text-align: center;
}
.feature-matrix-note {
  max-width: 90rem;
  margin: 2.4rem auto 0;
  font-size: 1.2rem;
  line-height: 1.9rem;
  color: var(--text-muted);
  text-align: center;
}

/* === REALTIME SECTION === */
.realtime-section {
  position: relative;
  padding: 10rem var(--gutter-outer);
  overflow: hidden;
}
.realtime-section::before {
  content: "";
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 50%;
  background:
    radial-gradient(ellipse at 40% 50%, rgba(81, 69, 229, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse at 60% 50%, rgba(121, 58, 236, 0.1) 0%, transparent 60%);
  filter: blur(100px);
  pointer-events: none;
  z-index: -1;
}
.realtime-header {
  text-align: center;
  margin-bottom: 6rem;
}
.realtime-items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  max-width: 90rem;
  margin: 0 auto;
}
@media (min-width: 768px) { .realtime-items { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .realtime-items { grid-template-columns: repeat(3, 1fr); } }
.realtime-card {
  padding: 3.2rem;
  background: var(--surface-glass);
  border: 1px solid var(--border-glass);
  border-radius: 2rem;
  box-shadow: inset 0 0 0 1px hsla(0,0%,100%,.05);
}
.realtime-card-icon {
  display: block;
  margin-bottom: 1.6rem;
  color: rgba(180, 170, 255, 0.75);
  line-height: 0;
}
.realtime-card-icon svg {
  width: 2.4rem;
  height: 2.4rem;
}

/* === REALTIME SCREENSHOTS === */
.realtime-screenshots {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
  max-width: 110rem;
  margin: 0 auto 7rem;
}
@media (min-width: 768px) {
  .realtime-screenshots {
    flex-direction: row;
    align-items: flex-start;
    gap: 2.4rem;
  }
}
.realtime-screenshot-item {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
/* Desktop screenshot — ocupa o espaço proporcional à largura do landscape */
.realtime-screenshot-item--desktop {
  flex: 1.79;
}
/* Mobile screenshot — ocupa o espaço proporcional à largura do portrait */
.realtime-screenshot-item--mobile {
  flex: 0.48;
}
/* Em mobile (viewport pequeno) os dois ficam empilhados e ocupam largura total */
@media (max-width: 767px) {
  .realtime-screenshot-item--desktop,
  .realtime-screenshot-item--mobile {
    flex: none;
    width: 100%;
  }
}
.realtime-screenshot-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 1.6rem;
  border: 1px solid var(--border-glass);
  box-shadow: 0 0 40px rgba(81, 69, 229, 0.15), inset 0 0 0 1px hsla(0,0%,100%,.05);
}
.realtime-screenshot-label {
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--text-muted);
  text-align: center;
  line-height: 2rem;
}
.realtime-card-title {
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 1.2rem;
}
.realtime-card-text {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2.2rem;
  color: var(--text-secondary);
}

/* === ESCANEAMENTO CORPORAL 3D === */
.bodyscan-section {
  position: relative;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 10rem var(--gutter-outer);
}
.bodyscan-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .bodyscan-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr); gap: 5rem; }
}
.bodyscan-badge {
  display: inline-block;
  padding: 0.6rem 1.6rem;
  margin-bottom: 2.4rem;
  border-radius: 10rem;
  border: 1px solid rgba(81, 69, 229, 0.4);
  background: rgba(81, 69, 229, 0.1);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(180, 170, 255, 0.9);
}
.bodyscan-copy { text-align: left; }
.bodyscan-copy .feature-title { font-size: 3.2rem; line-height: 1.25; }
@media (min-width: 768px) { .bodyscan-copy .feature-title { font-size: 4.2rem; line-height: 5.2rem; } }
.bodyscan-copy .feature-subtitle { margin-left: 0; margin-right: 0; }
.bodyscan-points {
  list-style: none;
  display: grid;
  gap: 1.6rem;
  margin-top: 3.2rem;
}
.bodyscan-points li {
  padding-left: 2.4rem;
  position: relative;
  font-size: 1.5rem;
  line-height: 2.3rem;
  color: var(--text-secondary);
}
.bodyscan-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8rem;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-start), var(--accent-end));
}
.bodyscan-points strong { color: var(--text-primary); font-weight: 500; }
.bodyscan-video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 2rem;
  border: 1px solid var(--border-glass);
  background: radial-gradient(ellipse at 50% 55%, rgba(81, 69, 229, .2), transparent 65%), #05040c;
  box-shadow: 0 0 60px rgba(81, 69, 229, 0.18), inset 0 0 0 1px hsla(0,0%,100%,.05);
}
.bodyscan-video-frame .pc-auto-video { object-fit: cover !important; border-radius: 0 !important; }
.bodyscan-compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  margin-top: 2.4rem;
}
@media (min-width: 768px) { .bodyscan-compare { grid-template-columns: repeat(3, 1fr); } }
.bodyscan-compare-card {
  padding: 2.4rem 2.8rem;
  background: var(--surface-glass);
  border: 1px solid var(--border-glass);
  border-radius: 2rem;
  box-shadow: inset 0 0 0 1px hsla(0,0%,100%,.05);
}
.bodyscan-compare-card h3 { font-size: 1.7rem; font-weight: 500; margin-bottom: 0.8rem; color: var(--text-primary); }
.bodyscan-compare-card p { font-size: 1.4rem; line-height: 2.2rem; color: var(--text-secondary); }
.bodyscan-compare-card {
  border-color: rgba(121, 58, 236, 0.4);
  background: linear-gradient(160deg, rgba(81, 69, 229, 0.14), rgba(121, 58, 236, 0.04));
}
.bodyscan-compare-card h3 { display: flex; align-items: flex-start; gap: 1rem; }
.bodyscan-compare-card h3::before {
  content: "";
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  margin-top: 0.2rem;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 10.5l3 3 6-7'/%3E%3C/svg%3E") center / 1.2rem no-repeat,
    linear-gradient(135deg, var(--accent-start), var(--accent-end));
}
.bodyscan-story {
  max-width: 82rem;
  margin: 6rem auto 0;
  padding: 3.2rem 3.6rem;
  background: var(--surface-glass);
  border: 1px solid var(--border-glass);
  border-radius: 2rem;
  box-shadow: inset 0 0 0 1px hsla(0,0%,100%,.05);
}
.bodyscan-story-title { font-size: 2.4rem; font-weight: 400; letter-spacing: -0.02em; margin-bottom: 1.6rem; color: var(--text-primary); }
.bodyscan-story p { font-size: 1.6rem; line-height: 2.5rem; color: var(--text-secondary); }
.bodyscan-story-end { margin-top: 1.6rem; }
.bodyscan-story-end strong { color: var(--text-primary); font-weight: 500; }
@media (max-width: 767px) { .bodyscan-story { padding: 2.4rem; } }
.bodyscan-fineprint {
  max-width: 96rem;
  margin: 3.2rem auto 0;
  font-size: 1.2rem;
  line-height: 1.9rem;
  color: var(--text-muted);
  text-align: center;
}
.bodyscan-fineprint strong { font-weight: 500; color: rgba(255, 255, 255, 0.7); }

/* === OFFLINE SECTION === */
.offline-section {
  position: relative;
  padding: 10rem var(--gutter-outer);
  overflow: hidden;
  border-top: 1px solid var(--border-glass);
}
.offline-inner {
  max-width: 90rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6rem;
  align-items: center;
}
@media (min-width: 1024px) { .offline-inner { grid-template-columns: 1fr 1fr; gap: 8rem; } }
.offline-text {}
.offline-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 1.6rem;
  border-radius: 10rem;
  border: 1px solid rgba(74, 222, 128, 0.3);
  background: rgba(74, 222, 128, 0.08);
  font-size: 1.3rem;
  font-weight: 500;
  color: #4ade80;
  margin-bottom: 2.4rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.offline-badge::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0;
}
.offline-title {
  font-size: 3.2rem;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin-bottom: 2rem;
}
@media (min-width: 768px) { .offline-title { font-size: 4rem; } }
.offline-desc {
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 2.7rem;
  color: var(--text-secondary);
  margin-bottom: 4rem;
}
@media (min-width: 768px) { .offline-desc { font-size: 2rem; } }
.offline-list {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.offline-list-item {
  display: flex;
  align-items: flex-start;
  gap: 1.6rem;
  font-size: 1.5rem;
  line-height: 2.2rem;
  color: var(--text-secondary);
}
.offline-list-item::before {
  content: "✓";
  color: #4ade80;
  font-weight: 600;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.offline-compare {
  padding: 3.2rem;
  background: var(--surface-glass);
  border: 1px solid var(--border-glass);
  border-radius: 2rem;
  box-shadow: inset 0 0 0 1px hsla(0,0%,100%,.05);
}
.offline-compare-title {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 2.4rem;
  text-align: center;
}
.offline-compare-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  gap: 1.2rem;
}
.offline-compare-row:last-child { border-bottom: none; }
.offline-compare-label {
  font-size: 1.4rem;
  color: var(--text-muted);
  flex: 1;
}
.offline-compare-yes {
  font-size: 1.3rem;
  font-weight: 600;
  color: #4ade80;
  white-space: nowrap;
}
.offline-compare-no {
  font-size: 1.3rem;
  font-weight: 600;
  color: rgba(255,255,255,0.25);
  white-space: nowrap;
}

/* === AI SECTION === */
.ai-section {
  position: relative;
  padding: 10rem var(--gutter-outer);
  overflow: hidden;
  border-top: 1px solid var(--border-glass);
}
.ai-section::before {
  content: "";
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 40%;
  background: radial-gradient(ellipse, rgba(121, 58, 236, 0.12) 0%, rgba(81, 69, 229, 0.06) 50%, transparent 70%);
  filter: blur(100px);
  pointer-events: none;
  z-index: -1;
}

/* === NOTIFICATIONS SECTION === */
.notifications-section {
  position: relative;
  padding: 10rem var(--gutter-outer);
  overflow: hidden;
  border-top: 1px solid var(--border-glass);
}
.notifications-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  max-width: 90rem;
  margin: 0 auto;
}
@media (min-width: 768px) { .notifications-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .notifications-grid { grid-template-columns: repeat(4, 1fr); } }
.notification-card {
  padding: 2.8rem 2.4rem;
  background: var(--surface-glass);
  border: 1px solid var(--border-glass);
  border-radius: 2rem;
  box-shadow: inset 0 0 0 1px hsla(0,0%,100%,.05);
}
.notification-for {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(180, 170, 255, 0.7);
  margin-bottom: 1.6rem;
}
.notification-items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.notification-item {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2rem;
  color: var(--text-secondary);
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
}
.notification-item::before {
  content: "•";
  color: rgba(180, 170, 255, 0.5);
  flex-shrink: 0;
}

/* === PERIODIZATION SECTION === */
.periodization-section {
  position: relative;
  padding-top: 10rem;
  border-top: 1px solid var(--border-glass);
}
.periodization-header {
  text-align: center;
  padding: 0 var(--gutter-outer);
  margin-bottom: 6rem;
}
/* Wrapper alto — o scroll nativo avança dentro dele, sticky mantém o vídeo na tela */
.periodization-scroll-wrapper {
  position: relative;
  height: 1500vh;
}
/* Desktop: oculta bloco mobile. Mobile: oculta bloco desktop */
.periodization-desktop-only { display: block; }
.periodization-mobile-only  { display: none; }
@media (max-width: 767px) {
  .periodization-desktop-only { display: none; }
  .periodization-mobile-only  { display: block; }
}
/* Wrapper mobile — altura menor que o desktop */
.periodization-scroll-wrapper-mobile {
  position: relative;
  height: 600vh;
}
/* Frame mobile — retrato, largura limitada e centralizada */
.periodization-video-frame-mobile {
  position: relative;
  width: 72vw;
  max-width: 32rem;
  aspect-ratio: 540 / 1082;
  margin: 0 auto;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 2.4rem;
  box-shadow:
    inset 0 0 0 1px hsla(0,0%,100%,.05),
    0 0 60px rgba(81,69,229,0.18),
    0 24px 80px rgba(0,0,0,0.5);
  overflow: hidden;
}
.periodization-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 2rem var(--gutter-outer);
}
.periodization-video-frame {
  position: relative;
  width: 100%;
  max-width: 100rem;
  /* aspect-ratio do vídeo 1919×1071 ≈ 16/9 — mantém o frame estável em ambos os vídeos */
  aspect-ratio: 1919 / 1071;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 2.4rem;
  box-shadow:
    inset 0 0 0 1px hsla(0,0%,100%,.05),
    0 0 60px rgba(81, 69, 229, 0.18),
    0 24px 80px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
}
@media (min-width: 768px) {
  .periodization-video-frame { border-radius: 3.2rem; }
}
/* Ambos os vídeos sobrepostos — troca só via opacity/z-index inline */
.periodization-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
#periodizationVideoFwd { opacity: 0.92; }
.periodization-scroll-hint {
  position: absolute;
  bottom: 4rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--text-muted);
  opacity: 1;
  transition: opacity 0.4s;
  pointer-events: none;
  white-space: nowrap;
}
.periodization-scroll-hint svg {
  animation: scrollBounce 1.8s ease-in-out infinite;
}
.periodization-scroll-hint svg:first-child {
  animation-direction: reverse;
  animation-duration: 2.2s;
  opacity: 0.4;
}
.periodization-scroll-hint.hidden { opacity: 0; }
.periodization-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  max-width: 90rem;
  margin: 0 auto;
  padding: 8rem var(--gutter-outer) 10rem;
}
@media (min-width: 768px) { .periodization-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .periodization-cards { grid-template-columns: repeat(3, 1fr); } }

/* === ANYWHERE SECTION === */
.anywhere-section {
  position: relative;
  padding: 10rem var(--gutter-outer);
  overflow: hidden;
  border-top: 1px solid var(--border-glass);
}
.anywhere-section::before {
  content: "";
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 50%;
  background:
    radial-gradient(ellipse at 40% 50%, rgba(81, 69, 229, 0.13) 0%, transparent 60%),
    radial-gradient(ellipse at 60% 50%, rgba(121, 58, 236, 0.09) 0%, transparent 60%);
  filter: blur(100px);
  pointer-events: none;
  z-index: -1;
}
.anywhere-inner {
  max-width: 90rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6rem;
  align-items: start;
}
@media (min-width: 1024px) { .anywhere-inner { grid-template-columns: 1fr 1fr; gap: 8rem; } }
.anywhere-header {
  margin-bottom: 4rem;
}
.anywhere-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 1.6rem;
  border-radius: 10rem;
  border: 1px solid rgba(81, 69, 229, 0.4);
  background: rgba(81, 69, 229, 0.1);
  font-size: 1.3rem;
  font-weight: 500;
  color: rgba(180, 170, 255, 0.9);
  margin-bottom: 2.4rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.anywhere-badge::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: rgba(180, 170, 255, 0.9);
  flex-shrink: 0;
}
.anywhere-title {
  font-size: 3.2rem;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin-bottom: 2rem;
}
@media (min-width: 768px) { .anywhere-title { font-size: 4rem; } }
.anywhere-desc {
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 2.7rem;
  color: var(--text-secondary);
}
@media (min-width: 768px) { .anywhere-desc { font-size: 2rem; } }
.anywhere-checklist {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  margin-top: 3.2rem;
}
.anywhere-check-item {
  display: flex;
  align-items: flex-start;
  gap: 1.4rem;
  font-size: 1.6rem;
  line-height: 2.4rem;
  color: var(--text-secondary);
}
.anywhere-check-item::before {
  content: "✓";
  color: rgba(180, 170, 255, 0.9);
  font-weight: 600;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.anywhere-cards {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.anywhere-card {
  padding: 2.8rem 3.2rem;
  background: var(--surface-glass);
  border: 1px solid var(--border-glass);
  border-radius: 2rem;
  box-shadow: inset 0 0 0 1px hsla(0,0%,100%,.05);
}
.anywhere-card-label {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(180, 170, 255, 0.7);
  margin-bottom: 1.2rem;
}
.anywhere-card-title {
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 0.8rem;
}
.anywhere-card-text {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2.2rem;
  color: var(--text-secondary);
}
.anywhere-vs-row {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 1.4rem;
}
.anywhere-vs-row:last-child { border-bottom: none; }
.anywhere-vs-label {
  flex: 1;
  color: var(--text-muted);
}
.anywhere-vs-yes {
  font-weight: 600;
  color: rgba(180, 170, 255, 0.9);
  white-space: nowrap;
  font-size: 1.3rem;
}
.anywhere-vs-no {
  font-weight: 600;
  color: rgba(255,255,255,0.2);
  white-space: nowrap;
  font-size: 1.3rem;
}

/* === WHATSAPP FAB === */
.whatsapp-fab {
  position: fixed;
  bottom: 2.4rem;
  right: 2.4rem;
  z-index: 999;
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s;
  cursor: pointer;
}
.whatsapp-fab svg {
  width: 3rem;
  height: 3rem;
  fill: white;
}
.whatsapp-fab.hidden {
  transform: translateX(10rem);
  opacity: 0;
  pointer-events: none;
}

/* ========================================================
   V2 — CAMADA DE MOVIMENTO, 3D E LIQUID GLASS
   Só apresentação: textos, ordem das seções e SEO intactos.
   --p (0 → 1) é escrito pelo motor de scroll em [data-scene].
   ======================================================== */
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --accent-soft: rgba(180, 170, 255, .9);
}

@keyframes spinAngle { to { --angle: 360deg; } }
@keyframes spinRotate { to { rotate: 360deg; } }
/* Seções fora da tela congelam suas animações (economia de CPU/bateria) */
[data-paused] *,
[data-paused] *::before,
[data-paused] *::after { animation-play-state: paused !important; }
@keyframes pulseDot {
  0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .55); }
  100% { box-shadow: 0 0 0 1rem rgba(74, 222, 128, 0); }
}

/* --- Barra de progresso de leitura (topo) --- */
.scroll-progress {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 2px;
  transform-origin: 0 50%;
  transform: scaleX(var(--sp, 0));
  background: linear-gradient(90deg, var(--accent-start), var(--accent-end) 60%, #b4aaff);
  box-shadow: 0 0 14px rgba(121, 58, 236, .7);
  pointer-events: none;
}

/* --- Luz que acompanha o cursor --- */
.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 900;
  width: 60rem;
  height: 60rem;
  margin: -30rem 0 0 -30rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(81, 69, 229, .11) 0%, rgba(121, 58, 236, .05) 35%, transparent 68%);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0;
  transition: opacity .8s;
  will-change: transform;
}
.cursor-glow.on { opacity: 1; }

/* --- Menu: pílula de vidro + indicador deslizante --- */
@media (min-width: 768px) {
  .jump-links { position: relative; isolation: isolate; align-items: center; }
  .jump-links::before {
    content: "";
    position: absolute;
    inset: -0.9rem -2rem;
    z-index: -2;
    border-radius: 10rem;
    background: rgba(255, 255, 255, .035);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .12), 0 10px 40px -12px rgba(0, 0, 0, .7);
  }
  .jump-indicator {
    position: absolute;
    top: -0.5rem;
    bottom: -0.5rem;
    left: 0;
    z-index: -1;
    width: var(--jw, 0px);
    transform: translateX(var(--jx, 0px));
    opacity: var(--jo, 0);
    border-radius: 10rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .08);
    transition: transform .55s var(--ease-out), width .55s var(--ease-out), opacity .3s;
    pointer-events: none;
  }
}

/* --- Liquid glass: botões com brilho especular e luz que segue o cursor --- */
.btn-glass,
.btn-hero-cta,
.app-store-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .11) 0%, rgba(255, 255, 255, .035) 100%);
  border-color: rgba(255, 255, 255, .14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .3),
    inset 0 -1px 0 rgba(255, 255, 255, .05),
    inset 0 0 20px rgba(255, 255, 255, .04),
    0 12px 32px -12px rgba(0, 0, 0, .7);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
  transition: background-color .35s ease, border-color .35s ease, color .35s ease, box-shadow .5s var(--ease-out), translate .6s var(--ease-out);
}
.btn-glass::before,
.btn-hero-cta::before,
.app-store-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(14rem circle at var(--bx, 50%) var(--by, -20%), rgba(255, 255, 255, .24), transparent 60%);
  opacity: 0;
  transition: opacity .4s;
}
.btn-glass:hover::before,
.btn-hero-cta:hover::before,
.app-store-btn:hover::before { opacity: 1; }
.btn-glass:hover,
.btn-hero-cta:hover,
.app-store-btn:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .06) 100%);
  border-color: rgba(255, 255, 255, .24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .42),
    inset 0 -1px 0 rgba(255, 255, 255, .08),
    0 18px 44px -14px rgba(81, 69, 229, .6);
}
/* CTA principal: aro de luz girando em volta do vidro */
.btn-hero-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--angle), rgba(255, 255, 255, .04) 0deg, rgba(180, 170, 255, .95) 55deg, rgba(121, 58, 236, .7) 105deg, rgba(255, 255, 255, .04) 165deg, rgba(255, 255, 255, .04) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: spinAngle 5s linear infinite;
  pointer-events: none;
}
.btn-white {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: var(--transition-btn), box-shadow .5s var(--ease-out), translate .5s var(--ease-out);
}
.btn-white::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(81, 69, 229, .18), transparent);
  transform: skewX(-20deg);
  opacity: 0;
  pointer-events: none;
}
.btn-white:hover { box-shadow: 0 16px 44px -14px rgba(121, 58, 236, .65); translate: 0 -1px; }
.btn-white:hover::after { animation: btnSheen .9s var(--ease-out); }
@keyframes btnSheen {
  0% { left: -60%; opacity: 0; }
  25% { opacity: 1; }
  100% { left: 130%; opacity: 0; }
}

/* --- Títulos: palavras entram com desfoque (efeito Apple) --- */
.js .hero-title:not(.split) { opacity: 0; animation: titleFailsafe .6s ease 2.5s forwards; }
@keyframes titleFailsafe { to { opacity: 1; } }
.js .split .w {
  display: inline-block;
  opacity: 0;
  filter: blur(12px);
  transform: translate3d(0, .42em, 0);
  transition: opacity 1s var(--ease-out), filter 1s var(--ease-out), transform 1.1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 45ms + var(--d0, 0ms));
}
.js .split.is-in .w { opacity: 1; filter: none; transform: none; }
/* Gradiente contínuo aplicado palavra por palavra (posição calculada no JS) */
.gradient-text.gt-split { background: none; }
.gw {
  background-image: linear-gradient(135deg, var(--accent-start), var(--accent-end));
  background-size: var(--gw, 100%) 100%;
  background-position: calc(var(--gx, 0px) * -1) 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Promessa: leitura acende palavra por palavra conforme o scroll */
.js .read-split .w {
  opacity: clamp(.12, calc(var(--p, 1) * (var(--n, 20) + 6) - var(--i, 0) - 2), 1);
  transition: opacity .25s linear;
}
.js [data-scene="read"] .section-subtitle {
  opacity: clamp(0, calc(var(--p, 1) * 5 - 3.9), 1);
  transform: translate3d(0, calc((1 - clamp(0, calc(var(--p, 1) * 5 - 3.9), 1)) * 1.6rem), 0);
}

/* --- Entrada em cascata dos cards/listas --- */
@keyframes staggerIn { from { opacity: 0; translate: 0 2.4rem; } }
.js .stagger > * {
  animation: staggerIn 1s var(--ease-out) backwards paused;
  animation-delay: calc(var(--i, 0) * 80ms);
}
.js .stagger.is-in > * { animation-play-state: running; }

/* --- Cards: inclinação 3D + holofote que segue o cursor + borda de luz --- */
.spot {
  position: relative;
  isolation: isolate;
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .7s var(--ease-out), background-color .35s, border-color .35s, box-shadow .35s;
}
.spot.is-tilting { transition: transform .15s linear, background-color .35s, border-color .35s, box-shadow .35s; }
.spot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(40rem circle at var(--mx, 50%) var(--my, 50%), rgba(121, 58, 236, .15), transparent 45%);
  opacity: 0;
  transition: opacity .45s;
  pointer-events: none;
}
.spot::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(26rem circle at var(--mx, 50%) var(--my, 50%), rgba(190, 180, 255, .75), transparent 42%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .45s;
  pointer-events: none;
}
.spot:hover::before,
.spot:hover::after { opacity: 1; }
.comparison-card.spot:hover { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-2px); }
.comparison-card-arrow svg { transition: transform .4s var(--ease-out); }
.comparison-card:hover .comparison-card-arrow svg { transform: translateX(2px); }
.realtime-card-icon svg { transition: transform .6s var(--ease-out); }
.realtime-card:hover .realtime-card-icon svg { transform: translateY(-2px) scale(1.12); }

/* --- Divisórias de seção: linha de luz que se dissolve nas bordas --- */
.feature-section + .feature-section,
.stats-section,
.feature-matrix-section,
.offline-section,
.ai-section,
.notifications-section,
.periodization-section,
.site-footer {
  border-top-color: transparent;
  background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12) 25%, rgba(180, 170, 255, .32) 50%, rgba(255, 255, 255, .12) 75%, transparent);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: top center;
}
.stats-section {
  border-bottom-color: transparent;
  background-image:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, .12) 25%, rgba(180, 170, 255, .32) 50%, rgba(255, 255, 255, .12) 75%, transparent),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, .12) 25%, rgba(180, 170, 255, .32) 50%, rgba(255, 255, 255, .12) 75%, transparent);
  background-size: 100% 1px, 100% 1px;
  background-position: top center, bottom center;
}

/* --- HERO: terreno 3D, chips flutuantes, saída em parallax --- */
.hero-terrain {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 18%, rgba(0, 0, 0, .55) 40%, #000 62%, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 18%, rgba(0, 0, 0, .55) 40%, #000 62%, #000 80%, transparent 100%);
  opacity: calc(1 - var(--p, 0) * 1.25);
}
.hero-content { position: relative; z-index: 2; }
.js .hero-content {
  transform: translate3d(0, calc(var(--p, 0) * -10rem), 0) scale(calc(1 - var(--p, 0) * .06));
  opacity: calc(1 - var(--p, 0) * 1.5);
}
.hero-chips { display: none; }
@media (min-width: 1280px) and (min-height: 700px) {
  .hero-chips { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
}
.hero-chip {
  position: absolute;
  padding: 1.4rem 1.6rem;
  border-radius: 1.8rem;
  scale: .78;   /* menores: o topo respira e o título continua protagonista */
  color: var(--text-primary);
  background: linear-gradient(160deg, rgba(40, 34, 82, .62), rgba(16, 13, 36, .55));
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 24px 60px -20px rgba(0, 0, 0, .85),
    0 0 46px -12px rgba(81, 69, 229, .4);
  translate:
    calc(var(--hx, 0) * var(--d) * 1.8rem)
    calc(var(--hy, 0) * var(--d) * 1.2rem + var(--p, 0) * var(--d) * -18rem);
  opacity: calc(1 - var(--p, 0) * 2.2);
  animation:
    chipIn 1.3s var(--ease-out) var(--delay, 1.1s) backwards,
    chipFloat var(--float, 7s) ease-in-out calc(var(--delay, 1.1s) + 1.3s) infinite alternate;
}
@keyframes chipIn { from { opacity: 0; scale: .66; filter: blur(10px); } }
@keyframes chipFloat { to { transform: translate3d(0, -1.2rem, 0); } }
.hero-chip--live { left: max(2.4rem, calc(50% - 67rem)); top: 21%; width: 23rem; --delay: 1.1s; transform-origin: 0 0; }
.hero-chip--volume { right: max(2.4rem, calc(50% - 67rem)); top: 19%; width: 17rem; --delay: 1.3s; --float: 8s; transform-origin: 100% 0; }
.hero-chip--gps { left: max(4rem, calc(50% - 63rem)); bottom: 25%; --delay: 1.5s; --float: 9s; transform-origin: 0 100%; }
.hero-chip--kcal { right: max(4rem, calc(50% - 63rem)); bottom: 28%; --delay: 1.7s; --float: 7.5s; transform-origin: 100% 100%; }
.hero-chip-row { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.pulse-dot { width: .8rem; height: .8rem; border-radius: 50%; background: #4ade80; animation: pulseDot 1.8s ease-out infinite; }
.hero-chip-eyebrow { font-size: 1.1rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #4ade80; }
.hero-chip-title { margin-bottom: 1rem; font-size: 1.4rem; font-weight: 500; }
.hero-chip-set {
  display: grid;
  grid-template-columns: 3rem 1fr 2.4rem;
  align-items: center;
  gap: .8rem;
  padding: .7rem 1rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, .05);
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
}
.hero-chip-set + .hero-chip-set { margin-top: .6rem; }
.hero-chip-set.is-next { opacity: .45; }
.hero-chip-tag { color: var(--text-muted); font-weight: 500; }
.hero-chip-check { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: .7rem; background: rgba(255, 255, 255, .08); }
.hero-chip-set:not(.is-next) .hero-chip-check { background: linear-gradient(135deg, var(--accent-start), var(--accent-end)); box-shadow: 0 0 16px rgba(121, 58, 236, .6); }
.hero-chip-check svg { width: 1.4rem; height: 1.4rem; color: #fff; }
.hero-chip-metric { font-size: 2.8rem; font-weight: 300; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hero-chip-metric small { font-size: 1.3rem; font-weight: 400; letter-spacing: 0; color: var(--text-secondary); }
.hero-chip-label { margin-top: .5rem; font-size: 1.2rem; color: var(--text-muted); }
.hero-chip-bars { display: flex; align-items: flex-end; gap: .5rem; height: 4rem; margin-top: 1.2rem; }
.hero-chip-bars i {
  flex: 1;
  height: calc(var(--h) * 100%);
  border-radius: .4rem;
  background: linear-gradient(180deg, #9a8cff, var(--accent-start));
  transform-origin: 50% 100%;
  animation: barGrow 1.2s var(--ease-out) 1.8s backwards, barBreath 2.6s ease-in-out 3s infinite alternate;
}
.hero-chip-bars i:nth-child(2) { animation-delay: 1.88s, 3.2s; }
.hero-chip-bars i:nth-child(3) { animation-delay: 1.96s, 3.4s; }
.hero-chip-bars i:nth-child(4) { animation-delay: 2.04s, 3.1s; }
.hero-chip-bars i:nth-child(5) { animation-delay: 2.12s, 3.5s; }
.hero-chip-bars i:nth-child(6) { animation-delay: 2.2s, 3.3s; }
.hero-chip-bars i:nth-child(7) { animation-delay: 2.28s, 3.6s; }
@keyframes barGrow { from { transform: scaleY(0); } }
@keyframes barBreath { to { transform: scaleY(.72); } }
.hero-chip--gps,
.hero-chip--kcal { display: flex; align-items: center; gap: 1.4rem; }
.hero-chip-route { width: 9rem; height: 4.8rem; overflow: visible; }
.hero-chip-route path { stroke-dasharray: 300; stroke-dashoffset: 300; animation: routeDraw 2.6s var(--ease-out) 1.9s forwards; }
.hero-chip-route circle { animation: routeHead 1.6s ease-in-out infinite; transform-origin: 114px 8px; }
@keyframes routeDraw { to { stroke-dashoffset: 0; } }
@keyframes routeHead { 50% { transform: scale(1.5); opacity: .6; } }
.hero-chip-ring { width: 5.2rem; height: 5.2rem; transform: rotate(-90deg); }
.hero-chip-ring-val { stroke-dasharray: 100; stroke-dashoffset: 100; animation: ringFill 2s var(--ease-out) 2.1s forwards; }
@keyframes ringFill { to { stroke-dashoffset: 68; } }

/* --- Vídeo mosaico: a "tela" se levanta em 3D conforme o scroll --- */
.video-showcase { perspective: 1600px; perspective-origin: 50% 0%; }
.js .video-showcase-inner {
  transform-origin: 50% 0%;
  transform:
    translate3d(0, calc((1 - var(--p, 1)) * 3rem), 0)
    rotateX(calc((1 - var(--p, 1)) * 30deg))
    scale(calc(.82 + var(--p, 1) * .18));
  will-change: transform;
}
.js .video-showcase-glow {
  opacity: calc(.3 + var(--p, 1) * .45);
  transform: translate(-50%, -50%) scale(calc(.8 + var(--p, 1) * .3));
}

/* --- Card de vídeo do app: entrada 3D + inclinação no hover + aro de luz --- */
.video-card-section { perspective: 2000px; }
.js .video-card-section .video-card-container {
  transform-origin: 50% 100%;
  transform: rotateX(calc((1 - var(--p, 1)) * 20deg)) scale(calc(.9 + var(--p, 1) * .1));
  opacity: calc(.35 + var(--p, 1) * .65);
}
.video-card {
  transform: perspective(1600px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .8s var(--ease-out), box-shadow .6s;
  box-shadow: 0 40px 120px -40px rgba(81, 69, 229, .5), inset 0 0 0 1px hsla(0, 0%, 100%, .05);
}
.video-card.is-tilting { transition: transform .15s linear, box-shadow .6s; }
.video-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(50rem circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .08), transparent 45%);
  opacity: 0;
  transition: opacity .5s;
  pointer-events: none;
}
.video-card:hover::before { opacity: 1; }
.video-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--angle), transparent 0deg, rgba(180, 170, 255, .8) 50deg, transparent 110deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: spinAngle 8s linear infinite;
  pointer-events: none;
}

/* --- Imagens de produto: "deitadas" que se levantam com o scroll --- */
.media-3d { perspective: 2000px; }
.js .media-3d > img {
  transform-origin: 50% 100%;
  transform:
    translate3d(0, calc((1 - var(--p, 1)) * 4rem), 0)
    rotateX(calc((1 - var(--p, 1)) * 24deg))
    scale(calc(.9 + var(--p, 1) * .1));
  will-change: transform;
}

/* --- Prescrição: faixa de métodos em movimento contínuo --- */
.method-marquee {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  max-width: 110rem;
  margin: -2rem auto 5.6rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.method-track {
  display: flex;
  gap: 1.2rem;
  width: max-content;
  animation: marquee 42s linear infinite;
}
.method-track--rev { animation-direction: reverse; animation-duration: 52s; }
.method-marquee:hover .method-track { animation-play-state: paused; }
.method-track span {
  padding: 1rem 2rem;
  border-radius: 10rem;
  font-size: 1.4rem;
  font-weight: 400;
  white-space: nowrap;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: color .3s, border-color .3s, background-color .3s;
}
.method-track span:nth-child(4n+1) { color: #d4ceff; border-color: rgba(121, 58, 236, .35); background: rgba(81, 69, 229, .09); }
.method-track span:hover { color: #fff; border-color: rgba(180, 170, 255, .5); }
@keyframes marquee { to { transform: translate3d(calc(-50% - .6rem), 0, 0); } }

/* --- Conexão: pulso de dados atravessando os cards --- */
@media (min-width: 1024px) {
  .feature-grid--linked { position: relative; container-type: inline-size; }
  .feature-grid--linked::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 4%;
    right: 4%;
    z-index: -1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(121, 58, 236, .55), rgba(81, 69, 229, .55), transparent);
  }
  .feature-grid--linked::after {
    content: "";
    position: absolute;
    top: calc(50% - 3px);
    left: 4%;
    z-index: -1;
    width: 8rem;
    height: 6px;
    border-radius: 6px;
    background: radial-gradient(closest-side, #fff, rgba(180, 170, 255, .8) 40%, transparent);
    filter: blur(1px);
    animation: linkPulse 3.6s var(--ease-io) infinite;
  }
}
@keyframes linkPulse {
  0% { translate: 0 0; opacity: 0; }
  12%, 88% { opacity: 1; }
  100% { translate: calc(92cqw - 8rem) 0; opacity: 0; }
}

/* --- Tempo real: telas convergem em 3D + feixe de sincronização --- */
.realtime-screenshots { position: relative; }
.realtime-screenshot-item { position: relative; }
@media (min-width: 768px) {
  .realtime-screenshots { perspective: 2000px; }
  .js .realtime-screenshot-item--desktop {
    transform-origin: 100% 50%;
    transform: translate3d(calc((1 - var(--p, 1)) * -8rem), 0, 0) rotateY(calc((1 - var(--p, 1)) * 18deg));
    opacity: calc(.2 + var(--p, 1) * .8);
  }
  .js .realtime-screenshot-item--mobile {
    transform-origin: 0% 50%;
    transform: translate3d(calc((1 - var(--p, 1)) * 8rem), 0, 0) rotateY(calc((1 - var(--p, 1)) * -24deg));
    opacity: calc(.2 + var(--p, 1) * .8);
  }
}
.live-badge {
  position: absolute;
  top: -1.3rem;
  left: 2.4rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem 1.2rem;
  border-radius: 10rem;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(180deg, rgba(34, 30, 64, .95), rgba(14, 12, 28, .95));
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 10px 30px -8px rgba(0, 0, 0, .7);
}
.live-badge i { width: .7rem; height: .7rem; border-radius: 50%; background: #4ade80; animation: pulseDot 1.8s ease-out infinite; }
.rt-beam { display: none; }
@media (min-width: 768px) {
  .rt-beam {
    display: block;
    position: absolute;
    top: 44%;
    left: 64%;
    z-index: 3;
    width: 22%;
    height: 2px;
    container-type: inline-size;
    background: linear-gradient(90deg, transparent, rgba(180, 170, 255, .45), transparent);
    opacity: clamp(0, calc(var(--p, 1) * 2 - 1), 1);
    pointer-events: none;
  }
  .rt-beam span {
    position: absolute;
    top: 50%;
    left: 0;
    width: 1rem;
    height: 1rem;
    margin: -.5rem 0 0 -.5rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 10px 3px rgba(180, 170, 255, .9), 0 0 30px 8px rgba(121, 58, 236, .6);
    animation: beamTravel 2.4s var(--ease-io) infinite;
  }
  .rt-beam span:nth-child(2) { animation-delay: .8s; }
  .rt-beam span:nth-child(3) { animation-delay: 1.6s; }
  .rt-beam::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -1.4rem;
    width: 2.8rem;
    height: 2.8rem;
    margin-top: -1.4rem;
    border-radius: 50%;
    border: 1px solid rgba(180, 170, 255, .8);
    animation: beamRipple 2.4s ease-out .9s infinite;
  }
}
@keyframes beamTravel {
  0% { translate: 0 0; opacity: 0; scale: .4; }
  15% { opacity: 1; scale: 1; }
  85% { opacity: 1; }
  100% { translate: 100cqw 0; opacity: 0; scale: .4; }
}
@keyframes beamRipple {
  0% { transform: scale(.3); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* --- Instagram: par de telas abre como um livro --- */
.ig-example-pair { perspective: 1600px; }
.js .ig-example-pair img { transition: transform .6s var(--ease-out), box-shadow .6s; }
.js .ig-example-pair img:first-child {
  transform-origin: 100% 50%;
  transform: translate3d(calc((1 - var(--p, 1)) * 5rem), 0, 0) rotateY(calc(8deg + (1 - var(--p, 1)) * 30deg)) rotate(calc(-1.5deg - (1 - var(--p, 1)) * 4deg));
}
.js .ig-example-pair img:last-child {
  transform-origin: 0% 50%;
  transform: translate3d(calc((1 - var(--p, 1)) * -5rem), 0, 0) rotateY(calc(-8deg - (1 - var(--p, 1)) * 30deg)) rotate(calc(1.5deg + (1 - var(--p, 1)) * 4deg));
}
.js .ig-example-pair:hover img { transform: none; box-shadow: 0 30px 80px rgba(81, 69, 229, .35); }
.meta-partner-badge svg { animation: badgeGlow 2.6s ease-in-out infinite; }
@keyframes badgeGlow { 50% { filter: drop-shadow(0 0 6px rgba(180, 170, 255, .9)); } }

/* --- Periodização: moldura do vídeo sobe em 3D antes de fixar --- */
.js #periodizationWrapper .periodization-video-frame,
.js #periodizationWrapperMobile .periodization-video-frame-mobile {
  transform: perspective(1800px) rotateX(calc((1 - var(--p, 1)) * 18deg)) scale(calc(.84 + var(--p, 1) * .16));
  opacity: calc(.25 + var(--p, 1) * .75);
}
.periodization-sticky::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 70%;
  height: 60%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(81, 69, 229, .22), rgba(121, 58, 236, .08) 45%, transparent 70%);
  filter: blur(60px);
  animation: glowBreath 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes glowBreath { 50% { opacity: .55; } }

/* --- Offline: status de conexão que cai e volta --- */
.offline-compare { position: relative; }
.offline-badge::before { animation: pulseDot 1.8s ease-out infinite; }
.net-status {
  position: absolute;
  top: 2.2rem;
  right: 2.2rem;
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 1rem;
  color: #4ade80;
  background: rgba(74, 222, 128, .08);
  box-shadow: inset 0 0 0 1px rgba(74, 222, 128, .25);
  animation: netBox 6s ease-in-out infinite;
}
.net-status svg { width: 2rem; height: 2rem; overflow: visible; }
.net-slash { stroke-dasharray: 1; stroke-dashoffset: 1; animation: netSlash 6s ease-in-out infinite; }
.net-arc { animation: netArc 6s ease-in-out infinite; }
.net-arc-2 { animation-delay: .12s; }
.net-arc-3 { animation-delay: .24s; }
@keyframes netBox {
  0%, 26%, 74%, 100% { color: #4ade80; background-color: rgba(74, 222, 128, .08); box-shadow: inset 0 0 0 1px rgba(74, 222, 128, .25); }
  36%, 62% { color: rgba(255, 255, 255, .6); background-color: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
}
@keyframes netSlash {
  0%, 26% { stroke-dashoffset: 1; }
  36%, 62% { stroke-dashoffset: 0; }
  72%, 100% { stroke-dashoffset: -1; }
}
@keyframes netArc {
  0%, 26% { opacity: 1; }
  36%, 64% { opacity: .3; }
  74%, 100% { opacity: 1; }
}

/* --- IA: núcleo + órbita de arquivos sendo importados --- */
.ai-orbit {
  position: relative;
  height: 28rem;
  max-width: 70rem;
  margin: -2rem auto 4rem;
}
.ai-orbit-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(180, 170, 255, .16);
  transform: translate(-50%, -50%) rotateX(74deg);
  pointer-events: none;
}
.ai-orbit-ring--outer { width: min(46rem, 88vw); box-shadow: inset 0 0 40px rgba(121, 58, 236, .14); }
.ai-orbit-ring--inner { width: min(30rem, 60vw); border-style: dashed; border-color: rgba(180, 170, 255, .28); animation: ringSpin 26s linear infinite; }
@keyframes ringSpin { to { transform: translate(-50%, -50%) rotateX(74deg) rotate(360deg); } }
.ai-core {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 10rem;
  height: 10rem;
  margin: -5rem 0 0 -5rem;
  border-radius: 50%;
  color: #fff;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 32%),
    radial-gradient(circle at 50% 50%, #7a6cf5 0%, #5145e5 38%, #3a22a8 68%, #160f3d 100%);
  box-shadow:
    0 0 50px rgba(121, 58, 236, .6),
    0 0 120px rgba(81, 69, 229, .35),
    inset 0 -10px 30px rgba(0, 0, 0, .35),
    inset 0 0 0 1px rgba(255, 255, 255, .2);
  transition: box-shadow .4s, scale .4s var(--ease-out);
}
.ai-core.flash {
  scale: 1.08;
  box-shadow:
    0 0 70px rgba(180, 170, 255, .9),
    0 0 160px rgba(121, 58, 236, .6),
    inset 0 -10px 30px rgba(0, 0, 0, .25),
    inset 0 0 0 1px rgba(255, 255, 255, .35);
}
.ai-core svg { width: 3.6rem; height: 3.6rem; filter: drop-shadow(0 0 8px rgba(255, 255, 255, .7)); }
.ai-core::before {
  content: "";
  position: absolute;
  inset: -1.4rem;
  border-radius: 50%;
  background: conic-gradient(transparent 0deg, rgba(180, 170, 255, .85) 70deg, transparent 140deg, transparent 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent 86%, #000 88%, #000 94%, transparent 96%);
  mask: radial-gradient(closest-side, transparent 86%, #000 88%, #000 94%, transparent 96%);
  animation: spinRotate 3.5s linear infinite;
}
.ai-file {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .8rem 1.3rem;
  border-radius: 1.2rem;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: #fff;
  background: linear-gradient(160deg, rgba(44, 38, 88, .85), rgba(18, 15, 38, .85));
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 14px 30px -10px rgba(0, 0, 0, .7);
  translate: -50% -50%;
  will-change: transform, opacity;
}
.ai-file svg { width: 1.6rem; height: 1.6rem; color: var(--accent-soft); }

/* --- Tabela comparativa: marcas surgem com "pop" linha a linha --- */
.js .feature-matrix tbody .matrix-yes,
.js .feature-matrix tbody .matrix-no,
.js .feature-matrix tbody .matrix-unknown {
  display: inline-block;
  opacity: 0;
  transform: scale(.2);
  transition: opacity .5s var(--ease-out), transform .7s cubic-bezier(.34, 1.56, .64, 1);
  transition-delay: calc(var(--i, 0) * 90ms + 300ms);
}
.js .feature-matrix tbody.is-in .matrix-yes,
.js .feature-matrix tbody.is-in .matrix-no,
.js .feature-matrix tbody.is-in .matrix-unknown { opacity: 1; transform: none; }
.feature-matrix .matrix-yes { text-shadow: 0 0 12px rgba(74, 222, 128, .55); }
.feature-matrix tbody tr { transition: background-color .3s; }
.feature-matrix tbody tr:hover { background-color: rgba(255, 255, 255, .025); }
.billing-table tbody tr { transition: background-color .3s; }
.billing-table tbody tr:hover td { background-color: rgba(255, 255, 255, .02); }

/* --- Números: contagem animada --- */
.stat-number { font-variant-numeric: tabular-nums; filter: drop-shadow(0 0 24px rgba(121, 58, 236, .35)); }

/* --- Preços: card em destaque com aro de luz girando --- */
@media (min-width: 768px) {
  .pricing-card.featured {
    border: 1px solid transparent;
    background:
      linear-gradient(180deg, rgba(20, 17, 38, .94), rgba(9, 9, 14, .96)) padding-box,
      conic-gradient(from var(--angle), rgba(255, 255, 255, .08) 0deg, rgba(81, 69, 229, .9) 60deg, rgba(180, 170, 255, .9) 100deg, rgba(121, 58, 236, .9) 140deg, rgba(255, 255, 255, .08) 200deg, rgba(255, 255, 255, .08) 360deg) border-box;
    box-shadow: 0 40px 100px -40px rgba(81, 69, 229, .6), inset 0 1px 0 rgba(255, 255, 255, .12);
    animation: spinAngle 7s linear infinite;
  }
}
/* Linhas de recurso ainda sem texto não exibem o ✓ solto */
.pricing-feature:empty::before { visibility: hidden; }

/* --- CTA final: halo girando atrás do título --- */
.cta-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: min(76rem, 120vw);
  aspect-ratio: 1;
  translate: -50% -50%;
  scale: calc(.7 + var(--p, 1) * .3);
  border-radius: 50%;
  background: conic-gradient(transparent 0deg, rgba(81, 69, 229, .6) 90deg, rgba(121, 58, 236, .6) 180deg, rgba(180, 170, 255, .3) 230deg, transparent 300deg);
  -webkit-mask: radial-gradient(closest-side, transparent 62%, #000 65%, #000 69%, transparent 73%);
  mask: radial-gradient(closest-side, transparent 62%, #000 65%, #000 69%, transparent 73%);
  filter: blur(22px);
  opacity: calc(.15 + var(--p, 1) * .55);
  animation: spinRotate 14s linear infinite;
  pointer-events: none;
}

/* --- Rodapé --- */
.footer-col a { transition: color .3s, translate .4s var(--ease-out); }
.footer-col a:hover { translate: .4rem 0; }

/* --- APP: palco 3D fixo enquanto o scroll gira os celulares --- */
.app-section { --phone-w: 22rem; }
@media (min-width: 768px) { .app-section { --phone-w: 25rem; } }
.app-phone { width: var(--phone-w); }
.app-phone-body { border-radius: calc(var(--phone-w) * .15); }
.app-phone-screen { border-radius: calc(var(--phone-w) * .15 - .85rem); }
.app-progress { display: none; }
.app-section.fade-up { opacity: 1; transform: none; filter: none; }
.app-section.app-3d { padding: 4rem 0 8rem; }
.app-section.app-3d::before { display: none; }
.app-section.app-3d .app-pin {
  position: relative;
  height: calc(100vh + (var(--app-n, 9) - 1 + 1.3) * var(--app-step, 34vh));
}
.app-section.app-3d .app-sticky {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  height: 100svh;
  padding-top: 6rem;
  overflow: clip;
  isolation: isolate;
  --phone-w: clamp(16rem, calc((100svh - 42rem) * .54), 28rem);
}
.app-section.app-3d .app-sticky::before {
  content: "";
  position: absolute;
  top: 58%;
  left: 50%;
  z-index: -1;
  width: min(90rem, 120vw);
  height: 60%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(ellipse at 40% 50%, rgba(81, 69, 229, .3) 0%, transparent 55%),
    radial-gradient(ellipse at 60% 50%, rgba(121, 58, 236, .2) 0%, transparent 55%);
  filter: blur(80px);
  pointer-events: none;
}
.app-section.app-3d .app-section-header { margin-bottom: 3.2rem; }
.app-section.app-3d .app-stage {
  position: relative;
  height: calc((var(--phone-w) - 1.7rem) * 1.9103 + 1.7rem + 5rem);
  perspective: 2200px;
  perspective-origin: 50% 52%;
}
.app-section.app-3d .app-stage::after {
  content: "";
  position: absolute;
  bottom: 3.6rem;
  left: 50%;
  z-index: -1;
  width: calc(var(--phone-w) * 1.8);
  height: 5rem;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(81, 69, 229, .5), transparent);
  filter: blur(16px);
}
.app-section.app-3d .app-carousel {
  position: absolute;
  inset: 0;
  display: block;
  padding: 0;
  overflow: visible;
  transform-style: preserve-3d;
}
.app-section.app-3d .app-phone {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: calc(var(--phone-w) / -2);
  cursor: pointer;
  will-change: auto;
}
.app-section.app-3d .app-phone-caption {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 34rem;
  margin: 1.6rem 0 0 -17rem;
  opacity: var(--cap, 0);
}
.app-section.app-3d .app-progress { display: flex; justify-content: center; gap: .6rem; margin-top: 1.6rem; }
.app-progress i {
  width: .6rem;
  height: .6rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, .18);
  transition: width .5s var(--ease-out), background-color .4s;
}
.app-progress i.on { width: 2.8rem; background: linear-gradient(90deg, var(--accent-start), var(--accent-end)); }
.app-section.app-3d .app-store-buttons { margin-top: 2rem; }
@media (max-width: 767px) {
  .app-section.app-3d { --app-step: 30vh; }
  .app-section.app-3d .app-sticky { padding-top: 5.6rem; --phone-w: clamp(16rem, calc((100svh - 35rem) * .55), 25rem); }
  .app-section.app-3d .app-section-header { margin-bottom: 1.6rem; }
  .app-section.app-3d .app-section-header .feature-subtitle { font-size: 1.5rem; line-height: 2.2rem; margin-top: 1.2rem; }
  .app-section.app-3d .app-phone-caption { margin-top: 1rem; }
  .app-section.app-3d .app-progress { margin-top: .8rem; }
}
/* Desktop: texto à esquerda, palco grande à direita — aparelhos bem maiores */
@media (min-width: 1024px) {
  .app-section.app-3d .app-sticky {
    display: grid;
    grid-template-columns: minmax(38rem, .95fr) 1.6fr;
    grid-template-rows: 1fr auto;
    align-items: center;
    column-gap: 2rem;
    padding: 7rem max(var(--gutter-outer), calc(50% - 74rem)) 2.4rem;
    --phone-w: clamp(22rem, calc((100svh - 23rem) * .48), 38rem);
  }
  .app-section.app-3d .app-section-header { grid-column: 1; grid-row: 1 / 3; margin: 0; padding: 0; text-align: left; }
  .app-section.app-3d .app-section-header .feature-subtitle { margin-left: 0; }
  .app-section.app-3d .app-stage { grid-column: 2; grid-row: 1; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 94%, transparent 100%); }
  .app-section.app-3d .app-progress { grid-column: 2; grid-row: 2; margin-top: .8rem; }
  .app-section.app-3d .app-phone-caption { font-size: 1.7rem; }
}


/* --- FLYOVER 3D: maquete de Florianópolis (Three.js) --- */
.flyover-section { position: relative; }
.flyover-pin { position: relative; height: 520vh; }
.flyover-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: clip;
  isolation: isolate;
  background:
    radial-gradient(ellipse 80% 60% at 50% 35%, rgba(121, 58, 236, .22), transparent 70%),
    linear-gradient(180deg, #050310 0%, #0e0b1f 55%, #000 100%);
}
.flyover-map { position: absolute; inset: 0; z-index: 0; }
.flyover-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .5;
  transform: scale(calc(1.15 - var(--p, 0) * .15));
  transition: opacity 1s;
}
.flyover-map.is-3d .flyover-poster { opacity: 0; }
.flyover-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity 1.2s var(--ease-out); }
.flyover-map.is-3d .flyover-canvas { opacity: 1; }
.flyover-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 16%, rgba(0, 0, 0, 0) 80%, #000 100%),
    linear-gradient(90deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, 0) 45%);
}
.flyover-copy {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: max(var(--gutter-outer), calc(50% - 64rem));
  max-width: 46rem;
  transform: translateY(-50%);
  text-align: left;
  opacity: calc(1 - clamp(0, calc((var(--p, 0) - .1) * 7), 1) + clamp(0, calc((var(--p, 0) - .9) * 10), 1));
}
.flyover-copy .feature-subtitle { margin-left: 0; }
.flyover-hud {
  position: absolute;
  z-index: 2;
  right: max(var(--gutter-outer), calc(50% - 64rem));
  bottom: 6rem;
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 1.4rem 3.2rem;
  padding: 1.8rem 2.6rem 2rem;
  border-radius: 2.2rem;
  background: linear-gradient(160deg, rgba(40, 34, 82, .55), rgba(12, 10, 26, .55));
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 30px 80px -30px rgba(0, 0, 0, .9);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  text-align: center;
}
.flyover-hud b { display: block; font-size: 2.6rem; font-weight: 400; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.flyover-hud span { font-size: 1.2rem; color: var(--text-muted); }
.flyover-bar { grid-column: 1 / -1; display: block; height: 3px; margin-top: 1.2rem; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.flyover-bar i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #2f7bff, var(--accent-end)); }
.flyover-label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  padding: .5rem 1.1rem;
  border-radius: 10rem;
  font-size: 1.2rem;
  font-weight: 500;
  white-space: nowrap;
  color: #fff;
  background: rgba(14, 11, 31, .7);
  border: 1px solid rgba(255, 255, 255, .16);
  pointer-events: none;
  transition: opacity .4s;
  will-change: transform;
}
.flyover-label.is-start { border-color: rgba(34, 197, 94, .6); }
.flyover-label.is-end { border-color: rgba(239, 68, 68, .6); }
.flyover-label.is-water { background: none; border: 0; color: rgba(190, 210, 255, .65); font-style: italic; letter-spacing: .08em; }
@media (max-width: 767px) {
  .flyover-pin { height: 460vh; }
  .flyover-copy { top: 9rem; left: var(--gutter-outer); right: var(--gutter-outer); transform: none; text-align: center; max-width: none; }
  .flyover-copy .feature-subtitle { margin-left: auto; }
  .flyover-hud { left: var(--gutter-outer); right: var(--gutter-outer); bottom: 3.2rem; gap: .4rem 1.6rem; padding: 1.4rem 1.6rem 1.6rem; }
  .flyover-hud b { font-size: 2rem; }
  .flyover-shade { background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 30%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 78%, #000 100%); }
}


/* --- PERIODIZAÇÃO 3D: maquete em camadas com câmera de "filme" --- */
.pz-pin { position: relative; height: 640vh; }
.pz-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: clip;
  isolation: isolate;
  perspective: 1400px;
  perspective-origin: 50% 42%;
}
.pz-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 70% 55% at 50% 55%, rgba(81, 69, 229, .22), transparent 70%);
}
.pz-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pz-camera { position: absolute; left: 50%; top: 56%; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }
.pz-world {
  position: absolute;
  left: 0;
  top: 0;
  width: 2400px;
  height: 1000px;
  transform-style: preserve-3d;
  border-radius: 48px;
  background:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(160deg, #15122b, #0a0916 70%);
  box-shadow: inset 0 0 0 1px rgba(180, 170, 255, .18), 0 0 120px rgba(81, 69, 229, .35);
  font-family: "Inter", sans-serif;
  color: #fff;
}
.pz-world * { box-sizing: border-box; }
.pz-edge { position: absolute; left: 48px; top: 100%; width: calc(100% - 96px); height: 40px; transform-origin: top; transform: rotateX(90deg); background: linear-gradient(180deg, #221c45, #0b0918); border-radius: 0 0 30px 30px; }
.pz-flat { position: absolute; }
.pz-months { left: 80px; top: 410px; width: 2240px; display: flex; justify-content: space-between; font-size: 16px; color: rgba(255, 255, 255, .5); }
.pz-cub { position: absolute; transform-style: preserve-3d; }
.pz-stack-wrap { position: absolute; transform-style: preserve-3d; }
.pz-stack { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateZ(var(--lift, 0px)); }
.pz-lay { position: absolute; display: block; background: linear-gradient(rgba(0, 0, 0, var(--sh)), rgba(0, 0, 0, var(--sh))), var(--c); opacity: var(--dim, 1); backface-visibility: hidden; }
.pz-stack > .pz-top { position: absolute; display: block; opacity: var(--dim, 1); }
.pz-shadow { position: absolute; inset: 6px; display: block; border-radius: 30px; background: rgba(2, 1, 10, .75); filter: blur(calc(6px + var(--lift, 0px) * .35)); transform: translateZ(.5px) scale(calc(1 - var(--lift, 0px) / 900px)); opacity: var(--dim, 1); }
.pz-cub > i { position: absolute; display: block; opacity: var(--dim, 1); transition: opacity .3s; }
.pz-top { inset: 0; transform: translateZ(var(--h)); border-radius: 30px; background: var(--c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(255, 255, 255, .12); }
/* laterais cheias: vão de canto a canto e arredondam onde encontram o topo (raio 30) — nada de "tábua" solta embaixo */
.pz-front { left: 0; top: 100%; width: 100%; height: var(--h); transform-origin: top; transform: rotateX(90deg); background: linear-gradient(90deg, rgba(0, 0, 0, .45), transparent 7%, transparent 93%, rgba(0, 0, 0, .45)), linear-gradient(0deg, rgba(255, 255, 255, .16), transparent 30%), var(--c); filter: brightness(.55); border-radius: 0 0 30px 30px / 0 0 min(var(--h), 24px) min(var(--h), 24px); }
.pz-side, .pz-sidel { left: 100%; top: 0; width: var(--h); height: 100%; transform-origin: left; transform: rotateY(-90deg); background: linear-gradient(180deg, rgba(0, 0, 0, .45), transparent 9%, transparent 91%, rgba(0, 0, 0, .45)), var(--c); filter: brightness(.4); border-radius: 0 30px 30px 0 / 0 30px 30px 0; }
.pz-sidel { left: 0; filter: brightness(.48); }
.pz-label { position: absolute; left: 30px; top: 22px; opacity: var(--dim, 1); transform: translateZ(calc(var(--h) + .5px)); color: var(--ink, #fff); pointer-events: none; }
.pz-label b { display: block; font-size: 24px; font-weight: 600; }
.pz-label span { font-size: 15px; opacity: .75; }
.pz-sub .pz-label b { font-size: 18px; }
.pz-sub .pz-label span { font-size: 13px; }
.pz-rig { position: absolute; transform-style: preserve-3d; pointer-events: none; }
/* cartão de vidro: fica em pé "dentro" do bloco e sobe conforme o zoom (como o donut), com espessura própria */
.pz-glass {
  position: absolute;
  left: 22px;
  bottom: 262px;
  transform-style: preserve-3d;
  transform-origin: bottom center;
  transform: rotateX(-90deg);
  --rise: calc(1 - var(--f, 0));
}
.pz-glass > i { position: absolute; display: block; pointer-events: none; opacity: calc(var(--f, 0) * 4); background: linear-gradient(90deg, rgba(255, 255, 255, .5), rgba(180, 170, 255, .28) 30%, rgba(121, 58, 236, .35) 70%, rgba(255, 255, 255, .45)); }
.pz-panel {
  position: relative;
  padding: 22px 26px;
  transform: translateY(calc(var(--rise, 0) * 100%));
  clip-path: inset(0 0 calc(var(--rise, 0) * 100%) 0 round 30px);
  opacity: calc(var(--f, 0) * 3);
  border-radius: 30px;
  /* liquid glass: vidro claro com refração simulada (gradiente + reflexo interno) */
  background:
    radial-gradient(120% 80% at 18% 0%, rgba(255, 255, 255, .22), transparent 55%),
    radial-gradient(90% 70% at 100% 100%, rgba(121, 58, 236, .28), transparent 60%),
    linear-gradient(160deg, rgba(52, 45, 102, .93), rgba(16, 13, 36, .96));
  box-shadow:
    inset 1.5px 1.5px 0 rgba(255, 255, 255, .45),
    inset -1px -1px 0 rgba(255, 255, 255, .22),
    inset 0 0 26px rgba(255, 255, 255, .06),
    0 26px 60px -20px rgba(0, 0, 0, .7),
    0 0 50px rgba(121, 58, 236, .35);
  font-size: 14px;
  line-height: 1.55;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
/* borda especular: forte no canto sup. esquerdo e inf. direito, some nos outros dois */
.pz-panel::before, .pz-kcal::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .25) 22%, rgba(255, 255, 255, .04) 45%, rgba(255, 255, 255, .04) 55%, rgba(255, 255, 255, .3) 78%, rgba(255, 255, 255, .85) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
/* brilho interno que desliza (refração) */
.pz-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .1) 42%, transparent 54%);
  background-size: 260% 100%;
  background-position: calc(100% - var(--f, 0) * 100%) 0;
  pointer-events: none;
}
.pz-panel h4 { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.pz-panel small { display: block; margin: 8px 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .12em; color: rgba(180, 170, 255, .9); }
.pz-panel p { color: rgba(255, 255, 255, .82); }
.pz-bar { --c: linear-gradient(180deg, #9d90ff, #5145e5); }
.pz-bar > .pz-top { position: absolute; inset: 0; display: block; }
.pz-head-wrap { position: absolute; left: 0; top: 0; transform-style: preserve-3d; --lift: 46px; }
.pz-headb > .pz-top { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 60px rgba(121, 58, 236, .5); }
.pz-head-t { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transform: translateZ(30.5px); font-size: 26px; font-weight: 600; letter-spacing: -.01em; color: #fff; pointer-events: none; }
.pz-val { position: absolute; left: 50%; bottom: 0; width: 60px; margin-left: -30px; text-align: center; font-size: 15px; font-weight: 600; transform-origin: bottom center; opacity: var(--f, 0); }
.pz-gname { position: absolute; width: 64px; margin-left: -18px; text-align: center; font-size: 10px; color: rgba(255, 255, 255, .7); opacity: var(--f, 0); }
.pz-ring { position: absolute; border-radius: 50%; opacity: var(--dim, 1); }
.pz-kcal { position: absolute; width: 160px; padding: 10px 12px; text-align: center; transform-origin: bottom center; opacity: var(--f, 0); border-radius: 30px; background: radial-gradient(120% 90% at 20% 0%, rgba(255, 255, 255, .2), transparent 60%), linear-gradient(160deg, rgba(58, 50, 112, .72), rgba(18, 15, 40, .82)); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .4), 0 14px 30px -12px rgba(0, 0, 0, .7); }
.pz-kcal b { display: block; font-size: 24px; font-weight: 600; }
.pz-kcal span { font-size: 12px; color: rgba(255, 255, 255, .75); }
.pz-chart {
  left: 80px; top: 40px; width: 2240px; height: 260px;
  transform-origin: bottom center;
  transform: rotateX(calc(var(--s, 0) * -90deg)) translateZ(1px);
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(36, 30, 74, .7), rgba(14, 12, 30, .55));
  border: 1px solid rgba(180, 170, 255, .2);
}
.pz-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pz-chart .pz-ct { position: absolute; left: 30px; top: 22px; font-size: 18px; font-weight: 600; }
.pz-steps {
  position: absolute;
  left: 50%;
  bottom: 3.2rem;
  display: flex;
  gap: .4rem;
  padding: .5rem;
  transform: translateX(-50%);
  border-radius: 10rem;
  background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  white-space: nowrap;
}
.pz-steps span { padding: .6rem 1.4rem; border-radius: 10rem; font-size: 1.3rem; color: var(--text-muted); transition: background-color .4s, color .4s; }
.pz-steps span.on { color: #fff; background: linear-gradient(135deg, rgba(81, 69, 229, .55), rgba(121, 58, 236, .45)); }
@media (max-width: 767px) {
  .pz-pin { height: 560vh; }
  .pz-steps span { padding: .5rem .9rem; font-size: 1.1rem; }
  .pz-steps span:first-child, .pz-steps span:last-child { display: none; }
}


.flyover-note {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 2.4rem;
  transform: translateX(-50%);
  width: min(56rem, calc(100% - 3.2rem));
  padding: 1.2rem 1.8rem;
  border-radius: 1.6rem;
  font-size: 1.3rem;
  line-height: 1.5;
  text-align: center;
  color: #fff;
  background: rgba(239, 68, 68, .16);
  border: 1px solid rgba(239, 68, 68, .45);
}
.fly-heart { display: inline-block; width: .9rem; height: .9rem; margin-right: .6rem; vertical-align: middle; background: #ff4d6d; clip-path: path('M4.5 8.2 0.7 4.6A2.2 2.2 0 0 1 4.5 1.6 2.2 2.2 0 0 1 8.3 4.6Z'); animation: flyBeat .85s ease-in-out infinite; }
@keyframes flyBeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.35); } 30% { transform: scale(.95); } }
.flyover-hud b small { font-size: 1.2rem; color: var(--text-muted); }

.mz-pin { position: relative; }
.mz-pin.on .video-showcase { position: sticky; top: var(--mz-top, 0px); }
.ui3d-pin { position: relative; height: 620vh; margin: 2rem 0 4rem; }
.ui3d-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; }
.ui3d-stage::before { content: ""; position: absolute; inset: 10% 5%; background: radial-gradient(ellipse at 50% 55%, rgba(81, 69, 229, .2), transparent 65%); pointer-events: none; }
.ui3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ui3d-on .realtime-screenshots, .ui3d-on > .video-card-container, .ui3d-on > .media-3d, .ui3d-on > .ig-example-pair { display: none; }
.feature-section.ui3d-on { opacity: 1; transform: none; filter: none; }
.ui3d-wide { width: 100vw; margin-left: calc(50% - 50vw); }
.video-card-section.ui3d-on { opacity: 1; transform: none; filter: none; perspective: none; padding-left: 0; padding-right: 0; }
.realtime-section.ui3d-on { overflow: visible; overflow-x: clip; opacity: 1; transform: none; filter: none; }
.feature-matrix-section.ui3d-on { overflow: visible; overflow-x: clip; opacity: 1; transform: none; filter: none; }
#cp3dPin { height: 460vh; margin-bottom: 2rem; }
#tr3dPin { height: 1500vh; }
#dt3dPin { height: 1650vh; }
#rt3dPin { height: 1150vh; }
@media (max-width: 767px) { #tr3dPin { height: 1250vh; } #rt3dPin { height: 950vh; } #dt3dPin { height: 1350vh; } }
#ig3dPin { height: 560vh; }
@media (max-width: 767px) { .ui3d-pin { height: 520vh; } }
/* --- MOSAICO 3D do topo: enxame de apps soltos → as telas do Premium Coach se juntam num só painel --- */
.mosaic { position: absolute; inset: 0; container-type: size; overflow: hidden; perspective: var(--mz-persp, 1100px); perspective-origin: 50% 46%; contain: layout paint style; background: radial-gradient(60% 55% at 50% 50%, rgba(81, 69, 229, .12), transparent 70%); }
.mz-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mz-world { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }
.mz-t { position: absolute; left: 0; top: 0; border-radius: calc(var(--k, 1) * 12px); overflow: hidden; will-change: transform, opacity; transform-origin: 50% 50%; }
.mz-t::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .14); pointer-events: none; }
.mz-dim { position: absolute; inset: 0; background: #020205; pointer-events: none; z-index: 1; }
/* telas do app */
.mz-hero { background: #0c0b16; }
.mz-hero img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; opacity: 0; transition: opacity .5s; }
.mz-hero img.ok { opacity: 1; }
.mz-mob { border-radius: calc(var(--k, 1) * 14px); }
/* blocos de outras ferramentas (logos desenhados em SVG, sem requisições) */
.mz-logo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--k, 1) * 6px); background: radial-gradient(120% 90% at 20% 0%, rgba(255, 255, 255, .12), transparent 60%), var(--bg); color: #fff; font-family: "Inter", sans-serif; font-weight: 600; font-size: calc(var(--k, 1) * 17px); letter-spacing: -.01em; white-space: nowrap; }
.mz-logo svg { width: calc(var(--k, 1) * var(--ic, 46px)); height: calc(var(--k, 1) * var(--ic, 46px)); flex: none; }
.mz-logo b { font-weight: 700; }
.mz-logo .big { font-size: 1.3em; }
.mz-logo .wm { font-size: 1.3em; font-weight: 800; font-style: italic; letter-spacing: .04em; color: #fc5200; }
/* barra lateral do app que aparece junto com o painel */
.mz-side { display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: calc(var(--k, 1) * 6px) 0; border-radius: 0; overflow: visible; color: rgba(255, 255, 255, .88); }
.mz-side::after { display: none; }
.mz-side svg { width: calc(var(--k, 1) * 15px); height: calc(var(--k, 1) * 15px); }
/* frases por cima */
.mz-text { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 2; }
.mz-text p { grid-area: 1 / 1; margin: 0; padding: 0 6cqw; max-width: 18em; text-align: center; color: #fff; font-family: "Inter", sans-serif; font-weight: 500; font-size: clamp(2.2rem, 4.2cqw, 6.4rem); line-height: 1.12; letter-spacing: -.025em; text-shadow: 0 4px 10px rgba(0, 0, 0, .65), 0 12px 30px rgba(0, 0, 0, .75), 0 24px 60px rgba(0, 0, 0, .85); opacity: 0; transform: translateY(1.4rem) scale(.97); filter: blur(10px); transition: opacity .9s var(--ease-out, ease), transform 1.2s var(--ease-out, ease), filter .9s var(--ease-out, ease); }
.mz-text p.on { opacity: 1; transform: none; filter: blur(0); }
.mz-text .mz-t2 { font-size: clamp(2.8rem, 5.6cqw, 8.4rem); max-width: 12em; }
@media (max-width: 767px) {
  .video-showcase-inner { aspect-ratio: 1 / 1; }
  .mz-text { inset: 0 5rem; }
  .mz-text p { font-size: clamp(2rem, 6.2vw, 3.2rem); padding: 0 1.6rem; }
  .mz-text .mz-t2 { font-size: clamp(2.6rem, 9vw, 4.4rem); }
}
/* --- Movimento reduzido: tudo estático e legível --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js .hero-title:not(.split) { opacity: 1; animation: none; }
  .fade-up { filter: none; }
  .cursor-glow { display: none; }
}

/* ============ SUBSTITUA OS APPS ============ */
.replace-apps-section {
  width: 100%;
  padding: 6rem 3rem 7rem;
  background: #000;
  text-align: center;
}
.replace-apps-header {
  margin-bottom: 4.8rem;
}
.replace-apps-title {
  font-size: 2.8rem;
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1.25;
  color: var(--text-primary);
}
@media (min-width: 768px) {
  .replace-apps-title { font-size: 3.6rem; }
}
.replace-apps-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  width: 100%;
  max-width: 100%;
}
@media (max-width: 767px) {
  .replace-apps-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.4rem 1.6rem;
    max-width: 36rem;
    margin: 0 auto;
  }
}
.replace-app-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  padding: 2.4rem 1rem;
  border-right: 1px solid rgba(255,255,255,.06);
  transition: background .25s;
}
.replace-app-item:last-child { border-right: none; }
@media (max-width: 767px) {
  .replace-app-item { border-right: none; padding: 1.6rem .8rem; }
}
.replace-app-item:hover {
  background: rgba(81,69,229,.05);
}
.replace-app-logo-wrap {
  width: 6.4rem;
  height: 6.4rem;
  border-radius: 1.6rem;
  overflow: hidden;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.replace-app-logo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: .6rem;
}
.replace-app-name {
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: .01em;
}
.replace-app-what {
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 14rem;
  text-align: center;
}
@media (min-width: 1440px) {
  .replace-apps-section { padding: 7rem 6rem 8rem; }
  .replace-app-logo-wrap { width: 7.2rem; height: 7.2rem; border-radius: 2rem; }
  .replace-apps-title { font-size: 4.2rem; }
}