:root{}
/* RESPONSIVE TWEAKS + SPACING */
.mini-card{flex:0 0 clamp(240px,48vw,320px);}
.mini-card canvas{width:100%; height:120px}
/* Step numerals: lift them up a bit and give heading breathing room */
.step{padding-top:34px}
.step .num{top:-10px; left:14px}
.step h3{margin-top:6px}
/* Modal: remove extra bottom spacing now that we hid the footer links */
.modal-body{padding-bottom:22px}

/* Additional breakpoints */
@media (max-width: 992px){
  .hero-grid{grid-template-columns:1fr}
}
@media (max-width: 768px){
  .section{padding:56px 0}
}
@media (max-width: 480px){
  .mini-card{flex:0 0 88%}
  h1{font-size:32px}
}

/* === Responsividade refinada === */
.nav .actions, .nav > div[style*="display:flex"]{gap:10px;align-items:center}
@media (max-width: 768px){
  header .nav{height:auto;padding:10px 0}
  .nav .links{display:none}
  .nav .header-cta{display:none} /* esconde CTA do header no mobile para evitar sobreposição */
  .btn-ghost{padding:10px 14px;border-radius:14px}
}
@media (max-width: 576px){
  .hero{padding-top:56px}
  .cta-row a{width:100%;justify-content:center}
}

/* Hero media (imagem no lugar do gráfico) */
.hero-media{position:relative;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));min-height:240px}
.hero-media img{display:block;width:100%;height:auto;object-fit:cover}

/* Grade interna responsiva */
@media (max-width: 640px){
  .chart-grid{grid-template-columns:1fr}
}

/* Mini-cards responsivos + canvas redimensionável */
.mini-card{flex:0 0 clamp(240px, 44vw, 320px)}
.mini-card canvas{width:100%;height:120px}

/* Steps: badge mais alto e afastado do título */
.step{padding-top:42px}
.step .num{top:-14px}
.step h3{margin-top:10px}

/* ===== Hover Zoom Interactions ===== */
:root{ --zoom-scale: 1.02; --zoom-scale-strong: 1.04 }
.btn-brand, .btn-ghost, .nav a.btn, .feature, .step, .tcard, .mini-card, .logo-badge, .hero-card, .hero-media {
  transition: transform .25s cubic-bezier(.2,.6,.2,1), box-shadow .25s cubic-bezier(.2,.6,.2,1);
  will-change: transform;
}
.btn-brand:hover, .btn-ghost:hover, .nav a.btn:hover { transform: scale(var(--zoom-scale)); box-shadow: 0 10px 30px rgba(3,76,251,.35); }
.feature:hover, .step:hover, .tcard:hover, .mini-card:hover { transform: scale(var(--zoom-scale)); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.logo-badge:hover { transform: scale(var(--zoom-scale)); }
.hero-media{ overflow:hidden }
.hero-media:hover img{ transform: scale(var(--zoom-scale-strong)); }
.hero-media img{ transition: transform .35s cubic-bezier(.2,.6,.2,1) }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .btn-brand, .btn-ghost, .nav a.btn, .feature, .step, .tcard, .mini-card, .logo-badge, .hero-card, .hero-media {
    transition: none;
  }
  .hero-media img{ transition:none }
}

/* Mobile polish */
.container{padding:0 16px}
section, .section{scroll-margin-top:70px}
@media (max-width:768px){
  .nav{height:64px}
  .nav .header-cta{display:none}
  .hero-grid{grid-template-columns:1fr;gap:18px}
  .chart-grid{grid-template-columns:1fr}
}
@media (max-width:480px){
  .cta-row a{width:100%}
  .hero-media{min-height:200px}
}

/* Mini-carrossel visível e com respiro */
.mini-carousel{overflow:hidden; padding:6px 2px; min-height:160px}
.mini-track{display:flex; gap:14px; will-change:transform}
/* Painel de imagem do hero sem compressão inesperada */
.hero-media{min-height:240px; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.06); background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01))}
.hero-media img{display:block; width:100%; height:auto; object-fit:cover}
/* Header realmente compacto no mobile */
@media (max-width: 768px){
  header .nav{height:auto; padding:10px 0}
  .nav .links{display:none}
  .nav .header-cta{display:none}
  .hero-grid{grid-template-columns:1fr; gap:16px}
  .chart-grid{grid-template-columns:1fr; gap:12px}
}
@media (max-width: 480px){
  .cta-row a{width:100%; justify-content:center}
  .mini-card{flex:0 0 88%}
}

/* --- Center header content away from the edges --- */
.container{padding-left:clamp(22px,5vw,56px);padding-right:clamp(22px,5vw,56px)}
header .container{padding-left:clamp(22px,6vw,64px);padding-right:clamp(22px,6vw,64px)}
@media (max-width:768px){
  header .container{padding-left:clamp(18px,6vw,32px);padding-right:clamp(18px,6vw,32px)}
}