:root{

  /* Barvy */

  --red:#c9152b;
  --red2:#ff2948;

  --dark:#151518;

  --platinum:#242428;
  --platinum2:#303036;

  --text:#ffffff;
  --muted:#bdbdc4;

  /* ========================================
     VIDEO POZADÍ
  ======================================== */

  --video-darkness:.81;

  --video-brightness:.95;

  --video-saturation:.85;

  --video-blur:0px;

  --video-speed:.45;

}
*{box-sizing:border-box;margin:0;padding:0}
body{

  min-height:100vh;

  background:#0f1014;

  color:var(--text);

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

  overflow-x:hidden;

}





.hero{
  min-height:100vh;
  position:relative;
  padding:34px clamp(20px,4vw,70px) 50px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero:before{
  content:"";
  position:absolute;
  inset:0;

  border:none;
  border-radius:0;

  box-shadow:none;

  pointer-events:none;
}


.top-left{

  position:fixed;

  top:25px;
  left:clamp(30px,5vw,86px);

  z-index:99999999999;

  display:flex;
  align-items:center;
  gap:32px;

}

.top-right{

  position:fixed;

  top:25px;
  right:clamp(30px,5vw,86px);

  z-index:9999999999;

  display:flex;
  align-items:center;
  gap:32px;

}

.top-contact{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:999999999;
  pointer-events:none;
}

.top-left,
.top-right{

    pointer-events:auto;

    backdrop-filter:blur(8px);

    background:rgba(10,10,12,.05);

    padding:12px 18px;

    border-radius:30px;

    z-index:999999999;
}

.contact-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    height:30px;
    padding:0;

    color:#ffffff;

    text-decoration:none;

    font-family:Michroma, Arial, sans-serif;

    font-size:12px;

    letter-spacing:.15em;

    text-transform:uppercase;

    opacity:.75;

    transition:.3s ease;

}

.contact-btn:hover{

    color:#ff2948;

    opacity:1;

    text-shadow:
        0 0 12px rgba(255,41,72,.45);

    transform:translateY(-2px);

}
.brand{

  width:100vw;

  max-width:none;

  text-align:center;

  position:relative;

  z-index:2;

  margin-top:30px;

  margin-left:calc(50% - 50vw);

  margin-right:calc(50% - 50vw);

}
.sg-logo{

  font-family:Michroma,Arial,sans-serif;

  font-size:clamp(95px,18vw,250px);

  line-height:.82;

  letter-spacing:-.08em;

  font-weight:400;

  filter:drop-shadow(0 0 28px rgba(201,21,43,.22));

  margin-bottom:30px;

  text-align:center;

  transform:none;

}
.sg-logo .s{color:var(--red2)}
.sg-logo .g{

    color:#53535b;

    text-shadow:
        0 1px 0 rgba(255,255,255,.18),
        0 0 8px rgba(255,255,255,.04);

}


.name{
  font-family:Michroma,Arial,sans-serif;
  font-size:clamp(28px,5.2vw,72px);
  line-height:1.18;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:18px;
}
.role{

  font-family:Michroma,Arial,sans-serif;

  font-size:clamp(14px,1.8vw,25px);

  letter-spacing:.18em;

  color:#c4c4ca;

  text-transform:uppercase;

  margin-bottom:12px;

  text-align:center;

  transform:none;

}
.desc{
  max-width:760px;
  margin:0 auto 42px;
  color:#dedee3;
  font-size:clamp(15px,1.6vw,19px);
  line-height:1.7;
}
.actions{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:52px}
.btn{
  font-family:Michroma,Arial,sans-serif;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:17px 24px;
  border-radius:999px;
  text-decoration:none;
  transition:.25s ease;
}
.btn-primary{background:linear-gradient(135deg,var(--red),var(--red2));color:#fff;box-shadow:0 0 28px rgba(201,21,43,.28)}
.btn-secondary{color:#fff;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04)}
.btn:hover{transform:translateY(-2px)}
.map-wrap{

  width:min(1150px,95vw);

  margin:0 auto;

  position:relative;

  padding:18px;

  border-radius:30px;

  background:transparent;

  border:1px solid transparent;

  box-shadow:none;

}

.map-title{

  font-family:Michroma,Arial,sans-serif;

  color:#ff2948;

  letter-spacing:.2em;

  text-transform:uppercase;

  font-size:20px;

  text-align:center;

  margin-bottom:12px;

}

.map-area{

  position:relative;

  height:550px;

  overflow:hidden;

  border-radius:22px;

  background:transparent;

}
.cz-shape{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:72%;height:68%;
  clip-path:polygon(8% 50%,16% 35%,28% 25%,40% 18%,54% 22%,66% 18%,79% 29%,90% 42%,84% 56%,72% 62%,62% 75%,48% 72%,36% 82%,24% 72%,15% 66%);
  background:linear-gradient(135deg,rgba(201,21,43,.16),rgba(255,41,72,.05));
  border:1px solid rgba(255,41,72,.65);
  box-shadow:0 0 45px rgba(255,41,72,.16), inset 0 0 45px rgba(0,0,0,.25);
}
.cz-shape:before,.cz-shape:after{content:"";position:absolute;inset:22%;border:1px solid rgba(255,41,72,.25);transform:rotate(-8deg)}
.cz-shape:after{inset:36% 14%;transform:rotate(12deg)}
.pin{position:absolute;display:flex;align-items:center;gap:8px;color:#fff;font-size:13px;font-weight:600;letter-spacing:.04em}
.pin:before{content:"";width:12px;height:12px;border-radius:50%;background:var(--red2);box-shadow:0 0 18px rgba(255,41,72,.9)}

.pin.praha{left:38%;top:39%}.pin.trutnov{left:56%;top:27%}

.note{

  margin-top:18px;

  color:var(--muted);

  font-size:20px;

  line-height:1.6;

  text-align:center;

}
.sg-divider{

  width:min(1100px,80vw);

  height:2px;

  margin:20px auto 40px;

  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,41,72,.15) 8%,
    #ff2948 20%,
    #ff2948 42%,
    rgba(255,41,72,.55) 48%,
    rgba(120,90,110,.65) 50%,
    rgba(58,58,64,.55) 52%,
    #3a3a40 58%,
    #3a3a40 80%,
    rgba(58,58,64,.15) 92%,
    transparent 100%
  );

  box-shadow:
    0 0 12px rgba(255,41,72,.25);

}
@media(max-width:700px){
  .hero{padding-top:96px}.top-contact{top:28px;right:26px}.contact-btn{width:42px;height:42px;font-size:17px}
  .map-area{height:220px}.cz-shape{width:88%}.pin.praha{left:37%;top:48%}.pin.trutnov{left:58%;top:32%}
}

.cz-map{

  width:78%;

  height:auto;

  display:block;

  margin:30px auto 0;

  filter:
    drop-shadow(0 0 28px rgba(255,41,72,.25));

}

.cz-map path{
  fill:rgba(255,41,72,.10);
  stroke:#ff2948;
  stroke-width:1.4;
}

#Prague{

  fill:rgba(255,41,72,.35) !important;

}

#Hradec_Kr__lov__{

  fill:rgba(255,41,72,.25) !important;

}

