:root{

  --bg-main:#177f92;

  --bg-dark:#465b77;

  --mint:#65ddd0;

  --mint-soft:#a6ebe1;

  --white:#ffffff;

  --text:#eaf7f8;

  --text-dark:#1e3342;

  --shadow:0 16px 35px rgba(0,0,0,.16);

  --radius:22px;

  --radius-sm:14px;

}



*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{

  margin:0;

  font-family:'Montserrat',sans-serif;

  background:var(--bg-main);

  color:var(--white);

  line-height:1.55;

}



img{max-width:100%;display:block}

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

input,textarea,button{font:inherit}



.container{

  width:min(1180px, calc(100% - 24px));

  margin:0 auto;

}



.site-header{

  position:sticky;

  top:0;

  z-index:1000;

  background:rgba(20,126,145,.96);

  backdrop-filter:blur(8px);

  box-shadow:0 4px 20px rgba(0,0,0,.08);

}



.nav-wrap{

  min-height:96px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;

}



.logo{

  display:flex;

  align-items:center;

}



.logo img{

  height:90px;

  width:auto;

  margin-left:-20px;

}



.logo-mark{

  width:34px;

  height:34px;

  border-radius:50%;

  background:linear-gradient(145deg, #aaf0e3, #40c8ba);

  color:#fff;

  display:grid;

  place-items:center;

  font-weight:800;

  box-shadow:0 6px 14px rgba(0,0,0,.15);

}



.logo-mark.large{

  width:52px;

  height:52px;

  font-size:1.35rem;

}



.logo-text{

  display:flex;

  align-items:flex-end;

  gap:8px;

  color:#b9f1e9;

}

.logo-text strong{

  font-size:3rem;

  line-height:1;

  font-weight:300;

  letter-spacing:1px;

  color:#fff;

}

.logo-text span{

  font-size:1.6rem;

  font-weight:400;

  transform:translateY(-2px);

}



.main-nav{

  display:flex;

  gap:36px;

  color:#eef9f9;

}

.main-nav a{

  font-weight:400;

  transition:.25s ease;

}

.main-nav a:hover{color:var(--mint)}



.lang-switch{

  display:flex;

  align-items:center;

  background:linear-gradient(90deg, #65ddd0, #57d1c3);

  border-radius:14px;

  padding:6px;

  min-width:140px;

  justify-content:space-between;

}

.lang{

  padding:8px 14px;

  border-radius:10px;

  color:#eafbf8;

  opacity:.85;

}

.lang.active{

  background:rgba(255,255,255,.12);

  opacity:1;

}



.hero{

  position:relative;

  min-height:88vh;

  display:flex;

  align-items:center;

  background:

    linear-gradient(rgba(22,86,110,.28), rgba(22,86,110,.28)),

    url('images/hero.jpg') center/cover no-repeat;

}



.hero-overlay{

  position:absolute;

  inset:0;

  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(12,47,68,.08));

}

.hero-content{

  position:relative;

  z-index:1;

  display:flex;

  justify-content:center;

  align-items:center;

  padding:100px 0;

}



.hero-logo{

  display:flex;

  justify-content:center;

  align-items:center;

  padding:120px 0;

}



.hero-logo img{

  width: min(400px, 80vw); /* ← velikost loga */

  height:auto;

  filter: drop-shadow(0 20px 40px rgba(0,0,0,.25));

}



.section-dark{

  background:#495e78;

  padding:70px 0 78px;

}



.about-grid{

  display:grid;

  grid-template-columns:1.12fr 1.48fr;

  gap:34px;

  align-items:start;

}



.panel{

  padding:42px 34px;

}



.about-intro{

  min-height:100%;

}



.about-brand{

  display:flex;

  align-items:center;

  gap:18px;

  margin-bottom:24px;

}



.about-brand h2{

  font-size:3.7rem;

  margin:0;

}

.about-brand p{

  font-size:1rem;

  margin-top:5px;

}



.line{

  height:2px;

  width:100%;

  background:#74d9d1;

  margin:20px 0 26px;

}



.about-intro p{

  font-size:1.08rem;

  color:#f2f6fb;

  text-align:center;

  max-width:420px;

  margin:0 auto 18px;

}



.services-grid{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:26px 18px;

}



.service-card{

  background:var(--mint);

  color:var(--text-dark);

  border-radius:18px;

  padding:28px 28px 22px;

  box-shadow:var(--shadow);

  min-height:305px;

  display:flex;

  flex-direction:column;

  justify-content:space-between;

}

.service-card h3{

  margin:0 0 18px;

  color:#fff;

  font-size:2rem;

  line-height:1.05;

  text-transform:uppercase;

  letter-spacing:3px;

  font-weight:800;

  text-shadow:4px 4px 0 rgba(53,87,110,.35);

}

.service-card p{

  margin:0;

  font-size:1.05rem;

  line-height:1.65;

}

.card-line{

  display:block;

  width:78%;

  height:4px;

  border-radius:10px;

  background:#435264;

  margin-top:24px;

}



.image-strip{

  position:relative;

  min-height:460px;

  display:flex;

  align-items:flex-end;

  background:

    linear-gradient(rgba(12,34,62,.18), rgba(12,34,62,.18)),

    url('images/pas.jpg') center/cover no-repeat;

}

.image-strip-overlay{

  position:absolute;

  inset:0;

  background:linear-gradient(to top, rgba(23,127,146,.55), rgba(23,127,146,.15));

}

.section-heading{

  position:relative;

  z-index:1;

}

.section-heading.floating{

  background:var(--mint);

  color:#fff;

  max-width:860px;

  margin:0 auto -58px;

  padding:28px 34px;

  text-align:center;

  border-radius:18px;

  box-shadow:var(--shadow);

}

.section-heading.floating h2,

.section-heading.centered h2{

  margin:0;

  font-size:2.8rem;

  letter-spacing:3px;

  text-transform:uppercase;

  font-weight:800;

}

.section-heading.floating p{

  margin:10px 0 0;

  color:#f5fffd;

}



.partners{

  background:var(--bg-main);

  padding:110px 0 80px;

}

.section-heading.centered{

  text-align:center;

  margin-bottom:36px;

}

.eyebrow{

  display:inline-block;

  margin-bottom:8px;

  color:#c7faf4;

  text-transform:uppercase;

  letter-spacing:3px;

  font-size:.8rem;

}

.partners-box{

  background:#f4f4f4;

  border-radius:20px;

  min-height:440px;

  padding:54px 42px;

  display:grid;

  grid-template-columns:repeat(3, 1fr);

  gap:28px;

  align-items:center;

  color:#27394a;

  box-shadow:var(--shadow);

}

.partner-item{

  text-align:center;

  padding:28px 18px;

}

.partner-logo{

  margin:0 auto 18px;

  width:170px;

  height:170px;

  border-radius:50%;

  border:4px solid #39bfd1;

  color:#0f2f46;

  display:grid;

  place-items:center;

  font-weight:800;

  font-size:2rem;

  background:#fff;

}

.contact{

  padding: 20px 0 0;

  background: var(--bg-main);

}



.contact-grid{

  display: grid;

  grid-template-columns: minmax(0, 620px) minmax(280px, 420px);

  justify-content: space-between;

  align-items: start;

  gap: 40px;

}



.contact-form-wrap{

  width: 100%;

  max-width: 620px;

  margin: 0;

  padding: 0;

}



.contact-title{

  font-family: 'Montserrat', sans-serif;

  font-size: 4.4rem;

  font-weight: 800;

  color: #e9fbf7;

  margin: 0 0 18px 0;

  line-height: 1;

}



.contact-form{

  display: flex;

  flex-direction: column;

  gap: 18px;

}



.contact-form input,

.contact-form textarea{

  width: 100%;

  border: 2px solid #62d7cc;

  background: #f4f4f4;

  padding: 18px 22px;

  color: #244256;

  border-radius: 0;

  box-shadow: 0 6px 16px rgba(0,0,0,.08);

  outline: none;

}



.contact-form input::placeholder,

.contact-form textarea::placeholder{

  color: #31495a;

}



.form-row{

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 12px;

}



.contact-form textarea{

  min-height: 140px;

  resize: vertical;

}



.contact-form button{

  align-self: center;

  min-width: 200px;

  border: none;

  background: var(--mint-soft);

  color: #1f2d39;

  font-weight: 700;

  font-size: 1.2rem;

  padding: 16px 28px;

  border-radius: 999px;

  cursor: pointer;

  transition: .25s ease;

}



.contact-form button:hover{

  transform: translateY(-2px);

  box-shadow: 0 10px 22px rgba(0,0,0,.14);

}



.contact-info{

  width: 100%;

  max-width: 420px;

  padding-top: 88px;

  text-align: center;

}



.contact-block{

  margin-bottom: 28px;

  color: #d8eef0;

  font-size: 1.18rem;

}



.contact-block p{

  margin: 4px 0;

}



@media (max-width: 900px){

  .contact-grid{

    grid-template-columns: 1fr;

    gap: 30px;

  }



  .contact-info{

    max-width: 100%;

    padding-top: 0;

  }



  .contact-title{

    font-size: 3.2rem;

  }

}

.map-section{

  margin-top:52px;

  height:260px;

  background:

    linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,.3)),

    url('images/mapa.jpg') center/cover no-repeat;

  position:relative;

}

