/* ====================================================================
   DESTAQUE EMPRESARIAL / EM BREVE
   Conceito: um feixe de luz dourada acende sobre a cidade.
   Regra de cor: quase tudo em azul-esverdeado profundo, ouro champanhe só onde importa.
   Arquitetura: mobile-first, sem dependências externas.
   - Primeira dobra: cena em tela cheia, tipografia serifada, um único gesto de luz.
   - Segunda dobra: a plataforma (aplicativo e painel) sobre a coroa de louros em ouro.
   ==================================================================== */
@font-face { font-family: "Cormorant"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/cormorant-light.woff2") format("woff2"); }
@font-face { font-family: "Cormorant"; font-style: italic; font-weight: 300; font-display: swap; src: url("../fonts/cormorant-light-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/cormorant-regular.woff2") format("woff2"); }
@font-face { font-family: "Cormorant"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/cormorant-italic.woff2") format("woff2"); }

:root {
  color-scheme: dark;

  /* Azul-esverdeado */
  --ink: #021317;
  --teal-950: #021c21;
  --teal-900: #04272d;
  --teal-800: #063840;
  --teal-700: #0a4d54;
  --teal-600: #0f766e;
  --teal-300: #5fd9c6;
  --mint: #a9efdc;

  /* Ouro (mesma família do emblema e da coroa de louros) */
  --gold-100: #f8ecc9;
  --gold-300: #edd591;
  --gold-400: #e0bb62;
  --gold-500: #c49a45;
  --gold-600: #93702e;
  --gold-metal: linear-gradient(105deg, #f6ebcb 0%, #dcbd78 34%, #b58f4b 58%, #efdcaa 82%, #c9a55f 100%);
  --gold-line: linear-gradient(90deg, transparent, rgba(217, 184, 114, .4) 18%, rgba(232, 210, 154, .75) 50%, rgba(217, 184, 114, .4) 82%, transparent);

  --text: #f7f4ea;
  --text-soft: #c3d6d1;
  --text-muted: #8aa8a3;
  --hairline: rgba(232, 210, 154, .2);

  /* Marca VS: branco com detalhes em ouro. Para as cores oficiais, use --vs-accent: #e00000. */
  --vs-body: var(--text);
  --vs-accent: var(--gold-400);

  --serif: "Cormorant", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --sans: Inter, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;

  --layout-x: clamp(24px, 6vw, 120px);
  --header-h: 84px;
  --sky-h: clamp(84px, 16vw, 170px);
  --ease: cubic-bezier(.16, .84, .24, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; background: var(--ink); }
body {
  min-width: 320px; margin: 0; overflow-x: clip;
  background: var(--ink); color: var(--text);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-family: var(--sans);
}
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 1px solid var(--gold-300); outline-offset: 6px; border-radius: 4px; }
svg { display: block; }
ul { margin: 0; padding: 0; list-style: none; }
p, h1, h2, figure { margin: 0; }
.page { position: relative; isolation: isolate; overflow: clip; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Rótulo pequeno em caixa alta: a única "voz" sem serifa nos títulos */
.eyebrow {
  display: flex; align-items: center; gap: 14px;
  color: var(--gold-300); font-size: 11px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase;
}
.eyebrow::before { content: ""; flex: none; width: 32px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-400)); }

.gold-text {
  background: linear-gradient(176deg, #fbeec6 8%, #edcb72 42%, #cb9c40 74%, #f0d68c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* -------------------------------------------------------------------
   Cabeçalho (sobre a cena)
   ------------------------------------------------------------------- */
.site-header {
  position: absolute; z-index: 5; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: var(--header-h);
  padding: max(10px, env(safe-area-inset-top)) var(--layout-x) 0;
  animation: fade 1.2s ease .3s both;
}
/* Assinatura dupla: Destaque Empresarial + monograma da VS Agência */
.lockup { display: flex; align-items: center; gap: clamp(11px, 1.6vw, 20px); min-width: 0; }
.lockup__vs { display: flex; align-items: center; padding: 3px 0 3px clamp(11px, 1.6vw, 20px); border-left: 1px solid rgba(232, 210, 154, .32); transition: opacity .4s ease; }
.lockup__vs:hover { opacity: .72; }
.lockup__vs svg { width: 34px; height: 21px; overflow: visible; }
.brand { display: inline-flex; align-items: center; gap: 11px; transition: opacity .4s ease; }
.brand__symbol { display: block; flex: none; width: auto; height: 38px; filter: drop-shadow(0 0 9px rgba(240, 206, 120, .28)); }
.brand:hover { opacity: .78; }
.brand__words { display: flex; flex-direction: column; gap: 5px; line-height: 1; white-space: nowrap; }
.brand__words strong { color: var(--text); font-family: var(--serif); font-size: 18px; font-weight: 400; letter-spacing: .24em; }
.brand__words > span { color: var(--gold-300); font-size: 8px; font-weight: 500; letter-spacing: .5em; }

.status { display: inline-flex; align-items: center; gap: 11px; white-space: nowrap; color: var(--text-soft); font-size: 10px; font-weight: 500; letter-spacing: .28em; }
.status__light { width: 5px; height: 5px; flex: none; border-radius: 50%; background: var(--gold-300); box-shadow: 0 0 10px rgba(232, 210, 154, .8); animation: status-breathe 5s ease-in-out infinite; }
.status__text--short { display: none; }

/* -------------------------------------------------------------------
   Primeira dobra: a cena
   ------------------------------------------------------------------- */
.hero {
  position: relative; z-index: 1; overflow: clip;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 100vh; min-height: 100svh;
  padding: calc(var(--header-h) + 16px) var(--layout-x) clamp(120px, 24vh, 240px);
  background: linear-gradient(170deg, #04323a, var(--ink) 74%); /* reserva, caso o WebP não carregue */
}
.stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.stage__camera {
  position: absolute; inset: -3%;
  transform-origin: 72% 88%;
  translate: calc(var(--mx, 0) * -.4px) calc(var(--my, 0) * -.4px);
  animation: camera 48s ease-in-out infinite alternate;
}
.stage__frame { position: absolute; inset: 0; background: 72% 100% / cover no-repeat; }
.stage__frame--night { background-image: url("../img/stage-night.webp"); }
.stage__frame--light {
  background-image: url("../img/stage-light.webp"); opacity: 0;
  animation: light-on 4.4s cubic-bezier(.35, 0, .15, 1) .8s forwards, light-breathe 22s ease-in-out 5.2s infinite alternate;
}
@media (orientation: portrait) {
  .stage__frame { background-position: 88% 100%; }
  .stage__frame--night { background-image: url("../img/stage-night-portrait.webp"); }
  .stage__frame--light { background-image: url("../img/stage-light-portrait.webp"); }
}
.stage__dust { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(2, 19, 23, .28) 0, transparent 14%),
    linear-gradient(180deg, transparent 16%, rgba(2, 19, 23, .46) 40%, rgba(2, 19, 23, .3) 62%, transparent 76%),
    linear-gradient(180deg, transparent 95%, var(--ink) 100%);
}
.stage__grain {
  position: absolute; inset: 0; opacity: .2; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.hero__grid { position: relative; z-index: 2; display: grid; gap: clamp(16px, 3vh, 28px); width: 100%; max-width: 1560px; margin-inline: auto; }
.hero__body { position: relative; width: 100%; max-width: 860px; }
.hero__body > * { animation: rise 1.3s var(--ease) both; }
.hero__body > :nth-child(1) { animation-delay: .3s; }
.hero__body > :nth-child(2) { animation-delay: .4s; }
.hero__body > :nth-child(3) { animation-delay: .9s; }
.hero__body > :nth-child(4) { animation-delay: 1.15s; }

/* Emblema: o logo principal. Acende junto com o feixe de luz e recebe um brilho que passa de vez em quando. */
.hero__emblem {
  position: relative; isolation: isolate; width: clamp(128px, 39vw, 210px);
  translate: calc(var(--mx, 0) * .55px) calc(var(--my, 0) * .55px);
  animation: emblem-on 3.6s cubic-bezier(.3, 0, .2, 1) .15s both;
}
.hero__emblem img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 38px rgba(0, 8, 11, .6)); }
.hero__emblem::before { content: ""; position: absolute; inset: -18%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(240, 206, 120, .24), transparent 66%); }
.hero__emblem::after {
  content: ""; position: absolute; inset: 5%; border-radius: 50%; pointer-events: none;
  background: linear-gradient(112deg, transparent 40%, rgba(255, 246, 214, .34) 50%, transparent 60%) 140% 0 / 300% 100% no-repeat;
  animation: emblem-shine 15s ease-in-out 4.4s infinite;
}

h1 {
  margin-top: clamp(18px, 3vh, 28px);
  color: var(--text); font-family: var(--serif); font-weight: 300;
  font-size: clamp(3.05rem, 15.6vw, 6.8rem); line-height: .98; letter-spacing: -.014em;
}
h1 span { display: block; white-space: nowrap; }
h1 .gold-text { font-style: italic; padding: 0 .1em .12em 0; margin-right: -.1em; }
.hero__lead { margin-top: clamp(18px, 2.8vh, 28px); max-width: 30em; color: var(--text-soft); font-size: clamp(15px, 1.5vw, 18px); font-weight: 400; line-height: 1.65; }

.cue { display: inline-flex; align-items: center; gap: 16px; margin-top: clamp(26px, 4.4vh, 44px); color: var(--gold-100); font-size: 10.5px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; }
.cue__ring { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border: 1px solid rgba(232, 210, 154, .42); border-radius: 50%; color: var(--gold-300); transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease); }
.cue__ring svg { width: 15px; height: 15px; transition: translate .5s var(--ease); }
.cue:hover .cue__ring { background: var(--gold-300); border-color: var(--gold-300); color: var(--ink); }
.cue:hover .cue__ring svg { translate: 0 2px; }

/* -------------------------------------------------------------------
   Números reais da edição
   ------------------------------------------------------------------- */
.proof { position: relative; z-index: 1; padding: clamp(36px, 6vh, 72px) var(--layout-x) clamp(8px, 2vh, 24px); background: var(--ink); }
.proof__inner { width: 100%; max-width: 1480px; margin-inline: auto; }
.proof__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(16px, 3vh, 28px); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.proof__list li { min-width: 0; padding: clamp(14px, 3vh, 28px) clamp(6px, 2vw, 32px); border-left: 1px solid var(--hairline); }
.proof__list li:first-child { padding-left: 0; border-left: 0; }
.proof__list strong { display: block; font-family: var(--serif); font-size: clamp(2rem, 10vw, 3.4rem); font-weight: 300; line-height: 1.1; padding-bottom: .06em; }
.proof__list span { display: block; margin-top: 4px; color: var(--text-soft); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; line-height: 1.35; }
.proof__where { margin-top: clamp(12px, 2vh, 18px); color: var(--text-muted); font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1.4; }

/* -------------------------------------------------------------------
   Segunda dobra: a plataforma
   ------------------------------------------------------------------- */
.platform {
  position: relative; z-index: 1;
  padding: clamp(56px, 10vh, 120px) var(--layout-x);
  background:
    radial-gradient(58% 42% at 70% 46%, rgba(15, 118, 110, .2), transparent 74%),
    linear-gradient(180deg, var(--ink) 0%, #032027 48%, var(--ink) 100%);
}
.platform__inner { display: grid; gap: clamp(40px, 8vw, 72px); width: 100%; max-width: 1480px; margin-inline: auto; }
.platform h2, .maker h2 {
  margin-top: clamp(16px, 2.6vh, 24px);
  color: var(--text); font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.3rem, 9.2vw, 4rem); line-height: 1.04; letter-spacing: -.01em;
}
.platform h2 span, .maker h2 span { display: block; font-style: italic; padding-bottom: .1em; }

.pillars { margin-top: clamp(24px, 4vh, 40px); border-top: 1px solid var(--hairline); }
.pillars li { display: flex; align-items: center; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--hairline); }
.pillars__icon { flex: none; width: 26px; height: 26px; color: var(--gold-300); }
.pillars__icon svg { width: 100%; height: 100%; }
.pillars strong { display: block; color: var(--text); font-family: var(--serif); font-size: 22px; font-weight: 400; line-height: 1.2; }
.pillars li div > span { display: block; margin-top: 3px; color: var(--text-muted); font-size: 13.5px; line-height: 1.5; }

