/* =========================================================================
   EDITORIAL PREMIUM — CAMADA CINEMATOGRÁFICA
   Complemento de `tokens.css`. Carregar SEMPRE depois dele.

     <link rel="stylesheet" href="tokens.css" />
     <link rel="stylesheet" href="cinematic.css" />

   O que essa camada adiciona ao modelo base:
     · grão de filme global (mata o gradiente digital chapado)
     · hero full-bleed 100dvh com aurora + grade em perspectiva
     · headline cinética (palavra sobe por baixo de uma máscara)
     · nav "ilha flutuante" que se transforma ao sair do hero
     · botão magnético (escala + varredura de cor)
     · cards empilhados com pin de scroll (escala + blur + fade)
     · artefatos funcionais: terminal, órbita, scanner, onda
     · spotlight que segue o cursor na grade de cards
     · contador que sobe, barra de progresso de leitura

   Regras que NÃO mudam: a cor da marca continua sendo a única cor de
   destaque, e tudo cai pra 0.001ms em `prefers-reduced-motion`.
   ========================================================================= */

:root {
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-mag: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --r-cine: 32px;
}
@media (max-width: 809px) {
  :root {
    --r-cine: 20px;
  }
}

/* =========================================================================
   1 · GRÃO DE FILME — overlay global
   ========================================================================= */
.grain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* A nav é fixa: sem isso, clicar num link do menu joga o título da seção
   pra debaixo dela. Vale pra qualquer alvo de âncora da página. */
:where(section, header, div, article)[id] {
  scroll-margin-top: 112px;
}
@media (max-width: 809px) {
  :where(section, header, div, article)[id] {
    scroll-margin-top: 86px;
  }
}

/* Barra de progresso de leitura — 2px no topo absoluto */
.progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 9998;
  height: 2px;
  width: 100%;
  transform-origin: left;
  transform: scaleX(var(--p, 0));
  background: var(--brand-grad);
  pointer-events: none;
}

/* =========================================================================
   2 · FUNDOS CINEMATOGRÁFICOS
   ========================================================================= */

/* Aurora: três manchas da marca que respiram devagar. */
.aurora {
  position: absolute;
  inset: -20% -10% auto;
  height: 130%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.aurora span {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  will-change: transform;
}
.aurora span:nth-child(1) {
  width: 46vw;
  height: 46vw;
  left: 4%;
  top: 2%;
  background: radial-gradient(circle, rgba(62, 168, 255, 0.5), transparent 68%);
  animation: drift-a 22s ease-in-out infinite alternate;
}
.aurora span:nth-child(2) {
  width: 38vw;
  height: 38vw;
  right: 6%;
  top: 12%;
  background: radial-gradient(circle, rgba(111, 224, 255, 0.36), transparent 68%);
  animation: drift-b 27s ease-in-out infinite alternate;
}
.aurora span:nth-child(3) {
  width: 52vw;
  height: 34vw;
  left: 28%;
  bottom: -8%;
  background: radial-gradient(circle, rgba(26, 111, 224, 0.42), transparent 70%);
  animation: drift-c 31s ease-in-out infinite alternate;
}
@keyframes drift-a {
  to {
    transform: translate3d(9%, 7%, 0) scale(1.14);
  }
}
@keyframes drift-b {
  to {
    transform: translate3d(-11%, 10%, 0) scale(1.08);
  }
}
@keyframes drift-c {
  to {
    transform: translate3d(7%, -9%, 0) scale(1.16);
  }
}

/* Grade em perspectiva — o "chão" da cena. */
.floor {
  position: absolute;
  inset: auto 0 0;
  height: 46vh;
  pointer-events: none;
  z-index: 0;
  perspective: 340px;
  -webkit-mask-image: linear-gradient(to top, #000, transparent 88%);
  mask-image: linear-gradient(to top, #000, transparent 88%);
}
.floor::before {
  content: "";
  position: absolute;
  inset: -60% -50% -40%;
  transform: rotateX(72deg);
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--brand) 34%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--brand) 34%, transparent) 1px, transparent 1px);
  background-size: 62px 62px;
  animation: floor-run 9s linear infinite;
}
@keyframes floor-run {
  to {
    background-position: 0 62px;
  }
}

/* Véu: escurece a base do hero pra o texto sempre ganhar.
   Não pode ser opaco no rodapé, senão apaga a grade em perspectiva. */
.veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    color-mix(in oklab, var(--bg) 78%, transparent) 0%,
    color-mix(in oklab, var(--bg) 62%, transparent) 26%,
    color-mix(in oklab, var(--bg) 34%, transparent) 56%,
    transparent 82%
  );
}