.pin{

  position:absolute;

  display:flex;

  align-items:center;

  gap:8px;

  color:#fff;

  text-decoration:none;

  font-size:13px;

  font-weight:600;

  letter-spacing:.04em;

  cursor:pointer;

  transition:.3s ease;

  z-index:10;

}

.pin:hover{

  color:#ff2948;

  transform:scale(1.05);

}

.pin::after{

  content:"";

  position:absolute;

  width:180px;
  height:180px;

  left:-79px;
  top:-79px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(255,41,72,.55) 0%,
      rgba(255,41,72,.25) 35%,
      transparent 70%
    );

  pointer-events:none;

  animation:
    pulsePin 1.8s infinite;

}
.pin::before{
  content:"";
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--red2);
  box-shadow:0 0 18px rgba(255,41,72,.9);
  z-index:2;
}

.pin{
  z-index:10;
}

@keyframes pulsePin{

  0%{
    transform:scale(.4);
    opacity:1;
  }

  70%{
    transform:scale(1.4);
    opacity:.35;
  }

  100%{
    transform:scale(2.2);
    opacity:0;
  }

}


.area{

  position:absolute;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(255,41,72,.18),
      transparent 70%
    );

  pointer-events:none;

}

.area-praha{

  width:180px;
  height:180px;

  left:29%;
  top:30%;

}

.area-trutnov{

  width:180px;
  height:180px;

  left:49%;
  top:16%;

}

.location-section{

  min-height:100vh;

  padding:180px 8vw;

  max-width:1500px;

  margin:0 auto;

}

.location-section h2{

  font-family:Michroma,Arial,sans-serif;

  font-size:72px;

  margin-bottom:30px;

}

.location-section p{

  color:#d9d9df;

  font-size:20px;

  line-height:1.9;

}

html{
  scroll-behavior:smooth;
}

.agent-photo{

  width:530px;
  height:490px;

  object-fit:cover;
  display:block;

  -webkit-mask-image:
    linear-gradient(
      to right,

      transparent 0%,
      rgba(0,0,0,.20) 14%,
      rgba(0,0,0,.60) 26%,
      rgba(0,0,0,.90) 40%,

      #000 50%,

      rgba(0,0,0,.90) 60%,
      rgba(0,0,0,.60) 74%,
      rgba(0,0,0,.20) 86%,
      transparent 100%

    );

  mask-image:
    linear-gradient(
      to right,

      transparent 0%,
      rgba(0,0,0,.20) 14%,
      rgba(0,0,0,.60) 26%,
      rgba(0,0,0,.90) 40%,

      #000 50%,

      rgba(0,0,0,.90) 60%,
      rgba(0,0,0,.60) 74%,
      rgba(0,0,0,.20) 86%,
      transparent 100%

    );

}

.name-row{

  width:min(1260px,100vw);

  margin:0 auto 80px;

  display:grid;

  grid-template-columns:820px 340px;

  align-items:center;

  justify-content:center;

  column-gap:60px;

  transform:translateX(-100px);

}

.name{

  display:flex;

  flex-direction:column;

  align-items:flex-end;

  text-align:right;

  line-height:1.35;

}

.top-left::after,
.top-right::after{

  content:"";

  position:absolute;

  left:0;
  right:0;

  bottom:-14px;

  height:1px;

  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,41,72,.7),
    transparent
  );

}

.hero-nav{

  display:flex;

  justify-content:flex-end;

  align-items:center;

  gap:18px;

  flex-wrap:nowrap;

  margin-top:28px;

}

.hero-nav a{

  color:#ffffff;

  text-decoration:none;

  font-family:Michroma, Arial, sans-serif;

  font-size:13px;

  letter-spacing:.15em;

  text-transform:uppercase;

  opacity:.75;

  transition:.3s ease;

  white-space:nowrap;

  flex-shrink:0;

}

.hero-nav a:hover{

  color:#ff2948;

  opacity:1;

}

.name-wrap{

  display:flex;

  flex-direction:column;

  align-items:flex-end;

}

.about-section{

  min-height:100vh;

  padding:120px 8vw;

}

.about-wrap{

  max-width:1200px;

  margin:0 auto;

  display:grid;

  grid-template-columns:420px 1fr;

  gap:150px;

  align-items:center;

}

.about-photo img{

  width:530px;
  height:490px;

  object-fit:cover;
  display:block;

  border-radius:0;

  -webkit-mask-image:
    linear-gradient(
      to right,

      transparent 0%,
      rgba(0,0,0,.20) 14%,
      rgba(0,0,0,.60) 26%,
      rgba(0,0,0,.90) 40%,

      #000 50%,

      rgba(0,0,0,.90) 60%,
      rgba(0,0,0,.60) 74%,
      rgba(0,0,0,.20) 86%,
      transparent 100%

    );

  mask-image:
    linear-gradient(
      to right,

      transparent 0%,
      rgba(0,0,0,.20) 14%,
      rgba(0,0,0,.60) 26%,
      rgba(0,0,0,.90) 40%,

      #000 50%,

      rgba(0,0,0,.90) 60%,
      rgba(0,0,0,.60) 74%,
      rgba(0,0,0,.20) 86%,
      transparent 100%

    );

}
.section-label{

  font-family:Michroma,Arial,sans-serif;

  font-size:22px;

  letter-spacing:.25em;

  color:#ff2948;

  margin-bottom:20px;

}

.about-content h2{

  font-family:Michroma,Arial,sans-serif;

  font-size:48px;

  margin-bottom:30px;

}

.about-content p{

  color:#d9d9df;

  font-size:20px;

  line-height:1.9;

  margin-bottom:20px;

}

.hero-nav .nav-red{

  color:#ff2948;

  opacity:1;

}

.hero-nav .nav-red:hover{

  color:#ff2948;

  opacity:1;

  text-shadow:
    0 0 12px rgba(255,41,72,.45);

}

.faq-card{

  width:100%;

  max-width:1500px;

  margin:40px auto 0;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.04),
      rgba(255,255,255,.015)
    );

  border:1px solid rgba(255,41,72,.28);

  border-radius:22px;

  backdrop-filter:blur(10px);

  box-shadow:
    0 15px 45px rgba(0,0,0,.28);

  overflow:hidden;

  transition:.35s ease;

}

.faq-title{

  width:100%;

  padding:35px 45px;

  background:none;

  border:none;

  color:#fff;

  text-align:left;

  cursor:pointer;

  font-family:Michroma,Arial,sans-serif;

  font-size:22px;

  line-height:1.4;

}

.faq-content{

  max-height:0;

  overflow:hidden;

  transition:.5s ease;

}

.faq-card.active .faq-content{

  max-height:300px;

}

.faq-text{

  padding:0 45px 45px;

  color:#d9d9df;

  font-size:20px;

  line-height:1.9;

}

.faq-section{

  min-height:100vh;

  padding:180px 8vw;

  max-width:1500px;

  margin:0 auto;

}

.faq-section h2{

  font-family:Michroma,Arial,sans-serif;

  font-size:48px;

  margin-bottom:50px;

}
.typewriter{

  min-height:80px;

  white-space:normal;

}

.typewriter::after{

  content:"|";

  color:#ff2948;

  margin-left:2px;

  animation:blink .8s infinite;

}

