:root{
  --bg:#f7f7f7;
  --card-bg:#fff;
  --accent:#00C1E8;
  --dark:#111;
  --muted:#666;
  --footer:#111;
  --container:1200px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html, body{
  height:100%;
  width:100%;
  overflow-x:hidden;
  background-color: #fff;
  background-image: 
    repeating-linear-gradient(
      45deg,
      rgba(0, 183, 209, 0.03) 0px,
      rgba(0, 183, 209, 0.03) 1px,
      transparent 1px,
      transparent 40px
    ),
    radial-gradient(
      circle,
      rgba(0, 183, 209, 0.04) 1px,
      transparent 1px
    );
  background-size: 
    60px 60px,
    20px 20px;
  background-position: 
    0 0,
    10px 10px;
  background-repeat: repeat;
  font-family:'Poppins',sans-serif;
  color:var(--dark);
  position: relative;
}

.risco-curvo-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.risco-curvo-svg {
  position: absolute;
  width: 100%;
  height: 100%;
}

.risco-curvo {
  stroke: #66D9F2;
  stroke-width: 0.2;
  fill: none;
  opacity: 1;
  stroke-linecap: round; 
}

body{
  display:flex;
  flex-direction:column;
  min-height:100vh;
  position: relative;
  z-index: 2;
}

.topbar{
  background:#fff;
  padding:30px 20px 20px;
  border-bottom-left-radius:24px;
  border-bottom-right-radius:24px;
  box-shadow:0 4px 12px rgba(0,0,0,0.05);
  position: relative;
  z-index: 20;
}

.wrap{
  width:90%;
  max-width:var(--container);
  margin:0 auto;
  display:flex;
  justify-content:center;
}

.logo-img{
  height:85px;
  width:auto;
}

main{
  padding:20px 20px 60px;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  position: relative;
  z-index: 15;
}

.cards{
  display:flex;
  justify-content:center;
  width:90%;
  max-width:var(--container);
  margin:30px auto 0;
  gap:60px;
  position: relative;
  z-index: 15;
}

.card{
  background:var(--card-bg);
  width:45%;
  max-width:450px;
  border-radius:20px;
  padding:30px;
  box-shadow:0 8px 24px rgba(0,0,0,0.08);
  display:flex;
  flex-direction:column;
  position: relative;
  border: 1px solid rgba(0, 183, 209, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(3px);
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 183, 209, 0.15);
  background: rgba(255, 255, 255, 0.96);
}

.card .dots{
  position:absolute;
  left:25px;
  top:20px;
  display:flex;
  gap:6px;
}

.card .dots span{
  width:13px;
  height:13px;
  background:#e0e0e0;
  border-radius:50%;
}

.card h2{
  margin:35px 0 20px;
  font-size:22px;
  font-weight:600;
  color: rgb(66, 66, 66);
  text-align: left;
  position: relative;
}

.card p.lead{
  margin:0 0 25px;
  color:var(--muted);
  line-height:1.5;
  font-size:20px;
  text-align: left;
  min-height:3.5em;
  position: relative;
}

.card .photo{
  height:220px;
  border-radius:12px;
  margin:0 0 25px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f5f5f5;
  border: 1px solid rgba(0, 0, 0, 0.05);
  position: relative;
}

.card .photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition: transform 0.5s ease;
}

.card:hover .photo img {
  transform: scale(1.03);
}

.actions{
  margin-top:auto;
  text-align:center;
  position: relative;
}

.btn{
  display:inline-block;
  width:100%;
  max-width:280px;
  padding:16px 0;
  border-radius:40px;
  font-size:16px;
  font-weight:600;
  letter-spacing:0.2px;
  border:2px solid var(--accent);
  text-align:center;
  color:var(--accent);
  background:transparent;
  text-decoration:none;
  transition:all 0.3s ease;
  cursor:pointer;
}

.btn.primary{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}

.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 12px rgba(0,183,209,0.3);
}

footer{
  background:var(--footer);
  color:#ffff;
  padding:25px 20px;
  font-size:13px;
  text-align:center;
  margin-top:auto;
  line-height:1.5;
  position: relative;
  z-index: 30;
  box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
}

footer a{
  color:#ddd;
  text-decoration:underline;
  margin-left:5px;
}

@media(max-width:900px){
  .cards{
    flex-direction:column;
    align-items:center;
    gap:40px;
  }
  
  .card{
    width:100%;
    max-width:400px;
  }
  
  .risco-curvo-container {
    display: none;
  }
  
  .card {
    background: var(--card-bg);
    backdrop-filter: none;
  }
}

@media(max-width:480px){
  .card{
    padding:25px 20px;
  }
  
  .card h2{
    font-size:20px;
    margin-top:30px;
  }
  
  .card .photo{
    height:180px;
  }
  
  .logo-img{
    height:50px;
  }
}