/* CSS Document *//* RESETY A ZÁKLAD */
* {margin:0; padding:0; box-sizing:border-box;}
html, body {height:100%;}



/*

body {
  font-family: "Poppins", Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: var(--text);
  background: var(--surface);
  line-height: 1.3;
 /* background-size: cover;   roztáhne obrázek přes celou plochu 
  background-repeat: no-repeat;  zabrání opakování 
  /*background-position: right  center;   /* zarovná na střed 
  background-position: calc(50% + 250px) center;
  background-attachment: fixed; 
  background-image: url("../images/bubble.png");
  background-size: 1077px auto; 
  
  
}

*/


body {
  position: relative;
  background: var(--surface);
  color: var(--text);
  line-height: 1.3;
  font: 400 16px "Poppins", Arial, sans-serif;
  overflow-x: hidden;
}

/* Fixní pozadí přes pseudo-element */
body::before {
  content: "";
  position: fixed;
  inset: 0;                 /* top:0; right:0; bottom:0; left:0; */
  background-image: url("../images/bubble.png");
  background-repeat: no-repeat;
  background-position: calc(50% + 250px) center;
  background-size: 1077px auto;
  pointer-events: none;
  z-index: -1;              /* zůstane za obsahem */
}


a {color: var(--gray); text-decoration: none;}
a:hover {text-decoration: underline;}
.brand-logo svg{    
    width: 100%;
    object-fit: contain;
    object-position: left bottom;
    display: block;
    height: 100%;}

/* FONTY */
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* PROMĚNNÉ */
:root{
  --bg:#042627;
  --surface:#042627;
  --text:#fff;
  --muted:#475569;
  --brand:#2563eb;
  --gray:#999999;
  --lisejnik:#5A7E7C;
  --ring:rgba(37,99,235,.3);
  --container:1440px;
  --radius:16px;
}

/* NADPISY */
h1 {font-size:72px;}
h2 {font-size:clamp(40px,2.6vw,56px);}
h3 {font-size:clamp(26px,2.6vw,40px);}
h2.odsaz {padding-top:1em}
/* LAYOUT HELPERS */
.container{max-width:var(--container); margin-inline:auto;  height:100%}
.grid{display:grid; gap:24px; place-items:center; justify-items:start;}
.grid div{ justify-items:start;place-items:start;}
.grid-2{grid-template-columns: 1fr 1fr;height: 100%;max-width:1170px;margin:0 auto}
.grid-2 h2{padding-left:30px}



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

/* HLAVIČKA */
.header-bg {background:var(--bg);} 
header {
  padding:24px;
  background:var(--surface);
  height:96px;
  max-width: 1170px;
  margin: 0 auto;
}

