/* ==========================================================================
   RFSolutions — camada de modernização sobre o tema base (assets/main.css)
   Carregar DEPOIS de main.css. Mantém a estrutura do tema e ajusta marca,
   tipografia e detalhes. Funciona nos temas claro e escuro.
   ========================================================================== */

/* 1. Paleta: cores do logo Selo 360 (ciano #22D3EE -> índigo #6366F1) no lugar do roxo do template */
:root {
  --color-primary-50:  #eef2ff;
  --color-primary-100: #e0e7ff;
  --color-primary-200: #c7d2fe;
  --color-primary-300: #a5b4fc;
  --color-primary-400: #818cf8;
  --color-primary-500: #6366f1;
  --color-primary-600: #4f46e5;
  --color-ns-cyan: #22d3ee;
  --rf-grad: linear-gradient(135deg, #22d3ee 0%, #6366f1 100%);        /* gradiente do logo (fundo escuro) */
  --rf-grad-light: linear-gradient(135deg, #0891b2 0%, #4f46e5 100%);  /* gradiente do logo (fundo claro) */
  --rf-ink: #0b0e13;
}

/* 2. Tipografia: títulos com peso médio e tracking mais justo */
h1, h2, .text-heading-1, .text-heading-2 { font-weight: 500; letter-spacing: -0.035em; }
h3, .text-heading-5 { font-weight: 500; letter-spacing: -0.015em; }

/* 3. Badges com ponto na cor da marca */
.badge.badge-primary-light { padding-left: 24px !important; background-image: radial-gradient(circle at 13px 50%, #22d3ee 3px, transparent 3.6px); }
.badge.rf-live { background-image: radial-gradient(circle at 13px 50%, #22c55e 3.2px, transparent 3.8px); }

/* 4. Botões */
.rf-btn-wa { background: var(--rf-grad) !important; color: #06101f !important; border: 0 !important; font-weight: 600 !important;
  display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 12px 30px -12px rgba(99, 102, 241, .75); }
.rf-btn-wa svg { width: 20px; height: 20px; flex: none; }
.rf-btn-wa:hover { filter: brightness(1.06); }
.rf-btn-ghost { background: rgba(255, 255, 255, .4) !important; color: var(--rf-ink) !important; border: 1px solid rgba(15, 18, 23, .15) !important; }
.rf-btn-ghost:hover { background: rgba(255, 255, 255, .7) !important; }
.rf-cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
@media (min-width: 768px) { .rf-cta-row { justify-content: flex-start; } }

/* 5. Hero: ver a seção 23 (hero novo). Mantidos só os estilos da linha de confiança */
.rf-trust { display: flex; align-items: center; gap: 14px; text-align: left; }
.rf-trust img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fff; flex: none; }
.rf-trust-sub { color: rgba(15, 18, 23, .6); }

/* 6. Faixa de tecnologias (substitui os logos fictícios) */
.rf-stack { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 44px; color: #6b7280; font-size: 19px; font-weight: 500; }
.rf-stack span { display: inline-flex; align-items: center; gap: 10px; }
.rf-stack img { width: 26px; height: 26px; filter: grayscale(1); opacity: .75; }
.dark .rf-stack img { filter: grayscale(1) brightness(1.6); }
.dark .rf-stack img[src*="tech/linux"] { filter: invert(1); }
.rf-stack small { font-size: 13px; font-weight: 400; margin-right: 6px; }
.dark .rf-stack { color: #8a93a3; }

/* 7. Cards: ícone em caixa com tom da marca + hover */
.stack-cards__item > span:first-child { width: 56px; height: 56px; display: grid !important; place-items: center; border-radius: 14px;
  background: rgba(99, 102, 241, .12); border: 1px solid rgba(99, 102, 241, .35); color: #4f46e5 !important; font-size: 28px !important; }
.dark .stack-cards__item > span:first-child { color: #a5b4fc !important; }
.rf-card { transition: border-color .3s, transform .3s; }
.rf-card:hover { border-color: rgba(99, 102, 241, .6) !important; transform: translateY(-4px); }
.rf-link { display: inline-flex; gap: 6px; align-items: center; color: #4f46e5; font-weight: 500; margin-top: 6px; }
.dark .rf-link { color: #a5b4fc; }

/* 8. Espaçamentos verticais consistentes (o tema tinha 200px em alguns blocos) */
@media (min-width: 768px) { .md\:pb-\[200px\] { padding-bottom: 100px !important; } }
@media (min-width: 1280px) { .xl\:pb-\[200px\] { padding-bottom: 100px !important; } }

/* 9. Metodologia: título em 2 linhas, números em ciano, etapas alinhadas pelo topo */
@media (min-width: 1024px) { .lg\:max-w-\[396px\] { max-width: 680px !important; } }
.text-primary-500 { color: #0891b2 !important; font-weight: 600; }
.dark .text-primary-500 { color: #22d3ee !important; }
.progress-line { background: var(--rf-grad) !important; }
@media (min-width: 1024px) { .md\:items-start.lg\:items-center { align-items: flex-start !important; } }

/* 10. Gradientes/3D roxo-rosa do template convertidos para o azul da marca */
img[src*="ns-img-528"], img[src*="ns-img-507"], img[src*="ns-img-538"] { filter: hue-rotate(-45deg) saturate(1.15); }
[class*="ns-img-25.png"] { background: var(--rf-grad) !important; }

/* 11. Ilustrações em português (substituem imagens do template em inglês) */
.rf-code { width: 100%; background: #0b0f16; border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px; overflow: hidden; font: 13px/1.7 ui-monospace, Consolas, monospace; }
.rf-code .bar { display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.rf-code .bar i { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; }
.rf-code .bar i:nth-child(2) { background: #f59e0b; } .rf-code .bar i:nth-child(3) { background: #22c55e; }
.rf-code pre { margin: 0; padding: 14px 16px; color: #c9d4e5; white-space: pre-wrap; }
.rf-code .c { color: #64748b; } .rf-code .k { color: #a5b4fc; } .rf-code .s { color: #34d399; } .rf-code .f { color: #22d3ee; }

.rf-steps, .rf-feed { display: grid; gap: 8px; width: 100%; }
.rf-steps div, .rf-feed > div { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; font-size: 13px;
  background: #f1f4f9; color: #4b5563; }
.rf-steps b { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; background: rgba(15, 18, 23, .08); }
.rf-steps div.on { background: rgba(99, 102, 241, .12); color: var(--rf-ink); border: 1px solid rgba(99, 102, 241, .45); }
.rf-steps .on b { background: var(--rf-grad); color: #06101f; }
.rf-feed > div { align-items: flex-start; border-radius: 12px; }
.rf-feed > div > span { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: #22d3ee; }
.rf-feed > div > span.g { background: #34d399; } .rf-feed > div > span.b { background: #818cf8; }
.rf-feed small { display: block; color: #6b7280; font-size: 11px; }
.dark .rf-steps div, .dark .rf-feed > div { background: rgba(255, 255, 255, .04); color: #b6c2d6; }
.dark .rf-steps b { background: rgba(255, 255, 255, .08); }
.dark .rf-steps div.on { background: rgba(99, 102, 241, .18); color: #fff; }
.dark .rf-feed small { color: #64748b; }

/* 12. Portfólio: legenda alinhada à esquerda (título + descrição empilhados) */
.rf-caption p { margin-top: 4px; }

/* 13. Tecnologias: cards escuros sólidos (contraste) sobre o painel claro existente */
.rf-tech { background: #12161d !important; color: #fff; }
.rf-tech h5 { color: #fff; } .rf-tech p { color: rgba(255, 255, 255, .55); }
.rf-tech figure { display: grid; place-items: center; background: rgba(255, 255, 255, .06); border-radius: 14px; }
.rf-tech figure img { width: 32px !important; height: 32px !important; }
.rf-tech img[src*="tech/linux"] { filter: invert(1); }

/* 14. Preços: selo "Mais procurado" */
.rf-popular { display: table; margin-bottom: 12px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--rf-grad); color: #06101f; }

/* 15. CTA final com canais de contato */
#cta-heading { max-width: 780px; margin-left: auto; margin-right: auto; }
.rf-contacts { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 28px; margin-top: 22px; font-size: 14px; color: rgba(15, 18, 23, .6); }
.rf-contacts b { color: var(--rf-ink); font-weight: 500; }
.dark .rf-contacts { color: rgba(255, 255, 255, .6); } .dark .rf-contacts b { color: #fff; }

/* 16. Marca: logo do prisma + nome no cabeçalho e rodapé */
.rf-logo { display: flex; align-items: center; }
.rf-logo img { display: none; width: auto; }
.rf-logo-full { height: 40px; } .rf-logo-mark { height: 38px; }
/* celular/tablet: só o símbolo */
.rf-logo .rf-logo-mark.rf-on-light { display: block; }
.dark .rf-logo .rf-logo-mark.rf-on-light { display: none; }
.dark .rf-logo .rf-logo-mark.rf-on-dark { display: block; }
/* desktop: símbolo + nome */
@media (min-width: 1024px) {
  .rf-logo .rf-logo-mark { display: none !important; }
  .rf-logo .rf-logo-full.rf-on-light { display: block; }
  .dark .rf-logo .rf-logo-full.rf-on-light { display: none; }
  .dark .rf-logo .rf-logo-full.rf-on-dark { display: block; }
}
.rf-logo-footer { height: 64px; width: auto; }

/* 17. Botão flutuante do WhatsApp (fica acima do botão de tema) */
.rf-wa-float { position: fixed; right: 18px; bottom: 84px; z-index: 9998; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff;
  display: grid; place-items: center; box-shadow: 0 12px 30px -8px rgba(37, 211, 102, .7); transition: transform .2s; }
.rf-wa-float:hover { transform: scale(1.06); }
.rf-wa-float svg { width: 28px; height: 28px; }

/* 18. Tags de tecnologia mantêm a grafia correta (PHP, MySQL...) */
.badge.\!text-xs { text-transform: none !important; }
.badge.\!text-xs::first-letter { text-transform: none !important; }

/* 19. Cabeçalho/rodapé são injetados via fetch (assíncrono) e às vezes chegam depois que o
   main.js já iniciou as animações — sem isto, o conteúdo do rodapé ficava invisível (opacity 0).
   Quando o GSAP anima o elemento, o estilo inline dele continua tendo prioridade. */
footer [data-ns-animate], header [data-ns-animate] { opacity: 1; }

/* 20. Painel de tecnologias (substitui a imagem "Works with your favorite tools" do template) */
.rf-tools { background: #12161d; border-radius: 20px; padding: 36px 28px; text-align: center; }
.rf-tools-title { color: #fff; font-size: 24px; font-weight: 500; letter-spacing: -.02em; margin-bottom: 24px; }
.rf-tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rf-tools-grid span { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; border-radius: 14px;
  background: rgba(255, 255, 255, .05); color: rgba(255, 255, 255, .75); font-size: 13px; }
.rf-tools-grid img { width: 32px; height: 32px; }
.rf-tools-grid img[src*="tech/linux"] { filter: invert(1); }

/* 21. Menu para celular/tablet (a navegação original só existia a partir de 1280px) */
.rf-menu-btn { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 11px;
  border-radius: 999px; border: 1px solid rgba(15, 18, 23, .12); background: transparent; cursor: pointer; }
.rf-menu-btn span { display: block; height: 2px; border-radius: 2px; background: var(--rf-ink); transition: transform .25s, opacity .25s; }
.dark .rf-menu-btn { border-color: rgba(255, 255, 255, .15); }
.dark .rf-menu-btn span { background: #fff; }
.rf-menu-open .rf-menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.rf-menu-open .rf-menu-btn span:nth-child(2) { opacity: 0; }
.rf-menu-open .rf-menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.rf-mobile-menu { display: none; position: absolute; top: calc(100% + 10px); left: 0; right: 0; padding: 10px; border-radius: 20px;
  background: #fff; border: 1px solid rgba(15, 18, 23, .08); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .45); }
.dark .rf-mobile-menu { background: #13171e; border-color: rgba(255, 255, 255, .08); }
.rf-menu-open .rf-mobile-menu { display: block; }
.rf-mobile-menu a { display: block; padding: 12px 16px; border-radius: 12px; font-size: 16px; color: var(--rf-ink); }
.dark .rf-mobile-menu a { color: #e6edf7; }
.rf-mobile-menu a:hover { background: rgba(99, 102, 241, .1); }
@media (min-width: 1280px) { .rf-menu-btn, .rf-mobile-menu { display: none !important; } }

/* ==========================================================================
   22. Efeitos — mescla "Selo 360" (marca em movimento) + "Glow Tech" (fundo e brilho)
   ========================================================================== */
@property --rf-spot { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --rf-ang  { syntax: "<angle>";  inherits: false; initial-value: 0deg; }

/* transição suave entre páginas (Chrome/Edge/Safari; nos demais a navegação é normal) */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
/* evita rolagem horizontal causada por formas decorativas (clip não quebra o sticky) */
html, body { overflow-x: clip; }

/* ---- botão de tema: sol que vira lua */
.rf-theme-btn { position: fixed; right: 18px; bottom: 20px; z-index: 9999; width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; color: #f59e0b; background: #fff;
  box-shadow: 0 12px 30px -10px rgb(15 18 23 / .45), inset 0 0 0 1px rgb(15 18 23 / .08); transition: transform .25s, background-color .5s, color .5s; }
.rf-theme-btn:hover { transform: scale(1.07) rotate(-8deg); }
.rf-theme-btn:focus-visible { outline: 2px solid #6366f1; outline-offset: 3px; }
.dark .rf-theme-btn { background: #161b26; color: #c7d2fe;
  box-shadow: 0 12px 30px -10px rgb(0 0 0 / .7), inset 0 0 0 1px rgb(255 255 255 / .1), 0 0 30px -6px rgb(99 102 241 / .6); }
.rf-theme-icon { width: 26px; height: 26px; overflow: visible; }
.rf-sun-core { transition: r .5s cubic-bezier(.5, 1.5, .5, 1); }
.rf-moon-cut { transition: cx .5s cubic-bezier(.65, 0, .35, 1), cy .5s cubic-bezier(.65, 0, .35, 1); }
.rf-sun-rays { transform-origin: 12px 12px; transition: transform .5s cubic-bezier(.5, 1.5, .5, 1), opacity .3s; }
.dark .rf-sun-core { r: 9px; }
.dark .rf-moon-cut { cx: 17px; cy: 7px; }
.dark .rf-sun-rays { transform: rotate(90deg) scale(0); opacity: 0; }
@media (prefers-reduced-motion: reduce) { .rf-sun-core, .rf-moon-cut, .rf-sun-rays, .rf-theme-btn { transition: none; } }
/* a troca: o tema novo se expande em círculo a partir do botão (o JS anima o clip-path) */
html.rf-theme-anim::view-transition-old(root), html.rf-theme-anim::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.rf-theme-anim::view-transition-new(root) { z-index: 9999; }
/* WhatsApp logo acima do botão de tema */
.rf-wa-float { bottom: 84px; right: 16px; }

/* ---- barra de leitura no topo */
.rf-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 10000; pointer-events: none; background: var(--rf-grad); transform-origin: 0 50%; scale: 0 1; }
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) { .rf-progress { animation: rf-grow linear both; animation-timeline: scroll(root); } }
}
@keyframes rf-grow { to { scale: 1 1; } }

/* ---- cabeçalho de vidro ao rolar */
.header-one { transition: box-shadow .35s, background-color .35s; }
.rf-scrolled .header-one { backdrop-filter: blur(16px) saturate(1.4); background-color: color-mix(in oklab, #fff 78%, transparent) !important;
  box-shadow: 0 18px 40px -18px rgb(15 18 23 / .35), inset 0 0 0 1px rgb(15 18 23 / .06); }
.dark.rf-scrolled .header-one { background-color: color-mix(in oklab, var(--color-background-9) 72%, transparent) !important;
  box-shadow: 0 18px 40px -18px rgb(0 0 0 / .6), inset 0 0 0 1px rgb(255 255 255 / .07); }

/* ---- faixa de tecnologias em loop */
.rf-stack.is-marquee { flex-wrap: nowrap; }
.rf-marquee { flex: 1; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.rf-marquee-track { display: flex; width: max-content; gap: 56px; }
.rf-marquee-track > span { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .rf-marquee-track { animation: rf-marquee 30s linear infinite; }
  .rf-marquee:hover .rf-marquee-track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .rf-marquee-track { flex-wrap: wrap; width: auto; justify-content: center; }
  .rf-marquee-track [aria-hidden] { display: none; }
}
@keyframes rf-marquee { to { translate: calc(-50% - 28px) 0; } }

/* ---- Glow Tech: brilho de fundo, grade de pontos e linhas de luz entre seções (tema escuro) */
.dark body { background-image: radial-gradient(900px 500px at 85% -5%, rgb(99 102 241 / .16), transparent 60%),
  radial-gradient(700px 500px at -10% 30%, rgb(34 211 238 / .08), transparent 60%); background-attachment: fixed; }
main > section { position: relative; }
main > section > * { position: relative; z-index: 1; }
.dark main > section:not(.hero-section)::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgb(165 180 252 / .2) 1px, transparent 1.6px) 0 0 / 24px 24px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, #000 25%, transparent 80%); }
.dark main > section + section::after { content: ""; position: absolute; left: 50%; top: 0; translate: -50% 0; width: min(900px, 80%); height: 1px;
  z-index: 1; pointer-events: none; background: linear-gradient(90deg, transparent, #22d3ee 30%, #6366f1 70%, transparent);
  box-shadow: 0 0 24px 2px rgb(99 102 241 / .5); opacity: .75; }
.dark main h2 { background: linear-gradient(180deg, #fff 35%, #9aa6bd); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- spotlight + brilho nos cards */
.rf-fx-card { --rf-spot: 0; transition: --rf-spot .35s ease, box-shadow .35s ease;
  background-image: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgb(99 102 241 / calc(var(--rf-spot) * .14)), transparent 50%); }
.rf-fx-card:hover { --rf-spot: 1; box-shadow: inset 0 0 0 1px rgb(99 102 241 / .45), 0 24px 50px -28px rgb(99 102 241 / .55); }
.dark .rf-fx-card { box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), inset 0 0 0 1px rgb(255 255 255 / .05), 0 30px 60px -40px rgb(99 102 241 / .55);
  background-image: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgb(99 102 241 / calc(.06 + var(--rf-spot) * .14)), transparent 55%); }
.dark .rf-fx-card:hover { box-shadow: inset 0 0 0 1px rgb(99 102 241 / .5), 0 30px 60px -30px rgb(99 102 241 / .6); }
@media (prefers-reduced-motion: reduce) { .rf-fx-card { transition: none; } }
.dark .stack-cards__item > span:first-child { box-shadow: 0 0 30px -4px rgb(99 102 241 / .7); }

/* ---- Selo 360: borda em gradiente girando (destaques) */
.rf-ring-border { position: relative; }
.rf-ring-border::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--rf-ang), transparent 0 55%, #22d3ee 70%, #6366f1 85%, transparent 100%);
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
@media (prefers-reduced-motion: no-preference) { .rf-ring-border::after { animation: rf-ang 5s linear infinite; } }
@keyframes rf-ang { to { --rf-ang: 360deg; } }

/* ---- Selo 360: linha da metodologia "carrega" quando a seção aparece */
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .progress-line { width: 100% !important; transform-origin: 0 50%; animation: rf-fill linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
  }
}
@keyframes rf-fill { from { scale: 0 1; } }

/* ---- números */
.rf-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1140px; margin: 48px auto 0; padding: 0 20px; }
.rf-stats > div { border-radius: 18px; padding: 22px; text-align: center; background: #fff; border: 1px solid #e5e7eb; }
.dark .rf-stats > div { background: rgb(255 255 255 / .03); border-color: rgb(255 255 255 / .07); }
.rf-stats b { display: block; font-size: 40px; font-weight: 600; letter-spacing: -.03em;
  background: var(--rf-grad-light); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dark .rf-stats b { background-image: var(--rf-grad); }
.rf-stats span { font-size: 14px; color: #475569; }
.dark .rf-stats span { color: #9aa6bd; }
@media (max-width: 767px) { .rf-stats { grid-template-columns: repeat(2, 1fr); } .rf-stats b { font-size: 32px; } }

/* ==========================================================================
   23. Hero da home (2026-10): grade + brilho (Glow Tech) e anéis do Selo 360
   ========================================================================== */
.rf-hero-section { padding: 16px 12px 0; }
.rf-hero { position: relative; isolation: isolate; overflow: hidden; max-width: 1440px; margin: 0 auto; border-radius: 28px;
  padding: 150px 0 110px; background: linear-gradient(180deg, #dfe7f4 0%, #c3cfe3 100%); }
.dark .rf-hero { background: linear-gradient(180deg, #0c1220 0%, #080b14 100%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06); }
.rf-hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.rf-hero-grid { position: absolute; inset: 0;
  background: linear-gradient(rgb(79 70 229 / .10) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, rgb(79 70 229 / .10) 1px, transparent 1px) 0 0 / 56px 56px;
  mask-image: radial-gradient(ellipse 70% 75% at 65% 40%, #000 15%, transparent 75%); }
.dark .rf-hero-grid { background: linear-gradient(rgb(165 180 252 / .09) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, rgb(165 180 252 / .09) 1px, transparent 1px) 0 0 / 56px 56px; }
.rf-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; }
.rf-blob.b1 { width: 520px; height: 520px; right: -80px; top: -120px; background: #6366f1; }
.rf-blob.b2 { width: 420px; height: 420px; left: -120px; bottom: -160px; background: #22d3ee; opacity: .4; }
.rf-blob.b3 { width: 300px; height: 300px; left: 45%; top: 30%; background: #0891b2; opacity: .25; }
.dark .rf-blob.b1 { opacity: .35; } .dark .rf-blob.b2 { opacity: .22; } .dark .rf-blob.b3 { opacity: .18; }
@media (prefers-reduced-motion: no-preference) {
  .rf-blob.b1 { animation: rf-drift-a 18s ease-in-out infinite alternate; }
  .rf-blob.b2 { animation: rf-drift-b 22s ease-in-out infinite alternate; }
  .rf-blob.b3 { animation: rf-drift-a 26s ease-in-out infinite alternate-reverse; }
}
@keyframes rf-drift-a { to { translate: -90px 60px; scale: 1.15; } }
@keyframes rf-drift-b { to { translate: 110px -50px; scale: .9; } }

.rf-hero-inner { display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center; }
@media (min-width: 1024px) { .rf-hero-inner { grid-template-columns: 1fr 1.05fr; gap: 40px; } }
.rf-hero-copy { text-align: center; }
@media (min-width: 1024px) { .rf-hero-copy { text-align: left; } }
.rf-hero-badge { background-color: rgb(255 255 255 / .55) !important; color: var(--rf-ink) !important; margin-bottom: 20px; }
.dark .rf-hero-badge { background-color: rgb(255 255 255 / .06) !important; color: #e6edf7 !important; }
.rf-hero-title { font-size: clamp(2.5rem, 5.2vw, 4.25rem); line-height: 1.02; letter-spacing: -.04em; font-weight: 500; color: var(--rf-ink); margin: 0 auto 22px; max-width: 640px; }
@media (min-width: 1024px) { .rf-hero-title { margin-left: 0; } }
.dark .rf-hero-title { color: #fff; }
.rf-grad-txt { background: var(--rf-grad-light); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.dark .rf-grad-txt { background-image: var(--rf-grad); }
/* palavra que alterna (o gradiente fica em cada palavra: com background-clip:text no pai a opacidade dos filhos não esconde o texto) */
.rf-rotator { display: inline-grid; vertical-align: bottom; }
.rf-rotator > span { grid-area: 1 / 1; opacity: 0; translate: 0 .4em; filter: blur(8px); transition: opacity .55s, translate .55s, filter .55s; }
.rf-rotator > span.on { opacity: 1; translate: 0 0; filter: none; }
.rf-hero-lead { font-size: 18px; line-height: 1.6; color: rgb(15 18 23 / .68); max-width: 520px; margin: 0 auto 28px; }
@media (min-width: 1024px) { .rf-hero-lead { margin-left: 0; } }
.dark .rf-hero-lead { color: rgb(230 237 247 / .66); }
.rf-trust { justify-content: center; margin-bottom: 32px; }
@media (min-width: 1024px) { .rf-trust { justify-content: flex-start; } }
.rf-trust-title { font-weight: 500; font-size: 15px; color: var(--rf-ink); }
.dark .rf-trust-title { color: #fff; } .dark .rf-trust-sub { color: rgb(230 237 247 / .55); }
.dark .rf-trust img { box-shadow: 0 0 0 3px #1f2533; }
.dark .rf-btn-ghost { background: rgb(255 255 255 / .06) !important; color: #fff !important; border-color: rgb(255 255 255 / .14) !important; }

/* entrada: palavras do título surgem em sequência, depois o resto */
@media (prefers-reduced-motion: no-preference) {
  .rf-w { display: inline-block; animation: rf-word .8s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * 90ms + 120ms); }
  .rf-in { animation: rf-rise .9s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--d, 0s); }
}
@keyframes rf-word { from { opacity: 0; translate: 0 .55em; filter: blur(10px); } }
@keyframes rf-rise { from { opacity: 0; translate: 0 24px; } }

/* vitrine dos sistemas com moldura de navegador, anéis girando e inclinação 3D que acompanha o mouse */
.rf-hero-visual { position: relative; perspective: 1400px; padding: 30px 10px 0; }
.rf-hero-rings { position: absolute; z-index: -1; width: 112%; left: -6%; top: -10%; overflow: visible; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .rf-hero-rings .r1 { transform-origin: 60px 60px; animation: rf-spin 28s linear infinite; }
  .rf-hero-rings .r2 { transform-origin: 60px 60px; animation: rf-spin 44s linear infinite reverse; }
}
@keyframes rf-spin { to { rotate: 360deg; } }
.rf-showcase { --rx: 0deg; --ry: 0deg; border-radius: 16px; overflow: hidden; background: #0b0f16;
  transform: rotateX(calc(4deg + var(--rx))) rotateY(calc(-7deg + var(--ry))); transition: transform .5s cubic-bezier(.2, .7, .2, 1);
  box-shadow: 0 0 0 1px rgb(255 255 255 / .35), 0 50px 90px -35px rgb(30 27 75 / .75), 0 0 120px -30px rgb(99 102 241 / .6); }
.dark .rf-showcase { box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 50px 90px -35px #000, 0 0 140px -30px rgb(99 102 241 / .7); }
@media (prefers-reduced-motion: reduce) { .rf-showcase { transform: none; transition: none; } }
.rf-showcase-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #121826; border-bottom: 1px solid rgb(255 255 255 / .06); }
.rf-showcase-bar i { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; }
.rf-showcase-bar i:nth-child(2) { background: #f59e0b; } .rf-showcase-bar i:nth-child(3) { background: #22c55e; }
.rf-showcase-bar span { margin-left: 12px; font-size: 12px; color: #8a97ad; background: rgb(255 255 255 / .05); padding: 3px 12px; border-radius: 999px; }
.rf-showcase-screen { position: relative; aspect-ratio: 16 / 10; }
.rf-showcase-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; scale: 1.04; transition: opacity .8s ease, scale 1.2s ease; }
.rf-showcase-img.on { opacity: 1; scale: 1; }
.rf-showcase-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 22px; }
.rf-showcase-tabs button { border: 1px solid rgb(15 18 23 / .12); background: rgb(255 255 255 / .5); color: var(--rf-ink); font-size: 13px; font-weight: 500;
  padding: 7px 14px; border-radius: 999px; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.dark .rf-showcase-tabs button { border-color: rgb(255 255 255 / .1); background: rgb(255 255 255 / .04); color: #c9d4e5; }
.rf-showcase-tabs button[aria-pressed="true"] { background: var(--rf-grad); color: #06101f; border-color: transparent; }
.rf-showcase-tabs button:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
/* faixa de tecnologias e números ficam logo abaixo do hero */
.rf-hero-section + .rf-stats, .rf-hero-section .rf-stats { margin-top: 40px; }
.rf-hero-section aside { margin-top: 56px !important; }

/* ==========================================================================
   24. Seções de projetos (home) e página Projetos
   ========================================================================== */
.rf-sec { padding: 100px 0; }
@media (max-width: 767px) { .rf-sec { padding: 64px 0; } }
.rf-sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 48px; }
.rf-sec-head h2 { margin-top: 14px; }
.rf-sec-head-center { justify-content: center; text-align: center; }
.rf-sec-sub { max-width: 640px; margin-top: 10px; color: rgb(15 18 23 / .62); }
.dark .rf-sec-sub { color: rgb(230 237 247 / .6); }
.rf-btn-alt { flex: none; }
.rf-center { text-align: center; margin-top: 44px; }
.rf-btn-ghost-dark { background: transparent !important; color: var(--rf-ink) !important; border: 1px solid rgb(15 18 23 / .18) !important; }
.dark .rf-btn-ghost-dark { color: #fff !important; border-color: rgb(255 255 255 / .18) !important; }

.rf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rf-chip-s { font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 999px; background: rgb(99 102 241 / .08); color: #4338ca; border: 1px solid rgb(99 102 241 / .18); }
.dark .rf-chip-s { background: rgb(255 255 255 / .05); color: #c7d2fe; border-color: rgb(255 255 255 / .08); }

/* cards */
.rf-proj-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.rf-proj { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid rgb(15 18 23 / .08); }
.dark .rf-proj { background: var(--color-background-6); border-color: rgb(255 255 255 / .06); }
.rf-proj-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #0b0f16; }
.rf-proj-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: scale .6s cubic-bezier(.2, .7, .2, 1); }
.rf-proj:hover .rf-proj-img img { scale: 1.05; }
@media (prefers-reduced-motion: reduce) { .rf-proj-img img { transition: none; } .rf-proj:hover .rf-proj-img img { scale: 1; } }
.rf-proj-body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; flex: 1; }
.rf-proj-cat { font-size: 12px; font-weight: 500; letter-spacing: .02em; color: #0891b2; }
.dark .rf-proj-cat { color: #67e8f9; }
.rf-proj-title { font-size: 20px; font-weight: 500; letter-spacing: -.015em; }
.rf-proj-title a { color: inherit; }
.rf-proj-text { font-size: 14.5px; line-height: 1.55; color: rgb(15 18 23 / .62); flex: 1; }
.dark .rf-proj-text { color: rgb(230 237 247 / .6); }
.rf-proj .rf-link { margin-top: 6px; }

/* bento de destaque: todos os prints são 16:10, então cada bloco usa essa proporção e nada é cortado */
.rf-bento { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.rf-bento-item { position: relative; display: block; overflow: hidden; border-radius: 22px; background: #0b0f16; aspect-ratio: 16 / 10; isolation: isolate;
  box-shadow: 0 0 0 1px rgb(15 18 23 / .08); }
.dark .rf-bento-item { box-shadow: 0 0 0 1px rgb(255 255 255 / .06); }
.rf-bento-wide { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.rf-bento-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: scale .8s cubic-bezier(.2, .7, .2, 1); z-index: -1; }
.rf-bento-item:hover img { scale: 1.04; }
.rf-bento-item::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 55%, rgb(6 9 16 / .88)); }
.rf-bento-cap { position: absolute; left: 20px; right: 20px; bottom: 16px; color: rgb(230 237 247 / .8); font-size: 14px; line-height: 1.45; }
.rf-bento-cap b { display: block; color: #fff; font-size: 19px; font-weight: 500; letter-spacing: -.015em; margin-bottom: 2px; }
.rf-bento-wide .rf-bento-cap b { font-size: 24px; }
.rf-bento-item:focus-visible { outline: 2px solid #6366f1; outline-offset: 3px; }
@media (max-width: 1023px) { .rf-bento { grid-template-columns: repeat(2, 1fr); } .rf-bento-wide { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 10; } }
@media (max-width: 640px) { .rf-bento { grid-template-columns: 1fr; } .rf-bento-wide { grid-column: auto; } }
@media (prefers-reduced-motion: reduce) { .rf-bento-item img { transition: none; } }

/* página Projetos */
.rf-pj-hero { padding-top: 170px; text-align: center; }
.rf-pj-hero h1 { margin: 16px auto 8px; max-width: 820px; }
.rf-pj-hero .rf-sec-sub { margin: 0 auto; }
.rf-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 34px; }
.rf-filters button { border: 1px solid rgb(15 18 23 / .14); background: transparent; color: var(--rf-ink); font-size: 14px; font-weight: 500; padding: 8px 16px; border-radius: 999px; cursor: pointer; }
.dark .rf-filters button { border-color: rgb(255 255 255 / .12); color: #c9d4e5; }
.rf-filters button[aria-pressed="true"] { background: var(--rf-grad); color: #06101f; border-color: transparent; }
.rf-filters button:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.rf-pj-sec { padding-top: 20px; }
.rf-pj-wrap { display: grid; gap: 110px; }
.rf-pj { display: grid; gap: 40px; align-items: center; scroll-margin-top: 110px; }
@media (min-width: 1024px) { .rf-pj { grid-template-columns: 1.15fr 1fr; gap: 64px; } .rf-pj-rev .rf-pj-media { order: 2; } }
.rf-pj[hidden] { display: none; }
.rf-pj-frame { border-radius: 18px; overflow: hidden; background: #0b0f16; aspect-ratio: 16 / 10;
  box-shadow: 0 0 0 1px rgb(15 18 23 / .08), 0 40px 80px -40px rgb(30 27 75 / .6); }
.dark .rf-pj-frame { box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 40px 80px -40px #000, 0 0 100px -40px rgb(99 102 241 / .6); }
.rf-pj-main { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: opacity .35s; }
.rf-pj-thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; }
.rf-pj-thumbs button { flex: none; width: 92px; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; padding: 0; cursor: pointer; border: 2px solid transparent; background: #0b0f16; opacity: .7; }
.rf-pj-thumbs button[aria-current="true"], .rf-pj-thumbs button:hover { opacity: 1; border-color: #6366f1; }
.rf-pj-thumbs img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.rf-pj-title { font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.1; letter-spacing: -.03em; font-weight: 500; margin: 10px 0 14px; }
.rf-pj-lead { font-size: 17px; line-height: 1.6; color: rgb(15 18 23 / .68); }
.dark .rf-pj-lead { color: rgb(230 237 247 / .66); }
.rf-pj-list { display: grid; gap: 8px; margin: 22px 0; }
.rf-pj-list li { position: relative; padding-left: 26px; font-size: 15px; color: rgb(15 18 23 / .8); }
.dark .rf-pj-list li { color: rgb(230 237 247 / .8); }
.rf-pj-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 14px; height: 8px; border-left: 2px solid #22d3ee; border-bottom: 2px solid #6366f1; rotate: -45deg; translate: 0 -40%; }
.rf-pj-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 28px; }

/* ==========================================================================
   25. Páginas internas (Sobre, Suporte, Análises): componentes compartilhados
   ========================================================================== */
.rf-page-hero { padding-top: 160px; }
.rf-split { display: grid; gap: 56px; align-items: center; }
@media (min-width: 1024px) { .rf-split { grid-template-columns: 1.05fr 1fr; gap: 72px; } }
.rf-split-form { align-items: start; }
.rf-page-title { font-size: clamp(2.4rem, 4.6vw, 3.9rem); line-height: 1.04; letter-spacing: -.04em; font-weight: 500; margin: 16px 0 20px; }
.rf-page-lead { font-size: 17px; line-height: 1.65; color: rgb(15 18 23 / .68); margin-bottom: 14px; max-width: 580px; }
.dark .rf-page-lead { color: rgb(230 237 247 / .66); }
.rf-split-text .rf-cta-row { justify-content: flex-start; margin-top: 26px; }
.rf-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.rf-tags span { font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgb(15 18 23 / .12); color: rgb(15 18 23 / .75); }
.dark .rf-tags span { border-color: rgb(255 255 255 / .1); color: #c9d4e5; }

/* foto com o anel do Selo 360 */
.rf-photo { position: relative; max-width: 460px; margin: 0 auto; aspect-ratio: 4 / 5; }
.rf-photo img { position: relative; width: 100%; height: 100%; object-fit: cover; border-radius: 28px; box-shadow: 0 40px 80px -35px rgb(30 27 75 / .7); }
.rf-photo-ring { position: absolute; inset: -9% -14%; width: 128%; height: 118%; overflow: visible; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .rf-photo-ring .r1 { transform-origin: 60px 60px; animation: rf-spin 30s linear infinite; } }
.rf-float { position: absolute; z-index: 2; padding: 12px 16px; border-radius: 16px; font-size: 13px; color: rgb(15 18 23 / .7); background: rgb(255 255 255 / .75);
  border: 1px solid rgb(255 255 255 / .8); backdrop-filter: blur(12px); box-shadow: 0 18px 40px -18px rgb(30 27 75 / .55); }
.rf-float b { display: block; font-size: 18px; color: var(--rf-ink); }
.dark .rf-float { background: rgb(17 22 33 / .8); border-color: rgb(255 255 255 / .1); color: rgb(230 237 247 / .65); } .dark .rf-float b { color: #fff; }
.rf-float-a { left: -18px; bottom: 16%; } .rf-float-b { right: -14px; top: 12%; }
@media (prefers-reduced-motion: no-preference) { .rf-float { animation: rf-float 6s ease-in-out infinite; } .rf-float-b { animation-delay: -3s; } }
@keyframes rf-float { 50% { translate: 0 -10px; } }

/* cards de recursos */
.rf-feat-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .rf-feat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rf-cols-3 { grid-template-columns: repeat(3, 1fr); } .rf-cols-4 { grid-template-columns: repeat(4, 1fr); } }
.rf-feat { display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 20px; background: #fff; border: 1px solid rgb(15 18 23 / .08); color: inherit; }
.dark .rf-feat { background: var(--color-background-6); border-color: rgb(255 255 255 / .06); }
.rf-feat h3 { font-size: 19px; font-weight: 500; letter-spacing: -.015em; margin-top: 6px; }
.rf-feat p { font-size: 14.5px; line-height: 1.6; color: rgb(15 18 23 / .62); }
.dark .rf-feat p { color: rgb(230 237 247 / .6); }
.rf-feat-link .rf-link { margin-top: auto; padding-top: 6px; }
.rf-ico { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: #4f46e5; background: rgb(99 102 241 / .1); border: 1px solid rgb(99 102 241 / .28); }
.dark .rf-ico { color: #a5b4fc; box-shadow: 0 0 28px -6px rgb(99 102 241 / .6); }
.rf-ico svg { width: 24px; height: 24px; }

/* etapas ligadas por uma linha que "carrega" ao rolar */
.rf-steps-line { position: relative; display: grid; gap: 28px; grid-template-columns: 1fr; counter-reset: s; list-style: none; padding: 0; }
@media (min-width: 768px) { .rf-steps-line { grid-template-columns: repeat(4, 1fr); } }
.rf-steps-line::before { content: ""; position: absolute; left: 0; right: 0; top: 22px; height: 2px; background: rgb(15 18 23 / .08); }
.dark .rf-steps-line::before { background: rgb(255 255 255 / .08); }
.rf-steps-line::after { content: ""; position: absolute; left: 0; right: 0; top: 22px; height: 2px; background: var(--rf-grad); transform-origin: 0 50%; }
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .rf-steps-line::after { animation: rf-fill linear both; animation-timeline: view(); animation-range: entry 30% cover 50%; }
  }
}
@media (max-width: 767px) { .rf-steps-line::before, .rf-steps-line::after { display: none; } }
.rf-steps-line li { position: relative; }
.rf-step-n { position: relative; z-index: 1; display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; font-weight: 600; font-size: 14px;
  color: #06101f; background: var(--rf-grad); box-shadow: 0 0 0 6px var(--color-background-1), 0 10px 30px -8px rgb(99 102 241 / .7); }
.dark .rf-step-n { box-shadow: 0 0 0 6px #070b10, 0 10px 30px -8px rgb(99 102 241 / .7); }
.rf-steps-line h3 { font-size: 19px; font-weight: 500; margin: 18px 0 6px; }
.rf-steps-line p { font-size: 14.5px; line-height: 1.6; color: rgb(15 18 23 / .62); }
.dark .rf-steps-line p { color: rgb(230 237 247 / .6); }

/* citação do fundador */
.rf-quote { margin: 56px auto 0; max-width: 860px; padding: 36px 40px; border-radius: 24px; background: #fff; border: 1px solid rgb(15 18 23 / .08); }
.dark .rf-quote { background: var(--color-background-6); border-color: transparent; }
.rf-quote blockquote { font-size: clamp(1.1rem, 2vw, 1.4rem); line-height: 1.55; letter-spacing: -.01em; }
.rf-quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.rf-quote figcaption img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.rf-quote figcaption b { display: block; font-weight: 600; }
.rf-quote figcaption span { font-size: 14px; color: rgb(15 18 23 / .6); } .dark .rf-quote figcaption span { color: rgb(230 237 247 / .6); }

/* mini portfólio */
.rf-mini-proj { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1024px) { .rf-mini-proj { grid-template-columns: repeat(4, 1fr); } }
.rf-mini-proj a { position: relative; display: block; aspect-ratio: 16 / 11; border-radius: 18px; overflow: hidden; background: #0b0f16; isolation: isolate; }
.rf-mini-proj img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; z-index: -1; transition: scale .6s; }
.rf-mini-proj a:hover img { scale: 1.06; }
.rf-mini-proj a::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 50%, rgb(6 9 16 / .85)); }
.rf-mini-proj span { position: absolute; left: 16px; bottom: 14px; color: #fff; font-weight: 500; }

/* formulário */
.rf-form { display: grid; gap: 16px; padding: 28px; border-radius: 24px; background: #fff; border: 1px solid rgb(15 18 23 / .08); }
.dark .rf-form { background: var(--color-background-6); border-color: rgb(255 255 255 / .06); }
.rf-form-row { display: grid; gap: 16px; } @media (min-width: 640px) { .rf-form-row { grid-template-columns: 1fr 1fr; } }
.rf-form label { display: grid; gap: 6px; font-size: 14px; font-weight: 500; }
.rf-form input:not([type=checkbox]), .rf-form select, .rf-form textarea { width: 100%; padding: 12px 14px; border-radius: 12px; font: inherit; font-weight: 400;
  color: inherit; background: var(--color-background-1); border: 1px solid rgb(15 18 23 / .14); }
.dark .rf-form input:not([type=checkbox]), .dark .rf-form select, .dark .rf-form textarea { background: #0b0f16; border-color: rgb(255 255 255 / .1); }
.rf-form input:focus-visible, .rf-form select:focus-visible, .rf-form textarea:focus-visible { outline: 2px solid #6366f1; outline-offset: 1px; }
.rf-form .rf-check { display: flex; align-items: center; gap: 10px; font-weight: 400; }
.rf-form .rf-check a { color: #4f46e5; text-decoration: underline; } .dark .rf-form .rf-check a { color: #a5b4fc; }
.rf-form button { justify-self: start; border: 0; cursor: pointer; }
.rf-quote blockquote { color: var(--rf-ink); } .dark .rf-quote blockquote { color: #e6edf7; }
.rf-feat h3, .rf-steps-line h3, .rf-proj-title, .rf-pj-title, .rf-page-title { color: var(--rf-ink); }
.dark .rf-feat h3, .dark .rf-steps-line h3, .dark .rf-proj-title, .dark .rf-pj-title, .dark .rf-page-title { color: #fff; }
.rf-form label { color: var(--rf-ink); } .dark .rf-form label { color: #e6edf7; }
.rf-form input, .rf-form select, .rf-form textarea { color: var(--rf-ink); } .dark .rf-form input, .dark .rf-form select, .dark .rf-form textarea { color: #e6edf7; }
@media (max-width: 640px) { .rf-stack.is-marquee > small { display: none; } }
/* títulos sobre painéis claros (ex.: Tecnologias) não usam o gradiente branco do tema escuro */
.dark main h2.dark\:text-secondary { background: none; color: var(--color-secondary); -webkit-text-fill-color: currentColor; }

/* ==========================================================================
   26. Seção "Meus projetos" da home — 3 visuais prontos
   O visual ativo é escolhido no HTML: <section class="rfx" data-layout="carrossel|lista|paineis">
   ========================================================================== */
.rfx [data-rfx] { display: none; }
.rfx[data-layout="carrossel"] [data-rfx="carrossel"],
.rfx[data-layout="lista"] [data-rfx="lista"],
.rfx[data-layout="paineis"] [data-rfx="paineis"] { display: block; }
.rfx[data-layout="paineis"] [data-rfx="paineis"] { display: flex; }
.rfx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 6px; }
.rfx-actions .rf-link { margin-top: 0; }
.rfx-more { font-size: 14px; font-weight: 500; color: rgb(15 18 23 / .6); text-decoration: underline; text-underline-offset: 3px; }
.dark .rfx-more { color: rgb(230 237 247 / .6); }

/* ---- carrossel 3D */
.rfx-b-stage { position: relative; height: clamp(260px, 36vw, 470px); perspective: 1600px; touch-action: pan-y; }
.rfx-b-card { position: absolute; left: 50%; top: 10px; width: min(640px, 72vw); aspect-ratio: 16 / 10; translate: -50% 0; padding: 0; border: 0; cursor: pointer;
  border-radius: 22px; overflow: hidden; background: #0b0f16; transition: transform .8s cubic-bezier(.2, .8, .2, 1), opacity .8s, filter .8s;
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / .8), 0 0 0 1px rgb(255 255 255 / .1); }
.rfx-b-card img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.rfx-b-card span { position: absolute; left: 18px; bottom: 14px; font-weight: 600; color: #fff; text-shadow: 0 2px 12px #000; }
.rfx-b-card.is-on { box-shadow: 0 40px 90px -30px rgb(0 0 0 / .8), 0 0 0 2px #6366f1, 0 0 90px -20px rgb(99 102 241 / .8); }
.rfx-b-card:focus-visible { outline: 2px solid #22d3ee; outline-offset: 4px; }
.rfx-b-ui { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-top: 22px; }
.rfx-b-info { display: flex; flex-direction: column; gap: 10px; max-width: 680px; }
.rfx-b-info .rf-proj-title { font-size: clamp(1.6rem, 2.4vw, 2rem); letter-spacing: -.03em; }
.rfx-b-nav { display: flex; gap: 10px; flex: none; }
.rfx-b-nav button { width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgb(15 18 23 / .15); background: transparent; color: var(--rf-ink); font-size: 20px; cursor: pointer; }
.dark .rfx-b-nav button { border-color: rgb(255 255 255 / .15); background: rgb(255 255 255 / .04); color: #fff; }
.rfx-b-nav button:hover { background: var(--rf-grad); color: #06101f; border-color: transparent; }
.rfx-b-dots { display: flex; gap: 6px; margin-top: 20px; }
.rfx-b-dots i { position: relative; width: 28px; height: 4px; border-radius: 4px; overflow: hidden; background: rgb(15 18 23 / .12); }
.dark .rfx-b-dots i { background: rgb(255 255 255 / .12); }
.rfx-b-dots i.on::after { content: ""; position: absolute; inset: 0; background: var(--rf-grad); transform-origin: 0 50%; animation: rfx-bar 4s linear both; }
@keyframes rfx-bar { from { transform: scaleX(0); } }
@media (max-width: 767px) { .rfx-b-ui { flex-direction: column; align-items: flex-start; } }

/* ---- lista com prévia flutuante */
.rfx-c { border-top: 1px solid rgb(15 18 23 / .1); }
.dark .rfx-c { border-color: rgb(255 255 255 / .1); }
.rfx-c-row { position: relative; display: grid; grid-template-columns: 60px 1fr 260px 220px; align-items: center; gap: 20px; padding: 24px 8px;
  border-bottom: 1px solid rgb(15 18 23 / .1); isolation: isolate; }
.dark .rfx-c-row { border-color: rgb(255 255 255 / .1); }
.rfx-c-row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(99 102 241 / .14), rgb(34 211 238 / .05));
  transform: scaleY(0); transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.rfx-c-row:hover::before, .rfx-c-row.on::before, .rfx-c-row:focus-within::before { transform: scaleY(1); }
.rfx-c-n { font-size: 14px; color: rgb(15 18 23 / .45); font-variant-numeric: tabular-nums; }
.dark .rfx-c-n { color: rgb(230 237 247 / .45); }
.rfx-c-name { font-size: clamp(1.7rem, 3.4vw, 3rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.05; color: var(--rf-ink);
  transition: translate .45s cubic-bezier(.2, .8, .2, 1); }
.dark .rfx-c-name { color: #fff; }
.rfx-c-row:hover .rfx-c-name, .rfx-c-row.on .rfx-c-name { translate: 16px 0; background: var(--rf-grad-light); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dark .rfx-c-row:hover .rfx-c-name, .dark .rfx-c-row.on .rfx-c-name { background-image: var(--rf-grad); }
.rfx-c-cat { font-size: 14px; color: rgb(15 18 23 / .55); }
.dark .rfx-c-cat { color: rgb(230 237 247 / .55); }
.rfx-c-wa { justify-self: end; margin-top: 0; }
.rfx-c-thumb { display: none; }
.rfx-c-preview { position: fixed; left: 0; top: 0; z-index: 50; width: 400px; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; pointer-events: none;
  opacity: 0; scale: .7; transition: opacity .3s, scale .4s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 40px 80px -20px rgb(0 0 0 / .8), 0 0 0 1px rgb(255 255 255 / .15); }
.rfx-c-preview.on { opacity: 1; scale: 1; }
.rfx-c-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity .35s; }
.rfx-c-preview img.on { opacity: 1; }
@media (max-width: 1023px), (pointer: coarse) {
  .rfx-c-row { grid-template-columns: 1fr 96px; gap: 8px 14px; }
  .rfx-c-n, .rfx-c-cat { display: none; }
  .rfx-c-thumb { display: block; grid-row: span 2; grid-column: 2; grid-row-start: 1; width: 96px; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 10px; }
  .rfx-c-wa { justify-self: start; }
  .rfx-c-preview { display: none; }
}

/* ---- painéis que se expandem */
.rfx-d { gap: 10px; height: 520px; }
.rfx-d-panel { position: relative; flex: 1; min-width: 0; cursor: pointer; border-radius: 22px; overflow: hidden; background: #0b0f16;
  transition: flex 1s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 0 0 1px rgb(255 255 255 / .08); }
.rfx-d-panel.on { flex: 7; cursor: default; box-shadow: 0 0 0 2px #6366f1, 0 0 80px -30px rgb(99 102 241 / .9); }
.rfx-d-panel:focus-visible { outline: 2px solid #22d3ee; outline-offset: 3px; }
.rfx-d-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; filter: saturate(.4) brightness(.45); transition: filter .8s; }
.rfx-d-panel.on img { filter: none; }
.rfx-d-panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgb(6 9 16 / .92)); pointer-events: none; }
.rfx-d-v { position: absolute; z-index: 1; left: 50%; bottom: 24px; writing-mode: vertical-rl; rotate: 180deg; translate: -50% 0; white-space: nowrap; font-weight: 500; color: #fff; transition: opacity .4s; }
.rfx-d-panel.on .rfx-d-v { opacity: 0; }
.rfx-d-info { position: absolute; z-index: 2; left: 28px; right: 28px; bottom: 24px; display: flex; flex-direction: column; gap: 8px;
  opacity: 0; translate: 0 16px; visibility: hidden; transition: opacity .5s .3s, translate .5s .3s, visibility 0s .8s; }
.rfx-d-panel.on .rfx-d-info { opacity: 1; translate: 0 0; visibility: visible; transition: opacity .5s .3s, translate .5s .3s, visibility 0s; }
.rfx-d-info b { font-size: 30px; font-weight: 500; letter-spacing: -.03em; color: #fff; }
.rfx-d-txt { color: rgb(230 237 247 / .78); max-width: 560px; }
.rfx-d-info .rfx-more { color: rgb(230 237 247 / .7); }
@media (max-width: 900px) {
  .rfx-d { flex-direction: column; height: auto; }
  .rfx-d-panel { flex: none; height: 64px; transition: height .8s cubic-bezier(.2, .8, .2, 1); }
  .rfx-d-panel.on { height: 420px; }
  .rfx-d-v { writing-mode: horizontal-tb; rotate: 0deg; left: 18px; translate: 0; bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .rfx-b-card, .rfx-d-panel, .rfx-c-row::before, .rfx-c-name, .rfx-d-info, .rfx-d-panel img { transition: none; }
  .rfx-b-dots i.on::after { animation: none; }
}

/* painéis com informação real (Suporte e Análises) */
.rf-panel { max-width: 460px; margin: 0 auto; padding: 24px; border-radius: 26px; background: #fff; border: 1px solid rgb(15 18 23 / .08);
  box-shadow: 0 40px 80px -40px rgb(30 27 75 / .55); color: var(--rf-ink); }
.dark .rf-panel { background: #0f1420; border-color: rgb(255 255 255 / .08); color: #e6edf7; box-shadow: 0 40px 80px -40px #000, 0 0 120px -40px rgb(99 102 241 / .55); }
.rf-panel-head { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; margin-bottom: 14px; border-bottom: 1px solid rgb(15 18 23 / .08); }
.dark .rf-panel-head { border-color: rgb(255 255 255 / .08); }
.rf-panel-head img { width: 44px; height: 44px; border-radius: 12px; }
.rf-panel-head b { display: block; font-size: 17px; font-weight: 600; }
.rf-panel-head span { font-size: 13px; color: rgb(15 18 23 / .6); } .dark .rf-panel-head span { color: rgb(230 237 247 / .6); }
.rf-panel-head-plain { display: block; }
.rf-panel-list { display: grid; gap: 10px; }
.rf-panel-list li { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; background: rgb(15 18 23 / .03); }
.dark .rf-panel-list li { background: rgb(255 255 255 / .03); }
.rf-panel-list li .rf-ico { width: 40px; height: 40px; flex: none; }
.rf-panel-list b { display: block; font-size: 15px; font-weight: 500; }
.rf-panel-list span { font-size: 13px; color: rgb(15 18 23 / .6); } .dark .rf-panel-list span { color: rgb(230 237 247 / .6); }
.rf-panel-cta { width: 100%; margin-top: 16px; }
.rf-panel-foot { margin-top: 16px; font-size: 13px; font-weight: 500; color: #4f46e5; } .dark .rf-panel-foot { color: #a5b4fc; }
.rf-scan-dot { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgb(99 102 241 / .35); }
.rf-scan-dot::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #22d3ee; border-width: 0 2px 2px 0; rotate: 45deg; }
@media (prefers-reduced-motion: no-preference) {
  .rf-panel-list li { animation: rf-rise .6s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--n) * .12s + .5s); }
  .rf-scan-dot { animation: rf-scan-ring .5s ease both; animation-delay: calc(var(--n) * .35s + 1s); }
  .rf-scan-dot::after { animation: rf-scan-check .35s ease both; animation-delay: calc(var(--n) * .35s + 1.2s); }
}
@keyframes rf-scan-ring { from { border-color: rgb(99 102 241 / .15); } to { border-color: #6366f1; box-shadow: 0 0 14px -2px rgb(99 102 241 / .7); } }
@keyframes rf-scan-check { from { opacity: 0; scale: .4; } }

/* moldura acompanha o formato do print (telas largas aparecem inteiras, sem barras) */
.rf-pj-frame { aspect-ratio: auto; }
.rf-pj-main { height: auto; display: block; }