:root {
     --primary: #1F2A37;
     --accent: #3BAFA4;
     --bg: #F5F7FA;
     --card: #FFFFFF;
     --text: #111827;
     --muted: #6B7280;
     --border: rgba(17, 24, 39, .12);
     --shadow: 0 18px 50px rgba(17, 24, 39, .10);
     --radius: 18px;
     --max: 1120px;
 }

 * {
     box-sizing: border-box
 }

 body {
     margin: 0;
     font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
     color: var(--text);
     background:
         radial-gradient(1200px 520px at 88% 0%, rgba(59, 175, 164, .18), transparent 60%),
         radial-gradient(1100px 520px at 10% 10%, rgba(31, 42, 55, .12), transparent 58%),
         var(--bg);
 }

 a {
     color: inherit;
     text-decoration: none
 }

 .container {
     max-width: var(--max);
     margin: 0 auto;
     padding: 22px 18px 0
 }

 /* Top bar */
 .topbar {
     position: sticky;
     top: 12px;
     z-index: 100;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 14px;
     padding: 12px 14px;
     border: 1px solid var(--border);
     border-radius: 999px;
     background: rgba(255, 255, 255, .75);
     backdrop-filter: blur(10px);
     box-shadow: 0 10px 30px rgba(17, 24, 39, .06);
 }

 .brand {
     display: flex;
     align-items: center;
     gap: 10px;
     font-weight: 800;
     letter-spacing: .2px;
     color: var(--primary);
 }

 .logo {
     width: 34px;
     height: 34px;
     border-radius: 12px;
     background: linear-gradient(135deg, rgba(59, 175, 164, .22), rgba(31, 42, 55, .10));
     border: 1px solid rgba(31, 42, 55, .18);
     display: grid;
     place-items: center;
 }

 .logo svg {
     width: 18px;
     height: 18px;
     stroke: var(--primary);
     stroke-width: 2;
     fill: none;
     stroke-linecap: round;
     stroke-linejoin: round
 }

 .nav {
     display: flex;
     align-items: center;
     gap: 14px;
     color: rgba(17, 24, 39, .78);
     font-size: 13px;
 }

 .nav a {
     padding: 8px 10px;
     border-radius: 999px
 }

 .nav a:hover {
     background: rgba(17, 24, 39, .05)
 }

 .nav-cta {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .btn {
     appearance: none;
     border: 1px solid transparent;
     border-radius: 12px;
     padding: 10px 12px;
     font-weight: 700;
     font-size: 13px;
     cursor: pointer;
     white-space: nowrap;
 }

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

 .btn.primary:hover {
     filter: brightness(.98)
 }

 .btn.ghost {
     background: rgba(255, 255, 255, .70);
     border-color: rgba(17, 24, 39, .14);
     color: rgba(17, 24, 39, .84)
 }

 .btn.ghost:hover {
     background: rgba(255, 255, 255, .85)
 }

 /* Hero */
 .hero-wrap {
     margin-top: 18px;
     border-radius: calc(var(--radius) + 8px);
     border: 1px solid var(--border);
     background: linear-gradient(135deg, rgba(31, 42, 55, .05), rgba(59, 175, 164, .10));
     box-shadow: var(--shadow);
     overflow: hidden;
 }

 .hero {
     display: grid;
     grid-template-columns: 1.1fr .9fr;
     gap: 16px;
     align-items: center;
     padding: 26px 22px;
 }



    
 .kicker {
     display: inline-flex;
     gap: 8px;
     align-items: center;
     padding: 6px 10px;
     border-radius: 999px;
     border: 1px solid rgba(17, 24, 39, .12);
     background: rgba(255, 255, 255, .70);
     color: rgba(17, 24, 39, .78);
     font-size: 12px;
     font-weight: 650;
     width: fit-content;
 }

 .kicker .dot {
     width: 8px;
     height: 8px;
     border-radius: 999px;
     background: var(--accent)
 }

 h1 {
     margin: 12px 0 12px;
     font-size: 30px;
     line-height: 1.15;
     letter-spacing: .2px;
     color: var(--primary);
 }

 @media (max-width: 520px) {
     h1 {
         font-size: 28px
     }
 }

 .sub {
     margin: 0;
     color: rgba(17, 24, 39, .74);
     font-size: 16px;
     line-height: 1.75;
     max-width: 58ch;
 }

 .actions {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
     margin-top: 14px;
 }

 .micro {
     margin-top: 12px;
     color: rgba(17, 24, 39, .62);
     font-size: 13px;
     line-height: 1.7;
 }

 .benefits {
     margin-top: 16px;
     display: grid;
     gap: 8px;
 }

 .benefit {
     display: flex;
     align-items: flex-start;
     gap: 8px;
     font-size: 14px;
     color: rgba(17, 24, 39, .78);
     line-height: 1.6;
 }

 .benefit .check {
     color: var(--accent);
     font-weight: 800;
     line-height: 1;
     margin-top: 2px;
 }

 .services-wrap , .principles-wrap {
     max-width: var(--max);
     margin: 0 auto;
 }

section {
     margin: 25px 0;
 }
 .principles-wrap .card {
     background: var(--card);
     border: 1px solid var(--border);
     border-radius: 22px;
     padding: 26px 24px;
     box-shadow: 0 12px 34px rgba(17, 24, 39, .06);
     
 }

 .principles-wrap .card p {
     margin: 0 0 14px;
     font-size: 16px;
     line-height: 1.75;
     color: rgba(17, 24, 39, .78);
 }



 .service-section {
     background: var(--card);
     border: 1px solid var(--border);
     border-radius: 22px;
     padding: 24px;
     box-shadow: 0 12px 34px rgba(17, 24, 39, .06);
 }

 .service-section h3 {
     margin: 0 0 10px;
     font-size: 18px;
     color: var(--primary);
 }

 .service-section p {
     margin: 0;
     color: rgba(17, 24, 39, .74);
     font-size: 15px;
     line-height: 1.7;
 }

 .card-list {
     list-style: none;
     padding: 0 18px;
     display: grid;
     gap: 10px;
     color: rgba(17, 24, 39, .72);
     font-size: 15px;
     line-height: 1.7;
 }

 /* Right side card */
 .side {
     background: rgba(255, 255, 255, .78);
     border: 1px solid rgba(17, 24, 39, .12);
     border-radius: 20px;
     padding: 16px;
     box-shadow: 0 12px 34px rgba(17, 24, 39, .06);
 }

 .side h3 {
     margin: 0 0 12px;
     font-size: 16px;
     color: rgba(17, 24, 39, .88)
 }

 .list {
     display: grid;
     gap: 10px
 }

 .item {
     display: flex;
     gap: 10px;
     align-items: flex-start;
     padding: 10px;
     border-radius: 14px;
     border: 1px solid rgba(17, 24, 39, .10);
     background: rgba(255, 255, 255, .70);
 }

 .ic {
     width: 34px;
     height: 34px;
     border-radius: 14px;
     display: grid;
     place-items: center;
     background: rgba(59, 175, 164, .14);
     border: 1px solid rgba(59, 175, 164, .22);
     flex: 0 0 auto;
 }

 .ic svg {
     width: 18px;
     height: 18px;
     stroke: var(--primary);
     stroke-width: 2;
     fill: none;
     stroke-linecap: round;
     stroke-linejoin: round
 }

 .item .t {
     font-size: 14px;
     font-weight: 750;
     color: rgba(17, 24, 39, .86);
     margin: 0
 }

 .item .d {
     font-size: 13px;
     color: rgba(17, 24, 39, .66);
     margin: 4px 0 0;
     line-height: 1.7
 }

 .mini-cta {
     margin-top: 12px;
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
 }

 .mini-cta .btn {
     width: 100%;
     justify-content: center;
     display: inline-flex
 }

 @media (min-width: 981px) {
     .mini-cta .btn {
         width: auto
     }
 }

 .card {
     background: #fff;
     border: 1px solid var(--border);
     border-radius: 20px;
     padding: 24px
 }

 .grid-2 {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 20px
 }

 .grid-3 {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px
 }


 .hero {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 30px
 }

 .sub {
     color: #555
 }

 .benefits {
     margin-top: 20px
 }

 .ai-box {
     margin-top: 20px
 }

 .input {
     width: 100%;
     padding: 10px;
     border: 1px solid var(--border);
     border-radius: 10px
 }

 .ai-result {
     margin-top: 20px;
     display: none
 }

 .cta {
     text-align: center;
     padding: 40px;
     border-radius: 20px;
     background: #eef3f3
 }


 .contact-box{
  background:linear-gradient(135deg, rgba(31,42,55,.05), rgba(59,175,164,.12));
  border:1px solid var(--border);
  border-radius:26px;
  padding:40px 28px;
  text-align:center;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}

.contact-box::before{
  content:"";
  position:absolute;
  width:200px;
  height:200px;
  background:rgba(59,175,164,.12);
  border-radius:50%;
  top:-70px;
  left:-70px;
}

.contact-title{
  margin:0 0 10px;
  font-size:32px;
  color:var(--primary);
}

.contact-sub{
  margin:0 0 26px;
  font-size:16px;
  line-height:1.6;
  color:rgba(17,24,39,.7);
}

.contact-actions{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}

.contact-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 18px;
  border-radius:14px;
  font-weight:700;
  font-size:14px;
  transition:.25s;
}