/* =========================================================================
   3 · HERO CINEMATOGRÁFICO
   ========================================================================= */
.hero-cine {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-block: 160px 72px;
  overflow: hidden;
  isolation: isolate;
}
.hero-cine > .container {
  position: relative;
  z-index: 2;
}
.hero-cine__in {
  display: grid;
  gap: 26px;
  justify-items: start;
  max-width: 940px;
}
@media (max-width: 809px) {
  .hero-cine {
    min-height: 92svh;
    padding-block: 130px 56px;
  }
}

/* Par de CTAs do hero. No mobile os dois viram full-width (regra do modelo:
   tap target confortável). Usar ESTA classe em vez de `style="width:auto"`
   no botão — estilo inline vence media query e quebra o mobile. */
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  width: 100%;
}
.hero-cta .btn {
  width: auto;
}
@media (max-width: 809px) {
  .hero-cta .btn {
    width: 100%;
  }
}

/* Dica de scroll: um fio que desce sozinho. */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  z-index: 3;
  translate: -50% 0;
  width: 1px;
  height: 54px;
  background: linear-gradient(to bottom, transparent, var(--border-strong));
  overflow: hidden;
}
.scroll-cue::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 18px;
  background: var(--brand);
  animation: cue 2.1s var(--ease) infinite;
}
@keyframes cue {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  100% {
    transform: translateY(300%);
    opacity: 0;
  }
}
@media (max-width: 809px) {
  .scroll-cue {
    display: none;
  }
}

/* =========================================================================
   4 · HEADLINE CINÉTICA — a palavra sobe por baixo de uma máscara
   ========================================================================= */
.kinetic .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* A mascara e um overflow:hidden, e 0.06em nao dava conta da Newsreader
     italica: cortava a barriga do "q"/"g" embaixo e chegava a rocar o acento
     do "e"/"a" em cima (portugues tem diacritico em tudo). O padding abre
     espaco DENTRO da mascara e a margem negativa devolve esse espaco ao
     layout, entao a palavra continua subindo do mesmo lugar e nada desloca.
     Tambem sobra folga lateral: a italica avanca pro lado no ultimo glifo. */
  padding: 0.26em 0.3em 0.38em 0.22em;
  margin: -0.26em -0.3em -0.38em -0.22em;
}
.kinetic .w > i {
  display: inline-block;
  font-style: inherit;
  transform: translateY(112%);
  transition: transform 0.9s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 55ms);
}
.kinetic.is-in .w > i {
  transform: translateY(0);
}

/* Rasura viva: um fio azul que risca o preço antigo ao entrar na tela.
   `inline-block` é obrigatório: em elemento de bloco (<p>) o fio esticaria
   pela largura inteira do card em vez de riscar só o texto. */
.strike {
  display: inline-block;
  position: relative;
  color: var(--muted);
  white-space: nowrap;
}
.strike::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: 52%;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease-out) 0.25s;
}
.strike.is-in::after {
  transform: scaleX(1);
}

/* =========================================================================
   5 · NAV ILHA FLUTUANTE
   ========================================================================= */
.isle {
  position: fixed;
  z-index: 90;
  top: 16px;
  left: 50%;
  translate: -50% 0;
  width: min(1160px, calc(100% - 32px));
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: transparent;
  transition:
    background 0.4s var(--ease),
    border-color 0.4s var(--ease),
    box-shadow 0.4s var(--ease),
    top 0.4s var(--ease),
    width 0.4s var(--ease);
}
.isle.is-stuck {
  top: 10px;
  width: min(960px, calc(100% - 24px));
  background: color-mix(in oklab, var(--surface) 72%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-color: var(--border);
  box-shadow: var(--shadow);
}
.isle__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 10px 12px 10px 24px;
}
.isle__links {
  display: flex;
  gap: 28px;
  font-size: 0.88rem;
  color: var(--muted);
}
.isle__links a {
  position: relative;
  padding-block: 4px;
  transition: color 0.2s var(--ease);
}
.isle__links a::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--ease);
}
.isle__links a:hover {
  color: var(--fg);
}
.isle__links a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
.isle .btn {
  min-height: 42px;
  padding: 10px 22px;
  font-size: 0.88rem;
  width: auto;
}
@media (max-width: 999px) {
  .isle__links {
    display: none;
  }
  .isle__in {
    padding-left: 20px;
  }
}

/* =========================================================================
   6 · BOTÃO MAGNÉTICO
   ========================================================================= */