/* -------------------------------------------------------------------
   Slides: o aplicativo por dentro (funciona deslizando, mesmo sem JavaScript)
   ------------------------------------------------------------------- */
.tour {
  position: relative; z-index: 1;
  padding: clamp(40px, 7vh, 88px) var(--layout-x) clamp(44px, 7vh, 88px);
  background: radial-gradient(52% 44% at 68% 52%, rgba(15, 118, 110, .22), transparent 74%), var(--ink);
}
.tour__inner { width: 100%; max-width: 1280px; margin-inline: auto; }
.tour h2 {
  margin-top: clamp(16px, 2.6vh, 24px);
  color: var(--text); font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.3rem, 9.2vw, 4rem); line-height: 1.04; letter-spacing: -.01em;
}
.tour h2 span { font-style: italic; padding-right: .08em; }
.tour__stage { margin-top: clamp(14px, 3vh, 32px); }
.tour__slides {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  overscroll-behavior-x: contain; outline-offset: 6px;
}
.tour__slides::-webkit-scrollbar { display: none; }
.tour__slides:focus-visible { outline: 1px solid var(--gold-300); border-radius: 8px; }
.tour__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: center; scroll-snap-stop: always; display: grid; gap: clamp(10px, 2vh, 20px); align-items: center; }
.tour__copy { order: 2; min-height: 11.5em; }
.tour__phone { position: relative; isolation: isolate; order: 1; width: min(100%, 460px); aspect-ratio: 900 / 985; justify-self: center; }
.tour__phone::before { content: ""; position: absolute; inset: 6% 2%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(224, 187, 98, .16), transparent 68%); }
.tour__phone img { display: block; width: 100%; height: 100%; object-fit: contain; }
.js .tour__copy, .js .tour__phone { transition: opacity .9s var(--ease), transform 1.1s var(--ease); }
.js .tour__slide:not(.is-active) .tour__copy { opacity: 0; transform: translate3d(0, 10px, 0); }
.js .tour__slide:not(.is-active) .tour__phone { opacity: .2; transform: scale(.95); }
.tour__label { display: flex; align-items: center; gap: 12px; color: var(--gold-300); font-size: 11px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; }
.tour__label::before { content: ""; width: 24px; height: 1px; background: var(--gold-400); }
.tour h3 { margin: clamp(10px, 1.6vh, 16px) 0 0; color: var(--text); font-family: var(--serif); font-size: clamp(1.9rem, 7.4vw, 2.6rem); font-weight: 300; line-height: 1.08; }
.tour__text { margin-top: clamp(8px, 1.4vh, 14px); max-width: 30em; color: var(--text-soft); font-size: clamp(15px, 1.25vw, 17px); line-height: 1.65; }
.tour__nav { display: none; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; }
.js .tour__nav { display: flex; }
.tour__dots { display: flex; }
.tour__dot { appearance: none; display: grid; place-items: center; width: 30px; height: 36px; padding: 0; border: 0; background: none; cursor: pointer; }
.tour__dot::before { content: ""; width: 16px; height: 2px; border-radius: 2px; background: rgba(237, 213, 145, .28); transition: background-color .5s var(--ease), width .5s var(--ease); }
.tour__dot:hover::before { background: rgba(237, 213, 145, .6); }
.tour__dot[aria-current="true"]::before { width: 24px; background: var(--gold-300); }
.tour__dot:focus-visible, .tour__btn:focus-visible { outline: 1px solid var(--gold-300); outline-offset: 2px; border-radius: 6px; }
.tour__actions { display: flex; gap: 8px; }
.tour__btn { appearance: none; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(237, 213, 145, .36); border-radius: 50%; background: none; color: var(--gold-300); cursor: pointer; transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); }
@media (hover: hover) { .tour__btn:hover { background: var(--gold-300); border-color: var(--gold-300); color: var(--ink); } }
.tour__btn svg { width: 15px; height: 15px; }
.tour__icon-play { display: none; }
.tour__btn[aria-pressed="true"] .tour__icon-pause { display: none; }
.tour__btn[aria-pressed="true"] .tour__icon-play { display: inline; }
.tour__note { margin-top: clamp(12px, 2vh, 20px); color: var(--text-muted); font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1.4; }