.nav {display:flex; align-items:center; justify-content:space-between; gap:16px;}
.brand {display:flex; align-items:flex-end; gap:62px; font-weight:600; letter-spacing:.3px;}
.brand-logo {width:179px; height:auto; position: relative;}
.brand span {color:#B0C2C3; line-height:1; transform: translateY(2px);}
nav {display:none;}


.bg-blur {   backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
    background-color: rgba(4, 38, 39, 0.7);}

/* BANNER / HERO */
.hero {
  color:#fff;
  height:768px;
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.hero-inner {position: relative;}

/*.hero-inner::before {
  content: "";
  position: absolute;
  top: -250px;
  left: 325px;
  width: 1077px;
  height: 1152px;
  background-image: url("../images/bubble.png");
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
}*/
.hero h1 {
  margin:0 0 16px;
  font-weight:600;
  font-size:clamp(28px,4.2vw,56px);
  line-height:1.1;
}
.hero p {
  color:var(--bg);
  font-size:clamp(16px,2.1vw,18px);
}
.hero-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  padding:20px;
  border-radius:var(--radius);
}
.hero .sdeleni {
  width: auto;
  border-radius:7px;
  background-color: rgba(255, 255, 255, 0.7);
  color:var(--bg);
  padding: 1em;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  margin: 0 1em 0 0 ;
}
.hero .text {
  width: auto;
  color:var(--bg);
  padding: 1em;
}
.hero .text p.nadpis {
  margin-bottom:1em;
  font-weight:600;
  font-size:clamp(16px,2.1vw,24px);
  line-height:32px;
  letter-spacing:-1%;
}
.hero .text p {
  font-weight:400;
  font-size:clamp(16px,2.1vw,20px);
  line-height:32px;
  letter-spacing:0%;
}

/* SDĚLENÍ */
section.message {

  display:flex;
  justify-content:center;
  align-items:center;
  min-height:452px;
  padding: 0 20px;
  position: relative;

}


section.message .card {
  max-width:580px;
  margin:0 auto;
  text-align:center;
}
section.message .card p {font-size:20px;}
section.message h2 {margin:0 0 8px;}
.eyebrow {display:inline-block; font-size:12px; text-transform:uppercase; letter-spacing:.12em; margin-bottom:8px;}

/* PARAMETRY */
.container_parametry {
  max-width:1400px;
  width:100%;
  margin:0 auto;
  display:flex;
  gap:20px;
  min-height:736px;
}

.left {
  flex:3;
  background:var(--lisejnik);
  position:relative;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  background-image:url('../images/arrow.svg');
  background-repeat:no-repeat;
  background-size:85% auto;
  background-position:left calc(100% - 25px);
  background-blend-mode:screen;
  color:var(--bg);
}
.left h2 {
  margin-top:17%;
  font-size: clamp(39px, 3vw, 56px);
  
  z-index:1;
  line-height:1.2;
}
.right {
  flex:5;
  position:relative;
  overflow:visible;
  display:flex;
  align-items:center;
  padding-right:24px;
}
.info-card {
  width:min(90%,817px);
  height:80%;
  background:#eee;
  border-radius:7px;
  box-shadow:0 15px 40px rgba(0,0,0,0.15);
  padding:44px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  grid-template-rows:repeat(2,1fr);
  gap:16px;
  transform:translateX(-10%);
  z-index:2;
}
.cell {
  border-radius:12px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:24px 20px;
}
.cell .icon {
  width:48px; height:48px; margin-bottom:8px; opacity:0.85;
}
.cell h4 {
  font-size:clamp(18px,2vw,24px);
  margin:0;
  color:var(--bg);
  padding:10px 0;
}
.cell p {
  font-size:clamp(14px,1.4vw,16px);
  color:#999;
  line-height:1.4;
  margin:0;
}

/* ROW 1x3 */

section.rizika  {/*background:var(--bg);*/ }

.row-1x3 {
  max-width:1170px;
  width:100%;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 3fr;
  align-items:flex-start;
  gap:100px;
  padding:120px 15px;
  height:auto;
  /*background:var(--bg);*/
}
.col-left h3 {
  font-size:clamp(34px,2.8vw,40px);
  line-height:1.1;
  margin:0;
}
.col-right {
  max-width:770px;
}
.col-right h4 {
  line-height:1.2;
  letter-spacing:.02em;
  font-size:clamp(16px,2.8vw,24px);
  margin:0 0 28px 0;
  color:var(--text);
}
.col-right p {
  font-size:clamp(14px,1.2vw,16px);
  line-height:1.2;
  margin:0;
  color:var(--gray);
}
.row-1x3 + .row-1x3 {border-top:1px solid #eee;}


/* Patička */
.site-footer {
  background:var(--lisejnik);
  color: var(--surface);
  font-size:16px;
  line-height:1.5;
  padding: 32px 15px;
}


.footer-outer {max-width:1440px; margin:0 auto;}
.footer-inner {
  max-width:1170px;
  margin:0 auto;
  display:flex;
  align-items: center;
  gap:24px;
}
.footer-left {flex:2; display:flex; align-items:center;}
.footer-right { display: flex;
  gap: 32px;
  flex: 0 0 auto; /* boxy budou podle obsahu */
  font-weight: 600;
  }

.footer-logo {height:48px; width:auto; display:block; filter:drop-shadow(0 2px 6px rgba(0,0,0,.25));}
.flex-addres {flex:4; min-width:0;}
.flex-ico {flex:2; min-width:0;}
.flex-mail {flex:2; min-width:0;}
.footer-box {
 flex:0 0 auto;
 }
.footer-box p, .footer-box address {margin:0; font-style:normal;}
.footer-box a {
  color: var(--surface);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition: color .25s ease, border-color .25s ease, opacity .25s ease;
}
.footer-box a:hover {color: var(--gray);}
.copyright { height:80px; margin:0 auto; display:flex; align-items:center; width: 100%;background:var(--bg);    }
.copyright p {margin: 0 auto;color: var(--lisejnik); max-width: 1170px; }



/* ======== RESPONSIVE ======== */

@media (max-width: 940px) {
.footer-right {flex-direction:column;gap:10px}

}




/* TABLET */
@media (max-width: 768px) {

  .grid-2 {grid-template-columns:1fr;}
  .container_parametry {flex-direction:column; width:100%; min-height:auto; gap:16px; }
  .left, .right {flex:unset; width:100%; background-size:contain; background-position:center bottom;padding-right: 0px;}
  .info-card {transform:none; width:100%; grid-template-columns:1fr; height:auto; padding:24px; margin-bottom: 15px;}
  .row-1x3 {grid-template-columns:1fr; padding:6em 20px; gap:24px; height:auto; width: auto;}
  .hero {height:auto; padding:40px 16px;}
  .hero-inner::before {width:80%; left:10%; top:-150px;}
  .hero .sdeleni, .hero .text {width:100%; padding:1em;}
  .footer-outer {width: 100%;}
  .footer-inner {flex-direction:column; gap:75px;}
  .footer-right { flex-direction: column; gap: 12px; align-items: flex-start; /* nebo center podle potřeby */ ;width: 100%;  }
  .footer-left, .footer-right {flex:unset; width:100%;justify-content: center;}
  .copyright {flex-direction:column; height:auto; padding:16px;text-align:center}

  .footer-box { min-width: 100%; text-align: center;}
  .footer-box p,
  .footer-box address,
  .footer-box a { width: auto;             /* text nebude roztahovat box */ max-width: 100%;         /* nepřekročí kontejner */ text-align: center;        /* nebo center, pokud chceš */ }
  .left {height:414px;padding: 0 0px;}
  .right {margin-top: -160px;padding:0 16px;}

  .footer-left {
    justify-content: center;
  }

  .grid-2 h2 {padding-left: 0px; font-size: clamp(34px, 4vw, 57px);}
 /*.brand-logo {width:auto; height:auto;} 
  .brand {gap: 15px; flex-direction: column; align-items: flex-start;}/

   
}

/* MOBILE */
@media (max-width: 380px) {
  h1 {font-size:clamp(20px,6vw,32px);}
  h2 {font-size:clamp(18px,5vw,28px);}
  h3 {font-size:clamp(16px,4vw,24px);}
  .hero h1 {font-size:clamp(18px,5vw,32px);}
  .hero p {font-size:clamp(14px,3.5vw,16px);}
  .brand-logo {width:auto; height:auto;}
  .brand span {font-size:14px;}
  .container_parametry {gap:12px;}
  .info-card {padding:16px;}
  .cell h4 {font-size:18px;}
  .cell p {font-size:14px;}
  .row-1x3 {padding:16px; gap:16px;}
  .brand {gap: 15px;
            flex-direction: column;
            align-items: flex-start;}
  
  
  
  .grid-2 h2 {padding-left: 0px; font-size: clamp(24px, 4vw, 57px);
}
  
  
}