:root {
  --bg: #020706;
  --surface: #07110f;
  --surface-2: #0a1714;
  --line: rgba(53, 255, 174, 0.18);
  --text: #f6fffb;
  --muted: #90a9a0;
  --green: #00f5a0;
  --green-2: #7dffca;
  --neon-soft: rgba(0, 245, 160, 0.2);
  --neon-glow: rgba(0, 245, 160, 0.42);
  --shadow: 0 28px 90px rgba(0, 0, 0, 0.52);
}

.checkout-terms{display:flex!important;align-items:flex-start;gap:9px;color:#9db4aa!important;font-size:11px!important;line-height:1.5}.checkout-terms input{width:17px!important;height:17px;margin:1px 0 0!important;flex:0 0 auto;accent-color:#00f5a0}.checkout-terms a{color:#73ffc5;text-decoration:underline}.payment-security{margin:12px 0 0!important;color:#789087!important;font-size:10px!important;line-height:1.5}.trial-device-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.dialog-card select{width:100%;margin-top:7px;padding:13px 14px;border:1px solid rgba(96,255,199,.18);border-radius:11px;outline:0;background:#030a08;color:#fff}.dialog-card select:focus{border-color:#00f5a0;box-shadow:0 0 0 3px rgba(0,245,160,.1)}@media(max-width:500px){.trial-device-grid{grid-template-columns:1fr}}

body {
  font-weight: 500;
  background:
    radial-gradient(circle at 8% 18%, rgba(0, 245, 160, 0.08), transparent 24rem),
    radial-gradient(circle at 90% 62%, rgba(0, 164, 255, 0.055), transparent 28rem),
    var(--bg);
}

body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  background-image:
    linear-gradient(rgba(55, 255, 184, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(55, 255, 184, 0.08) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at center, #000 0, transparent 76%);
}

.site-header {
  background: rgba(2, 8, 7, 0.84);
  border-bottom-color: rgba(0, 245, 160, 0.2);
  box-shadow: 0 10px 46px rgba(0, 0, 0, 0.36), 0 1px 0 rgba(0, 245, 160, 0.08);
}

.brand img,
.hero-logo,
.footer-grid img {
  filter: drop-shadow(0 0 14px rgba(0, 245, 160, 0.3));
}

.desktop-nav a,
.nav-actions .btn,
.mobile-nav a {
  font-weight: 800;
}

.desktop-nav a:hover {
  color: var(--green-2);
  text-shadow: 0 0 18px var(--neon-glow);
}

.hero {
  background-image:
    linear-gradient(90deg, rgba(1, 7, 5, 0.99) 0%, rgba(1, 8, 6, 0.92) 34%, rgba(0, 13, 9, 0.42) 67%, rgba(0, 8, 6, 0.12) 100%),
    linear-gradient(0deg, var(--bg) 0%, transparent 36%),
    url('/optimized/hero-entertainment.webp');
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 245, 160, 0.1), transparent 18%),
    radial-gradient(circle at 74% 48%, transparent 20%, rgba(0, 245, 160, 0.08) 66%, transparent 72%);
  mix-blend-mode: screen;
}

.hero h1,
.section-heading h2,
.showcase-heading h2,
.reseller-copy h2,
.faq-intro h2,
.apps-all-heading h3 {
  font-weight: 900;
  text-wrap: balance;
  text-shadow: 0 8px 36px rgba(0, 0, 0, 0.72);
}

.hero h1 {
  font-size: clamp(48px, 6.25vw, 82px);
  line-height: 0.96;
}

.hero h1 span,
.section-heading h2 span,
.showcase-heading h2 span,
.reseller-copy h2 span,
.faq-intro h2 span {
  color: var(--green);
  text-shadow: 0 0 12px rgba(0, 245, 160, 0.42), 0 0 38px rgba(0, 245, 160, 0.16);
}

.eyebrow {
  color: #b7cdc4;
  font-weight: 900;
  letter-spacing: 0.24em;
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 2px;
  margin: 0 9px 3px 0;
  border-radius: 2px;
  background: var(--green);
  box-shadow: 0 0 12px var(--green);
}

.btn {
  border-radius: 10px;
  font-weight: 900;
  letter-spacing: 0.075em;
}