@keyframes blink{

  0%,50%{
    opacity:1;
  }

  51%,100%{
    opacity:0;
  }

}

.agent-photo-wrap{

  position:relative;

  display:inline-block;

}

.fb-icon{

  position:absolute;

  top:15px;
  right:15px;

  width:46px;
  height:46px;

  border-radius:50%;

  background:#3a3a40;

  border:1px solid rgba(255,255,255,.75);

  color:#ffffff;

  text-decoration:none;

  font-family:Arial,sans-serif;

  font-weight:700;

  font-size:26px;

  display:flex;

  align-items:center;

  justify-content:center;

  transition:.3s ease;

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

}

.fb-icon:hover{

  background:#ff2948;

  border-color:#ffffff;

  color:#ffffff;

  transform:scale(1.1);

  box-shadow:
    0 0 28px rgba(255,41,72,.7);

}

#mapa-section{

  min-height:100vh;

  display:flex;

  align-items:center;

  justify-content:center;

  padding:120px 0;

}

 /* =========================================
   LUXUSNÍ FILMOVÝ PÁS SG
========================================= */

.film-strip{

  margin-top:80px;

}

.film-frame{

  display:grid;

  grid-template-columns:38px 1fr 38px;

  align-items:stretch;

  max-width:1200px;

  margin:0 auto;

  border-radius:14px;

  overflow:hidden;

  box-shadow:
    0 30px 80px rgba(0,0,0,.45),
    0 0 25px rgba(255,41,72,.08);

}

.film-photo{

  position:relative;

  overflow:hidden;

  background:#111114;

  border-top:1px solid rgba(255,41,72,.45);

  border-bottom:1px solid rgba(255,41,72,.45);

}

.film-photo::after{

  content:"";

  position:absolute;

  inset:0;

  pointer-events:none;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.08) 0%,
      transparent 25%,
      transparent 75%,
      rgba(255,255,255,.04) 100%
    );

}

.film-photo img{

  width:100%;

  height:440px;

  display:block;

  object-fit:cover;

}

.film-perforation{

  position:relative;

  background:
    linear-gradient(
      90deg,
      #070708 0%,
      #1a1a1f 50%,
      #070708 100%
    );

}

.film-perforation::before{

  content:"";

  position:absolute;

  inset:0;

  background:
    repeating-linear-gradient(

      to bottom,

      transparent 0px,
      transparent 10px,

      rgba(255,255,255,.78) 10px,
      rgba(255,255,255,.78) 24px,

      transparent 24px,
      transparent 48px

    );

}

.film-content{

  text-align:center;

  max-width:1500px;

  margin:0 auto;

  padding:45px 30px 70px;

}

.film-label{

  font-family:Michroma,Arial,sans-serif;

  color:#ff2948;

  letter-spacing:.30em;

  font-size:13px;

  margin-bottom:18px;

}

.film-content h3{

  font-family:Michroma,Arial,sans-serif;

  font-size:32px;

  margin-bottom:25px;

  color:#ffffff;

}

.film-content p{

  max-width:760px;

  margin:auto;

  color:#d6d6dc;

  font-size:20px;

  line-height:1.9;

}

.story-box{

  width:100%;

  max-width:1500px;

  margin:40px auto 0;

  padding:35px 45px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.04),
      rgba(255,255,255,.015)
    );

  border:1px solid rgba(255,41,72,.28);

  border-radius:22px;

  backdrop-filter:blur(10px);

  box-shadow:
    0 15px 45px rgba(0,0,0,.28);

  transition:.35s ease;

}

.story-preview{

  font-size:24px;

  color:#ffffff;

  line-height:1.8;

  text-align:center;

  margin-bottom:18px;

}

.story-toggle{

  display:block;

  margin:0 auto;

  padding:12px 24px;

  background:none;

  border:none;

  color:#ff2948;

  font-family:Michroma,Arial,sans-serif;

  font-size:13px;

  letter-spacing:.15em;

  cursor:pointer;

  transition:.3s;

}

.story-toggle:hover{

  color:#ffffff;

  text-shadow:
    0 0 12px rgba(255,41,72,.5);

}

.story-toggle:hover{

  color:#ffffff;

}

.story-text{

  display:none;

  margin-top:30px;

  padding-top:30px;

  border-top:1px solid rgba(255,41,72,.20);

  white-space:pre-line;

  color:#d9d9df;

  font-size:20px;

  line-height:2;

  text-align:center;

}

.facebook-box{

  margin-top:60px;

  text-align:center;

}

.facebook-box p{

  margin-bottom:25px;

}

.facebook-box .btn{

  display:inline-block;

  margin-top:20px;

}

/* ================================
   VIDEO POZADÍ
================================ */

.bg-video{

    position:fixed;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center center;

    z-index:-3;

    filter:

        brightness(var(--video-brightness))

        saturate(var(--video-saturation))

        blur(var(--video-blur));

}

/* ================================
   ZATMAVENÍ VIDEA
================================ */

.bg-overlay{

    position:fixed;

    inset:0;

    z-index:-2;

    pointer-events:none;

    background:

        radial-gradient(

            circle at 50% 8%,

            rgba(255,41,72,.05),

            transparent 25%

        ),

        rgba(0,0,0,var(--video-darkness));

}

.hero,
section,
footer{

    position:relative;

    z-index:1;

}


.phone-wrap{

    position:relative;

    top:3px;                 /* výchozí poloha níž */

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-left:22px;

    vertical-align:middle;

    transform-origin:left bottom;

    will-change:transform;

   

}

.phone-wrap{

    position:relative;

    z-index:999999999999;

    isolation:isolate;

}



/* =========================================
   PRVNÍ VLNA
========================================= */

.phone-wrap::before{

    content:"";

    position:absolute;

    left:50%;
    top:50%;

    width:24px;
    height:24px;

    border-radius:50%;

    border:2px solid rgba(255,41,72,.55);

    background:radial-gradient(
        circle,
        rgba(255,41,72,.45) 0%,
        rgba(255,41,72,.15) 45%,
        transparent 100%
    );

    transform:translate(-50%,-50%) scale(.2);

    opacity:0;

    

    z-index:999999999998;

}

/* =========================================
   DRUHÁ VLNA
========================================= */

.phone-wrap::after{

    content:"";

    position:absolute;

    left:50%;
    top:50%;

    width:24px;
    height:24px;

    border-radius:50%;

    border:2px solid rgba(255,41,72,.45);

    background:radial-gradient(
        circle,
        rgba(255,41,72,.35) 0%,
        rgba(255,41,72,.10) 45%,
        transparent 100%
    );

    transform:translate(-50%,-50%) scale(.2);

    opacity:0;


    z-index:999999999999;

}

/* =========================================
   IKONA
========================================= */

.phone-icon{

    width:28px;

    height:28px;

    fill:#ff2948;

    position:relative;

    z-index:1000000000000;

}


/* =========================================
   ANIMACE CELÉHO TELEFONU
========================================= */

