:root {
    --primary:#0b5ea8;
    --primary-dark:#083e6b;
    --accent:#1fb6c9;
    --bg:#f6f9fc;
    --text:#1f2933;
    --white:#fff;
}

*{box-sizing:border-box}
body{
    margin:0;
    font-family:'Titillium Web',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.6;
    overflow-x:hidden;
}

h1,h2,h3{
    font-family:'Titillium Web',sans-serif;
    font-weight:700;
    line-height:1.25;
    margin-top:0;
}

section{padding:3.5rem 1.25rem}
.container{max-width:1100px;margin:auto}

/* ANIMACE */
@keyframes fadeUp{
    from{opacity:0;transform:translateY(24px)}
    to{opacity:1;transform:none}
}
.animate{animation:fadeUp .8s ease forwards}

@keyframes wave{
    0%{transform:translateX(0)}
    100%{transform:translateX(-50%)}
}

@keyframes float{
    0%,100%{transform:translateY(0) scale(1)}
    50%{transform:translateY(-15px) scale(1.02)}
}

@keyframes rise{
    0%{bottom:-80px;opacity:0;transform:scale(0.5)}
    10%{opacity:0.8}
    90%{opacity:0.6}
    100%{bottom:110%;opacity:0;transform:scale(1)}
}

@keyframes pulse{
    0%,100%{box-shadow:0 0 0 0 rgba(31,182,201,0.5)}
    50%{box-shadow:0 0 0 12px rgba(31,182,201,0)}
}

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

@keyframes ripple{
    0%{transform:scale(1);opacity:0.4}
    100%{transform:scale(2.5);opacity:0}
}

@keyframes dropBounce{
    0%,20%,50%,80%,100%{transform:translateY(0)}
    40%{transform:translateY(-8px)}
    60%{transform:translateY(-4px)}
}

/* HERO */
.hero{
    position:relative;
    overflow:hidden;
    color:#fff;
    background:linear-gradient(160deg,var(--primary) 0%,var(--primary-dark) 50%,#052742 100%);
    min-height:520px;
    padding-bottom:100px;
}

/* Shimmer efekt na pozadí */
.hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,transparent 0%,rgba(31,182,201,0.08) 50%,transparent 100%);
    background-size:200% 100%;
    animation:shimmer 6s linear infinite;
}

/* CSS Animované vlny */
.waves-container{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:120px;
    overflow:hidden;
}

.wave{
    position:absolute;
    bottom:0;
    left:0;
    width:200%;
    height:100%;
    background-repeat:repeat-x;
    background-size:50% 100%;
}

.wave-1{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,50 Q300,90 600,50 T1200,50 L1200,120 L0,120 Z' fill='%23f6f9fc'/%3E%3C/svg%3E");
    animation:wave 25s linear infinite;
    z-index:3;
}

.wave-2{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,60 Q300,20 600,60 T1200,60 L1200,120 L0,120 Z' fill='%231fb6c9' fill-opacity='0.5'/%3E%3C/svg%3E");
    animation:wave 18s linear reverse infinite;
    bottom:5px;
    z-index:2;
}

.wave-3{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,70 Q300,30 600,70 T1200,70 L1200,120 L0,120 Z' fill='%23ffffff' fill-opacity='0.25'/%3E%3C/svg%3E");
    animation:wave 22s linear infinite;
    bottom:10px;
    z-index:1;
}

/* Plovoucí bubliny */
.bubbles{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}

.bubble{
    position:absolute;
    bottom:-80px;
    background:radial-gradient(circle at 30% 30%,rgba(255,255,255,0.9),rgba(255,255,255,0.1) 70%);
    border-radius:50%;
    border:1px solid rgba(255,255,255,0.3);
    animation:rise linear infinite;
}

.bubble:nth-child(1){left:8%;width:22px;height:22px;animation-duration:9s;animation-delay:0s}
.bubble:nth-child(2){left:20%;width:35px;height:35px;animation-duration:14s;animation-delay:2s}
.bubble:nth-child(3){left:35%;width:14px;height:14px;animation-duration:7s;animation-delay:1s}
.bubble:nth-child(4){left:50%;width:28px;height:28px;animation-duration:11s;animation-delay:3.5s}
.bubble:nth-child(5){left:65%;width:18px;height:18px;animation-duration:8s;animation-delay:0.5s}
.bubble:nth-child(6){left:80%;width:32px;height:32px;animation-duration:13s;animation-delay:4s}
.bubble:nth-child(7){left:12%;width:10px;height:10px;animation-duration:6s;animation-delay:2.5s}
.bubble:nth-child(8){left:55%;width:24px;height:24px;animation-duration:15s;animation-delay:1.5s}
.bubble:nth-child(9){left:90%;width:16px;height:16px;animation-duration:10s;animation-delay:5s}
.bubble:nth-child(10){left:42%;width:12px;height:12px;animation-duration:8s;animation-delay:3s}

.hero-content{
    position:relative;
    display:grid;
    gap:2rem;
    z-index:10;
}

/* Velká kapka vody - SVG ilustrace */
.hero-visual{
    display:none;
    justify-content:center;
    align-items:center;
    padding:2rem;
}

.water-drop-large{
    width:140px;
    height:180px;
    animation:float 4s ease-in-out infinite;
    filter:drop-shadow(0 15px 30px rgba(0,0,0,0.3));
    position:relative;
}