/* -------------------------------------------------------------------
   Perguntas frequentes (conteúdo sempre no HTML, mesmo recolhido)
   ------------------------------------------------------------------- */
.faq { position: relative; z-index: 1; padding: clamp(36px, 6vh, 80px) var(--layout-x) clamp(36px, 6vh, 80px); background: var(--ink); }
.faq__inner { display: grid; gap: clamp(20px, 4vw, 40px); width: 100%; max-width: 1280px; margin-inline: auto; }
.faq h2 { margin-top: clamp(16px, 2.6vh, 24px); color: var(--text); font-family: var(--serif); font-weight: 300; font-size: clamp(2.3rem, 9.2vw, 4rem); line-height: 1.04; letter-spacing: -.01em; }
.faq h2 span { display: block; font-style: italic; padding-bottom: .1em; }
.faq__list { border-top: 1px solid var(--hairline); }
.faq__item { border-bottom: 1px solid var(--hairline); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:focus-visible { outline: 1px solid var(--gold-300); outline-offset: 4px; border-radius: 4px; }
.faq__item h3 { margin: 0; color: var(--text); font-family: var(--serif); font-size: clamp(1.3rem, 5vw, 1.6rem); font-weight: 400; line-height: 1.2; }
.faq__mark { position: relative; flex: none; width: 15px; height: 15px; color: var(--gold-300); }
.faq__mark::before, .faq__mark::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: currentColor; transition: transform .4s var(--ease); }
.faq__mark::after { transform: rotate(90deg); }
.faq__item[open] .faq__mark::after { transform: rotate(0); }
.faq__item p { padding: 0 32px 20px 0; max-width: 40em; color: var(--text-soft); font-size: 15px; line-height: 1.7; }