@keyframes ring{

    /* =====================================
       KLID
    ===================================== */

    0%,74%,100%{

        transform:
            translate(0,0)
            scale(1)
            rotate(0deg);

    }

    /* =====================================
       MALÉ ZAZVONĚNÍ
    ===================================== */

    75%{ transform:translate(0,0) scale(1) rotate(-18deg); }

    76%{ transform:translate(0,0) scale(1) rotate(18deg); }

    77%{ transform:translate(0,0) scale(1) rotate(-12deg); }

    78%{ transform:translate(0,0) scale(1) rotate(12deg); }

    79%{ transform:translate(0,0) scale(1) rotate(-6deg); }

    80%{

        transform:
            translate(0,0)
            scale(1)
            rotate(0deg);

    }

    /* =====================================
       KRÁTKÁ PAUZA
    ===================================== */

    83%{

        transform:
            translate(0,0)
            scale(1)
            rotate(0deg);

    }

    /* =====================================
       PLYNULÉ ZVĚTŠENÍ
    ===================================== */

    86%{

        transform:
            translate(12px,28px)
            scale(1.20)
            rotate(0deg);

    }

    89%{

        transform:
            translate(28px,58px)
            scale(1.45)
            rotate(0deg);

    }

    92%{

        transform:
            translate(44px,90px)
            scale(1.75)
            rotate(0deg);

    }

    95%{

        transform:
            translate(55px,115px)
            scale(2)
            rotate(0deg);

    }

    /* =====================================
       PAUZA VE VELKÉ VELIKOSTI
    ===================================== */

    96%{

        transform:
            translate(55px,115px)
            scale(2)
            rotate(0deg);

    }

    /* =====================================
       VELKÉ ZAZVONĚNÍ
    ===================================== */

    97%{

        transform:
            translate(55px,115px)
            scale(2)
            rotate(-12deg);

    }

    98%{

        transform:
            translate(55px,115px)
            scale(2)
            rotate(12deg);

    }

    99%{

        transform:
            translate(55px,115px)
            scale(2)
            rotate(0deg);

    }

}

/* =========================================
   PRVNÍ VLNA
========================================= */

@keyframes ringPulse1{

    0%{

        transform:
            translate(-50%,-50%)
            scale(.2);

        opacity:1;

    }

    100%{

        transform:
            translate(-50%,-50%)
            scale(7);

        opacity:0;

    }

}


/* =========================================
   DRUHÁ VLNA
========================================= */

@keyframes ringPulse2{

    0%{

        transform:
            translate(-50%,-50%)
            scale(.2);

        opacity:.9;

    }

    100%{

        transform:
            translate(-50%,-50%)
            scale(7);

        opacity:0;

    }

}


@keyframes ringSmall{

    0%,100%{
        transform:rotate(0deg);
    }

    15%{
        transform:rotate(-18deg);
    }

    30%{
        transform:rotate(18deg);
    }

    45%{
        transform:rotate(-12deg);
    }

    60%{
        transform:rotate(12deg);
    }

    75%{
        transform:rotate(-6deg);
    }

    90%{
        transform:rotate(0deg);
    }

}








/* =========================================
   SPUŠTĚNÍ ANIMACÍ Z JAVASCRIPTU
========================================= */

.phone-wrap.run{

    animation:ring 6s linear 1;

}

.pulse-phone.run{

    animation:ringSmall .7s ease;

}



.phone-wrap.wave1::before{

    animation:ringPulse1 .7s ease-out forwards;

}

.phone-wrap.wave2::after{

    animation:ringPulse2 .7s ease-out forwards;

}




.call-box{

    margin-top:60px;

    text-align:center;

}

.call-box p{

    font-size:22px;

    color:#ffffff;

    margin-bottom:35px;

    line-height:1.8;

}

.call-link{

    display:inline-flex;

    align-items:center;

    gap:22px;

    color:#ffffff;

    text-decoration:none;

    font-family:Michroma,Arial,sans-serif;

    font-size:26px;

    letter-spacing:.08em;

    transition:.3s;

}

.call-link:hover{

    color:#ff2948;

}

.call-phone{

    margin-left:0;

    top:0;

}


.call-link{

    display:inline-flex;

    align-items:center;

    gap:22px;

    color:#ffffff;

    text-decoration:none;

    font-family:Michroma,Arial,sans-serif;

    font-size:26px;

    letter-spacing:.08em;

    transition:.3s;

    position:relative;

    padding-bottom:26px;

}

.call-link::after{

    content:"";

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    bottom:0;

    width:320px;

    height:1px;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,41,72,.8),
        transparent
    );

    box-shadow:
        0 0 10px rgba(255,41,72,.45);

}

#topPhoneText{

    display:inline-block;

    min-width:170px;

}

#topPhoneText::after{

    content:"|";

    color:#ff2948;

    animation:blink .8s infinite;

}


/* ==========================================================
   NOVÁ RESPONZIVITA – NOTEBOOK / TABLET / MOBIL
   SG | Klára Borská
   Vloženo jako jednotný finální blok bez přepisování
========================================================== */

/* ---------- základní pojistky ---------- */
html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

img,
video,
svg{
  max-width:100%;
}

