/* ====== Theme tokens (dark) ====== */
:root{
  --text-100:#ffffff;
  --bg-900:#0b0e13;
  --bg-800:#0f1218;
  --border-700:#202737;
  --text-300:#e7eaf1;
  --text-500:#a5afc1;
  --text-600:#7c879c;
  --primary-500:#22d1ee;
  --primary-600:#12b4d1;
  --pink-500:#ff4dff;
  --teal-500:#11f0a2;
  --blue-500:#3aa3ff;
}
html,body{background:var(--bg-900); color:var(--text-300);}
.text-300{color:var(--text-300)!important;}
.text-500{color:var(--text-500)!important;}
.text-600{color:var(--text-600)!important;}
.border-700{border-color:var(--border-700)!important;}
/* Navbar brand mark */
.brand-mark{
  width:22px;height:22px; border-radius:6px;
  background: conic-gradient(from 180deg at 50% 50%, var(--primary-500), var(--pink-500), var(--blue-500));
  box-shadow:0 0 0 2px color-mix(in oklab, black, transparent 80%);
  display:inline-block;
}

/* Soft shadow for neon cards */
.shadow-soft{ box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.03); }
.icon-badge{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background: rgba(255,255,255,.06); color:var(--text-300); font-size:1.1rem;
}

table {
  --bs-table-bg: none !important;
}

.table td, 
.table th {
  padding-top: 1.4rem;
  padding-bottom: 1.4rem;
}

.gradient-1{ background: radial-gradient(120% 120% at 10% 10%, rgba(255,255,255,.06), rgba(255,255,255,.02)); }
.gradient-2{ background: linear-gradient(130deg, rgba(34,209,238,.08), rgba(255,255,255,.02)); }
.gradient-3{ background: linear-gradient(130deg, rgba(255,77,255,.10), rgba(255,255,255,.02)); }


/* Hero panel: background image on the ratio box (aligned right) */
.banner-header{
  background-image: url('images/dashboards.png');
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
}

/* Indicator cards */
.card.indicator{ background: #0f1420; border-radius: 1rem; }
.card.indicator .card-header{ border-bottom: 1px solid var(--border-700); }
.text-pink{ color: var(--pink-500)!important; }

/* CTA */
.card.cta{
  background:
   linear-gradient(180deg, rgba(34,209,238,.08), rgba(255,255,255,.02)),
   radial-gradient(45% 100% at 50% 0%, rgba(17,240,162,.15), transparent 60%);
}

/* Steps */
.step{ padding:1rem 1rem 1.25rem; background:#0e1420; border:1px solid var(--border-700); border-radius:1rem; height:100%; }
.step-num{
  width:64px; height:64px; border-radius:50%; display:grid; place-items:center;
  margin-inline:auto; font-weight:700;
  background: radial-gradient(120% 120% at 30% 30%, rgba(34,209,238,.25), rgba(255,255,255,.02));
  border:1px solid var(--border-700);
}

/* Visual banner com foto de fundo (istock) */
.visual-banner{
  position: relative;
  background: transparent !important;
  overflow: hidden;
}
.visual-banner::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    /* overlay para legibilidade */
    linear-gradient(180deg, rgba(8,2,74,.50), rgba(8,2,74,.80)),
    url('images/painel.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: saturate(1.08) contrast(1.04) brightness(.92);
  transform: translateZ(0);
}
.visual-banner > *{ position: relative; z-index: 1; }
.visual-banner h2, .visual-banner p{ color: var(--primary-100); }


/* Buttons */
.btn-primary{
  --bs-btn-bg: var(--primary-600);
  --bs-btn-border-color: var(--primary-600);
  --bs-btn-hover-bg: color-mix(in oklab, var(--primary-600), white 12%);
  --bs-btn-hover-border-color: color-mix(in oklab, var(--primary-600), white 12%);
  --bs-btn-active-bg: color-mix(in oklab, var(--primary-600), white 18%);
}
.btn-outline-primary{
  --bs-btn-color: var(--primary-500);
  --bs-btn-border-color: var(--primary-500);
  --bs-btn-hover-bg: color-mix(in oklab, var(--primary-500), black 85%);
  --bs-btn-hover-border-color: var(--primary-500);
}

/* Footer */
.footer{ background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)); }

/* Utilities */
.ratio > .hero-art-img{ width:100%; height:100%; }


/* Font */
body{font-family:'Nunito Sans', sans-serif;}

/* Navbar */
.bg-900{background:var(--bg-900)!important;}
.navbar .nav-link{color:var(--primary-500)!important; font-weight:600;}
.navbar .nav-link.active{text-decoration:underline;}

