/* MassaCoin — R299: refinamento VISUAL da página inicial (azul-marinho + dourado, cartões modernos).
   SOMENTE apresentação: nenhum HTML, texto, link, botão, rota ou regra foi alterado. Tudo que existia continua existindo e funcionando.
   Inspiração: cartões em degradê azul com ícone dourado e imagens/blocos de destaque ocupando a largura. */
:root { --vh-navy: var(--mc-p-dark, #0A4D8C); --vh-blue: var(--mc-p, #1D70B8); --vh-gold: #e0b44a; --vh-gold-2: #f4d77d; --vh-ink: #0b1b3f; }
:root[data-mc-paleta="padrao"] { --vh-blue: #2A6AC0; --vh-navy: #174C9C; }   /* azul royal da imagem de referência (só no tema padrão; os outros temas seguem a cor escolhida) */

/* ---------- Pilares do ecossistema: cartões em degradê com ícone dourado ---------- */
html body .pillars-grid { gap: 14px; }
html body .pillar-card { position: relative; overflow: hidden; border: 1px solid color-mix(in srgb, var(--vh-gold) 55%, transparent) !important; border-radius: 22px !important;
  background: linear-gradient(160deg, var(--vh-blue) 0%, var(--vh-navy) 100%) !important; box-shadow: 0 10px 24px color-mix(in srgb, var(--vh-navy) 22%, transparent), inset 0 1px 0 rgba(255,255,255,.12) !important; transition: transform .18s ease, box-shadow .18s ease; }
html body .pillar-card::after { content: ""; position: absolute; right: -28px; top: -28px; width: 96px; height: 96px; border-radius: 50%; background: radial-gradient(circle, rgba(244,215,125,.38), transparent 70%); pointer-events: none; }
html body .pillar-card .highlight-card__icon { background: linear-gradient(145deg, var(--vh-gold-2), var(--vh-gold)) !important; color: var(--vh-ink) !important; border: 0 !important; box-shadow: 0 4px 10px rgba(0,0,0,.22); }
html body .pillar-card .highlight-card__icon svg { stroke: var(--vh-ink) !important; color: var(--vh-ink) !important; }
html body .pillar-card .highlight-card__title { color: #fff !important; }
html body .pillar-card .highlight-card__sub { color: rgba(255,255,255,.82) !important; }
/* o último pilar (Contato) em dourado, como destaque final */
html body .pillars-grid > .pillar-card:last-child:nth-child(odd) { grid-column: 1 / -1; background: linear-gradient(160deg, #f6e2a1 0%, #e0b44a 100%) !important; border-color: rgba(11,27,63,.18) !important; box-shadow: 0 10px 24px rgba(160,120,20,.25), inset 0 1px 0 rgba(255,255,255,.5) !important; }
html body .pillars-grid > .pillar-card:last-child:nth-child(odd) .highlight-card__icon { background: linear-gradient(145deg, var(--vh-blue), var(--vh-navy)) !important; }
html body .pillars-grid > .pillar-card:last-child:nth-child(odd) .highlight-card__icon svg { stroke: #fff !important; color: #fff !important; }
html body .pillars-grid > .pillar-card:last-child:nth-child(odd) .highlight-card__title { color: var(--vh-ink) !important; }
html body .pillars-grid > .pillar-card:last-child:nth-child(odd) .highlight-card__sub { color: rgba(11,27,63,.78) !important; }
@media (hover: hover) { html body .pillar-card:hover { transform: translateY(-3px); box-shadow: 0 16px 30px color-mix(in srgb, var(--vh-navy) 30%, transparent) !important; } }

/* ---------- Rede MassaCoin e Central de Recompensas: cartões de destaque ---------- */
html body .statement-row--feature { border-radius: 22px !important; border: 1px solid color-mix(in srgb, var(--vh-gold) 55%, transparent) !important; background: linear-gradient(135deg, #fff 0%, #f1f6ff 100%) !important; box-shadow: 0 8px 22px color-mix(in srgb, var(--vh-navy) 12%, transparent) !important; position: relative; overflow: hidden; }
html body .statement-row--feature::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, var(--vh-gold-2), var(--vh-gold)); }
html body .statement-row--feature .statement-row__icon { background: linear-gradient(145deg, var(--vh-gold-2), var(--vh-gold)) !important; color: var(--vh-ink) !important; border-radius: 16px !important; box-shadow: 0 4px 10px rgba(160,120,20,.3); }
html body .statement-row--feature .statement-row__icon svg { stroke: var(--vh-ink) !important; }
html body .statement-row--feature .statement-row__title { color: var(--vh-navy) !important; font-weight: 800; }
html body .statement-row--feature .statement-row__amount { color: var(--vh-blue) !important; font-weight: 800; }

/* ---------- Botões de operação (Pagar, Transferir, Receber, Extrato, Cartões) ---------- */
html body .btn-pill, html body .shortcut { border-radius: 999px; border: 1px solid color-mix(in srgb, var(--vh-gold) 50%, transparent) !important; background: linear-gradient(180deg, #fff 0%, #e9f0ff 100%) !important; box-shadow: 0 6px 14px color-mix(in srgb, var(--vh-navy) 14%, transparent) !important; color: var(--vh-navy) !important; transition: transform .15s ease, box-shadow .15s ease; }
html body .btn-pill:active, html body .shortcut:active { transform: scale(.97); }
html body .btn-pill .btn-pill__icon, html body .shortcut .shortcut__icon { color: var(--vh-blue) !important; }

/* ---------- Títulos de seção com filete dourado ---------- */
html body .section-heading { position: relative; padding-bottom: 8px; }
html body .section-heading::after { content: ""; position: absolute; left: 0; bottom: 0; width: 54px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--vh-gold-2), var(--vh-gold)); }

/* ---------- Botão "Cadastre-se" em azul-marinho com borda dourada ---------- */
html body .quick-actions .btn-cta, html body .btn-cta--wide { box-shadow: 0 10px 22px color-mix(in srgb, var(--vh-navy) 28%, transparent); border: 1px solid color-mix(in srgb, var(--vh-gold) 60%, transparent); }

@media (prefers-reduced-motion: reduce) { html body .pillar-card, html body .btn-pill, html body .shortcut { transition: none; } }