.hero{
  width:100%;
  min-height:100vh;
  padding:120px clamp(20px,4vw,70px) 70px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.brand{
  width:100%;
  max-width:1500px;
  margin:0 auto;
  padding:0;
  text-align:center;
}

.name-row{
  width:min(1260px,92vw);
  margin:0 auto 80px;
  display:grid;
  grid-template-columns:780px 430px;
  align-items:center;
  justify-content:center;
  column-gap:60px;
  transform:none;
}

.name-wrap{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
}

.name{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  text-align:right;
  font-size:clamp(42px,5vw,72px);
  line-height:1.32;
  letter-spacing:.08em;
}

.agent-photo-wrap{
  position:relative;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  max-width:100%;
}

.agent-photo,
.about-photo img{
  width:clamp(420px,35vw,530px);
  height:clamp(410px,32vw,490px);
  object-fit:cover;
}

.hero-nav{

  width:auto;

  display:flex;

  justify-content:flex-end;

  align-items:center;

  gap:16px;

  flex-wrap:nowrap;

  margin-top:28px;

}

/* ==========================================================
   NOTEBOOKY – do 1400 px
========================================================== */
@media (max-width:1400px){

  .top-left{
    left:22px;
  }

  .top-right{
    right:22px;
  }

  .top-left,
  .top-right{
    gap:22px;
    padding:10px 16px;
  }

  .contact-btn{
    font-size:11px;
  }

  .hero{
    padding-top:120px;
  }

  .sg-logo{
    font-size:clamp(100px,14vw,190px);
    margin-bottom:24px;
  }

  .name-row{
    width:min(1160px,92vw);
    grid-template-columns:minmax(0,1fr) 430px;
    column-gap:42px;
    margin-bottom:70px;
  }

  .agent-photo,
  .about-photo img{
    width:430px;
    height:420px;
  }

  .name{
    font-size:clamp(40px,4.8vw,62px);
  }

  .hero-nav{
    gap:18px;
  }

  .hero-nav a{
    font-size:12px;
  }

  .about-wrap{
    grid-template-columns:430px minmax(0,1fr);
    gap:80px;
  }

  .film-photo img{
    height:380px;
  }

  .map-area{
    height:480px;
  }
}

/* ==========================================================
   TABLETY A MENŠÍ NOTEBOOKY – do 1100 px
========================================================== */
@media (max-width:1100px){

  .top-contact{
    position:absolute;
    top:0;
    left:0;
    right:0;
    width:100%;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:14px;
    padding:18px 18px 0;
    pointer-events:none;
  }

  .top-left,
  .top-right{
    position:relative;
    top:auto;
    left:auto;
    right:auto;
    margin:0;
    pointer-events:auto;
    background:rgba(10,10,12,.28);
    border:1px solid rgba(255,255,255,.08);
  }

  .top-left::after,
  .top-right::after{
    bottom:-8px;
  }

  .contact-btn{
    font-size:10px;
    letter-spacing:.10em;
    white-space:nowrap;
  }

  #topPhoneText{
    min-width:145px;
  }

  .hero{
    min-height:auto;
    padding:135px 24px 70px;
  }

  .sg-logo{
    font-size:clamp(92px,15vw,145px);
    line-height:.86;
    margin-bottom:20px;
  }

  .role{
    font-size:clamp(14px,2vw,18px);
    letter-spacing:.15em;
    margin-bottom:12px;
  }

  .sg-divider{
    width:min(760px,86vw);
    margin:18px auto 34px;
  }

  .name-row{
    width:100%;
    max-width:760px;
    display:flex;
    flex-direction:column-reverse;
    align-items:center;
    justify-content:center;
    gap:34px;
    margin:0 auto 60px;
  }

  .name-wrap{
    align-items:center;
    text-align:center;
  }

  .name{
    align-items:center;
    text-align:center;
    font-size:clamp(36px,7vw,58px);
    line-height:1.34;
    letter-spacing:.07em;
  }

  .hero-nav{
    justify-content:center;
    gap:14px 18px;
    margin-top:26px;
  }

  .hero-nav a{
    font-size:11px;
    letter-spacing:.12em;
  }

  .agent-photo{
    width:min(430px,72vw);
    height:min(430px,72vw);
  }

  .fb-icon{
    right:10px;
    top:18px;
    width:42px;
    height:42px;
    font-size:24px;
  }

  #mapa-section{
    min-height:auto;
    padding:90px 0;
  }

  .map-wrap{
    width:min(900px,94vw);
    padding:12px;
  }

  .map-area{
    height:390px;
  }

  .cz-map{
    width:88%;
  }

  .location-section,
  .about-section,
  .faq-section{
    min-height:auto;
    padding:110px 28px;
  }

  .location-section h2,
  .about-content h2,
  .faq-section h2{
    font-size:clamp(36px,6vw,50px);
  }

  .about-wrap{
    max-width:760px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:44px;
    text-align:center;
  }

  .about-photo img{
    width:min(430px,72vw);
    height:min(430px,72vw);
  }

  .film-frame{
    max-width:860px;
  }

  .film-photo img{
    height:320px;
  }

  .film-content{
    padding:38px 20px 60px;
  }

  .film-content h3{
    font-size:26px;
  }

  .film-content p,
  .story-preview,
  .story-text,
  .faq-text,
  .about-content p,
  .note{
    font-size:18px;
  }
}

/* ==========================================================
   MOBILY – do 768 px
========================================================== */
@media (max-width:768px){

  :root{
    --video-darkness:.81;
  }

  .bg-video{
    object-position:center center;
  }

  .top-contact{
    position:relative;
    top:auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:14px 14px 0;
    z-index:10;
  }

.top-left,
.top-right{

    width:min(420px,94vw);

    justify-content:center;

    border-radius:24px;

    padding:4px 12px;   /* bylo 9px */

    min-height:48px;    /* přidej */

    gap:12px;

    backdrop-filter:blur(10px);

    background:rgba(10,10,12,.34);

}

  .top-left::after,
  .top-right::after{
    display:none;
  }

  .top-right{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

.contact-btn{

    width:100%;

    height:20px;

    min-height:20px;

    padding:0;

    gap:6px;

    font-size:9px;

    line-height:1;

    letter-spacing:.06em;

    white-space:nowrap;

}

  #topPhoneText{
    min-width:0;
  }

  .phone-wrap{
    margin-left:0;
  }

  .phone-icon{
    width:24px;
    height:24px;
  }

  .hero{
    min-height:auto;
    padding:28px 16px 62px;
  }

  .brand{
    width:100%;
    overflow:visible;
  }

  .sg-logo{
    font-size:clamp(70px,24vw,104px);
    line-height:.86;
    letter-spacing:-.07em;
    margin-bottom:18px;
  }

  .role{
    max-width:92vw;
    margin:0 auto 10px;
    font-size:clamp(12px,3.4vw,15px);
    letter-spacing:.13em;
    line-height:1.5;
  }

  .sg-divider{
    width:86vw;
    margin:16px auto 30px;
  }

  .name-row{
    width:100%;
    max-width:480px;
    gap:30px;
    margin:0 auto 54px;
  }

  .agent-photo-wrap{
    width:100%;
    max-width:360px;
    margin:0 auto;
  }

  .agent-photo{
    width:min(320px,82vw);
    height:min(340px,86vw);
    object-fit:cover;
    margin:0 auto;
  }

  .fb-icon{
    right:20px;
    top:16px;
    width:40px;
    height:40px;
    font-size:23px;
  }

  .name{
    font-size:clamp(29px,9vw,42px);
    line-height:1.38;
    letter-spacing:.055em;
  }

  .hero-nav{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:min(420px,92vw);
    gap:10px;
    margin:26px auto 0;
    padding:0;
  }

.hero-nav a{

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:48px;

    padding:12px 14px;

    line-height:1.2;

    border-radius:999px;

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

    border:1px solid rgba(255,255,255,.10);

    font-size:10px;

    white-space:nowrap;

}

  .hero-nav .nav-red{
    background:rgba(255,41,72,.13);
    border-color:rgba(255,41,72,.45);
  }

  #mapa-section{
    padding:72px 0;
  }

  .map-wrap{
    width:94vw;
    padding:0;
  }

  .map-title,
  .section-label{
    font-size:15px;
    letter-spacing:.20em;
    text-align:center;
  }

  .map-area{
    height:260px;
    border-radius:18px;
  }

  .cz-map{
    width:104%;
    margin:20px auto 0;
  }

  .pin{
    font-size:11px;
    gap:6px;
  }

  .pin::before{
    width:16px;
    height:16px;
  }

  .pin::after{
    width:120px;
    height:120px;
    left:-52px;
    top:-52px;
  }

  .pin.praha{
    left:34%;
    top:47%;
  }

  .pin.trutnov{
    left:56%;
    top:30%;
  }

  .area-praha,
  .area-trutnov{
    width:120px;
    height:120px;
  }

  .note{
    margin:22px auto 0;
    max-width:92vw;
    font-size:16px;
    line-height:1.7;
  }

  .location-section,
  .about-section,
  .faq-section{
    padding:78px 18px;
  }

  .location-section h2,
  .about-content h2,
  .faq-section h2{
    font-size:clamp(30px,9vw,38px);
    line-height:1.25;
    text-align:center;
    margin-bottom:26px;
  }

  .film-strip{
    margin-top:42px;
  }

  .film-frame{
    grid-template-columns:22px 1fr 22px;
    border-radius:12px;
  }

  .film-photo img{
    height:220px;
  }

  .film-perforation::before{
    background:repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 8px,
      rgba(255,255,255,.72) 8px,
      rgba(255,255,255,.72) 18px,
      transparent 18px,
      transparent 38px
    );
  }

  .film-content{
    padding:30px 0 46px;
  }

  .film-content h3{
    font-size:clamp(22px,6vw,28px);
    line-height:1.35;
    margin-bottom:22px;
  }

  .story-box,
  .faq-card{
    margin-top:26px;
    border-radius:18px;
  }

  .story-box{
    padding:24px 18px;
  }

  .story-preview,
  .story-text,
  .about-content p,
  .faq-text{
    font-size:16px;
    line-height:1.75;
  }

  .story-text{
    text-align:left;
  }

  .story-toggle{
    font-size:11px;
    padding:10px 18px;
  }

  .faq-section h2 br{
    display:none;
  }

  .faq-title{
    padding:22px 18px;
    font-size:15px;
    line-height:1.55;
    text-align:center;
  }

  .faq-text{
    padding:0 18px 24px;
  }

  .faq-card.active .faq-content{
    max-height:520px;
  }

  .about-wrap{
    gap:34px;
  }

  .about-photo img{
    width:min(320px,82vw);
    height:min(340px,86vw);
  }

  .call-box{
    margin-top:42px;
  }

  .call-box p{
    max-width:92vw;
    margin:0 auto 26px;
    font-size:17px;
    line-height:1.7;
  }

  .call-link{
    width:min(360px,88vw);
    margin:0 auto;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:14px;
    padding:20px 18px 24px;
    border-radius:24px;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,41,72,.28);
    font-size:20px;
    line-height:1.25;
  }

  .call-link::after{
    width:70%;
    bottom:12px;
  }

  .call-phone{
    top:0;
  }
}

