:root {
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --c-bg: #F6F7FB; --c-surface: #FFFFFF; --c-surface-2: #EEF0F7; --c-border: #D9DDEA;
  --c-text: #11162A; --c-muted: #4A5372; --c-primary: #4B2FE0; --c-on-primary: #FFFFFF;
  --c-accent: #00897B; --c-danger: #B3261E; --c-on-danger: #FFFFFF; --c-success: #1E7D3A; --c-focus: #4B2FE0;
  --radius-sm: 8px; --radius: 14px; --radius-lg: 22px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --shadow: 0 1px 2px rgb(17 22 42 / 6%), 0 8px 24px rgb(17 22 42 / 8%);
  --maxw: 1080px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg: #0B0F1E; --c-surface: #141A2E; --c-surface-2: #1C2440; --c-border: #2A3355;
    --c-text: #EEF1FA; --c-muted: #A6AECB; --c-primary: #9C8CFF; --c-on-primary: #0B0F1E;
    --c-accent: #3FD3C0; --c-danger: #FF8A80; --c-on-danger: #0B0F1E; --c-success: #6FDB8F; --c-focus: #9C8CFF;
  }
}
:root[data-theme="dark"] {
  --c-bg: #0B0F1E; --c-surface: #141A2E; --c-surface-2: #1C2440; --c-border: #2A3355;
  --c-text: #EEF1FA; --c-muted: #A6AECB; --c-primary: #9C8CFF; --c-on-primary: #0B0F1E;
  --c-accent: #3FD3C0; --c-danger: #FF8A80; --c-on-danger: #0B0F1E; --c-success: #6FDB8F; --c-focus: #9C8CFF;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-bg);
  overflow-wrap: anywhere;
}
img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--space-3); color: var(--c-text); }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 var(--space-3); }
a { color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
ul, ol { padding-left: 1.25rem; margin: 0 0 var(--space-3); }
code { font-size: 0.95em; }

:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-4); top: var(--space-2); z-index: 10;
  transform: translateY(-200%); background: var(--c-surface); color: var(--c-text);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); min-height: 44px;
  text-decoration: underline;
}
.skip-link:focus { transform: translateY(0); }

.container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--space-4); }
.page { padding-block: var(--space-6) var(--space-8); }
.page > .container { display: grid; gap: var(--space-6); }
.muted { color: var(--c-muted); }

/* Cabeçalho e navegação */
.site-header {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}
.site-header__logo { display: inline-flex; align-items: center; min-height: 44px; }
.site-header__logo img { width: 132px; height: 32px; }
.site-nav { display: flex; flex-wrap: wrap; gap: var(--space-1); flex: 1 1 100%; }
.site-nav__link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-3);
  color: var(--c-text); text-decoration: none; border-radius: var(--radius-sm);
}
.site-nav__link:hover { background: var(--c-surface-2); }
.site-nav__link[aria-current="page"] { color: var(--c-primary); font-weight: 600; }
.lang-picker { margin-left: auto; }
.lang-picker select {
  min-height: 44px; padding: 0 var(--space-3); border-radius: var(--radius-sm);
  border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text);
  font: inherit;
}

/* Rodapé */
.site-footer {
  padding: var(--space-6) var(--space-4); background: var(--c-surface);
  border-top: 1px solid var(--c-border); color: var(--c-muted); font-size: 0.9rem;
}
.site-footer p { max-width: var(--maxw); margin-inline: auto; }
.site-footer__links { max-width: var(--maxw); margin: var(--space-3) auto; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.site-footer__links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: var(--c-primary); }
.site-footer__supplier { color: var(--c-text); }

/* Botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: var(--space-2) var(--space-5); border-radius: var(--radius-sm);
  border: 1px solid transparent; font: inherit; font-weight: 600; text-decoration: none;
  cursor: pointer; transition: background-color 0.15s ease;
}
.btn:disabled { opacity: 1; cursor: not-allowed; background: var(--c-surface-2); color: var(--c-muted); border-color: var(--c-border); }
.btn--primary { background: var(--c-primary); color: var(--c-on-primary); }
.btn--primary:hover { filter: brightness(1.08); }
.btn--ghost { background: transparent; color: var(--c-text); border-color: var(--c-border); }
.btn--ghost:hover { background: var(--c-surface-2); }
.btn--danger { background: var(--c-danger); color: var(--c-on-danger); }
.btn--danger:hover { filter: brightness(1.08); }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Hero, passos, cartões */
.hero { display: grid; gap: var(--space-4); padding-block: var(--space-5); }
.hero__title { font-size: 2.1rem; }
.hero__subtitle { font-size: 1.1rem; color: var(--c-muted); max-width: 60ch; }
.hero .btn-row { margin-top: var(--space-2); }

.card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--space-5);
}

.steps__list, .features__grid, .platforms__list, .faq__list { list-style: none; padding: 0; margin: 0; }
.steps__list { display: grid; gap: var(--space-3); counter-reset: step; }
.steps__item {
  counter-increment: step; position: relative; padding: var(--space-4) var(--space-4) var(--space-4) var(--space-7);
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius);
}
.steps__item::before {
  content: counter(step); position: absolute; left: var(--space-4); top: var(--space-4);
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c-primary); color: var(--c-on-primary); font-weight: 700; font-size: 0.9rem;
}
.features__grid { display: grid; gap: var(--space-4); }
.feature-card { margin: 0; }
.feature-card__title { margin-bottom: var(--space-2); }
.feature-card__text { margin: 0; color: var(--c-muted); }

