:root {
  --svm-bg: #0d1419;
  --svm-surface: #151f26;
  --svm-surface-2: #1c2932;
  --svm-line: rgba(173, 211, 229, .16);
  --svm-text: #f5f8fa;
  --svm-muted: #a8b8c2;
  --svm-blue: #8fc4da;
  --svm-blue-strong: #5ca9c9;
  --svm-gold: #dfb957;
  --svm-green: #32d29a;
  --svm-danger: #ff7373;
  --svm-radius: 24px;
  --svm-shadow: 0 24px 70px rgba(0,0,0,.34);
}

#sv-mobile-root { display: none; }

@media (max-width: 1023px) {
  html { scroll-behavior: smooth; background: var(--svm-bg); }
  body { background: var(--svm-bg) !important; color: var(--svm-text); overflow-x: hidden; }
  body.svm-lock { overflow: hidden; }
  #root, #boot, #sv-modal-root, #sv-card-modal-root { display: none !important; }
  #sv-mobile-root { display: block; min-height: 100svh; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
  #sv-mobile-root *, #sv-mobile-root *::before, #sv-mobile-root *::after { box-sizing: border-box; }
  #sv-mobile-root button, #sv-mobile-root a { -webkit-tap-highlight-color: transparent; }
  #sv-mobile-root img { display: block; max-width: 100%; }
}