/* -------------------------------------------------------------------
   Terceira dobra: quem faz (VS Agência)
   ------------------------------------------------------------------- */
.maker {
  position: relative; z-index: 1;
  padding: clamp(32px, 7vh, 88px) var(--layout-x) calc(var(--sky-h) + clamp(32px, 6vh, 72px));
  background: radial-gradient(44% 40% at 50% 26%, rgba(217, 184, 114, .09), transparent 74%), var(--ink);
}
.maker__inner { display: grid; gap: clamp(20px, 5vw, 48px); width: 100%; max-width: 1180px; margin-inline: auto; }
.maker__emblem { width: min(66vw, 320px); justify-self: center; }
.maker__emblem img { display: block; width: 100%; height: auto; }
.maker__lead { margin-top: clamp(14px, 2.4vh, 22px); max-width: 31em; color: var(--text-soft); font-size: clamp(15px, 1.3vw, 17px); line-height: 1.7; }
.maker__logo { display: inline-block; margin-top: clamp(22px, 3.6vh, 34px); padding-top: clamp(22px, 3.6vh, 34px); border-top: 1px solid var(--hairline); transition: opacity .4s ease; }
.maker__logo:hover { opacity: .78; }
.maker__logo svg { width: clamp(190px, 21vw, 250px); height: auto; aspect-ratio: 2135 / 425; }

