:root{
      --bg0:#f7f8fa;
      --card:rgba(255,255,255,.70);
      --card2:rgba(255,255,255,.58);
      --text:#0b1720;
      --muted:#52606d;
      --brand:#0f8f95;
      --brand2:#2fb7c0;
      --ring:rgba(15,143,149,.18);
      --shadow: 0 14px 45px rgba(12, 24, 34, .12);
      --shadow2: 0 10px 25px rgba(12, 24, 34, .10);
      --radius: 20px;
      --radius2: 14px;
      --max: 1100px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--text);
      font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      background: var(--bg0);
      overflow-x:hidden;
    }

    /* "Weird" background, but cleaner (no external images). */
    body::before{
      content:"";
      position:fixed;
      inset:-20vmax;
      background:
        radial-gradient(60vmax 45vmax at 15% 20%, rgba(47,183,192,.35), transparent 55%),
        radial-gradient(55vmax 45vmax at 80% 25%, rgba(15,143,149,.22), transparent 60%),
        radial-gradient(70vmax 55vmax at 70% 80%, rgba(13,73,90,.20), transparent 55%),
        radial-gradient(40vmax 35vmax at 20% 85%, rgba(140, 190, 210, .22), transparent 55%),
        linear-gradient(180deg, rgba(245,247,250,1), rgba(245,247,250,.72));
      filter: saturate(1.05);
      z-index:-3;
    }
    body::after{
      content:"";
      position:fixed;
      inset:0;
      background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 10px, rgba(255,255,255,0) 10px 28px),
        radial-gradient(90vmax 60vmax at 40% 70%, rgba(255,255,255,.35), transparent 60%);
      opacity:.55;
      mix-blend-mode: overlay;
      z-index:-2;
      pointer-events:none;
    }

    a{color:inherit}
    .wrap{max-width:var(--max); margin:0 auto; padding:0 20px}

    /* Top notice bar */
    .topbar{
      position:sticky; top:0; z-index:50;
      backdrop-filter: blur(12px);
      background: rgba(247,248,250,.62);
      border-bottom: 1px solid rgba(15,143,149,.12);
    }
    .topbar-inner{
      display:flex; align-items:center; justify-content:space-between;
      gap:14px;
      padding:10px 0;
    }
    .brand{
      display:flex; align-items:center; gap:12px; min-width:0;
    }
    .logo{
      width:44px; height:44px; border-radius:999px;
      box-shadow: 0 10px 22px rgba(15,143,149,.22);
      display:grid; place-items:center;
      flex:0 0 auto;
      overflow:hidden;
      background: transparent;
    }
    .logo img{
      width:100%;
      height:100%;
      object-fit:contain;
      display:block;
      border-radius:999px;
    }
    .brand h1{
      margin:0; font-size:15px; line-height:1.15;
      letter-spacing:.2px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .brand small{display:block; color:var(--muted); font-weight:500; margin-top:2px}
    nav{display:flex; align-items:center; gap:18px}
    nav a{
      text-decoration:none;
      font-weight:700;
      letter-spacing:.12em;
      font-size:12px;
      color: rgba(11,23,32,.72);
      padding:10px 10px;
      border-radius:999px;
    }
    nav a:hover{background: rgba(15,143,149,.10); color: rgba(11,23,32,.88)}
    .right{
      display:flex; align-items:center; gap:10px;
    }
    .pill{
      display:flex; align-items:center; gap:10px;
      padding:8px 12px;
      border-radius:999px;
      background: rgba(255,255,255,.65);
      border: 1px solid rgba(15,143,149,.14);
      box-shadow: 0 8px 18px rgba(12,24,34,.06);
      font-weight:700;
      color: rgba(11,23,32,.82);
      white-space:nowrap;
    }
    .pill svg{width:16px; height:16px; opacity:.85}
    .cta{
      border:0;
      cursor:pointer;
      padding:10px 14px;
      border-radius:999px;
      font-weight:800;
      letter-spacing:.02em;
      background: linear-gradient(135deg, var(--brand), var(--brand2));
      color:white;
      box-shadow: 0 12px 26px rgba(15,143,149,.26);
      text-decoration:none;
      white-space:nowrap;
    }
    .cta:hover{transform: translateY(-1px)}
    .ghost{
      border:1px solid rgba(15,143,149,.22);
      background: rgba(255,255,255,.55);
      color: rgba(11,23,32,.85);
      box-shadow: 0 10px 22px rgba(12,24,34,.06);
    }

    /* Mobile nav */
    .menu-btn{display:none}
    @media (max-width: 900px){
      nav{display:none}
      .menu-btn{display:inline-flex; align-items:center; gap:8px}
      .pill{display:none}
      .brand h1{font-size:14px}
      .topbar-inner{
        flex-wrap:wrap;
        justify-content:center;
        gap:12px;
      }
      .brand{
        width:100%;
        justify-content:center;
        text-align:center;
      }
      .right{
        width:100%;
        justify-content:center;
        flex-wrap:wrap;
        gap:8px;
      }
      .right .cta{
        flex:1 1 auto;
        min-width:120px;
        max-width:200px;
        justify-content:center;
      }
    }
    .mobile-nav{
      display:none;
      padding: 0 0 14px 0;
      text-align:center;
    }
    .mobile-nav a{
      display:block;
      margin: 6px 0;
      padding: 12px 12px;
      border-radius: 12px;
      background: rgba(255,255,255,.58);
      border: 1px solid rgba(15,143,149,.14);
      text-decoration:none;
      font-weight:800;
      letter-spacing:.08em;
      font-size:12px;
      color: rgba(11,23,32,.78);
      text-align:center;
    }

    /* Sections */
    section{padding: 58px 0}
    .hero{
      padding: 54px 0 40px;
    }
    .hero-grid{
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 26px;
      align-items:center;
    }
    .card{
      background: var(--card);
      border: 1px solid rgba(15,143,149,.14);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      backdrop-filter: blur(14px);
    }
    .hero-card{
      padding: 26px 24px;
      position:relative;
      overflow:hidden;
    }
    .hero-card::before{
      content:"";
      position:absolute;
      inset:-60px -60px auto auto;
      width: 220px; height: 220px;
      border-radius: 999px;
      background: radial-gradient(circle at 30% 30%, rgba(47,183,192,.35), rgba(15,143,149,0));
      filter: blur(2px);
    }
    .kicker{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding: 8px 12px;
      border-radius:999px;
      border: 1px solid rgba(15,143,149,.18);
      background: rgba(255,255,255,.55);
      color: rgba(11,23,32,.75);
      font-weight:800;
      font-size:12px;
      letter-spacing:.08em;
      text-transform:uppercase;
    }
    .kicker strong{color: rgba(11,23,32,.92)}
    .hero h2{
      margin: 14px 0 10px;
      font-size: 38px;
      line-height: 1.12;
      letter-spacing: -0.02em;
    }
    .hero p{margin:0; color: rgba(11,23,32,.78); font-size:16px}
    .hero .actions{display:flex; gap:10px; flex-wrap:wrap; margin-top: 18px}
    .badges{
      margin-top:18px;
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:10px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,.56);
      border:1px solid rgba(15,143,149,.14);
      color: rgba(11,23,32,.74);
      font-weight:800;
      font-size:13px;
    }
    .badge svg{width:16px; height:16px; color: var(--brand)}
    .aside-card{
      padding: 22px 20px;
    }
    .aside-card h3{
      margin:0 0 10px;
      font-size: 14px;
      letter-spacing:.14em;
      text-transform:uppercase;
      color: rgba(11,23,32,.70);
    }
    .aside-card .big{
      font-size: 20px;
      font-weight: 900;
      margin: 4px 0 10px;
    }
    .aside-card a{color: var(--brand); font-weight:900; text-decoration:none}
    .aside-card a:hover{text-decoration:underline}
    .divider{
      height:1px; background: rgba(15,143,149,.16);
      margin: 14px 0;
    }

    .section-title{
      display:flex; align-items:flex-end; justify-content:space-between;
      gap:14px; flex-wrap:wrap;
      margin-bottom: 18px;
    }
    .section-title h2{
      margin:0;
      font-size: 28px;
      letter-spacing:-.01em;
    }
    .section-title p{
      margin:0;
      max-width: 55ch;
      color: rgba(11,23,32,.70);
    }

    /* Services */
    .grid{
      display:grid;
      gap: 14px;
    }
    .services{
      grid-template-columns: repeat(2, 1fr);
    }
    /* Service cards grid - enhanced spacing */
    .grid.services .service-card{
      margin: 0;
    }
    .service{
      padding: 16px 16px;
      border-radius: var(--radius2);
      background: rgba(255,255,255,.56);
      border: 1px solid rgba(15,143,149,.14);
      box-shadow: 0 10px 22px rgba(12,24,34,.06);
      display:flex; gap:12px;
      min-height: 76px;
    }
    .service .num{
      width: 34px; height: 34px;
      border-radius: 12px;
      display:grid; place-items:center;
      background: rgba(15,143,149,.12);
      border: 1px solid rgba(15,143,149,.18);
      font-weight:900;
      color: rgba(11,23,32,.78);
      flex:0 0 auto;
    }
    .service .name{
      font-weight:900;
      letter-spacing:-.01em;
      margin:2px 0 0;
    }
    .service .hint{
      margin:2px 0 0;
      font-size: 13px;
      color: rgba(11,23,32,.62);
      line-height:1.35;
    }
    .all-services{
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 12px;
    }
    .service-item{
      padding: 14px 16px;
      border-radius: var(--radius2);
      background: rgba(255,255,255,.56);
      border: 1px solid rgba(15,143,149,.14);
      box-shadow: 0 8px 18px rgba(12,24,34,.05);
      display:flex;
      gap:12px;
      align-items:center;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .service-item:hover{
      transform: translateY(-2px);
      box-shadow: 0 12px 24px rgba(12,24,34,.08);
    }
    .service-item .num{
      width: 32px; height: 32px;
      border-radius: 10px;
      display:grid; place-items:center;
      background: rgba(15,143,149,.12);
      border: 1px solid rgba(15,143,149,.18);
      font-weight:900;
      color: rgba(11,23,32,.78);
      flex:0 0 auto;
      font-size: 14px;
    }
    .service-item .name{
      font-weight:850;
      letter-spacing:-.01em;
      font-size: 15px;
      line-height:1.3;
      color: rgba(11,23,32,.85);
    }

    /* Cycle */
    .cycle-card{
      padding: 22px;
    }
    .steps-grid{
      display:grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }
    .steps{
      display:grid;
      gap: 10px;
    }
    .step{
      display:flex; gap:12px;
      padding: 10px 12px;
      border-radius: 14px;
      background: rgba(255,255,255,.56);
      border: 1px solid rgba(15,143,149,.14);
    }
    .step b{
      width: 28px; height: 28px;
      border-radius: 10px;
      display:grid; place-items:center;
      background: rgba(15,143,149,.12);
      border: 1px solid rgba(15,143,149,.18);
      flex:0 0 auto;
    }
    .step div{font-weight:850}

    /* About */
    .about-grid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    .about-card{padding: 22px}
    .about-card h3{
      margin:0;
      font-size: 18px;
      letter-spacing:-.01em;
    }
    .about-card .label{
      margin:10px 0 6px;
      font-weight:900;
      letter-spacing:.14em;
      text-transform:uppercase;
      font-size: 12px;
      color: rgba(11,23,32,.66);
    }
    .about-card p{
      margin:0;
      color: rgba(11,23,32,.72);
    }

    /* Contact */
    .contact-grid{
      display:grid;
      grid-template-columns: .85fr 1.15fr;
      gap: 14px;
      align-items:start;
    }
    .contact-card{padding: 22px}
    .contact-card h3{margin:0 0 10px; font-size: 18px}
    .contact-meta{
      display:grid; gap:10px;
      color: rgba(11,23,32,.72);
    }
    .contact-meta .row{
      display:flex; gap:10px; align-items:flex-start;
      padding:10px 12px;
      border-radius: 14px;
      background: rgba(255,255,255,.55);
      border: 1px solid rgba(15,143,149,.14);
    }
    .contact-meta svg{width:18px; height:18px; margin-top:1px; color: var(--brand)}
    .contact-meta a{color: rgba(11,23,32,.82); font-weight:900; text-decoration:none}
    .contact-meta a:hover{text-decoration:underline}

    form{
      display:grid;
      gap: 10px;
      margin-top: 12px;
    }
    .field{
      display:grid;
      gap: 6px;
    }
    label{
      font-size: 12px;
      letter-spacing:.12em;
      text-transform:uppercase;
      color: rgba(11,23,32,.62);
      font-weight:900;
    }
    input, textarea{
      width:100%;
      padding: 12px 12px;
      border-radius: 14px;
      border:1px solid rgba(15,143,149,.18);
      background: rgba(255,255,255,.65);
      font: inherit;
      outline:none;
    }
    input:focus, textarea:focus{
      box-shadow: 0 0 0 4px rgba(15,143,149,.14);
      border-color: rgba(15,143,149,.35);
    }
    textarea{min-height: 120px; resize: vertical}
    .form-actions{
      display:flex; gap:10px; flex-wrap:wrap;
      margin-top: 6px;
      align-items:center;
    }
    .note{font-size: 13px; color: rgba(11,23,32,.62)}
    footer{
      padding: 26px 0 40px;
      color: rgba(11,23,32,.58);
      font-size: 13px;
      text-align:center;
    }
    .conecta-bar {
      border-top: 1px solid rgba(15,143,149,.15);
      padding: 16px 0;
      text-align: center;
      background: rgba(15,143,149,.04);
    }
    .conecta-bar p {
      margin: 0;
      font-size: 13px;
      color: rgba(11,23,32,.58);
    }
    .conecta-bar a {
      color: rgba(15,143,149,.9);
      font-weight: 600;
    }
    .conecta-bar a:hover {
      color: rgba(15,143,149,1);
      text-decoration: underline;
    }

    /* Chat button */
    .chat{
      position: fixed;
      right: 18px;
      bottom: 18px;
      z-index: 60;
      display:flex; align-items:center; gap:10px;
      padding: 12px 14px;
      border-radius: 999px;
      background: linear-gradient(135deg, rgba(15,143,149,.95), rgba(47,183,192,.95));
      color:#fff;
      border: 0;
      box-shadow: 0 16px 30px rgba(15,143,149,.22);
      cursor:pointer;
      font-weight: 900;
    }
    .chat svg{width:18px; height:18px}
    .chat-label{
      font-size: 14px;
      font-weight: 900;
      letter-spacing: .02em;
    }

    /* Details blocks */
    .svc-details{
      margin-top: 10px;
    }
    .svc-details summary{
      cursor: pointer;
      color: var(--brand);
      font-weight: 800;
      font-size: 13px;
      letter-spacing: .06em;
      text-transform: uppercase;
      padding: 6px 0;
      user-select: none;
    }
    .svc-details summary:hover{
      color: var(--brand2);
      text-decoration: underline;
    }
    .svc-list{
      margin: 10px 0 0 0;
      padding-left: 20px;
      list-style: none;
    }
    .svc-list li{
      margin: 8px 0;
      padding-left: 8px;
      color: rgba(11,23,32,.72);
      font-size: 14px;
      line-height: 1.5;
      position: relative;
    }
    .svc-list li::before{
      content: "•";
      position: absolute;
      left: -12px;
      color: var(--brand);
      font-weight: 900;
    }
    .about-bullets{
      margin: 10px 0 0 0;
      padding-left: 20px;
      list-style: none;
    }
    .about-bullets li{
      margin: 10px 0;
      padding-left: 8px;
      color: rgba(11,23,32,.72);
      line-height: 1.6;
      position: relative;
    }
    .about-bullets li::before{
      content: "•";
      position: absolute;
      left: -12px;
      color: var(--brand);
      font-weight: 900;
      font-size: 18px;
    }

    /* Service Cards - Enhanced Styling */
    .service-card{
      padding: 32px 28px;
      text-align: center;
      position: relative;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      background: linear-gradient(135deg, rgba(255,255,255,.85), rgba(255,255,255,.70));
      border: 1px solid rgba(15,143,149,.18);
      box-shadow: 0 12px 32px rgba(12,24,34,.10), 0 4px 12px rgba(15,143,149,.08);
    }
    .service-card::before{
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--brand), var(--brand2));
      border-radius: var(--radius) var(--radius) 0 0;
    }
    .service-card:hover{
      transform: translateY(-4px);
      box-shadow: 0 18px 40px rgba(12,24,34,.14), 0 6px 16px rgba(15,143,149,.12);
    }
    .service-card h3{
      margin: 0 0 14px 0;
      font-size: 22px;
      font-weight: 900;
      letter-spacing: -0.01em;
      color: rgba(11,23,32,.92);
      position: relative;
      padding-bottom: 12px;
    }
    .service-card h3::after{
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 48px;
      height: 3px;
      background: linear-gradient(90deg, var(--brand), var(--brand2));
      border-radius: 2px;
    }
    .service-card > p{
      margin: 0 0 20px 0;
      color: rgba(11,23,32,.75);
      font-size: 15px;
      line-height: 1.6;
      max-width: 100%;
    }
    .service-card ul{
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 10px;
      text-align: left;
    }
    .service-card li{
      padding: 10px 14px;
      margin: 0;
      background: rgba(255,255,255,.65);
      border: 1px solid rgba(15,143,149,.12);
      border-radius: 10px;
      color: rgba(11,23,32,.78);
      font-size: 14px;
      line-height: 1.5;
      position: relative;
      padding-left: 36px;
      transition: all 0.2s ease;
    }
    .service-card li::before{
      content: "✓";
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      width: 20px;
      height: 20px;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, var(--brand), var(--brand2));
      color: white;
      border-radius: 50%;
      font-size: 11px;
      font-weight: 900;
      box-shadow: 0 2px 6px rgba(15,143,149,.25);
    }
    .service-card li:hover{
      background: rgba(255,255,255,.85);
      border-color: rgba(15,143,149,.22);
      transform: translateX(4px);
      box-shadow: 0 4px 12px rgba(12,24,34,.08);
    }

    /* Responsive */
    @media (min-width: 900px){
      .chat{ display: none; }
    }
    @media (max-width: 900px){
      .hero-grid{grid-template-columns:1fr;justify-items:center;text-align:center}
      .services{grid-template-columns: 1fr;justify-items:center}
      .all-services{grid-template-columns: 1fr;justify-items:center}
      .steps-grid{grid-template-columns: 1fr;justify-items:center}
      .about-grid{grid-template-columns:1fr;justify-items:center;text-align:center}
      .contact-grid{grid-template-columns:1fr;justify-items:center;text-align:center}
      .hero h2{font-size: 32px;text-align:center}
      section{padding: 46px 0;text-align:center}
      .service-card{
        padding: 24px 20px;
      }
      .service-card h3{
        font-size: 20px;
      }
      .service-card > p{
        font-size: 14px;
      }
      .service-card li{
        font-size: 13px;
        padding: 8px 12px;
        padding-left: 32px;
      }
      
      /* Mobile Centering */
      .wrap {
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
      }
      
      h1, h2, h3, .subhead, .section-title,
      section h1, section h2, section h3,
      section p, .hero p {
        text-align: center !important;
      }
      
      .card {
        text-align: center !important;
        margin: 0 auto;
      }
      
      .hero-card, .aside-card, .contact-card {
        text-align: center !important;
        margin: 0 auto;
      }
      
      .actions {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px;
      }
      
      .cta {
        margin: 0 auto;
      }
      
      /* Form inputs should remain left-aligned for readability */
      form input,
      form textarea,
      form select {
        text-align: left !important;
      }
      
      /* Center service items */
      .service, .service-item {
        text-align: center !important;
        justify-content: center !important;
      }
      
      .step {
        text-align: center !important;
      }
    }