.btn.primary,
.btn.compact {
  background: linear-gradient(105deg, #00f5a0, #6dffc4);
  box-shadow: 0 0 0 1px rgba(154, 255, 215, 0.4), 0 0 26px rgba(0, 245, 160, 0.28), 0 16px 40px rgba(0, 0, 0, 0.3);
}

.btn.primary:hover,
.btn.compact:hover {
  box-shadow: 0 0 0 1px rgba(205, 255, 236, 0.72), 0 0 42px rgba(0, 245, 160, 0.56), 0 18px 48px rgba(0, 0, 0, 0.42);
}

.btn.outline {
  background: rgba(0, 245, 160, 0.035);
  border-color: rgba(0, 245, 160, 0.75);
  box-shadow: inset 0 0 22px rgba(0, 245, 160, 0.045), 0 0 20px rgba(0, 245, 160, 0.08);
}

.apps-link,
.device-list span,
.benefits span {
  font-weight: 800;
}

.device-list span,
.benefits span,
.catalog-badge,
.apps-all-heading > span {
  border-color: rgba(0, 245, 160, 0.28);
  background: rgba(0, 245, 160, 0.035);
  box-shadow: inset 0 0 16px rgba(0, 245, 160, 0.025);
}

.catalog-showcase,
.apps-media-section,
.plans-section,
.download-section,
.reseller-section,
.faq-section {
  isolation: isolate;
}

.catalog-showcase::before,
.apps-media-section::before,
.plans-section::before,
.download-section::before,
.faq-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(620px, 72vw);
  height: min(620px, 72vw);
  border-radius: 50%;
  background: rgba(0, 245, 160, 0.055);
  filter: blur(120px);
  pointer-events: none;
}

.catalog-showcase::before,
.plans-section::before,
.faq-section::before {
  right: -310px;
  top: 12%;
}

.apps-media-section::before,
.download-section::before {
  left: -310px;
  top: 18%;
}

.media-card,
.feature-card,
.app-logo-card,
.app-media-card,
.app-all-card,
.plan-card,
.download-card,
.credit-card,
.faq-search,
dialog {
  border-color: rgba(68, 255, 185, 0.16);
  background-color: rgba(5, 16, 13, 0.9);
  box-shadow: inset 0 1px 0 rgba(184, 255, 226, 0.035), 0 22px 60px rgba(0, 0, 0, 0.22);
}

.media-card:hover,
.feature-card:hover,
.app-logo-card:hover,
.app-media-card:hover,
.app-all-card:hover,
.download-card:hover {
  border-color: rgba(0, 245, 160, 0.72);
  box-shadow: 0 0 0 1px rgba(0, 245, 160, 0.08), 0 0 34px rgba(0, 245, 160, 0.14), 0 26px 70px rgba(0, 0, 0, 0.42);
}

.feature-card i,
.app-mark {
  box-shadow: inset 0 0 22px rgba(0, 245, 160, 0.12), 0 0 22px rgba(0, 245, 160, 0.16);
}

.feature-card h3,
.app-logo-card b,
.app-media-card p,
.app-all-copy b,
.plan-card h3,
.download-card h3,
.faq-question {
  font-weight: 900;
}

.apps-media-section {
  position: relative;
  background: linear-gradient(180deg, #030a08, #06100e 48%, #030907);
  border-block-color: rgba(0, 245, 160, 0.13);
}

.apps-logo-carousel,
.apps-carousel {
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.46));
}

.app-logo-mark {
  border: 1px solid rgba(0, 245, 160, 0.18);
  box-shadow: inset 0 0 20px rgba(0, 245, 160, 0.06), 0 0 18px rgba(0, 245, 160, 0.08);
}

.plan-card.highlight {
  border-color: var(--green);
  box-shadow: 0 0 0 1px rgba(0, 245, 160, 0.18), 0 0 58px rgba(0, 245, 160, 0.22), 0 34px 90px rgba(0, 0, 0, 0.58);
}

.plan-badge {
  box-shadow: 0 0 24px rgba(0, 245, 160, 0.55);
}

.price strong,
.credit-row b,
.code b {
  color: #fff;
  font-weight: 900;
  text-shadow: 0 0 24px rgba(0, 245, 160, 0.3);
}

.live-dot,
.plan-card > small,
.faq-question span:last-child {
  text-shadow: 0 0 13px rgba(0, 245, 160, 0.72);
}

.faq-question:hover {
  color: var(--green-2);
}

.toast {
  border-color: rgba(0, 245, 160, 0.55);
  box-shadow: 0 0 30px rgba(0, 245, 160, 0.22), var(--shadow);
}

@media (max-width: 900px) {
  .hero {
    background-image:
      linear-gradient(0deg, var(--bg) 0%, rgba(1, 8, 6, 0.62) 52%, rgba(1, 9, 7, 0.24) 100%),
      linear-gradient(90deg, rgba(1, 8, 6, 0.9), rgba(0, 15, 10, 0.18)),
      url('/optimized/hero-entertainment.webp');
  }
}

