:root{
      --bg:#071820;
      --card:#0b2330;
      --muted:#87a6b1;
      --text:#e9f5f2;
      --acc:#35d0a0;
      --acc-2:#25a581;
      --ring: rgba(53,208,160,.55);
      --shadow: 0 20px 60px rgba(0,0,0,.35);
      --radius: 16px;
    }
    *{
      box-sizing:border-box;
    }
    html,body{
      margin:0;
      height:100%;
      scroll-behavior:smooth;
      background:radial-gradient(
        1200px 600px at 20% -10%,#0f2b3b 0%, #071820 55%);
        color:var(--text);
        font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji","Segoe UI Emoji";
background-size: cover;
      }
    a{
      color:inherit;
      text-decoration:none;
    }
    .container{
      max-width:1100px;
      margin:0 auto;
      padding:0 20px;
    }
    /* Topbar */
    .topbar{
      position:sticky;
      top:0;
      z-index:999;
      backdrop-filter:saturate(160%) blur(10px);
      background:rgba(7,24,32,.75);
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .nav{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:12px 0;
    }
    .brand{
      display:flex;
      gap:10px;
      align-items:center;
    }

    .logo{
      width:38px;
      height:38px;
      border-radius:10px;
      background:linear-gradient(135deg,#35d0a0 0%,#1e7b61 100%);
      display:grid;
      place-items:center;
      box-shadow:var(--shadow);
    }
    .logo svg{
      width:24px;
      height:24px;
    }

    .brand h1{
      font-size:15px;
      margin:0;
      font-weight:700;
      letter-spacing:.2px;
    }


    .cta{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
    }
    .btn{
      align-items:center;
      gap:10px;
      padding:10px 14px;
      border-radius:999px;
      background:#123040;
      border:1px solid rgba(255,255,255,.08);
      transition:.2s;
      white-space:nowrap;
    }
    .btn:hover{
      transform:translateY(-1px);
      border-color:rgba(255,255,255,.16);
    }
    .btn.primary{
      background:linear-gradient(180deg,var(--acc),var(--acc-2));
      color:#05221a;
      font-weight:700;
      border:none;
      box-shadow:0 4px 8px var(--ring);
    }
    .btn svg{
      width:18px;
      height:18px;
    }
    /* Hero */
    .hero{
      padding:58px 0 36px;
      border-bottom:1px solid rgba(255,255,255,.06);
      background: radial-gradient(1000px 560px at 90% -10%, rgba(53,208,160,.14), transparent 60%);
    }
    .hero h2{font-size:36px;
      line-height:1.15;
      margin:18px 0 12px;
      letter-spacing:.3px;
    }
    .hero p{
      color:var(--muted);
      max-width:850px;
      margin:0 0 22px;
    }
    .badges{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin:22px 0;
    }
    .badge{
      padding:6px 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(10,40,52,.6);
      font-size:13px;
    }
    /* Cards */
    .grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:18px;
      margin:28px 0 10px;
    }
    @media (max-width:960px){.grid{grid-template-columns:repeat(2,1fr)}}
    @media (max-width:640px){.grid{grid-template-columns:1fr} .hero h2{font-size:28px}}
    .card{
      background:linear-gradient(180deg, rgba(20,50,66,.9), rgba(10,35,48,.9));
      border:1px solid rgba(255,255,255,.06);
      border-radius:var(--radius);
      padding:18px;
      box-shadow:var(--shadow);
      position:relative;
      overflow:clip;
    }
    .card h3{
      margin:6px 0 6px;
      font-size:18px;
    }
    .card p{
      margin:0;
      color:var(--muted);
    }
    .icon{
      width:32px;
      height:32px;
      border-radius:10px;
      display:grid;
      place-items:center;
      background:rgba(53,208,160,.15);
      border:1px solid rgba(53,208,160,.35);
      margin-bottom:8px;
    }
    .list{
      margin:10px 0 0;
      padding:0 0 0 18px;
      color:var(--muted);
    }
    /* CTA section */
    .cta-section{
      margin:32px 0 10px;
      display:grid;
      grid-template-columns:1.2fr .8fr;
      gap:18px;
    }
    @media (max-width:900px){.cta-section{grid-template-columns:1fr}}
    .panel{
      background:linear-gradient(180deg, rgba(20,50,66,.9), rgba(10,35,48,.9));
      border:1px solid rgba(255,255,255,.06);
      border-radius:var(--radius);
      padding:20px;
      box-shadow:var(--shadow);
background-size: cover;
    }


    .panel h3{
      margin:0 0 8px;
    }
    .panel p{
      margin:0 0 12px;
      color:var(--muted);
    }
    .kv{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      margin-top:12px;
      justify-content:center;
    }
    .kv .chip{
      border:1px solid rgba(255,255,255,.1);
      background:rgba(8,32,44,.8);
      border-radius:999px;
      padding:6px 10px;
      font-size:13px;
    }
    /* Footer */
    footer{
      border-top:1px solid rgba(255,255,255,.06);
      margin-top:28px;
    }
    .foot{
      display:flex;
      gap:16px;
      flex-wrap:wrap;
      justify-content:space-between;
      align-items:center;
      padding:16px 0;
    }
    .small{
      color:var(--muted);
      font-size:14px;
    }
    /* Floating contact */
    .float{
      position:fixed;
      right:16px;
      bottom:16px;
      display:flex;
      flex-direction:column;
      gap:10px;
      z-index:999;
    }
    .float a{
      box-shadow:var(--shadow);
    }
    /* Simple form */
    form{
      display:grid;
      gap:10px;}
    input,
    textarea,
    select{
      width:100%;
      background:#0b2936;
      border:1px solid rgba(255,255,255,.08);
      color:var(--text);
      border-radius:12px;
      padding:12px 12px;
      outline:none;
    }
    input:focus,
    textarea:focus,
    select:focus{
      border-color:var(--acc);
      box-shadow:0 0 0 4px var(--ring);}
    label{
      font-size:14px;
      color:var(--muted);
    }
    .row{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
    }
    @media (max-width:640px){.row{grid-template-columns:1fr}}
    .note{
      font-size:12px;
      color:var(--muted);
    }
    
    #whatsapp-icon, #phone-icon {
      width: 20px;
      height: 20px;
    }

    #details{
      resize: none;
    }

    .lang-switch {
      display: flex;
      justify-content: center;
      gap: 8px;px;
    }
    .lang-btn {
      color: #fff !important;
    }

    a.btn {
      text-align: center;
      justify-content: center;
    }