/* Styles specific to the Soluções de Compliance page (project standard) */

/* Container helper is provided by `site_shared.css` */
/* .container definition removed to avoid duplication with site_shared.css */

.page-main{
  background: linear-gradient(180deg, var(--light-gray) 0%, #ffffff 100%);
  color: var(--text);
  min-height: 100vh;
}

.hero-compliance{
  display:flex;
  align-items:center;
  position:relative;
  min-height: calc(100vh - var(--header-height));
  padding: 120px 0 72px;
  overflow:hidden;
  background: radial-gradient(120% 120% at 20% 0, rgba(46, 115, 255, 0.18), transparent 45%),
    linear-gradient(180deg, #ffffff 0%, #f7f8fb 100%);
}

.hero-compliance::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(16, 26, 77, 0.65) 0%, rgba(16, 26, 77, 0.12) 60%, rgba(255, 255, 255, 0) 100%);
}

.hero-compliance::after{
  content: "";
  position: absolute;
  inset: auto -10% -10% auto;
  width: 460px;
  height: 460px;
  border-radius: 52%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0));
  filter: blur(12px);
  z-index: 1;
  opacity: 0.9;
}

.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center right;display:block}

.hero-compliance .section-inner{
  position:relative;
  z-index:2;
  padding:0 24px;
  display:flex;
  justify-content:center;
}

.hero-compliance .section-content{
  max-width:640px;
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}

.hero-compliance .title{
  font-size:2.75rem;
  font-weight:800;
  color:var(--dark-gray);
  margin-bottom:0;
  line-height:1.15;
}

.hero-compliance .lead{
  font-size:1.2rem;
  color:var(--text);
  opacity:0.9;
  max-width:760px;
  line-height:1.6;
}

.hero-pill-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:0.85rem;
}

.hero-pill{
  background:rgba(255,255,255,0.92);
  padding:16px 18px;
  border-radius:14px;
  border:1px solid rgba(2,6,23,0.08);
  box-shadow:0 12px 30px rgba(2,6,23,0.07);
}

.hero-pill-label{
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-size:0.65rem;
  color:var(--text);
  opacity:0.7;
  margin:0 0 4px;
}

.hero-pill-value{
  font-size:1rem;
  font-weight:700;
  margin:0;
  color:var(--dark-gray);
}

.hero-notes{
  font-size:0.95rem;
  color:var(--text);
  opacity:0.85;
  max-width:560px;
}

.hero-notes p{
  margin:0;
}

.hero-compliance .btn-primary{
  padding:14px 20px;
  border-radius:14px;
  font-weight:700;
  background:linear-gradient(135deg, #1c6af6, #2d81ff 65%, #17c3ff);
  color:#fff;
  border:none;
  box-shadow:0 20px 40px rgba(28,106,246,0.35);
}

.section-services{
  padding:120px 0 100px;
  background: linear-gradient(180deg, #fdfdfd 0%, #f5f6fb 65%, #ecf0f6 100%);
  position:relative;
  overflow:hidden;
}

.section-services::before,
.section-services::after{
  content: "";
  position:absolute;
  width:260px;
  height:260px;
  border-radius:50%;
  z-index:0;
  filter:blur(5px);
  opacity:0.6;
}

.section-services::before{
  background: radial-gradient(circle, rgba(26, 170, 255, 0.35), transparent 70%);
  top:-60px;
  right:10%;
}

.section-services::after{
  background: radial-gradient(circle, rgba(255, 255, 255, 0.8), transparent 70%);
  bottom:-80px;
  left:5%;
}

.section-services .section-inner{
  position:relative;
  z-index:2;
}

.section-services .section-title{
  color:#0f1a33;
  font-size:2.2rem;
  margin-bottom:1rem;
  font-weight:800;
}

.section-services .section-content p{
  color:rgba(15, 26, 51, 0.75);
  max-width:760px;
  line-height:1.7;
  margin-bottom:0;
}

.services-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.5rem;
  list-style:none;
  padding:0;
  margin:2rem 0 0;
}

.services-list li{
  background:#fff;
  border-radius:24px;
  padding:30px 26px;
  border:1px solid rgba(16, 26, 51, 0.08);
  box-shadow:0 18px 45px rgba(15, 26, 51, 0.08);
  min-height:220px;
  transition:transform 0.4s ease, box-shadow 0.4s ease;
}

.services-list li:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 45px rgba(15, 26, 51, 0.18);
}

