/* 14/11 (noite) · tipografia dos títulos igual à do Bumbots: Fraunces, peso
   400, eixo SOFT no máximo; o trecho em destaque vai em itálico com WONK.
   (substitui a grotesca branca dos títulos; o texto corrido segue em Geist.) */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 600; font-display: swap; src: url(assets/fonts/fraunces.woff2) format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 300 500; font-display: swap; src: url(assets/fonts/fraunces-italic.woff2) format("woff2"); }
:root { --serif: "Fraunces", Georgia, serif; }
.cosmos h1, .cosmos h2, .cosmos h3, .cosmos .h2, .hp-title, .statement .h2, .svc h3, .svc-head .h2, .meet-head h2, .meet .lines p,
.stage-heading h2, .foot-claim, .bang-title, .clients-title {
  font-family: var(--serif) !important; font-weight: 400 !important; font-style: normal !important;
  font-variation-settings: "SOFT" 100, "WONK" 0; letter-spacing: -.03em !important; }
.cosmos h1 em, .cosmos h2 em, .cosmos h3 em, .cosmos .h2 em, .hp-title em, .meet-head h2 em, .stage-heading h2 em, .foot-claim em, .bang-title em {
  font-family: var(--serif) !important; font-style: italic !important; font-weight: 400 !important;
  font-variation-settings: "SOFT" 100, "WONK" 1; color: rgba(240,240,240,.66) !important; }
.hp-title { letter-spacing: -.035em !important; line-height: 1 !important; }
.statement .h2 { line-height: .98; }
/* o papel do formulário é claro: lá o destaque escurece em vez de clarear */
.script-wrap h3 { font-family: var(--serif) !important; font-weight: 400 !important; font-variation-settings: "SOFT" 100, "WONK" 0; letter-spacing: -.03em !important; }
.script-wrap h3 em, .cta-done em { font-family: var(--serif) !important; font-style: italic !important; font-variation-settings: "SOFT" 100, "WONK" 1; color: rgba(40,34,22,.6) !important; }

/* 14/11 (pedido dele): o subtítulo da abertura sem negrito e um pouco menor */
html .hero h1.hp-title em { display: block; font-weight: 300 !important; font-size: .6em; line-height: 1.16; margin-top: .4em; max-width: 26em; letter-spacing: -.012em !important; font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 36 !important; color: rgba(236, 234, 226, .7) !important; }

/* o botão da abertura (14/11, 2ª versão): uma janela para a mesma nebulosa do fundo do site,
   com o fio dourado do quadro do Vitruviano em volta. a nebulosa anda devagar lá dentro */
.hero .debut-cta { position: relative; overflow: hidden; isolation: isolate; color: #f3ecdc; font-weight: 500; letter-spacing: .01em;
  border: 1px solid rgba(222, 190, 132, .55); border-radius: 4px;
  background: linear-gradient(180deg, rgba(255, 244, 220, .07), rgba(6, 12, 28, .25)), url(assets/hero/sky-1280.webp) 74% 49% / 344% auto no-repeat, #17304f;
  box-shadow: 0 0 0 1px rgba(222, 190, 132, .07) inset, 0 0 26px rgba(84, 170, 182, .16), 0 14px 32px rgba(3, 7, 18, .5);
  animation: cta-drift 28s ease-in-out infinite alternate; transition: border-color .4s, box-shadow .4s, transform .4s; }
.hero .debut-cta > span[aria-hidden] { color: #e2c486; }
@keyframes cta-drift { from { background-position: 0 0, 70% 46%; } to { background-position: 0 0, 79% 53%; } }
.hero .debut-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .8;
  background-image: radial-gradient(1px 1px at 12% 30%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 38% 72%, #e8eeff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 66% 22%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 84% 64%, #fff3dc 50%, transparent 51%), radial-gradient(1px 1px at 52% 48%, #fff 50%, transparent 51%); }
.hero .debut-cta::after { content: ""; position: absolute; bottom: -1px; left: -30%; width: 26%; height: 1px; background: linear-gradient(90deg, transparent, #fff1cf, transparent); animation: cta-star 5.5s cubic-bezier(.6, 0, .4, 1) infinite; }
@keyframes cta-star { 0% { left: -30%; } 60%, 100% { left: 130%; } }
.hero .debut-cta:hover { border-color: rgba(236, 206, 150, .9); transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(236, 206, 150, .14) inset, 0 0 38px rgba(84, 170, 182, .3), 0 18px 36px rgba(3, 7, 18, .55); }
@media (prefers-reduced-motion: reduce) { .hero .debut-cta, .hero .debut-cta::after { animation: none; } }

/* 14/11 · o cabeçalho no mesmo idioma do botão: marinho do céu com o fio dourado, sem o cinza de antes */
.head-island { background: rgba(14, 27, 48, .7); border: 1px solid rgba(222, 190, 132, .22); border-radius: 6px; box-shadow: 0 12px 30px rgba(3, 7, 18, .4); }
.head-kicker { color: rgba(226, 204, 160, .62); }
.btn-head { font-family: var(--ui, inherit); font-variation-settings: normal; font-weight: 500; letter-spacing: .01em; color: #f3ecdc;
  background: linear-gradient(180deg, rgba(255, 244, 220, .06), rgba(6, 12, 28, .2)), url(assets/hero/sky-1280.webp) 74% 49% / 900% auto no-repeat, #17304f;
  border: 1px solid rgba(222, 190, 132, .5); border-radius: 4px; }
.btn-head .arr { color: #e2c486; }
.btn-head:hover { background: linear-gradient(180deg, rgba(255, 244, 220, .1), rgba(6, 12, 28, .1)), url(assets/hero/sky-1280.webp) 70% 52% / 900% auto no-repeat, #1b3759; border-color: rgba(236, 206, 150, .9); color: #fff; }

/* 14/11 · na abertura, "Moonworks" é a própria logo (pedido dele) */
.hp-title .hp-logo .mw-logo { display: inline-block; height: .8em; width: auto; vertical-align: -.02em; fill: currentColor; }

/* 14/11 (pedido dele): sem as duas ilhas do cabeçalho também no desktop; a logo já está na abertura */
.site-head { display: none !important; }
/* o botão da abertura agora convida a descer: a seta respira para baixo */
.hero .debut-cta > span[aria-hidden] { display: inline-block; animation: cta-down 1.8s ease-in-out infinite; }
@keyframes cta-down { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .hero .debut-cta > span[aria-hidden] { animation: none; } }