/* Entrada ao rolar (só quando o JavaScript está ativo) */
.js .reveal { opacity: 0; translate: 0 28px; transition: opacity 1.4s var(--ease), translate 1.6s var(--ease); }
.js .reveal.is-in { opacity: 1; translate: 0 0; }
.js .reveal--late { transition-delay: .18s; }

/* -------------------------------------------------------------------
   Vitrine (coroa de louros + mockups)
   ------------------------------------------------------------------- */
.showcase { position: relative; z-index: 3; width: 100%; max-width: 620px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.scene {
  --dash-l: -2%; --dash-t: 36%; --dash-w: 76%;
  --ph-r: 2%; --ph-t: 8%; --ph-w: 40%;
  --mx: 0; --my: 0;
  position: relative; width: 100%; aspect-ratio: 1 / 1; container-type: inline-size;
}
.scene > * { position: absolute; }
/* A coroa é maior que a cena de propósito: os dispositivos ficam dentro dela e as folhas aparecem em volta. */
.scene__wreath {
  width: 116%; max-width: none; height: auto; left: -8%; top: 50%;
  pointer-events: none; user-select: none;
  translate: calc(var(--mx) * -.5px) calc(-50% + var(--my) * -.5px);
}
.mock-surface { backface-visibility: hidden; }

/* Painel web */
.dashboard-position { z-index: 2; left: var(--dash-l); top: var(--dash-t); width: var(--dash-w); pointer-events: none; container-type: inline-size; translate: calc(var(--mx) * .6px) calc(var(--my) * .6px); }

.dashboard {
  width: 100%; aspect-ratio: 1.59; overflow: hidden; display: flex; flex-direction: column;
  font-size: 1.62cqw; /* miniatura decorativa: escala inteira, nunca corta o conteúdo */
  background: #0a3a41; border: 1px solid rgba(232, 210, 154, .26); border-radius: 2.2cqw;
  box-shadow: 0 40px 100px rgba(0, 8, 11, .7), inset 0 1px rgba(246, 236, 208, .12);
}
.dashboard__browser { height: 3.7em; flex: none; display: flex; align-items: center; padding: 0 1.5em; gap: 1.6em; background: #0f4a52; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.dashboard__traffic { display: flex; gap: .53em; }
.dashboard__traffic i { width: .73em; height: .73em; border-radius: 50%; background: #4f7b80; }
.dashboard__traffic i:first-child { background: #d88b73; }
.dashboard__traffic i:nth-child(2) { background: #d9b872; }
.dashboard__traffic i:last-child { background: #5fd9c6; }
.dashboard__url { margin-inline: auto; padding: .53em 8em; border: 1px solid rgba(255, 255, 255, .07); border-radius: .55em; color: #9fc6c0; font-weight: 550; white-space: nowrap; font-size: .82em; background: #0a3239; }
.dashboard__url-lock { font-size: .6em; color: var(--gold-400); margin-right: .8em; }
.dashboard__browser-menu { display: flex; gap: .3em; }
.dashboard__browser-menu i { width: .33em; height: .33em; background: #7fb0aa; border-radius: 50%; }
.dashboard__workspace { min-height: 0; flex: 1; display: flex; }
.dashboard__sidebar { display: flex; flex-direction: column; align-items: center; width: 13.3%; flex: none; border-right: 1px solid rgba(255, 255, 255, .06); background: linear-gradient(#0d4249, #08333a); }
.dashboard__side-logo { margin-top: 1.6em; width: 3.4em; height: 3.8em; }
.dashboard__side-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.dashboard__side-icons { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1.3em; margin-top: 2.8em; }
.side-icon { width: 3em; height: 2.9em; display: flex; align-items: center; justify-content: center; border-radius: .7em; color: #6fa19c; }
.side-icon--selected { background: rgba(217, 184, 114, .13); color: var(--gold-300); position: relative; }
.side-icon--selected::before { content: ""; position: absolute; height: 1.8em; width: .2em; background: var(--gold-400); border-radius: 0 3px 3px 0; left: -.73em; }
.side-icon__grid { width: 1.35em; height: 1.35em; background: linear-gradient(90deg, currentColor 45%, transparent 45% 55%, currentColor 55%) top / 100% 45% no-repeat, linear-gradient(90deg, currentColor 45%, transparent 45% 55%, currentColor 55%) bottom / 100% 45% no-repeat; opacity: .9; }
.side-icon__bars { width: 1.5em; height: 1.4em; background: linear-gradient(to top, currentColor 40%, transparent 40%) left bottom / 25% 100% no-repeat, linear-gradient(to top, currentColor 75%, transparent 75%) center bottom / 25% 100% no-repeat, linear-gradient(to top, currentColor 58%, transparent 58%) right bottom / 25% 100% no-repeat; opacity: .7; }
.side-icon__users { width: 1.5em; height: 1.4em; border-radius: 50% 50% 30% 30%; border: 2px solid currentColor; transform: scale(.8); }
.side-icon__circle { width: 1.35em; height: 1.35em; border: 2px solid currentColor; border-radius: 50%; }
.dashboard__side-user { width: 2.6em; height: 2.6em; border-radius: 50%; background: linear-gradient(140deg, #2f7c80, #165a60); margin-top: auto; margin-bottom: 1.8em; border: 1px solid rgba(255, 255, 255, .14); }
.dashboard__content { min-width: 0; flex: 1; padding: 2.1em 2.4em 1.5em; display: flex; flex-direction: column; }
.dashboard__head { display: flex; justify-content: space-between; align-items: center; }
.dashboard__head > div { display: flex; flex-direction: column; gap: .55em; }
.dashboard__head small { font-size: .72em; font-weight: 700; letter-spacing: .18em; color: #8dbab4; }
.dashboard__head strong { font-family: var(--serif); font-size: 2.5em; color: #f7f4ea; font-weight: 400; line-height: 1; }
.dashboard__dot { color: var(--gold-400); }
.dashboard__avatar { border: 1px solid rgba(217, 184, 114, .5); width: 3.3em; height: 3.3em; border-radius: 1.05em; background: linear-gradient(140deg, rgba(217, 184, 114, .24), rgba(217, 184, 114, .06)); display: flex; justify-content: center; align-items: center; color: var(--gold-300); font-size: .85em; font-weight: 800; }
.dashboard__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .93em; margin-top: 2.1em; }
.dashboard__stat { min-width: 0; background: linear-gradient(150deg, #125860, #0e474e); border: 1px solid rgba(255, 255, 255, .08); border-radius: 1.15em; padding: 1.15em 1.2em; display: flex; flex-direction: column; gap: .78em; }
.dashboard__stat > span { font-size: .92em; color: #c4e2dd; font-weight: 620; }
.data-bars { display: flex; gap: .5em; align-items: flex-end; height: 1.75em; }
.data-bars i { display: block; background: #e8d29a; border-radius: 2px; height: .55em; width: 1.9em; opacity: .65; }
.data-bars i:nth-child(2) { height: 1.12em; width: 2.75em; background: #d9b872; opacity: .95; }
.data-bars i:nth-child(3) { height: .87em; width: 1.7em; opacity: .5; }
.data-bars--second i { background: #7be3d1; }
.data-bars--second i:nth-child(2) { background: #5fd9c6; }
.data-bars--third i { background: #c8f2e6; }
.data-bars--third i:nth-child(2) { background: #a9efdc; }
.dashboard__stat small { font-size: .74em; letter-spacing: .02em; color: #d9b872; white-space: nowrap; }
.dashboard__stat:nth-child(2) small { color: #7be3d1; }
.dashboard__stat:nth-child(3) small { color: #b9e9dd; }
.dashboard__bottom { display: grid; grid-template-columns: 1.54fr .93fr; gap: 1em; margin-top: 1.15em; flex: 1; min-height: 0; }
.dashboard__chart, .dashboard__activities { background: #0e464d; border: 1px solid rgba(255, 255, 255, .07); border-radius: 1.1em; min-width: 0; overflow: hidden; }
.dashboard__chart { padding: 1.15em 1.28em .8em; display: flex; flex-direction: column; }
.dashboard__chart-head { display: flex; justify-content: space-between; align-items: center; color: #cfe7e2; font-weight: 620; font-size: .9em; }
.dashboard__chart-more { color: #8dbab4; letter-spacing: .15em; }
.dashboard__chart svg { margin-top: .9em; width: 100%; flex: 1; min-height: 0; }
.chart-line { stroke-dasharray: 380; stroke-dashoffset: 380; animation: draw-chart 9s ease-in-out 1s infinite alternate; }
.dashboard__chart-footer { display: flex; justify-content: space-between; color: #7fb0aa; font-size: .7em; margin-top: .55em; }
.dashboard__activities { padding: 1.25em 1.15em; display: flex; flex-direction: column; justify-content: space-between; }
.dashboard__activities > span { color: #d2e9e4; font-weight: 620; font-size: .88em; margin-bottom: .2em; }
.dashboard__activities > div { display: flex; align-items: center; gap: .65em; font-size: .87em; color: #9ccdc6; }
.dashboard__activities b { font-weight: 550; }
.activity-dot { width: .82em; height: .82em; border-radius: 50%; }
.activity-dot--gold { background: var(--gold-400); box-shadow: 0 0 0 3px rgba(217, 184, 114, .14); }
.activity-dot--aqua { background: #5fd9c6; box-shadow: 0 0 0 3px rgba(95, 217, 198, .14); }
.activity-dot--mint { background: #d4f6ec; box-shadow: 0 0 0 3px rgba(212, 246, 236, .12); }

/* Aplicativo: grafite com filete de ouro, tela escura */
.phone-position { z-index: 4; right: var(--ph-r); top: var(--ph-t); width: var(--ph-w); pointer-events: none; container-type: inline-size; translate: calc(var(--mx) * 1.1px) calc(var(--my) * 1.1px); }
.phone {
  position: relative; width: 100%; aspect-ratio: .5; padding: 3%; overflow: hidden;
  font-size: 4.04cqw;
  border: 1px solid rgba(232, 210, 154, .55); border-radius: 13% / 6.5%;
  background: linear-gradient(135deg, #3d4347 0%, #14181a 24%, #0a0d0e 62%, #2c3134 100%);
  box-shadow: 0 44px 90px rgba(0, 8, 11, .72), 0 0 70px rgba(217, 184, 114, .1), inset 0 1px 1px rgba(255, 255, 255, .28);
}
.phone__rim { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); z-index: 3; }
.phone__screen { height: 100%; background: #021317; border-radius: 11.9% / 5.7%; overflow: hidden; position: relative; }
.phone__screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.phone__island { position: absolute; z-index: 5; top: 2.9%; left: 38%; width: 24%; height: 2.6%; border-radius: 20px; background: #020607; }
/* Legenda */
.showcase__footnote { color: var(--text-muted); font-family: var(--serif); font-style: italic; font-size: 16px; text-align: center; }

/* -------------------------------------------------------------------
   Rodapé + skyline em traço de ouro
   ------------------------------------------------------------------- */
.site-footer { position: relative; z-index: 2; background: var(--ink); }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--gold-line); z-index: 2; }
.skyline {
  position: absolute; left: 0; right: 0; bottom: 100%; z-index: 1; pointer-events: none;
  height: var(--sky-h);
  -webkit-mask-image: linear-gradient(to top, #000 62%, transparent);
  mask-image: linear-gradient(to top, #000 62%, transparent);
}
.skyline__svg { display: block; width: 100%; height: 100%; }
.sky-win .w { opacity: .14; animation: twinkle 11s ease-in-out infinite; }
.sky-win .w2 { animation-duration: 15s; animation-delay: -4s; }
.sky-win .w3 { animation-duration: 13s; animation-delay: -7s; }
.sky-win .w4 { animation-duration: 19s; animation-delay: -2s; }
.sky-win .w1 { opacity: .6; animation: none; }

.site-footer__inner {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 26px var(--layout-x) max(26px, env(safe-area-inset-bottom));
}
.ecosystem { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; color: var(--text-soft); font-family: var(--serif); font-size: 17px; }
.ecosystem li { display: inline-flex; align-items: center; gap: 9px; }
.ecosystem svg { width: 15px; height: 15px; color: var(--gold-400); }
.site-footer__credit { color: var(--text-muted); font-size: 12px; text-align: center; line-height: 1.7; }
.site-footer__credit strong { font-weight: 500; color: var(--text-soft); }
.site-footer__slash { color: var(--gold-600); margin: 0 10px; }
.site-footer__credit a { color: var(--gold-300); font-weight: 500; transition: color .4s ease; white-space: nowrap; }
.site-footer__credit a:hover { color: var(--text); }
.site-footer__credit svg { display: inline-block; width: 23px; height: 14px; margin: 0 6px 0 3px; vertical-align: -2px; }

/* -------------------------------------------------------------------
   Animações (poucas e lentas: só opacidade e transformação)
   ------------------------------------------------------------------- */
@keyframes fade { from { opacity: .01; } }
@keyframes rise { from { opacity: .01; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }
@keyframes emblem-on { 0% { opacity: .01; filter: brightness(.45) saturate(.75); transform: scale(.975); } 12% { opacity: 1; } 100% { opacity: 1; filter: none; transform: none; } }
@keyframes emblem-shine { 0% { background-position: 140% 0; } 14%, 100% { background-position: -40% 0; } }
@keyframes camera { from { transform: scale(1); } to { transform: scale(1.05); } }
@keyframes light-on { to { opacity: 1; } }
@keyframes light-breathe { from { opacity: 1; } to { opacity: .68; } }
@keyframes status-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes draw-chart { 0% { stroke-dashoffset: 380; } 40%, 100% { stroke-dashoffset: 0; } }
@keyframes twinkle { 0%, 100% { opacity: .1; } 45%, 60% { opacity: .75; } }

/* -------------------------------------------------------------------
   A partir de 600px (tablet em retrato)
   ------------------------------------------------------------------- */
@media (min-width: 600px) {
  :root { --header-h: 96px; }
  .brand__symbol { height: 46px; }
  .brand__words strong { font-size: 20px; }
  .brand__words > span { font-size: 8.5px; }
  .eyebrow { font-size: 11.5px; }
  .hero__emblem { width: clamp(220px, 34vw, 300px); }
  h1 { font-size: clamp(5.4rem, 13.6vw, 7.4rem); }
  .hero__lead { font-size: 17px; }
  .scene { aspect-ratio: 1.1 / 1; --dash-l: 5%; --dash-t: 34%; --dash-w: 62%; --ph-r: 10%; --ph-t: 9%; --ph-w: 28%; }
  .scene__wreath { width: 110%; left: -5%; }
  .showcase { max-width: 720px; }
  .platform h2, .maker h2, .tour h2 { font-size: clamp(3.4rem, 7.4vw, 4.6rem); }
  .tour__phone { width: min(100%, 560px); }
  .tour__label { font-size: 11.5px; }
  .lockup__vs svg { width: 42px; height: 26px; }
  .proof__list strong { font-size: clamp(3.4rem, 8vw, 5rem); }
  .proof__list span { font-size: 12px; }
  .faq h2 { font-size: clamp(3.4rem, 7.4vw, 4.6rem); }
  .site-footer__inner { padding-block: 30px; }
}
@media (min-width: 1000px) {
  .site-footer__inner { flex-direction: row; justify-content: space-between; gap: 24px; }
  .site-footer__credit { text-align: right; }
}

/* -------------------------------------------------------------------
   Desktop e tablet deitado: texto à esquerda, luz à direita
   ------------------------------------------------------------------- */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .stage__scrim {
    background:
      linear-gradient(180deg, rgba(2, 19, 23, .42) 0, transparent 20%),
      linear-gradient(90deg, rgba(2, 19, 23, .74) 0%, rgba(2, 19, 23, .44) 34%, transparent 62%),
      linear-gradient(180deg, transparent 86%, var(--ink) 100%);
  }
  .hero { padding-bottom: clamp(110px, 21vh, 220px); }
  .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: clamp(24px, 4vw, 72px); }
  .hero__emblem { order: 2; justify-self: center; width: min(100%, 62vh, 560px); }
  h1 { font-size: clamp(4.4rem, min(7.8vw, 15vh), 9.2rem); }
  .hero__lead { max-width: 27em; font-size: clamp(15.5px, 1.25vw, 19px); }
  .platform__inner { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(32px, 5vw, 96px); }
  .platform h2, .maker h2, .tour h2 { font-size: clamp(3rem, 4.5vw, 5.2rem); }
  .tour__slide { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(24px, 4vw, 72px); }
  .tour__copy { order: 1; min-height: 0; }
  .tour__phone { order: 2; width: min(100%, 72vh, 640px); }
  .tour h3 { font-size: clamp(2.6rem, 3.6vw, 3.8rem); }
  .pillars { max-width: 460px; }
  .showcase { max-width: 800px; }
  .faq h2 { font-size: clamp(3rem, 4.5vw, 5.2rem); }
  .faq__inner { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 96px); }
  .maker__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: clamp(32px, 5vw, 88px); }
  .maker__emblem { width: min(100%, 440px); justify-self: end; }
}

/* Telas baixas (notebook pequeno, celular deitado): o texto ganha prioridade */
@media (max-height: 640px) and (orientation: landscape) {
  :root { --header-h: 68px; }
  .hero__grid { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 24px; }
  .hero__emblem { order: 2; justify-self: end; width: min(56vh, 34vw); }
  .hero { padding-top: calc(var(--header-h) + 8px); padding-bottom: 56px; min-height: max(100svh, 400px); }
  h1 { margin-top: 12px; font-size: clamp(3rem, 17vh, 6rem); }
  .hero__lead { margin-top: 10px; font-size: 14.5px; line-height: 1.5; }
  .cue { margin-top: 14px; }
  .cue__ring { width: 34px; height: 34px; }
}

/* -------------------------------------------------------------------
   Telas pequenas
   ------------------------------------------------------------------- */
@media (max-width: 599px) {
  .status { letter-spacing: .24em; font-size: 9.5px; gap: 8px; }
  .status__text--long { display: none; }
  .status__text--short { display: inline; }
  .eyebrow { font-size: 10px; letter-spacing: .28em; gap: 11px; }
  .eyebrow::before { width: 22px; }
}
@media (max-width: 359px) {
  :root { --layout-x: 20px; }
  .status { display: none; } /* "Em breve" já está no título da cena; a marca VS tem prioridade aqui */
  .brand__symbol { height: 34px; }
  .brand__words strong { font-size: 16px; letter-spacing: .2em; }
  .brand__words > span { font-size: 7px; letter-spacing: .44em; }
  .eyebrow { letter-spacing: .22em; }
}

/* -------------------------------------------------------------------
   Preferências do usuário
   ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .stage__frame--light { animation: none !important; opacity: 1; }
  .stage__camera { animation: none !important; }
  .stage__dust { display: none; }
  .chart-line { stroke-dashoffset: 0; }
  .sky-win .w { opacity: .4; }
  .scene { --mx: 0 !important; --my: 0 !important; }
}
@media (forced-colors: active) {
  .gold-text { background: none; color: Highlight; }
  .stage { display: none; }
}