@media (max-width: 620px) {
  .hero h1 {
    font-size: clamp(39px, 10.8vw, 44px);
    line-height: 0.98;
  }

  .eyebrow {
    letter-spacing: 0.18em;
  }

  .site-header {
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.44), 0 1px 0 rgba(0, 245, 160, 0.16);
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before {
    display: none;
  }
}

/* Ícones locais e movimento da landing */
.svg-symbols {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.btn svg,
.apps-link svg,
.device-list svg,
.faq-search svg,
.watch-button svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.apps-link {
  display: flex;
  align-items: center;
  gap: 8px;
}

.device-list span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.pair-code-field input{text-transform:uppercase;text-align:center;letter-spacing:.28em;font-size:24px;font-weight:850;color:#fff;background:linear-gradient(180deg,rgba(26,40,37,.92),rgba(8,15,14,.96));border-color:rgba(0,245,160,.38)}

.device-list svg {
  width: 15px;
  height: 15px;
  color: var(--green);
  filter: drop-shadow(0 0 7px rgba(0, 245, 160, 0.55));
}

.feature-card i svg {
  width: 23px;
  height: 23px;
}

.faq-search > svg {
  width: 18px;
  height: 18px;
  color: var(--green);
}

.menu-button {
  width: 42px;
  height: 42px;
  padding: 10px;
  border: 1px solid rgba(0, 245, 160, 0.22);
  border-radius: 10px;
  background: rgba(0, 245, 160, 0.04);
}

.menu-button span {
  display: block;
  width: 100%;
  height: 2px;
  margin: 4px 0;
  border-radius: 2px;
  background: #eafff6;
  box-shadow: 0 0 8px rgba(0, 245, 160, 0.45);
}

#hero-rotating-copy {
  display: inline-block;
  min-height: 1em;
  transition: opacity 0.24s ease, transform 0.24s ease, filter 0.24s ease;
}

#hero-rotating-copy.changing {
  opacity: 0.28;
  transform: translateY(5px);
  filter: blur(2px);
}

.story-marquee {
  position: relative;
  z-index: 3;
  margin-top: -78px;
  padding: 20px 0 28px;
  overflow: hidden;
  border-bottom: 1px solid rgba(0, 245, 160, 0.1);
  background: linear-gradient(180deg, transparent, rgba(2, 8, 6, 0.95) 28%, #020706);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.story-track {
  display: flex;
  width: max-content;
  gap: 14px;
  padding-inline: 7px;
  animation: story-flow 34s linear infinite;
}

.story-track:hover {
  animation-play-state: paused;
}

.story-track article {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: center;
  width: 310px;
  min-height: 92px;
  overflow: hidden;
  border: 1px solid rgba(0, 245, 160, 0.2);
  border-radius: 15px;
  background: rgba(5, 17, 14, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 14px 38px rgba(0, 0, 0, 0.32);
}

.story-track article::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 20%, rgba(0, 245, 160, 0.045));
}

.story-track img {
  width: 96px;
  height: 92px;
  object-fit: cover;
  filter: saturate(1.1) contrast(1.05);
}

.story-track span {
  position: relative;
  z-index: 1;
  display: block;
  padding: 14px 16px;
}

.story-track b,
.story-track small {
  display: block;
}

.story-track b {
  color: #f5fff9;
  font-size: 16px;
  font-weight: 950;
}

.story-track small {
  margin-top: 4px;
  color: #86a096;
  font-size: 10px;
}

@keyframes story-flow {
  to { transform: translateX(calc(-50% - 7px)); }
}