.map-overlay{

  position:absolute;

  inset:auto 24px 24px auto;

  background:rgba(255,255,255,.85);

  color:#244256;

  padding:10px 16px;

  border-radius:10px;

  font-weight:600;

}



@media (max-width: 1080px){

  .about-grid,

  .contact-grid{

    grid-template-columns:1fr;

  }



  .partners-box{

    grid-template-columns:1fr;

  }



  .main-nav{

    gap:20px;

  }

}



@media (max-width: 820px){

  .nav-wrap{

    flex-wrap:wrap;

    justify-content:center;

    padding:16px 0;

  }



  .main-nav{

    order:3;

    width:100%;

    justify-content:center;

    flex-wrap:wrap;

  }



  .logo-text strong{

    font-size:2.2rem;

  }

  .logo-text span{

    font-size:1.2rem;

  }



  .hero-logo-circle h1,

  .about-brand h2{

    font-size:3rem;

  }



  .services-grid{

    grid-template-columns:1fr;

  }



  .section-heading.floating h2,

  .section-heading.centered h2{

    font-size:2.1rem;

  }



  .contact-info h2{

    font-size:3rem;

  }

}



@media (max-width: 560px){

  .container{

    width:min(100% - 28px, 1180px);

  }



  .hero{

    min-height:75vh;

  }



  .hero-logo-circle{

    width:88vw;

    padding:24px;

  }



  .hero-logo-circle h1{

    font-size:2.5rem;

  }



  .panel{

    padding:28px 20px;

  }



  .service-card{

    min-height:auto;

  }



  .form-row{

    grid-template-columns:1fr;

  }



  .contact-form button{

    width:100%;

  }

}