/* ==========================================================
   MALÉ MOBILY – do 430 px
========================================================== */
@media (max-width:430px){

  .top-contact{
    padding-top:12px;
  }

  .top-left,
  .top-right{
    width:94vw;
    padding:8px 10px;
  }

  .contact-btn{
    font-size:9px;
  }

  .hero{
    padding:24px 12px 54px;
  }

  .sg-logo{
    font-size:clamp(64px,25vw,86px);
  }

  .role{
    font-size:11px;
  }

  .name-row{
    gap:24px;
    margin-bottom:46px;
  }

  .agent-photo{
    width:78vw;
    height:82vw;
  }

  .fb-icon{
    right:18px;
    top:12px;
    width:36px;
    height:36px;
    font-size:21px;
  }

  .name{
    font-size:clamp(26px,9.2vw,34px);
    letter-spacing:.045em;
  }

  .hero-nav{
    width:94vw;
    gap:8px;
  }

.hero-nav a{

    min-height:44px;

    padding:10px 12px;

    line-height:1.2;

    font-size:9px;

}

  .map-area{
    height:230px;
  }

  .film-frame{
    grid-template-columns:18px 1fr 18px;
  }

  .film-photo img{
    height:190px;
  }

  .story-box{
    padding:22px 15px;
  }

  .faq-title{
    font-size:14px;
  }

  .call-link{
    font-size:18px;
  }
}

/* ==========================================================
   EXTRA MALÉ MOBILY – do 360 px
========================================================== */
@media (max-width:360px){

  .top-right{
    grid-template-columns:1fr;
  }

  .sg-logo{
    font-size:62px;
  }

  .name{
    font-size:25px;
  }

  .hero-nav{
    grid-template-columns:1fr;
  }

  .agent-photo,
  .about-photo img{
    width:82vw;
    height:86vw;
  }

  .map-area{
    height:210px;
  }

  .film-photo img{
    height:175px;
  }
}

/* ==========================================================
   ÚSPORA ANIMACÍ PRO ZAŘÍZENÍ, KDE TO UŽIVATEL CHCE
========================================================== */
@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }
}


/* FIX MOBIL – TELEFON NAD WHATSAPP / MESSENGER */
@media (max-width:768px){

  .top-contact{
    isolation:isolate;
    overflow:visible;
  }

  .top-left{
    position:relative;
    z-index:50;
    overflow:visible;
  }

  .top-right{
    position:relative;
    z-index:10;
  }

  .contact-btn{
    overflow:visible;
  }

  .top-left .phone-wrap{
    position:relative;
    z-index:999;
  }

}









/* ==========================================================
   CENTRUM TRANSPARENTNOSTI – SG REALITY
========================================================== */
body.transparency-open{
  overflow:hidden;
}

.transparency-backdrop{
  position:fixed;
  inset:0;
  z-index:9999999999998;
  background:rgba(0,0,0,.68);
  backdrop-filter:blur(9px);
  opacity:0;
  pointer-events:none;
  transition:.35s ease;
}

.transparency-backdrop.active{
  opacity:1;
  pointer-events:auto;
}

.transparency-panel{
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:100dvh;
  z-index:9999999999999;
  overflow:hidden;
  transform:translateY(-105%);
  opacity:.96;
  transition:transform .55s cubic-bezier(.19,1,.22,1), opacity .35s ease;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,41,72,.16), transparent 34%),
    linear-gradient(180deg, rgba(20,20,24,.98), rgba(9,9,12,.98));
  color:#fff;
  border-bottom:1px solid rgba(255,41,72,.45);
  box-shadow:0 35px 90px rgba(0,0,0,.65);
}

.transparency-panel.active{
  transform:translateY(0);
  opacity:1;
}

.transparency-scroll{
    height:100%;
    overflow-y:auto;
    padding:0 0 90px;

    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,.18) transparent;
}

.transparency-scroll::-webkit-scrollbar{
    width:4px;
}

.transparency-scroll::-webkit-scrollbar-track{
    background:transparent;
}

.transparency-scroll::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.18);
    border-radius:999px;
}

.transparency-scroll::-webkit-scrollbar-thumb:hover{
    background:rgba(255,255,255,.35);
}

.transparency-topbar{
  position:sticky;
  top:0;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:22px clamp(18px,4vw,70px);
  background:rgba(9,9,12,.72);
  backdrop-filter:blur(15px);
  border-bottom:1px solid rgba(255,41,72,.32);
}

.transparency-close{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.045);
  color:#fff;
  font-family:Michroma,Arial,sans-serif;
  font-size:12px;
  letter-spacing:.13em;
  text-transform:uppercase;
  padding:13px 18px;
  border-radius:999px;
  cursor:pointer;
  transition:.25s ease;
}

.transparency-close:hover{
  color:#ff2948;
  border-color:rgba(255,41,72,.65);
  transform:translateY(-2px);
}

.transparency-mini-title{
  font-family:Michroma,Arial,sans-serif;
  font-size:13px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#cfcfd5;
}

.transparency-hero{
  position:relative;
  width:min(1180px,92vw);
  margin:0 auto;
  padding:88px 0 55px;
  text-align:center;
}

.transparency-ghost{
  position:absolute;
  left:50%;
  top:28px;
  transform:translateX(-50%);
  font-family:Michroma,Arial,sans-serif;
  font-size:clamp(90px,17vw,230px);
  line-height:.8;
  letter-spacing:-.08em;
  color:rgba(255,255,255,.035);
  pointer-events:none;
  user-select:none;
}