.watch-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.floating-whatsapp {
  position: fixed;
  z-index: 55;
  right: 22px;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  padding: 10px 17px 10px 12px;
  border: 1px solid rgba(151, 255, 215, 0.66);
  border-radius: 999px;
  background: linear-gradient(105deg, #00f5a0, #5dffc0);
  color: #002b1b;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  box-shadow: 0 0 0 1px rgba(0, 245, 160, 0.12), 0 0 34px rgba(0, 245, 160, 0.36), 0 18px 45px rgba(0, 0, 0, 0.5);
  animation: support-pulse 2.8s ease-in-out infinite;
}

.floating-whatsapp svg {
  width: 29px;
  height: 29px;
}

.floating-whatsapp.is-hidden {
  opacity: 0;
  transform: translateY(18px) scale(0.9);
  pointer-events: none;
  animation: none;
}

.support-unavailable {
  opacity: 0.45;
  pointer-events: none;
}

@keyframes support-pulse {
  0%, 100% { transform: translateY(0); box-shadow: 0 0 24px rgba(0, 245, 160, 0.25), 0 18px 45px rgba(0, 0, 0, 0.5); }
  50% { transform: translateY(-4px); box-shadow: 0 0 42px rgba(0, 245, 160, 0.48), 0 22px 52px rgba(0, 0, 0, 0.55); }
}

/* Modais públicos responsivos */
body.dialog-open {
  overflow: hidden;
}

dialog {
  width: min(500px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  margin: auto;
  overflow: auto;
  overscroll-behavior: contain;
}

dialog[open] {
  animation: public-dialog-in 0.22s ease-out;
}

dialog::backdrop {
  animation: public-backdrop-in 0.2s ease-out;
}

.dialog-card {
  background: radial-gradient(circle at 92% 0, rgba(0, 245, 160, 0.1), transparent 17rem), linear-gradient(155deg, #091713, #030907);
}

.dialog-close {
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  line-height: 1;
}

.dialog-close:hover {
  border-color: rgba(0, 245, 160, 0.55);
  color: #fff;
}

@keyframes public-dialog-in {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@keyframes public-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 620px) {
  .story-marquee { margin-top: -52px; padding-bottom: 22px; }
  .story-track { animation-duration: 27s; }
  .story-track article { grid-template-columns: 82px 1fr; width: 270px; min-height: 82px; }
  .story-track img { width: 82px; height: 82px; }
  .floating-whatsapp { right: 12px; bottom: 12px; min-height: 48px; padding: 9px 12px; }
  .floating-whatsapp span { display: none; }
  .floating-whatsapp svg { width: 30px; height: 30px; }
  dialog { width: calc(100vw - 18px); max-height: calc(100dvh - 18px); border-radius: 18px; }
  .dialog-card { padding: 27px 18px 22px; }
  .dialog-card h2 { padding-right: 38px; font-size: 27px; line-height: 1.08; }
  .dialog-close { top: 12px; right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .story-track,
  .floating-whatsapp { animation: none; }
  #hero-rotating-copy { transition: none; }
}

/* Mobile v6: contenção real, swipe e hierarquia compacta */
.catalog-showcase,
.plans-section,
.download-section,
.faq-section {
  overflow: hidden;
  overflow: clip;
}

.apps-link,
.watch-button {
  min-height: 44px;
}

@media (max-width: 620px) {
  html,
  body,
  main {
    width: 100%;
    max-width: 100%;
  }

  body.mobile-menu-open {
    overflow: hidden;
  }

  .mobile-nav {
    position: absolute;
    z-index: 58;
    top: 68px;
    right: 0;
    left: 0;
    height: calc(100dvh - 68px);
    align-content: start;
    flex-direction: column;
    gap: 0;
    padding: 16px 20px 28px;
    overflow-y: auto;
    background: linear-gradient(180deg, rgba(3, 13, 10, 0.99), rgba(1, 7, 5, 0.99));
    border-top: 1px solid rgba(0, 245, 160, 0.18);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.76);
  }

  .mobile-nav.open {
    display: flex;
    animation: mobile-menu-in 0.2s ease-out;
  }

  .mobile-nav a {
    display: flex;
    align-items: center;
    min-height: 51px;
    padding: 13px 2px;
    border-bottom-color: rgba(0, 245, 160, 0.14);
    color: #d7e9e1;
    font-size: 15px;
    font-weight: 850;
  }

  .mobile-nav .btn {
    min-height: 54px;
    margin: 18px 0 8px;
  }

  .menu-button span {
    transform-origin: center;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .menu-button[aria-expanded="true"] span:first-child {
    transform: translateY(6px) rotate(45deg);
  }

  .menu-button[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .menu-button[aria-expanded="true"] span:last-child {
    transform: translateY(-6px) rotate(-45deg);
  }

  .hero {
    min-height: auto;
    padding: 118px 0 112px;
    background-position: 69% center;
  }

  .hero-logo {
    width: 166px;
    margin-bottom: 18px;
  }

  .hero .eyebrow {
    margin-bottom: 14px;
    font-size: 9px;
    letter-spacing: 0.2em;
  }

  .hero h1 {
    max-width: 100%;
    margin-bottom: 20px;
    font-size: clamp(35px, 10.4vw, 41px);
    line-height: 0.98;
    letter-spacing: -0.052em;
  }

  .hero-copy {
    max-width: 340px;
    margin-bottom: 24px;
    font-size: 14px;
    line-height: 1.55;
  }

  .hero-actions {
    gap: 10px;
  }

  .hero-actions .btn {
    min-height: 54px;
    padding: 13px 14px;
    font-size: 11px;
    letter-spacing: 0.05em;
  }

  .apps-link {
    justify-content: center;
    margin-top: 14px;
    padding: 11px 8px;
    font-size: 10px;
  }

  .device-label {
    margin-top: 24px;
  }

  .device-list {
    gap: 6px;
  }

  .device-list span {
    padding: 7px 10px;
  }

  .story-marquee {
    margin-top: -50px;
    padding: 16px 0 22px;
  }

  .story-track article {
    grid-template-columns: 78px 1fr;
    width: 250px;
    min-height: 78px;
  }

  .story-track img {
    width: 78px;
    height: 78px;
  }

  .story-track span {
    padding: 11px 13px;
  }

  .story-track b {
    font-size: 14px;
  }

  .catalog-showcase,
  .apps-media-section {
    padding-top: 68px;
    padding-bottom: 72px;
  }

  .section {
    padding: 70px 0;
  }

  .section-heading,
  .showcase-heading {
    margin-bottom: 32px;
  }

  .section-heading h2,
  .showcase-heading h2,
  .faq-intro h2 {
    font-size: clamp(31px, 9vw, 35px);
  }

  .media-grid {
    gap: 10px;
    margin-right: 0;
    padding: 2px 0 14px;
    scroll-padding-inline: 0;
    scrollbar-width: none;
  }

  .media-grid::-webkit-scrollbar,
  .feature-grid::-webkit-scrollbar,
  .plans-grid::-webkit-scrollbar,
  .apps-all-grid::-webkit-scrollbar {
    display: none;
  }

  .media-card,
  .media-card-main,
  .media-card:not(.media-card-main) {
    flex: 0 0 100%;
    width: 100%;
    height: 244px;
  }

  .media-card-main {
    height: 390px;
  }

  .feature-grid {
    display: flex;
    gap: 12px;
    margin-inline: -14px;
    padding: 2px 14px 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 14px;
    scrollbar-width: none;
  }

  .feature-card {
    flex: 0 0 min(82vw, 310px);
    min-height: 238px;
    padding: 24px;
    scroll-snap-align: start;
  }

  .feature-card i {
    margin-bottom: 36px;
  }

  .apps-logo-carousel {
    margin-bottom: 44px;
  }

  .app-logo-card {
    width: 205px;
    flex-basis: 205px;
  }

  .app-logo-mark {
    width: 55px;
    height: 44px;
    flex-basis: 55px;
  }

  .app-media-card {
    width: 76vw;
    max-width: 280px;
    flex-basis: 76vw;
  }

  .apps-all-section {
    margin-top: 52px;
  }

  .apps-all-heading {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
  }

  .apps-all-heading > div {
    min-width: 0;
  }

  .apps-all-heading h3 {
    font-size: 22px;
    line-height: 1.12;
  }

  .apps-all-grid {
    display: flex;
    gap: 12px;
    margin-inline: -14px;
    padding: 2px 14px 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 14px;
    scrollbar-width: none;
  }

  .app-all-card {
    flex: 0 0 calc(100vw - 42px);
    max-width: 350px;
    scroll-snap-align: start;
  }

  .plans-grid {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin-inline: -14px;
    padding: 14px 14px 28px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 14px;
    scrollbar-width: none;
  }

  .plan-card,
  .plan-card.highlight {
    flex: 0 0 calc(100vw - 42px);
    max-width: 350px;
    min-height: 455px;
    padding: 26px 24px;
    transform: none;
    scroll-snap-align: start;
  }

  .download-card {
    grid-template-columns: 58px 1fr;
  }

  .download-card .app-mark {
    width: 58px;
    height: 58px;
    border-radius: 15px;
    font-size: 25px;
  }

  .download-card h3 {
    font-size: 21px;
  }

  .faq-layout {
    gap: 34px;
  }

  .faq-question {
    min-height: 58px;
    padding: 17px 0;
  }

  .footer-grid a,
  .footer-grid button {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 9px 0;
  }

  .floating-whatsapp {
    width: 48px;
    height: 48px;
    min-height: 48px;
    padding: 9px;
  }

  .floating-whatsapp svg {
    width: 28px;
    height: 28px;
  }

  dialog {
    max-width: calc(100vw - 18px);
  }
}

@keyframes mobile-menu-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 350px) {
  .hero {
    padding-top: 108px;
  }

  .hero h1 {
    font-size: 34px;
  }

  .hero-actions .btn {
    padding-inline: 10px;
    font-size: 10.5px;
    letter-spacing: 0.035em;
  }

  .device-list span {
    padding-inline: 8px;
    font-size: 9px;
  }

  .app-all-card,
  .plan-card,
  .plan-card.highlight {
    flex-basis: calc(100vw - 34px);
  }
}