.btn.magnetic {
  transition:
    transform 0.32s var(--ease-mag),
    box-shadow 0.32s var(--ease-mag),
    color 0.22s var(--ease);
}
.btn.magnetic:hover {
  transform: scale(1.03);
}
.btn--primary.magnetic:hover {
  box-shadow: 0 14px 40px -14px color-mix(in oklab, var(--brand) 70%, transparent);
}
.btn.magnetic:active {
  transform: scale(0.99);
}

/* =========================================================================
   7 · CARDS EMPILHADOS COM PIN DE SCROLL
   O JS escreve --cover (0→1) conforme o próximo card cobre este.
   ========================================================================= */
.stack-scene {
  display: grid;
  gap: 28px;
}
.stack-card {
  position: sticky;
  top: calc(96px + var(--i, 0) * 14px);
  border-radius: var(--r-cine);
  overflow: hidden;
  transform: scale(calc(1 - 0.08 * var(--cover, 0)));
  filter: blur(calc(14px * var(--cover, 0)));
  opacity: calc(1 - 0.45 * var(--cover, 0));
  transform-origin: top center;
  will-change: transform, filter, opacity;
}
.stack-card__in {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
  padding: clamp(30px, 5vw, 60px);
  min-height: 380px;
}
.stack-card__num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  color: var(--brand);
}
@media (max-width: 899px) {
  .stack-card {
    position: static;
    transform: none;
    filter: none;
    opacity: 1;
  }
  .stack-card__in {
    grid-template-columns: 1fr;
    gap: 30px;
    min-height: 0;
  }
}

/* =========================================================================
   8 · ARTEFATOS FUNCIONAIS
   ========================================================================= */

/* -- 8.1 Terminal / telemetria (texto que digita sozinho) -- */
.term {
  background: color-mix(in oklab, var(--bg) 70%, var(--surface));
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.9;
  min-height: 210px;
  overflow: hidden;
}
.term__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.term__line {
  color: var(--muted);
  white-space: pre-wrap;
}
.term__line b {
  color: var(--brand);
  font-weight: 500;
}
.term__line em {
  color: var(--fg);
  font-style: normal;
}
.term__cursor {
  display: inline-block;
  width: 7px;
  height: 1em;
  background: var(--brand);
  vertical-align: -0.15em;
  animation: blink 1.05s steps(1) infinite;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* Ponto vivo — indicador de estado */
.dot-live {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3ddc84;
  flex: none;
}
.dot-live::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid #3ddc84;
  animation: ping 2s var(--ease) infinite;
}
@keyframes ping {
  0% {
    transform: scale(0.6);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

/* -- 8.2 Órbita: chips girando em volta de um núcleo --
   `--ring` manda em tudo: o anel externo tem esse diâmetro e os chips ficam
   exatamente EM CIMA dele (raio = metade). Mexeu no tamanho, mexeu nos dois. */
.orbit {
  --ring: 336px;
  position: relative;
  aspect-ratio: 1;
  width: var(--ring);
  max-width: 100%;
  margin-inline: auto;
  display: grid;
  place-items: center;
}
.orbit__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed color-mix(in oklab, var(--brand) 40%, transparent);
  animation: spin 46s linear infinite;
}
.orbit__ring--in {
  inset: 24%;
  border-style: solid;
  border-color: color-mix(in oklab, var(--brand) 24%, transparent);
  animation-duration: 32s;
  animation-direction: reverse;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.orbit__chip {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 58px;
  height: 58px;
  margin: -29px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border: 1px solid color-mix(in oklab, var(--brand) 22%, var(--border));
  box-shadow: var(--shadow-soft);
  /* --a = ângulo em graus. O raio sai do --ring, então o chip cai no anel. */
  transform: rotate(calc(var(--a) * 1deg)) translate(calc(var(--ring) / 2))
    rotate(calc(var(--a) * -1deg));
}
.orbit__chip img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}
.orbit__core {
  position: relative;
  z-index: 2;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  background: radial-gradient(circle at 34% 28%, color-mix(in oklab, var(--brand) 34%, var(--surface)), var(--surface) 72%);
  border: 1px solid color-mix(in oklab, var(--brand) 40%, var(--border));
  box-shadow: 0 0 60px -12px color-mix(in oklab, var(--brand) 62%, transparent);
}
@media (max-width: 809px) {
  .orbit {
    --ring: 250px;
  }
  .orbit__chip {
    width: 44px;
    height: 44px;
    margin: -22px;
  }
  .orbit__chip img {
    width: 20px;
    height: 20px;
  }
  .orbit__core {
    width: 92px;
    height: 92px;
  }
}

/* -- 8.3 Scanner: feixe varrendo uma grade -- */
.scan {
  position: relative;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg) 60%, var(--surface));
  overflow: hidden;
  min-height: 210px;
  padding: 20px;
}
.scan__grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
}
.scan__cell {
  aspect-ratio: 1;
  border-radius: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.scan__cell.hit {
  background: color-mix(in oklab, var(--brand) 34%, var(--surface-2));
  border-color: color-mix(in oklab, var(--brand) 60%, var(--border));
}
.scan__beam {
  position: absolute;
  inset: 0 auto 0 0;
  width: 120px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--brand) 26%, transparent), transparent);
  animation: sweep 4.2s var(--ease) infinite;
  pointer-events: none;
}
@keyframes sweep {
  0% {
    transform: translateX(-130px);
  }
  100% {
    transform: translateX(calc(100% + 100vw / 3));
  }
}