.contact-btn i{
  font-size:16px;
}

.contact-btn.primary{
  background:var(--accent);
  color:#061312;
}

.contact-btn.primary:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(59,175,164,.25);
}

.contact-btn.whatsapp{
  background:#25D366;
  color:#fff;
}

.contact-btn.whatsapp:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(37,211,102,.25);
}

.contact-phone{
  margin-top:18px;
  font-size:18px;
  color:rgba(17,24,39,.55);
}

@media(max-width:600px){
  .contact-title{font-size:26px}
  .contact-actions{flex-direction:column}
  .contact-btn{justify-content:center}
}

 @media (max-width: 980px) {
     .hero {
         grid-template-columns: 1fr;
         padding: 22px 18px
     }

     .nav {
         display: none;
         position: absolute;
         top: 72px;
         right: 18px;
         left: 18px;
         flex-direction: column;
         background: rgba(255, 255, 255, .95);
         border: 1px solid var(--border);
         border-radius: 16px;
         padding: 12px;
         gap: 6px;
         z-index: 50;
     }

     .nav.open {
         display: flex
     }

     .close-btn {
         align-self: flex-start
     }

     .nav-cta .menu-btn {
         display: inline-flex
     }

     .grid-3{
            grid-template-columns: 1fr;
     }
 }

 @media (min-width: 981px) {
     .nav {
         display: flex;
         position: static;
         flex-direction: row;
         background: none;
         border: none;
         padding: 0
     }

     .nav-cta .menu-btn {
         display: none
     }

     .close-btn {
         display: none
     }
 }