.transparency-label{
  position:relative;
  z-index:1;
  font-family:Michroma,Arial,sans-serif;
  font-size:clamp(28px,5vw,64px);
  line-height:1.18;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:24px;
}

.transparency-intro{
  position:relative;
  z-index:1;
  max-width:780px;
  margin:0 auto;
  color:#d8d8de;
  font-size:clamp(16px,1.8vw,21px);
  line-height:1.8;
}

.transparency-divider{
  width:min(850px,82vw);
  height:1px;
  margin:38px auto 0;
  background:linear-gradient(90deg, transparent, rgba(255,41,72,.85), transparent);
  box-shadow:0 0 16px rgba(255,41,72,.42);
}

.transparency-grid{
  width:min(1180px,92vw);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
}

.trans-card{
  position:relative;
  border:1px solid rgba(255,41,72,.28);
  border-radius:22px;
  background:linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.018));
  box-shadow:0 18px 50px rgba(0,0,0,.34);
  overflow:hidden;
}

.trans-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:22px;
  background:linear-gradient(90deg, rgba(255,41,72,.42), transparent 32%, transparent 68%, rgba(255,41,72,.18));
  opacity:.12;
}

.trans-card-head{
  width:100%;
  position:relative;
  z-index:1;
  border:0;
  background:transparent;
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:24px 28px;
  text-align:left;
}

.trans-card-main{
  display:flex;
  align-items:center;
  gap:16px;
  min-width:0;
}

.trans-icon{
  width:42px;
  height:42px;
  flex:0 0 42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(255,41,72,.12);
  border:1px solid rgba(255,41,72,.38);
  color:#ff2948;
  font-size:21px;
}

.trans-title{
  font-family:Michroma,Arial,sans-serif;
  font-size:clamp(14px,1.4vw,18px);
  line-height:1.45;
  letter-spacing:.10em;
  text-transform:uppercase;
}

.trans-arrow{
  color:#ff2948;
  font-size:18px;
  transition:.25s ease;
}

.trans-card.active .trans-arrow{
  transform:rotate(180deg);
}

.trans-card-body{
  position:relative;
  z-index:1;
  max-height:0;
  overflow:hidden;
  transition:max-height .55s ease;
}

.trans-card.active .trans-card-body{
  max-height:720px;
}

.trans-card-inner{
  padding:0 28px 28px;
  border-top:1px solid rgba(255,41,72,.20);
}

.trans-text{
  min-height:88px;
  padding-top:24px;
  color:#ddddE4;
  font-size:17px;
  line-height:1.85;
  white-space:pre-line;
}

.trans-text::after{
  content:"|";
  color:#ff2948;
  animation:blink .8s infinite;
}

.trans-text.done::after{
  display:none;
}

.trans-pdf{
  margin-top:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:#fff;
  text-decoration:none;
  font-family:Michroma,Arial,sans-serif;
  font-size:11px;
  letter-spacing:.13em;
  text-transform:uppercase;
  padding:13px 18px;
  border-radius:999px;
  border:1px solid rgba(255,41,72,.45);
  background:rgba(255,41,72,.10);
  transition:.25s ease;
}

.trans-pdf:hover{
  background:#ff2948;
  color:#fff;
  transform:translateY(-2px);
}

.transparency-footer{
  width:min(1180px,92vw);
  margin:46px auto 0;
  padding:28px;
  text-align:center;
  border-top:1px solid rgba(255,41,72,.28);
  color:#bdbdc4;
  line-height:1.7;
}

.transparency-footer strong{
  color:#fff;
}

@media (max-width:980px){
  .transparency-grid{
    grid-template-columns:1fr;
    width:min(760px,92vw);
  }
}

@media (max-width:768px){
  .transparency-topbar{
    padding:14px 14px;
  }

  .transparency-close{
    padding:10px 13px;
    font-size:10px;
    letter-spacing:.10em;
  }

  .transparency-mini-title{
    font-size:10px;
    letter-spacing:.14em;
  }

  .transparency-hero{
    padding:58px 0 36px;
  }

  .transparency-ghost{
    top:24px;
    font-size:clamp(70px,24vw,120px);
  }

  .transparency-label{
    font-size:clamp(27px,8vw,40px);
    letter-spacing:.075em;
  }

  .transparency-intro{
    font-size:16px;
    line-height:1.7;
  }

  .trans-card-head{
    padding:20px 18px;
  }

  .trans-icon{
    width:36px;
    height:36px;
    flex-basis:36px;
    font-size:18px;
  }

  .trans-title{
    font-size:13px;
    letter-spacing:.075em;
  }

  .trans-card-inner{
    padding:0 18px 22px;
  }

  .trans-text{
    font-size:15px;
    line-height:1.75;
  }

  .trans-pdf{
    width:100%;
    font-size:10px;
    padding:13px 12px;
  }
}

@media (max-width:430px){
  .transparency-grid,
  .transparency-hero,
  .transparency-footer{
    width:94vw;
  }

  .transparency-topbar{
    gap:10px;
  }

  .transparency-mini-title{
    display:none;
  }

  .trans-card-head{
    padding:18px 15px;
  }

  .trans-title{
    font-size:12px;
  }
}

/* Floating Transparency */

.transparency-floating{

    position:fixed;

    right:28px;
    top:50%;

    transform:
        translateY(-50%)
        translateX(90px);

    width:62px;
    height:62px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    font-family:Michroma,Arial,sans-serif;
    font-size:28px;

    font-weight:700;

    color:#111111;                 /* tmavé písmeno */

    text-decoration:none;

    background:#ff2948;            /* stejná červená jako logo S */

    border:2px solid rgba(255,255,255,.20);

    box-shadow:
        0 0 28px rgba(255,41,72,.45),
        0 12px 35px rgba(0,0,0,.35);

    opacity:0;

    pointer-events:none;

    transition:
        transform .45s ease,
        opacity .35s ease,
        background .3s ease,
        box-shadow .3s ease;

    z-index:99999999;

}

.transparency-floating.show{

    transform:
        translateY(-50%)
        translateX(0);

    opacity:1;

    pointer-events:auto;

}

.transparency-floating:hover{

    background:#ff4b66;

    color:#000;

    transform:
        translateY(-50%)
        scale(1.08);

    box-shadow:
        0 0 40px rgba(255,41,72,.75),
        0 20px 45px rgba(0,0,0,.40);

}


/* ================= COOKIE INTRO ================= */
/* ==========================================================
   COOKIE INTRO – SG REALITY
   Logo SG se střídá s cookies panelem, dokud uživatel neklikne Rozumím
========================================================== */

.sg-logo.sg-cookie-host{
    position:relative;
    min-height:clamp(95px,18vw,250px);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:visible;
}

.sg-logo.sg-cookie-host .sg-logo-original,
.sg-logo.sg-cookie-host .sg-cookie-panel{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:
        opacity .75s cubic-bezier(.19,1,.22,1),
        transform .75s cubic-bezier(.19,1,.22,1),
        filter .75s cubic-bezier(.19,1,.22,1);
}

.sg-logo.sg-cookie-host .sg-logo-original{
    opacity:1;
    transform:scale(1);
    filter:drop-shadow(0 0 28px rgba(201,21,43,.22));
}