.water-drop-large::after{
    content:"";
    position:absolute;
    bottom:-15px;
    left:50%;
    transform:translateX(-50%);
    width:70px;
    height:15px;
    background:radial-gradient(ellipse,rgba(0,0,0,0.2),transparent 70%);
    border-radius:50%;
    animation:float 4s ease-in-out infinite reverse;
}

/* LOGO */
.logo{
    width:260px;
    filter:drop-shadow(0 4px 15px rgba(0,0,0,0.2));
}

/* CTA tlačítko */
.cta{
    display:inline-block;
    margin-top:1.5rem;
    padding:.9rem 2.2rem;
    background:linear-gradient(135deg,var(--accent),#14a0b2);
    color:#fff;
    border-radius:50px;
    font-weight:600;
    text-decoration:none;
    transition:all .3s cubic-bezier(0.4,0,0.2,1);
    animation:pulse 2.5s ease-in-out infinite;
    position:relative;
    overflow:hidden;
}

.cta::before{
    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);
    transition:left .5s ease;
}

.cta:hover{
    transform:translateY(-3px) scale(1.05);
    box-shadow:0 15px 40px rgba(31,182,201,0.45);
    animation:none;
}

.cta:hover::before{
    left:100%;
}

/* SLUŽBY */
.services{
    position:relative;
    overflow:hidden;
}

/* Dekorativní kapky v pozadí */
.services::before,
.services::after{
    content:"";
    position:absolute;
    border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
    opacity:0.06;
    background:var(--primary);
}

.services::before{
    width:300px;
    height:350px;
    top:-100px;
    right:-80px;
    transform:rotate(15deg);
}

.services::after{
    width:200px;
    height:240px;
    bottom:-60px;
    left:-50px;
    transform:rotate(-20deg);
}

.services-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:1.5rem;
    position:relative;
    z-index:1;
}

.service-card{
    background:linear-gradient(145deg,#ffffff,#f8fafc);
    padding:2rem;
    border-radius:20px;
    box-shadow:0 10px 40px rgba(0,0,0,.05);
    transition:all .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position:relative;
    overflow:hidden;
    border:1px solid rgba(11,94,168,0.08);
}

.service-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:4px;
    background:linear-gradient(90deg,var(--primary),var(--accent));
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .4s ease;
}

.service-card::after{
    content:"";
    position:absolute;
    width:150px;
    height:150px;
    background:radial-gradient(circle,var(--accent) 0%,transparent 70%);
    opacity:0;
    bottom:-75px;
    right:-75px;
    transition:all .4s ease;
}

.service-card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 60px rgba(11,94,168,0.15);
    border-color:rgba(31,182,201,0.2);
}

.service-card:hover::before{
    transform:scaleX(1);
}

.service-card:hover::after{
    opacity:0.1;
    bottom:-50px;
    right:-50px;
}

.service-icon{
    font-size:2.2rem;
    margin-bottom:.75rem;
    line-height:1;
    display:inline-block;
}

.service-card h3{
    color:var(--primary-dark);
    margin-bottom:.5rem;
}

.service-card p{
    color:#5a6977;
    margin:0;
}

/* KONTAKT */
.contact{
    position:relative;
}

.contact-box{
    background:linear-gradient(145deg,var(--primary-dark) 0%,#042035 100%);
    color:#fff;
    border-radius:24px;
    padding:2.5rem;
    position:relative;
    overflow:hidden;
    box-shadow:0 30px 70px rgba(8,62,107,0.35);
}

/* Světelné efekty v kontaktu */
.contact-box::before{
    content:"";
    position:absolute;
    width:400px;
    height:400px;
    background:radial-gradient(circle,rgba(31,182,201,0.15) 0%,transparent 60%);
    top:-200px;
    right:-100px;
    pointer-events:none;
}

.contact-box::after{
    content:"";
    position:absolute;
    width:250px;
    height:250px;
    background:radial-gradient(circle,rgba(31,182,201,0.1) 0%,transparent 60%);
    bottom:-100px;
    left:-50px;
    pointer-events:none;
}

.contact-box>*{position:relative;z-index:1}

.contact-box h2{
    display:flex;
    align-items:center;
    gap:.5rem;
}

.contact-box a{
    color:var(--accent);
    font-weight:600;
    text-decoration:none;
    transition:all .3s ease;
    position:relative;
}

.contact-box a::after{
    content:"";
    position:absolute;
    bottom:-2px;
    left:0;
    width:0;
    height:2px;
    background:var(--accent);
    transition:width .3s ease;
}

.contact-box a:hover{
    color:#fff;
    text-shadow:0 0 15px rgba(31,182,201,0.6);
}

.contact-box a:hover::after{
    width:100%;
}

footer{
    text-align:center;
    font-size:.85rem;
    color:#6b7280;
    padding:2rem;
    background:linear-gradient(180deg,var(--bg) 0%,#e4ecf4 100%);
}

/* Mapa */
.map-container{
    margin-top:2rem;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,0.2);
}

.map-container iframe{
    width:100%;
    height:250px;
    border:none;
    display:block;
}

/* RESPONSIVE */
@media(min-width:768px){
    .hero h1{font-size:2.6rem}
    .services-grid{grid-template-columns:repeat(2,1fr)}
    .map-container iframe{height:300px}
}

@media(min-width:1024px){
    .hero-content{grid-template-columns:1fr 1fr;align-items:center}
    .services-grid{grid-template-columns:repeat(3,1fr)}
    .hero-visual{display:flex}
    .water-drop-large{width:160px;height:200px}
}