/* -- 8.4 Onda: traçado que se desenha (stroke-dashoffset) -- */
.wave path {
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: draw 5s var(--ease) infinite;
}
@keyframes draw {
  0% {
    stroke-dashoffset: 1400;
  }
  55% {
    stroke-dashoffset: 0;
  }
  90%,
  100% {
    stroke-dashoffset: -1400;
  }
}

/* -- 8.5 Barra de crescimento (colunas que sobem no reveal) -- */
.bars {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 190px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in oklab, var(--bg) 60%, var(--surface));
}
.bars i {
  flex: 1;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(to top, color-mix(in oklab, var(--brand) 22%, transparent), color-mix(in oklab, var(--brand) 62%, transparent));
  height: 6%;
  transition: height 1.1s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 80ms);
}
.bars.is-in i {
  height: calc(var(--h) * 1%);
}
.bars i:last-child {
  background: var(--brand-grad);
}

/* =========================================================================
   9 · SPOTLIGHT NO CURSOR (grade de cards)
   O JS escreve --mx/--my por card, em px, relativos ao próprio card.
   ========================================================================= */
.spot {
  position: relative;
  isolation: isolate;
}
.spot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  background: radial-gradient(
    340px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in oklab, var(--brand) 14%, transparent),
    transparent 72%
  );
}
.spot:hover::before {
  opacity: 1;
}

/* Inclinação 3D discreta no ponteiro */
.tilt {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.4s var(--ease);
}

/* =========================================================================
   10 · MANIFESTO — bloco escuro de contraste
   ========================================================================= */
.manifesto {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border-block: 1px solid var(--border);
}
.manifesto::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 80% at 82% 12%, color-mix(in oklab, var(--brand) 12%, transparent), transparent 70%),
    radial-gradient(50% 60% at 8% 92%, color-mix(in oklab, var(--brand-deep) 16%, transparent), transparent 70%);
}
.manifesto .container {
  position: relative;
  z-index: 1;
}
.manifesto__small {
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  color: var(--muted);
  max-width: 30ch;
}
.manifesto__big {
  font-size: clamp(2.2rem, 5.6vw, 4.4rem);
  max-width: 18ch;
}

/* =========================================================================
   11 · CONTADOR
   ========================================================================= */
.count {
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   12 · MISC
   ========================================================================= */

/* Régua de dado em mono — usada em rodapés de seção */
.datarow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.datarow span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Card com borda-gradiente (só pro card âncora / paywall) */
.edge {
  position: relative;
}
.edge::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, color-mix(in oklab, var(--brand) 70%, transparent), transparent 42%, color-mix(in oklab, var(--brand-deep) 50%, transparent));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Wordmark gigante sangrando na base do rodapé */
.bleed {
  font-size: clamp(4rem, 21vw, 17rem);
  line-height: 0.73;
  color: var(--surface-2);
  text-align: center;
  margin-bottom: -0.14em;
  user-select: none;
  pointer-events: none;
}

/* Barra fixa de CTA no mobile */
.dock {
  position: fixed;
  inset: auto 0 0;
  z-index: 80;
  display: none;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
}
@media (max-width: 809px) {
  .dock {
    display: block;
  }
  body.has-dock {
    padding-bottom: 88px;
  }
}

/* =========================================================================
   13 · ACESSIBILIDADE — nada se mexe se o sistema pedir pra não mexer
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .aurora span,
  .floor::before,
  .scroll-cue::after,
  .orbit__ring,
  .scan__beam,
  .wave path,
  .dot-live::after,
  .term__cursor {
    animation: none !important;
  }
  .kinetic .w > i {
    transform: none !important;
    transition: none !important;
  }
  .strike::after {
    transform: scaleX(1) !important;
    transition: none !important;
  }
  .stack-card {
    position: static !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
  .bars i {
    height: calc(var(--h) * 1%) !important;
    transition: none !important;
  }
  .tilt {
    transform: none !important;
  }
}