:root{
  --bg: linear-gradient(135deg, #ec407a 0%, #880e4f 100%); /* gradient background like other pages */
  --accent:#f7cfe0; /* pastel pink */
  --muted:#ffffff; /* změněno na bílou pro lepší čitelnost na růžovém pozadí */
  --hero-height:70vh;
}
*{box-sizing:border-box}
body{
  font-family:Inter,system-ui,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
  margin:0;
  color:var(--muted);
  background:var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing:antialiased
}
.container{max-width:1000px;margin:0 auto;padding:0 20px}
.site-header{position:sticky;top:0;background:transparent;padding:18px 0}
.nav{display:flex;align-items:center;justify-content:space-between}
.logo{font-weight:700;color:#333;text-decoration:none;font-size:18px}
.nav-links{list-style:none;display:flex;gap:18px;margin:0;padding:0}
.nav-links a{text-decoration:none;color:rgba(0,0,0,0.6)}

.hero{position:relative;height:var(--hero-height);overflow:hidden;display:flex;align-items:center;justify-content:center}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(0.85) saturate(1.05)}
.hero-overlay{
    position:relative;
    z-index:3;
    text-align:center;
    color:white;
    padding:24px;
    animation: fadeInUp 1.2s ease-out;
}
.hero-title{
    font-size:clamp(28px,6vw,56px);
    margin:0 0 12px;
    text-shadow:0 6px 20px rgba(0,0,0,0.35);
    letter-spacing:0.6px;
    background: linear-gradient(120deg, #ffffff, #ffd6e7);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: shimmer 3s infinite;
}
.hero-bubble{
    display:inline-block;
    background:rgba(255,255,255,0.15);
    backdrop-filter:blur(10px);
    padding:12px 28px;
    border-radius:28px;
    color:#fff;
    font-weight:500;
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    transform: translateY(30px);
    animation: floatUp 0.8s ease-out forwards;
}
/* CTA button under hero */
.hero-cta-wrap{margin-top:18px}
.hero-cta{width:128px;height:128px;border-radius:50%;border:none;background:linear-gradient(135deg,#ff85b8,#ffb6d9);color:#fff;font-weight:700;cursor:pointer;box-shadow:0 10px 30px rgba(255,157,199,0.28);display:inline-flex;align-items:center;justify-content:center;font-size:16px;transform:translateY(30px) scale(.95);opacity:0;animation:cta-in 800ms cubic-bezier(.2,.9,.2,1) 350ms forwards}
.hero-cta:focus{outline:3px solid rgba(255,182,200,0.45)}
.hero-cta:hover{transform:translateY(0) scale(1.06);box-shadow:0 18px 40px rgba(255,132,188,0.36);filter:brightness(1.03)}

@keyframes cta-in{0%{opacity:0;transform:translateY(30px) scale(.95)}60%{opacity:1;transform:translateY(-8px) scale(1.02)}100%{opacity:1;transform:translateY(0) scale(1)}}

.bg-bubbles{position:absolute;inset:0;z-index:2;pointer-events:none}
.bubble{position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.28), rgba(255,255,255,0.02)),var(--accent);filter:blur(10px);opacity:0.9;transform:translate3d(0,0,0)}
.b1{width:320px;height:320px;left:8%;top:10%;opacity:0.55;animation:float 8s ease-in-out infinite}
.b2{width:200px;height:200px;right:6%;top:18%;opacity:0.45;animation:float 10s ease-in-out infinite;animation-delay:2s}
.b3{width:420px;height:420px;right:20%;bottom:-60px;opacity:0.22;animation:float 12s ease-in-out infinite;animation-delay:1s}
.b4{width:180px;height:180px;left:50%;bottom:10%;opacity:0.35;transform:translateX(-50%);animation:float 9s ease-in-out infinite;animation-delay:3s}

@keyframes float{
    0%{transform:translateY(0) translateX(0)}
    50%{transform:translateY(-18px) translateX(8px)}
    100%{transform:translateY(0) translateX(0)}
}

@keyframes shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes floatUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.intro{
    padding:48px 0;
    animation: fadeInUp 0.8s ease-out;
}
.intro h2{
    font-size:22px;
    margin:0 0 12px;
    color:#ffffff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.intro p{
    line-height:1.6;
    color:#fff;
    opacity: 0.9;
}

/* actions section */
.actions{padding:40px 0 80px}
.info-card{
    width:220px;
    height:90px;
    border-radius:20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    color:#fff;
    background:rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    cursor:default;
    transition:all 0.4s cubic-bezier(.2,.9,.2,1);
    box-shadow:0 10px 30px rgba(0,0,0,0.1);
    transform-origin:center center;
    border:1px solid rgba(255,255,255,0.2);
    position: relative;
    overflow: hidden;
}
.info-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.2),
        transparent
    );
    transition: 0.5s;
}
.info-card:hover::before {
    left: 100%;
}
.info-card:focus{outline:none;box-shadow:0 0 0 3px rgba(255,255,255,0.3)}
.info-card.active{
    transform: scale(1.05);
    box-shadow:0 15px 40px rgba(0,0,0,0.2);
}
/* loading pulse (only animation) */
.info-card{opacity:0;animation:card-in .7s cubic-bezier(.2,.9,.2,1) 250ms forwards}
@keyframes card-in{0%{opacity:0;transform:translateY(18px) scale(.98)}60%{opacity:1;transform:translateY(-8px) scale(1.02)}100%{opacity:1;transform:translateY(0) scale(1)}}
/* hover rocking / vrtění */
.info-card span{transition:none}
.highlights{
    margin-top:18px;
    list-style:none;
    padding-left:0;
    color:#fff;
    opacity:1;
    transform:none;
}
.highlights div{
    margin:8px 0;
    color:#ffffff;
    background:rgba(255,255,255,0.1);
    backdrop-filter: blur(5px);
    display:inline-block;
    padding:12px 20px;
    border-radius:12px;
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transform: translateY(20px);
    opacity: 0;
    animation: slideUp 0.6s ease-out forwards;
    animation-delay: calc(var(--i, 0) * 0.1s);
}
.message{
    margin-top:24px;
    color:#ffffff;
    font-style:italic;
    padding: 20px;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    transform: translateY(20px);
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards;
    animation-delay: 0.5s;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.site-footer{padding:28px 0;color:#6b616b;text-align:center}

/* actions image and layout */
.actions-grid{display:flex;align-items:center;gap:28px}
.actions-content{flex:1}
.actions-image{width:260px;display:flex;align-items:center;justify-content:center}
.glasses-image{max-width:100%;height:auto;border-radius:12px;opacity:0.95;filter:drop-shadow(0 8px 18px rgba(70,30,70,0.06))}
@media (max-width:720px){
  .nav-links{display:none}
  .hero{height:60vh}
  .b3{display:none}
  .actions-grid{flex-direction:column-reverse;gap:16px}
  .actions-image{width:100%}
}