.sg-logo.sg-cookie-host.cookie-mode .sg-logo-original{
    opacity:0;
    transform:scale(.92);
    filter:blur(10px) drop-shadow(0 0 45px rgba(255,41,72,.25));
    pointer-events:none;
}

.sg-cookie-panel{
    opacity:0;
    transform:scale(.93);
    pointer-events:none;
    filter:blur(8px);
}

.sg-logo.sg-cookie-host.cookie-mode .sg-cookie-panel{
    opacity:1;
    transform:scale(1);
    pointer-events:auto;
    filter:blur(0);
}

.sg-cookie-oval{
    position:relative;
    width:min(570px,88vw);
    min-height:clamp(155px,18vw,230px);
    padding:32px clamp(20px,4vw,54px);
    border-radius:999px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:18px;
    isolation:isolate;
    overflow:visible;
    background:
        linear-gradient(145deg, rgba(8,8,11,.94), rgba(18,18,22,.88));
    border:none;
    box-shadow:
        inset 0 0 42px rgba(0,0,0,.65);
}

/* =========================================
   COOKIE OVÁL – BEZ SVG
   skutečný okraj panelu + CSS jiskra na hraně
========================================= */

.sg-cookie-oval::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    padding:1.6px;
    pointer-events:none;
    z-index:0;

    background:
        conic-gradient(
            from var(--cookie-angle),
            rgba(255,41,72,.42) 0deg,
            rgba(255,41,72,.42) 286deg,
            rgba(255,41,72,.75) 304deg,
            #ff2948 318deg,
            #ffffff 321deg,
            #ff2948 324deg,
            rgba(255,41,72,.75) 338deg,
            rgba(255,41,72,.42) 360deg
        );

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;

    animation:cookieSparkRun 3.8s linear infinite;
}

.sg-cookie-oval::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    z-index:0;

    background:
        conic-gradient(
            from var(--cookie-angle),
            transparent 0deg,
            transparent 316deg,
            rgba(255,41,72,.95) 320deg,
            rgba(255,255,255,.95) 321deg,
            rgba(255,41,72,.95) 322deg,
            transparent 327deg,
            transparent 360deg
        );

    padding:2.8px;

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;

    filter:drop-shadow(0 0 4px rgba(255,41,72,.8));
    animation:cookieSparkRun 3.8s linear infinite;
}

.sg-cookie-oval > *{
    position:relative;
    z-index:1;
}





.sg-cookie-title{
    font-family:Michroma,Arial,sans-serif;
    font-size:clamp(18px,2.7vw,32px);
    line-height:1;
    letter-spacing:.20em;
    color:#ff2948;
    text-transform:uppercase;
    text-shadow:0 0 18px rgba(255,41,72,.45);
}

.sg-cookie-line{
    width:min(420px,70%);
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,41,72,.9), transparent);
    box-shadow:0 0 14px rgba(255,41,72,.65);
}

.sg-cookie-text{
    max-width:560px;
    font-family:Montserrat,Arial,sans-serif;
    font-size:clamp(14px,1.45vw,18px);
    line-height:1.55;
    letter-spacing:normal;
    color:#f1f1f4;
    text-align:center;
    text-transform:none;
}

.sg-cookie-actions{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    flex-wrap:wrap;
    margin-top:2px;
}

.sg-cookie-more,
.sg-cookie-accept{
    appearance:none;
    border:none;
    cursor:pointer;
    font-family:Michroma,Arial,sans-serif;
    text-transform:uppercase;
    letter-spacing:.13em;
    transition:.28s ease;
}

.sg-cookie-more{
    color:#ff2948;
    background:transparent;
    font-size:clamp(10px,1vw,12px);
    padding:12px 2px 9px;
    border-bottom:1px solid rgba(255,41,72,.85);
}

.sg-cookie-more:hover{
    color:#fff;
    text-shadow:0 0 14px rgba(255,41,72,.65);
    transform:translateY(-2px);
}

.sg-cookie-accept{
    color:#fff;
    font-size:clamp(11px,1vw,13px);
    padding:14px 26px;
    border-radius:999px;
    background:linear-gradient(135deg,#c9152b,#ff2948);
    box-shadow:0 0 24px rgba(255,41,72,.35);
}

.sg-cookie-accept:hover{
    transform:translateY(-2px) scale(1.03);
    box-shadow:0 0 34px rgba(255,41,72,.58);
}

.sg-cookie-panel.accepted{
    animation:sgCookieAccepted .72s cubic-bezier(.19,1,.22,1) forwards;
}

@keyframes sgCookieAccepted{
    0%{ opacity:1; transform:scale(1); filter:blur(0); }
    100%{ opacity:0; transform:scale(.82); filter:blur(13px); }
}

@media (max-width:768px){
    .sg-logo.sg-cookie-host{
        min-height:clamp(76px,24vw,112px);
        margin-bottom:18px;
    }

    .sg-cookie-oval{
        width:min(92vw,430px);
        min-height:180px;
        padding:25px 20px;
        border-radius:34px;
    }

    .sg-cookie-title{
        font-size:18px;
        letter-spacing:.18em;
    }

    .sg-cookie-text{
        font-size:14px;
        line-height:1.55;
    }

    .sg-cookie-actions{
        gap:12px;
    }

    .sg-cookie-more,
    .sg-cookie-accept{
        font-size:10px;
    }

    .sg-cookie-accept{
        padding:12px 20px;
    }
}

@media (max-width:430px){
    .sg-cookie-oval{
        width:94vw;
        min-height:188px;
        padding:23px 16px;
        border-radius:30px;
    }

    .sg-cookie-text{
        font-size:13px;
    }

    .sg-cookie-actions{
        flex-direction:column;
        gap:8px;
    }

    .sg-cookie-more,
    .sg-cookie-accept{
        width:100%;
        max-width:250px;
    }
}



@property --cookie-angle{
    syntax:"<angle>";
    inherits:false;
    initial-value:0deg;
}

@keyframes cookieSparkRun{
    to{
        --cookie-angle:360deg;
    }
}


/* ==========================================================
   MOBIL – COOKIE PANEL VŽDY NAVRCHU
   Když je aktivní cookie intro, schová horní kontakt a cookie panel
   se zobrazí jako první prvek nahoře.
========================================================== */
@media (max-width:768px){

    body.cookie-intro-active .top-contact{
        opacity:0;
        pointer-events:none;
        transform:translateY(-14px);
        transition:.35s ease;
    }

    body.cookie-intro-active .sg-logo.sg-cookie-host{
        z-index:2147483000;
    }

    body.cookie-intro-active .sg-logo.sg-cookie-host .sg-cookie-panel{
        position:fixed;
        inset:auto 0 auto 0;
        top:12px;
        width:100%;
        padding:0 12px;
        z-index:2147483000;
        align-items:flex-start;
    }

    body.cookie-intro-active .sg-cookie-oval{
        width:min(94vw,430px);
        min-height:190px;
        margin:0 auto;
        padding:24px 18px;
        border-radius:30px;
    }

    body.cookie-intro-active .sg-cookie-title{
        font-size:18px;
    }

    body.cookie-intro-active .sg-cookie-text{
        font-size:14px;
        line-height:1.55;
    }

    body.cookie-intro-active .sg-cookie-actions{
        gap:10px;
    }
}