.services-list h3{
  font-size:1.2rem;
  margin-bottom:0.75rem;
  color:#0f1a33;
  font-weight:800;
}

.services-list p{
  color:#3c4b63;
  line-height:1.7;
  font-size:1rem;
  margin:0;
}

.section-approach{
  padding:100px 0 90px;
  background: radial-gradient(circle at top right, rgba(30, 113, 255, 0.35), transparent 55%),
    linear-gradient(180deg, #050c22 0%, #0e193c 60%, #121935 100%);
  position:relative;
  overflow:hidden;
}

.section-approach::before,
.section-approach::after{
  content: "";
  position:absolute;
  width:420px;
  height:420px;
  border-radius:50%;
  filter:blur(10px);
  opacity:0.6;
  z-index:0;
}

.section-approach::before{
  background: radial-gradient(circle, rgba(26, 170, 255, 0.6), transparent 70%);
  top:10%;
  right:-10%;
}

.section-approach::after{
  background: radial-gradient(circle, rgba(255, 255, 255, 0.35), transparent 75%);
  bottom:-20%;
  left:-15%;
}

.section-approach .section-inner{
  position:relative;
  z-index:2;
}

.section-approach .section-title{
  color:#f7fbff;
  font-size:2.25rem;
  margin-bottom:1rem;
}

.section-approach p{
  max-width:720px;
  color:rgba(247, 251, 255, 0.85);
  font-size:1.05rem;
  line-height:1.7;
}

.approach-steps{
  display:grid;
  gap:1.25rem;
  margin-top:2rem;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}

.approach-steps .step{
  background: rgba(255, 255, 255, 0.04);
  border:1px solid rgba(255, 255, 255, 0.12);
  border-radius:24px;
  padding:28px 24px;
  box-shadow:0 25px 60px rgba(2,6,23,0.35);
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:220px;
  text-align:left;
  color:#f7fbff;
  font-weight:600;
}

.step-icon{
  width:64px;
  height:64px;
  border-radius:16px;
  background: linear-gradient(135deg, rgba(26, 170, 255, 0.3), rgba(19, 31, 70, 0.8));
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.2);
}

.step-icon svg{width:36px;height:36px}

.step-content{line-height:1.4;}

.section-cta{padding:64px 0;background:transparent;text-align:center}
.section-cta .container{max-width:900px;margin:0 auto;padding:0 24px}
.section-cta h2{font-size:1.6rem;margin-bottom:0.5rem;color:var(--dark-gray)}
.section-cta p{color:var(--text);opacity:0.8;margin-bottom:1rem}

.section-cta .btn-primary{padding:14px 22px;border-radius:12px}

/* Accessibility: focus styles */
.services-list li:focus-within,
.services-list li:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(2,6,23,0.09);
}

/* Responsive adjustments (consistent with project breakpoints) */
@media (max-width: 1024px){
  .services-list{grid-template-columns:1fr;gap:1.25rem}
  .approach-steps{flex-direction:column}
  .hero-compliance{padding:80px 0}
  /* remove background image on narrower viewports to avoid clipping and improve performance */
  .hero-bg{display:none}
  .hero-compliance .title{font-size:1.9rem}
  .hero-compliance .lead{font-size:1rem}
  .approach-steps .step{align-items:flex-start;text-align:left;flex-direction:row}
  .step-icon{margin-bottom:0;margin-right:12px;flex-shrink:0}
  .hero-pill-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
  .hero-pill{padding:14px 16px}
  .hero-notes{max-width:100%}
}

@media (max-width: 480px){
  .hero-compliance{padding:60px 0}
  .hero-compliance .title{font-size:1.4rem}
  .hero-compliance .lead{font-size:0.95rem}
  .services-list li{padding:18px}
  .approach-steps .step{gap:8px;padding:16px}
  .step-icon svg{width:36px;height:36px}
  .hero-pill-grid{gap:0.6rem}
  .hero-pill{padding:12px 14px}
  .hero-pill-label{font-size:0.6rem}
  .hero-pill-value{font-size:0.95rem}
  .hero-notes{font-size:0.9rem}
}