.platforms__list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.platform-chip {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px;
  padding: var(--space-2) var(--space-3); border-radius: 999px;
  background: var(--c-surface); border: 1px solid var(--c-border); color: var(--c-text);
}
.platform-chip--soon { color: var(--c-muted); border-style: dashed; }
.platform-chip__tag { font-size: 0.8rem; color: var(--c-muted); }

.notice {
  border-left: 4px solid var(--c-accent); background: var(--c-surface-2);
  padding: var(--space-4); border-radius: var(--radius-sm);
}
.notice__text { margin: 0; }

.faq__list { display: grid; gap: var(--space-2); }
.faq__item {
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-sm);
}
.faq__item > summary {
  min-height: 44px; padding: var(--space-3) var(--space-4); cursor: pointer; font-weight: 600;
  display: flex; align-items: center; list-style-position: outside;
}
.faq__item[open] > summary { color: var(--c-primary); }
.faq__item > p { margin: 0; padding: 0 var(--space-4) var(--space-4); color: var(--c-muted); }

/* Formulários */
.form { display: grid; gap: var(--space-4); }
.form__field { display: grid; gap: var(--space-1); }
.form__label { font-weight: 600; color: var(--c-text); }
.form__input, .form select, .form textarea {
  width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); border: 1px solid var(--c-border);
  background: var(--c-surface); color: var(--c-text); font: inherit;
}
.form textarea { min-height: 120px; resize: vertical; }
.form__input::placeholder { color: var(--c-muted); opacity: 1; }
.form__hint { margin: 0; font-size: 0.9rem; color: var(--c-muted); }
.form__error { margin: 0; color: var(--c-danger); font-weight: 600; }
.form__check {
  display: flex; align-items: flex-start; gap: var(--space-3); min-height: 44px;
  color: var(--c-text);
}
.form__check input[type="checkbox"] {
  width: 24px; height: 24px; min-width: 24px; margin: 2px 0 0; accent-color: var(--c-primary);
}
.form__check a { color: var(--c-primary); }

.status { margin: 0; color: var(--c-success); font-weight: 600; }
.status--error { color: var(--c-danger); }

/* Abas */
.tabs { display: flex; gap: var(--space-2); border-bottom: 1px solid var(--c-border); }
.tabs__tab {
  min-height: 44px; padding: var(--space-2) var(--space-4); background: transparent; border: 0;
  border-bottom: 3px solid transparent; color: var(--c-muted); font: inherit; font-weight: 600; cursor: pointer;
}
.tabs__tab--active { color: var(--c-primary); border-bottom-color: var(--c-primary); }

/* Planos */
.plans { display: grid; gap: var(--space-4); }
.plan-card {
  display: grid; gap: var(--space-3); align-content: start;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: var(--space-5);
}
.plan-card--featured { border: 2px solid var(--c-primary); }
.plan-card__name { margin: 0; }
.plan-card__price { margin: 0; font-size: 1.8rem; font-weight: 700; color: var(--c-text); }
.plan-card__devices { margin: 0; color: var(--c-muted); }
.plan-card__cta { margin-top: var(--space-2); }
.plan-card__badge {
  justify-self: start; padding: var(--space-1) var(--space-3); border-radius: 999px;
  background: var(--c-primary); color: var(--c-on-primary); font-size: 0.85rem; font-weight: 600;
}

/* Conta e aparelhos */
.account-grid { display: grid; gap: var(--space-5); }
.account-grid > p { grid-column: 1 / -1; margin: 0; }
.device-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.device-item {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
  background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
}
.device-item__name { font-weight: 600; display: block; }
.device-item__meta { display: block; font-size: 0.9rem; color: var(--c-muted); }
.device-item__remove { min-height: 44px; }

.legal { display: grid; gap: var(--space-3); }
.legal h2 { margin-top: var(--space-5); }
.legal__note { color: var(--c-muted); font-size: 0.95rem; }

.page--404 .container, .page--entrar .container { text-align: left; }

/* Telas maiores */
@media (min-width: 640px) {
  .hero { grid-template-columns: 1fr; }
  .hero__title { font-size: 2.6rem; }
  .features__grid { grid-template-columns: repeat(2, 1fr); }
  .plans { grid-template-columns: repeat(2, 1fr); }
  .site-nav { flex: 0 1 auto; }
  .account-grid { grid-template-columns: 1fr 1fr; }
  .card { padding: var(--space-6); }
}
@media (min-width: 960px) {
  .hero { grid-template-columns: 1.2fr 1fr; align-items: center; }
  .hero__title { font-size: 3rem; }
  .features__grid { grid-template-columns: repeat(3, 1fr); }
  .plans { grid-template-columns: repeat(4, 1fr); }
  .steps__list { grid-template-columns: repeat(3, 1fr); }
  h1 { font-size: 2.2rem; }
}

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