@media (min-width: 1024px) { #sv-mobile-root { display: none !important; } }

.svm-shell { min-height: 100svh; overflow: clip; background:
  radial-gradient(circle at 100% 0, rgba(92,169,201,.15), transparent 28rem),
  linear-gradient(180deg, #10191f 0%, #0b1116 100%); }
.svm-container { width: min(100% - 32px, 720px); margin-inline: auto; }
.svm-section { padding: 76px 0; position: relative; }
.svm-section--soft { background: linear-gradient(180deg, rgba(143,196,218,.055), rgba(143,196,218,.015)); border-block: 1px solid var(--svm-line); }
.svm-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; color: var(--svm-blue); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.svm-eyebrow::before { content: ""; width: 20px; height: 2px; border-radius: 99px; background: currentColor; }
.svm-title { margin: 0; color: var(--svm-text); font-size: clamp(32px, 9vw, 48px); line-height: .98; letter-spacing: -.045em; font-weight: 850; }
.svm-subtitle { margin: 18px 0 0; color: var(--svm-muted); font-size: 16px; line-height: 1.65; }

.svm-header { position: fixed; inset: 0 0 auto; z-index: 80; padding: max(12px, env(safe-area-inset-top)) 16px 12px; transition: background .25s, backdrop-filter .25s; }
.svm-header.is-scrolled { background: rgba(9,15,19,.88); backdrop-filter: blur(18px); }
/* Scroll edge effect no lugar da régua de 1px: o conteúdo se dissolve sob a barra flutuante em vez
   de bater numa linha dura. Só existe quando há conteúdo passando por baixo (is-scrolled). */
.svm-header::after { content: ""; position: absolute; inset: 100% 0 auto; height: 22px; opacity: 0; pointer-events: none; background: linear-gradient(rgba(9,15,19,.88), rgba(9,15,19,0)); transition: opacity .25s; }
.svm-header.is-scrolled::after { opacity: 1; }
.svm-header__inner { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.svm-brand { display: inline-flex; align-items: center; color: #fff; text-decoration: none; }
.svm-brand__logo { display: block; width: auto; height: 29px; max-width: 146px; object-fit: contain; }
.svm-header__actions { display: flex; align-items: center; gap: 8px; }
.svm-icon-btn, .svm-lang { min-width: 46px; height: 46px; border: 1px solid var(--svm-line); border-radius: 15px; color: var(--svm-text); background: rgba(255,255,255,.045); display: inline-grid; place-items: center; font: inherit; cursor: pointer; }
.svm-lang { min-width: 48px; font-size: 12px; font-weight: 800; }
.svm-icon-btn svg { width: 21px; height: 21px; }
.svm-menu { position: fixed; inset: 0; z-index: 100; visibility: hidden; opacity: 0; transition: opacity .25s, visibility .25s; background: rgba(4,8,11,.74); backdrop-filter: blur(14px); }
.svm-menu.is-open { visibility: visible; opacity: 1; }
.svm-menu__panel { position: absolute; inset: 0 0 0 auto; width: min(88vw, 390px); padding: max(18px, env(safe-area-inset-top)) 22px max(28px, env(safe-area-inset-bottom)); background: #121c23; border-left: 1px solid var(--svm-line); transform: translateX(100%); transition: transform .32s cubic-bezier(.2,.8,.2,1); overflow-y: auto; }
.svm-menu.is-open .svm-menu__panel { transform: translateX(0); }
.svm-menu__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; }
.svm-nav { display: grid; gap: 4px; }
.svm-nav a { min-height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; color: var(--svm-text); text-decoration: none; border-bottom: 1px solid var(--svm-line); font-size: 18px; font-weight: 700; }
.svm-nav a svg { width: 18px; color: var(--svm-blue); }
.svm-menu__cta { margin-top: 28px; }

.svm-btn { min-height: 52px; border: 0; border-radius: 16px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; text-decoration: none; font-size: 15px; line-height: 1; font-weight: 800; cursor: pointer; transition: transform .15s, background .15s, color .15s; }
.svm-btn:active { transform: scale(.975); }
.svm-btn--primary { color: #11170e; background: linear-gradient(135deg, #f0cb67, #d8aa40); box-shadow: 0 14px 36px rgba(218,174,70,.22); }
.svm-btn--secondary { color: var(--svm-text); background: rgba(255,255,255,.07); border: 1px solid var(--svm-line); }
.svm-btn--blue { color: #071219; background: var(--svm-blue); }
.svm-btn--block { width: 100%; }
.svm-btn svg { width: 18px; height: 18px; }

.svm-hero { min-height: 100svh; min-height: 720px; position: relative; display: grid; align-items: end; padding: 120px 0 56px; isolation: isolate; }
.svm-hero__bg, .svm-hero__shade { position: absolute; inset: 0; z-index: -2; }
.svm-hero__bg { background: center/cover no-repeat; transition: opacity .65s ease; }
.svm-hero__shade { z-index: -1; background: linear-gradient(180deg, rgba(4,9,12,.28) 0%, rgba(7,12,15,.56) 42%, #0d1419 96%), linear-gradient(90deg, rgba(7,12,15,.68), rgba(7,12,15,.15)); }
.svm-hero__badge { display: inline-flex; align-items: center; gap: 9px; padding: 9px 12px; margin-bottom: 18px; border-radius: 999px; border: 1px solid rgba(143,196,218,.28); background: rgba(7,14,18,.56); color: #c5e3ef; font-size: 12px; font-weight: 800; backdrop-filter: blur(12px); }
.svm-hero__badge span { width: 8px; height: 8px; border-radius: 50%; background: var(--svm-green); box-shadow: 0 0 15px var(--svm-green); }
.svm-hero h1 { margin: 0; max-width: 650px; color: white; font-size: clamp(43px, 13vw, 70px); line-height: .91; letter-spacing: -.06em; font-weight: 900; text-wrap: balance; }
.svm-hero h1 strong { color: var(--svm-blue); }
.svm-hero p { margin: 22px 0 0; max-width: 570px; color: #d4dee4; font-size: 17px; line-height: 1.58; }
.svm-hero__actions { display: grid; gap: 10px; margin-top: 28px; }
.svm-hero__trust { display: flex; flex-wrap: wrap; gap: 14px 20px; margin-top: 25px; color: #b6c4cc; font-size: 12px; }
.svm-hero__trust span { display: inline-flex; align-items: center; gap: 6px; }
.svm-hero__trust svg { width: 15px; color: var(--svm-green); }

.svm-demo { margin-top: 30px; border: 1px solid var(--svm-line); border-radius: 28px; overflow: hidden; background: #0a1014; box-shadow: var(--svm-shadow); }
.svm-demo__screen { position: relative; aspect-ratio: 16/10; background: #030506; overflow: hidden; }
.svm-demo__screen img { width: 100%; height: 100%; object-fit: cover; opacity: .84; transition: opacity .25s; }
.svm-demo__screen::after { content: ""; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(transparent, rgba(4,7,9,.84)); pointer-events: none; }
.svm-demo__label { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: end; justify-content: space-between; gap: 14px; }
.svm-demo__label small { display: block; color: var(--svm-blue); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; }
.svm-demo__label strong { display: block; margin-top: 3px; color: white; font-size: 20px; }
.svm-demo__index { color: #c2ced5; font-size: 12px; font-variant-numeric: tabular-nums; }
.svm-demo__toolbar { padding: 12px; display: grid; grid-template-columns: 48px 1fr 48px; gap: 8px; align-items: center; }
.svm-demo__toolbar button { height: 46px; border-radius: 14px; border: 1px solid var(--svm-line); background: rgba(255,255,255,.05); color: white; display: grid; place-items: center; }
.svm-demo__toolbar button svg { width: 19px; }
.svm-demo__dots { display: flex; align-items: center; justify-content: center; gap: 7px; }
.svm-demo__dots button { width: 9px; height: 9px; min-height: 0; padding: 0; border: 0; border-radius: 99px; background: #49555d; transition: width .2s, background .2s; }
.svm-demo__dots button.is-active { width: 25px; background: var(--svm-blue); }
.svm-demo__copy { padding: 0 18px 20px; color: var(--svm-muted); font-size: 14px; line-height: 1.55; }
.svm-timer { position: absolute; z-index: 3; inset: 50% auto auto 50%; transform: translate(-50%,-50%); width: min(78%, 310px); padding: 18px; border-radius: 22px; text-align: center; color: white; background: rgba(5,10,13,.82); border: 1px solid rgba(76,231,182,.32); backdrop-filter: blur(14px); box-shadow: 0 18px 50px rgba(0,0,0,.45); }
.svm-timer small { display: block; color: var(--svm-green); font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.svm-timer__time { margin: 9px 0; font: 800 38px/1 ui-monospace, SFMono-Regular, monospace; letter-spacing: .04em; }
.svm-timer__actions { display: flex; justify-content: center; gap: 8px; }
.svm-timer__actions button { min-width: 44px; height: 40px; border: 1px solid var(--svm-line); border-radius: 12px; background: rgba(255,255,255,.07); color: white; }

.svm-benefits { display: grid; gap: 12px; margin-top: 28px; }
.svm-benefit { padding: 20px; border: 1px solid var(--svm-line); border-radius: 20px; background: rgba(255,255,255,.035); }
.svm-benefit__icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: var(--svm-blue); background: rgba(143,196,218,.11); }
.svm-benefit__icon svg { width: 21px; }
.svm-benefit h3 { margin: 16px 0 7px; font-size: 18px; }
.svm-benefit p { margin: 0; color: var(--svm-muted); font-size: 14px; line-height: 1.55; }

.svm-resource-track { display: grid; grid-auto-flow: column; grid-auto-columns: min(88vw, 540px); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 28px -16px 0; padding: 0 16px 14px; }
.svm-resource-track::-webkit-scrollbar { display: none; }
.svm-resource { scroll-snap-align: center; border: 1px solid var(--svm-line); border-radius: 24px; overflow: hidden; background: var(--svm-surface); }
.svm-resource__image { position: relative; width: 100%; padding: 0; border: 0; appearance: none; text-align: inherit; aspect-ratio: 16/10; overflow: hidden; background: #05080a; cursor: zoom-in; }
.svm-resource__image img { width: 100%; height: 100%; object-fit: cover; }
.svm-resource__image span { position: absolute; right: 12px; bottom: 12px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; color: white; background: rgba(8,13,17,.75); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(10px); }
.svm-resource__body { padding: 18px; }
.svm-resource__title { display: flex; gap: 10px; align-items: center; }
.svm-resource__title svg { width: 19px; flex: 0 0 auto; color: var(--svm-blue); }
.svm-resource h3 { margin: 0; font-size: 19px; }
.svm-resource p { margin: 10px 0 0; color: var(--svm-muted); font-size: 14px; line-height: 1.55; }
.svm-swipe-hint { margin-top: 7px; color: #71838e; font-size: 12px; text-align: center; }

.svm-audiences { display: grid; gap: 12px; margin-top: 28px; }
.svm-audience { padding: 22px; border-radius: 22px; border: 1px solid var(--svm-line); background: rgba(255,255,255,.035); }
.svm-audience:first-child { border-color: rgba(143,196,218,.38); background: linear-gradient(135deg, rgba(143,196,218,.13), rgba(255,255,255,.035)); }
.svm-audience__top { display: flex; align-items: center; gap: 11px; }
.svm-audience__top svg { color: var(--svm-blue); }
.svm-audience h3 { margin: 0; font-size: 19px; }
.svm-audience p { margin: 11px 0 0; color: var(--svm-muted); font-size: 14px; line-height: 1.55; }

.svm-offer { margin-top: 28px; padding: 17px; border: 1px solid rgba(223,185,87,.3); border-radius: 18px; background: rgba(223,185,87,.08); color: #f2d991; font-size: 13px; line-height: 1.5; }
.svm-pricing { display: grid; gap: 14px; margin-top: 18px; }
.svm-plan { position: relative; padding: 24px; border: 1px solid var(--svm-line); border-radius: 24px; background: var(--svm-surface); overflow: hidden; }
.svm-plan--featured { border-color: rgba(223,185,87,.46); background: linear-gradient(145deg, rgba(223,185,87,.1), var(--svm-surface) 44%); }
.svm-plan__tag { position: absolute; top: 15px; right: 15px; padding: 7px 9px; border-radius: 99px; background: rgba(223,185,87,.14); color: #efd584; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; font-weight: 850; }
.svm-plan h3 { margin: 0; font-size: 21px; }
.svm-plan__old { margin-top: 15px; color: #83939d; font-size: 13px; text-decoration: line-through; }
.svm-plan__price { margin-top: 3px; font-size: 38px; font-weight: 900; letter-spacing: -.05em; }
.svm-plan__price small { font-size: 14px; font-weight: 600; color: var(--svm-muted); letter-spacing: normal; }
.svm-plan__month { margin: 4px 0 20px; color: var(--svm-blue); font-size: 13px; font-weight: 700; }
.svm-plan ul { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; color: #c8d4da; font-size: 13px; }
.svm-plan li { display: flex; gap: 8px; }
.svm-plan li svg { width: 16px; flex: 0 0 auto; color: var(--svm-green); }

.svm-faq { margin-top: 26px; border-top: 1px solid var(--svm-line); }
.svm-faq details { border-bottom: 1px solid var(--svm-line); }
.svm-faq summary { min-height: 68px; padding: 16px 4px; display: flex; align-items: center; justify-content: space-between; gap: 18px; cursor: pointer; list-style: none; font-weight: 750; }
.svm-faq summary::-webkit-details-marker { display: none; }
.svm-faq summary::after { content: "+"; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--svm-line); border-radius: 10px; color: var(--svm-blue); font-size: 20px; flex: 0 0 auto; }
.svm-faq details[open] summary::after { content: "−"; }
.svm-faq p { margin: -2px 0 20px; padding-right: 48px; color: var(--svm-muted); font-size: 14px; line-height: 1.6; }

.svm-final { text-align: center; padding: 70px 0; }
.svm-final .svm-title { font-size: clamp(36px, 11vw, 55px); }
.svm-final .svm-btn { margin-top: 26px; }
.svm-footer { padding: 34px 0 max(32px, env(safe-area-inset-bottom)); border-top: 1px solid var(--svm-line); color: var(--svm-muted); }
.svm-footer__links { display: flex; flex-wrap: wrap; gap: 12px 18px; margin: 20px 0; }
.svm-footer a { color: #c6d3da; text-decoration: none; font-size: 13px; }
.svm-footer small { display: block; line-height: 1.55; }

/* Materializa em vez de só aparecer: o painel entra com blur + escala crescendo juntos, para ler
   como uma superfície real chegando, e sai pelo mesmo caminho (`is-closing`). Antes era um
   display:none↔grid seco, sem transição nenhuma nos dois sentidos. */
.svm-lightbox { position: fixed; inset: 0; z-index: 120; display: none; background: rgba(3,6,8,.94); backdrop-filter: blur(0px); padding: max(14px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom)); opacity: 0; transition: opacity .26s ease, backdrop-filter .26s ease; }
.svm-lightbox.is-open { display: grid; grid-template-rows: auto 1fr auto; }
.svm-lightbox.is-visible { opacity: 1; backdrop-filter: blur(16px); }
.svm-lightbox__stage img { transform: scale(.94); transition: transform .3s cubic-bezier(.22,1,.36,1); }
.svm-lightbox.is-visible .svm-lightbox__stage img { transform: scale(1); }
.svm-lightbox__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.svm-lightbox__title { display: flex; align-items: center; gap: 9px; min-width: 0; }
.svm-lightbox__title svg { width: 18px; color: var(--svm-blue); flex: 0 0 auto; }
.svm-lightbox__title strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svm-lightbox__stage { min-height: 0; display: grid; align-items: center; grid-template-columns: 44px minmax(0,1fr) 44px; gap: 5px; }
.svm-lightbox__stage img { max-height: 67svh; width: 100%; object-fit: contain; border-radius: 12px; }
.svm-lightbox__arrow { width: 44px; height: 54px; border: 1px solid var(--svm-line); border-radius: 14px; color: white; background: rgba(255,255,255,.06); display: grid; place-items: center; }
.svm-lightbox__caption { padding: 10px 4px 2px; color: var(--svm-muted); font-size: 13px; line-height: 1.5; }

.svm-cookie { position: fixed; z-index: 90; inset: auto 12px max(12px, env(safe-area-inset-bottom)); padding: 18px; border: 1px solid var(--svm-line); border-radius: 20px; background: rgba(17,27,34,.96); box-shadow: var(--svm-shadow); backdrop-filter: blur(18px); }
.svm-cookie h3 { margin: 0 0 8px; font-size: 16px; }
.svm-cookie p { margin: 0; color: var(--svm-muted); font-size: 12px; line-height: 1.5; }
.svm-cookie__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.svm-cookie .svm-btn { min-height: 46px; padding: 0 10px; font-size: 12px; }

@media (min-width: 640px) and (max-width: 1023px) {
  .svm-hero__actions { grid-template-columns: max-content max-content; }
  .svm-benefits, .svm-audiences { grid-template-columns: repeat(2, 1fr); }
  .svm-pricing { grid-template-columns: repeat(3, 1fr); }
  .svm-plan { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  /* Movimento reduzido não é "sem retorno visual": o lightbox perde a escala (vestibular) mas
     mantém a opacidade, que ajuda a entender que algo entrou/saiu. */
  .svm-lightbox__stage img, .svm-lightbox.is-visible .svm-lightbox__stage img { transform: none !important; }
}

/* Transparência reduzida: as superfícies translúcidas viram sólidas na mesma cor, em vez de
   continuarem borradas. O blur é justamente o que atrapalha quem pediu esta preferência. */
@media (prefers-reduced-transparency: reduce) {
  .svm-header.is-scrolled { background: #090f13; backdrop-filter: none; }
  .svm-menu { background: rgba(4,8,11,.98); backdrop-filter: none; }
  .svm-hero__badge { background: #0a1216; backdrop-filter: none; }
  .svm-timer { background: #050a0d; backdrop-filter: none; }
  .svm-resource__image span { background: #080d11; backdrop-filter: none; }
  .svm-lightbox, .svm-lightbox.is-visible { background: #030608; backdrop-filter: none; }
  .svm-cookie { background: #111b22; backdrop-filter: none; }
}

/* Alto contraste: fundo praticamente sólido e borda definida nas mesmas superfícies — o que
   flutua precisa ficar delimitado, não sugerido. */
@media (prefers-contrast: more) {
  .svm-header.is-scrolled { background: #060b0e; border-bottom: 1px solid #6f8b99; }
  .svm-menu__panel { background: #0b1319; border-left: 1px solid #6f8b99; }
  .svm-hero__badge, .svm-timer, .svm-cookie, .svm-resource__image span { border-color: #6f8b99; }
  .svm-lightbox, .svm-lightbox.is-visible { background: #010304; }
  .svm-btn--secondary, .svm-icon-btn, .svm-lang { border-color: #6f8b99; }
}