.navbar-toggler:focus {
    box-shadow: none;
}

/* Button with fill text color correction */
.btn-primary{
  color:#111111!important;
}


/* Navbar link spacing */
.navbar .nav-link{margin-left:32px;}

/* Active link: sem underline */
.navbar .nav-link.active{text-decoration:none;}

/* Hover underline */
.navbar .nav-link:hover{text-decoration:underline;}


/* ===== Acessibilidade (WCAG): foco visível, skip link, contrast helpers ===== */
.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus, .skip-link:focus-visible{
  left:1rem; top:1rem; width:auto; height:auto; padding:.5rem .75rem;
  background:#ffffff; color:#000; border-radius:.5rem; z-index:1080;
}

/* Foco visível para elementos interativos */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
.navbar-toggler:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--primary-600), white 15%);
  outline-offset: 3px;
  text-decoration: underline;
}

/* No underline when active (selected) per request */
.navbar .nav-link.active:focus-visible{ text-decoration: none; outline-offset: 4px; }

/* Melhor alvo de toque/teclas */
.navbar .nav-link{ padding-block: .75rem; }

/* Respeitar preferência de usuário para reduzir movimento */
@media (prefers-reduced-motion: reduce) {
  html:focus-within{ scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}


/* ===== Cards "O que a Paymnt entrega" ===== */
.card.feature{
  border-radius:1.5rem;
  padding:1.5rem;
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.card.feature .icon-badge{
  width:48px; height:48px;
  border-radius:.75rem;
  background:#fff;
  color:inherit;
  font-size:1.25rem;
  display:grid; place-items:center;
  margin-bottom:1rem;
}
.card.feature h3{ font-weight:700; margin-bottom:.75rem; }
.card.feature p{ font-size:1rem; line-height:1.5; }

/* Esquemas de cor conforme design */
.card.feature.gradient-1{
  background:#1f1fbf; /* azul escuro */
}
.card.feature.gradient-2{
  background:#00d5e6; /* ciano */
  color:#111; /* texto escuro para contraste */
}
.card.feature.gradient-2 .icon-badge{ color:#00d5e6; }
.card.feature.gradient-3{
  background:#ff00a8; /* magenta */
}

/* Light yellow */
.text-bg-light-yellow{
  color: #111 !important;
  background-color: #EDE67E !important;
  border: 1px solid color-mix(in oklab, #EDE67E, #000 20%) !important;
}

/* Dark orange */
.text-bg-dark-orange{
  color: #fff !important;
  background-color: #FF642C !important;
  border: 1px solid color-mix(in oklab, #FF642C, #000 15%) !important;
}


/* ===== Delivery Cards (match attached design) ===== */
.delivery-card{
  --radius: 22px;
  border-radius: var(--radius);
  padding: 2rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  border: none;
}

/* Shared inner styles */
.delivery-card .card-title{
  font-size: clamp(1.25rem, 2vw + .5rem, 1.75rem);
  font-weight: 700;
  letter-spacing: .2px;
  margin: .25rem 0 .25rem;
}
.delivery-card .card-text{
  font-size: clamp(1rem, .6vw + .9rem, 1.25rem);
  line-height: 1.55;
  margin: 0;
}

/* Icon badge like the mock: white rounded square with colored icon */
.icon-badge-strong{
  width: 64px; height: 64px; border-radius: 14px;
  display:grid; place-items:center; background:#fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  font-size: 1.5rem;
}

/* VARIANTS */
.variant-a{
  /* Deep indigo */
  background: #1d1a96;
  color: #ffffff;
}
.variant-a .icon-badge-strong{ color:#18206f; } /* icon dark indigo */
.variant-a .card-title, .variant-a .card-text{ color:#ffffff; }

.variant-b{
  /* Cyan */
  background: #00d3d9;
  color: #0e2840;
}
.variant-b .icon-badge-strong{ color:#0e5b6d; }
.variant-b .card-title, .variant-b .card-text{ color:#0e2840; }

.variant-c{
  /* Pink/Magenta */
  background: #f400a1;
  color: #ffffff;
}
.variant-c .icon-badge-strong{ color:#7a0a57; }
.variant-c .card-title, .variant-c .card-text{ color:#ffffff; }

/* Rounded container corners similar to reference */
.delivery-card{ border-radius: 28px; }


/* Ajustes solicitados nos cards */
.delivery-card{ border-radius: 16px; }

/* Azul */
.variant-a{ background:#1d1a96; color:#fff; }
.variant-a .card-title, .variant-a .card-text{ color:#fff; }
.variant-a .icon-badge-strong{ color:#08024A; }

/* Ciano */
.variant-b{ background:#00d3d9; color:#08024A; }
.variant-b .card-title, .variant-b .card-text{ color:#08024A; }
.variant-b .icon-badge-strong{ color:#00494C; }

/* Magenta */
.variant-c{ background:#f400a1; color:#fff; }
.variant-c .card-title, .variant-c .card-text{ color:#fff; }
.variant-c .icon-badge-strong{ color:#4C0037; }


/* Deixar títulos h1-h6 extra bold */
h1, h2, h3, h4, h5, h6 {
  font-weight: 800 !important;
}


/* Parágrafos dentro dos cards sempre brancos */
.delivery-card p {
  color: #FFF !important;
}


/* Parágrafos dentro dos cards usam text-100 */
.delivery-card p {
  color: var(--text-100) !important;
}


/* ===== Indicator Cards (new design) ===== */
.indicator-card{
  border-radius: 16px;
  padding: 1.75rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.indicator-card .indicator-tag{
  font-size:.9rem;
  font-weight:600;
}
.indicator-card .indicator-title{
  font-size:1.25rem;
  font-weight:700;
  margin-bottom:.75rem;
}
.indicator-card .indicator-text{
  font-size:1.05rem;
  line-height:1.55;
  color:#fff;
  margin:0;
}
.indicator-card i{
  font-size:1.25rem;
}

/* Variants */
.indicator-card.indigo{
  background:#0b0549;
  color:#fff;
}
.indicator-card.indigo .indicator-tag{ color:#9188ff; }
.indicator-card.indigo i{ color:#9188ff; }

.indicator-card.teal{
  background:#003b42;
  color:#fff;
}
.indicator-card.teal .indicator-tag{ color:#00f0ff; }
.indicator-card.teal i{ color:#00f0ff; }

.indicator-card.magenta{
  background:#3b002a;
  color:#fff;
}
.indicator-card.magenta .indicator-tag{ color:#ff57c1; }
.indicator-card.magenta i{ color:#ff57c1; }


/* ===== KPI Cards (match new reference) ===== */
.kpi-card{
  --radius: 16px;
  position: relative;
  padding: 2rem;
  border-radius: var(--radius);
  border: none;
  box-shadow: 0 8px 28px rgba(0,0,0,.28);
  display:flex; flex-direction:column; gap: .5rem;
  min-height: 260px;
}
.kpi-card::before{
  /* accent stripe on the left */
  content:""; position:absolute; inset:0 auto 0 0; width:8px;
  border-top-left-radius: var(--radius); border-bottom-left-radius: var(--radius);
  background: var(--kpi-accent, #22d1ee);
}
.kpi-cat{ font-weight:700; letter-spacing:.2px; opacity:.9; }
.kpi-title{ font-size:1.125rem; font-weight:800; margin-top:.25rem; }
.kpi-copy{ font-size:clamp(1.15rem, .8vw + 1rem, 1.75rem); line-height:1.35; margin-top:.75rem; }

.kpi-icon{ font-size:1.5rem; }

/* Variants & color tokens based on the reference */
.kpi-a{ 
  --kpi-accent:#6f6cff; 
  background:#07073a; 
  color:#fff; 
}
.kpi-a .kpi-cat, .kpi-a .kpi-icon{ color:#8c86ff; }

.kpi-b{ 
  --kpi-accent:#00f0ff; 
  background:#003d40; 
  color:#e7f9ff; 
}
.kpi-b .kpi-cat, .kpi-b .kpi-icon{ color:#00e7f1; }

.kpi-c{ 
  --kpi-accent:#ff5bc8; 
  background:#2f001c; 
  color:#fff; 
}
.kpi-c .kpi-cat, .kpi-c .kpi-icon{ color:#ff66cc; }


/* ===== Indicadores KPI Cards ===== */
.kpi-card{
  position: relative;
  padding: 2rem;
  border-radius: 0; /* cantos retos */
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  display:flex; flex-direction:column;
  min-height: 260px;
  border-left: 8px solid var(--kpi-accent, #22d1ee);
}
.kpi-cat{ font-weight:600; font-size:.95rem; }
.kpi-title{ font-size:1.125rem; font-weight:800; margin:0; }
.kpi-copy{ font-size:1.2rem; line-height:1.4; margin-top:1rem; }
.kpi-icon{ font-size:1.25rem; }

/* Variants */
.kpi-a{
  --kpi-accent:#6f6cff;
  background:#0c0544;
  color:#fff;
}
.kpi-a .kpi-cat, .kpi-a .kpi-icon{ color:#8c86ff; }

.kpi-b{
  --kpi-accent:#00f0ff;
  background:#003d40;
  color:#fff;
}
.kpi-b .kpi-cat, .kpi-b .kpi-icon{ color:#00e7f1; }

.kpi-c{
  --kpi-accent:#ff5bc8;
  background:#2f001c;
  color:#fff;
}
.kpi-c .kpi-cat, .kpi-c .kpi-icon{ color:#ff66cc; }


/* Correção: apenas uma borda à esquerda nos KPI cards */
.kpi-card{
  border: none !important;
  border-radius: 0 !important; /* cantos retos */
}


/* Carousel controls look */
.kpi-prev, .kpi-next{
  --bs-btn-color: var(--primary-600);
  --bs-btn-border-color: var(--primary-600);
  --bs-btn-hover-bg: color-mix(in oklab, var(--primary-600), black 85%);
  --bs-btn-hover-border-color: var(--primary-600);
}


/* === Global: buttons as pills === */
.btn{ border-radius: 9999px !important; }

/* === KPI horizontal scroller (1-by-1, full cards, draggable) === */
.kpi-wrap{
  position: relative;
}
.kpi-scroller{
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-bottom: .25rem;
  -webkit-overflow-scrolling: touch;
}
.kpi-scroller::-webkit-scrollbar{ height:8px; }
.kpi-scroller::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.15); border-radius: 8px; }
.kpi-card{
  flex: 0 0 auto;
  width: 420px;            /* requested fixed width */
  scroll-snap-align: start;
}
.kpi-drag{
  cursor: grab;
}
.kpi-drag:active{
  cursor: grabbing;
}

/* Align nav buttons */
.kpi-nav .btn{ padding-inline: .6rem; }


/* === Indicadores: remover scroll horizontal visível === */
.kpi-scroller{
  overflow-x: hidden !important;
  scroll-snap-type: none !important;
  -webkit-overflow-scrolling: auto !important;
}
.kpi-drag{ cursor: default !important; }


/* === Botões: reduzir tamanho do texto === */
.btn{ font-size: 0.92rem !important; }     /* base */
.btn-lg{ font-size: 1.00rem !important; }  /* menor que o padrão */
.btn-sm{ font-size: 0.82rem !important; }  /* um pouco menor */

/* === Como funciona: estilos solicitados === */
#como-funciona .step{
  background: transparent !important; /* remover bg do card */
  /* manter a borda existente do layout */
}

#como-funciona .step .step-num{
  position: relative;
  width: 64px; height: 64px;
  margin-inline: auto;
  border-radius: 50%;
  background: transparent !important; /* remover bg do círculo */
  border: 2px solid #8B82FF;         /* borda base 2px */
  display: grid; place-items: center;
  font-weight: 800;
  color: var(--text-300);
  isolation: isolate; /* ensure pseudo stays above background only */
}

/* Segmento espesso (8px) usando conic-gradient + máscara para formar um anel */
#como-funciona .step .step-num::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(#00CCD6 0 var(--sweep, 0turn), transparent 0);
  /* máscara para criar um anel com espessura de 8px */
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 8px), #000 calc(100% - 8px));
          mask: radial-gradient(closest-side, transparent calc(100% - 8px), #000 calc(100% - 8px));
  pointer-events: none;
}

/* Por padrão (step-1): 100% borda fina 2px (#8B82FF) — sem segmento espesso */
#como-funciona .step.step-1 .step-num{ /* já atende com a borda base */ }
#como-funciona .step.step-1 .step-num::after{ --sweep: 0turn; }

/* step-2: 25% da borda com 8px #00CCD6 */
#como-funciona .step.step-2 .step-num::after{ --sweep: 0.25turn; }

/* step-3: 50% da borda com 8px #00CCD6 */
#como-funciona .step.step-3 .step-num::after{ --sweep: 0.5turn; }

/* step-4: 75% da borda com 8px #00CCD6 */
#como-funciona .step.step-4 .step-num::after{ --sweep: 0.75turn; }

/* step-5: 100% da borda com 8px #00CCD6 */
#como-funciona .step.step-5 .step-num::after{ --sweep: 1turn; }


/* === Como funciona: círculos com SVG (arco nítido) === */
#como-funciona .step{ background: transparent !important; }
#como-funciona .step .step-num{
  position: relative;
  width: 64px; height: 64px;
  margin-inline: auto;
  border: none !important;         /* sem borda base */
  border-radius: 50%;
  display: grid; place-items: center;
  background: transparent !important;
  --p: 0; /* porcentagem do arco (0..100) */
}
#como-funciona .step .step-num::after{ content: none !important; } /* remove efeito anterior serrilhado */
#como-funciona .step .step-num .step-num__label{
  position: relative; z-index: 1; font-weight: 800;
}
#como-funciona .step .step-num .ring{
  position: absolute; inset: 0;
  transform: rotate(-90deg); /* começa no topo */
}
#como-funciona .step .step-num .ring .ring__fg{
  fill: none;
  stroke: #8B82FF;
  stroke-width: 4;
  stroke-linecap: butt;
  stroke-dasharray: calc(var(--p) * 1) calc(100 - var(--p));
  /* pathLength=100 permite usar porcentagens diretas */
}

/* Percentuais por step */
#como-funciona .step.step-1 .step-num{ --p: 20; }
#como-funciona .step.step-2 .step-num{ --p: 40; }
#como-funciona .step.step-3 .step-num{ --p: 60; }
#como-funciona .step.step-4 .step-num{ --p: 80; }
#como-funciona .step.step-5 .step-num{ --p: 100; }


/* === Buttons: semibold + larger paddings === */
.btn{
  font-weight: 600 !important;            /* semibold */
  padding: .7rem 1.25rem !important;      /* maior que padrão */
  border-radius: 9999px !important;       /* mantém pill */
}
.btn-lg{
  padding: .9rem 1.5rem !important;       /* maior ainda */
}
/* opcional: sm mantém proporção após ajuste global */
.btn-sm{
  padding: .5rem .9rem !important;
}

/* === Indicadores: arrows "Anterior/Próximo" borderless, larger, centered icon === */
.kpi-arrow{
  border: none !important;
  background: transparent;
  width: 48px; height: 48px;              /* tamanho confortável */
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.kpi-arrow i{ 
  font-size: 1.25rem; 
  display: block; 
}

/* Hover/Focus feedback sem borda */
.kpi-arrow:hover{
  background: color-mix(in oklab, #ffffff, transparent 90%);
}
.kpi-arrow:focus-visible{
  outline: 3px solid color-mix(in oklab, var(--primary-600), white 15%) !important;
  outline-offset: 2px;
}


/* ===== Overrides (requested) ===== */
/* Text utilities */
.text-100{ color: var(--text-100) !important; }
.text-900{ color: #08024A !important; }

/* Icon sizes for cards */
.icon-badge-strong{ font-size: 1.8rem !important; }
.icon-badge{ font-size: 1.8rem !important; }

/* Feature cards (if used) */
.card.feature.gradient-1 .icon-badge{ color:#08024A !important; }
.card.feature.gradient-2 .icon-badge{ color:#00494C !important; }
.card.feature.gradient-3 .icon-badge{ color:#4C0037 !important; }

/* Delivery variants (current markup) */
.variant-a .icon-badge-strong{ color:#08024A !important; }
.variant-b .icon-badge-strong{ color:#00494C !important; }
.variant-c .icon-badge-strong{ color:#4C0037 !important; }


/* Indicadores: habilitar drag-to-scroll */
.kpi-scroller{ cursor: grab; user-select: none; }
.kpi-scroller:active{ cursor: grabbing; }
.kpi-scroller.kpi-dragging{ scroll-behavior: auto; }



/* Remover fundo do reader */
.hero-art{ background: none !important; }



/* CTA ajustes */
.card.cta{ background:#08024A !important; }
.card.cta .card-body, .card.cta h2, .card.cta p{ color:#00CCD6 !important; }
.cta-max{ max-width:720px; margin-inline:auto; }



/* === Outline buttons: hover com fundo transparente === */
.btn-outline-primary{
  --bs-btn-bg: transparent;
  --bs-btn-color: var(--primary-500);
  --bs-btn-border-color: var(--primary-500);
  --bs-btn-hover-bg: transparent !important;
  --bs-btn-active-bg: transparent !important;
  --bs-btn-hover-color: color-mix(in oklab, var(--primary-500), white 12%);
  --bs-btn-hover-border-color: color-mix(in oklab, var(--primary-500), white 12%);
}




/* === Estilo coerente para links que abrem em nova aba === */
a{
  color: var(--text-200);
  text-decoration: none;
  
}
a::after{
  font-size: .85em;
  margin-left: .3em;
  line-height: 1;
}
a:hover{
  color: color-mix(in oklab, var(--text-100), black 12%);
  text-decoration: underline;
}




/* Hide hero bg image on tablets & phones */
@media (max-width: 991.98px){
  .banner-header{
    background-image: linear-gradient(180deg, rgba(8, 2, 74, .50), rgba(8, 2, 74, .80)), url(images/dashboards.png);
  }
}