/* ======================

   ZÁKLAD

====================== */



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}





:root {



    --blue: #1497ff;

    --light-blue: #38b6ff;

    --dark: #020b18;

    --card: rgba(7, 24, 50, 0.65);

    --border: rgba(88, 140, 255, 0.25);

    --text: #ffffff;

    --text-soft: #d3d9e8;



}





html {

    scroll-behavior: smooth;

}





body {



    font-family: "Inter", sans-serif;

    background:

        linear-gradient(

            180deg,

            #001326 0%,

            #02182e 40%,

            #020915 100%

        );



    color: var(--text);

    overflow-x: hidden;

}







/* ======================

   HERO

====================== */





.hero {



    position: relative;

    min-height: 850px;



    background:

        linear-gradient(

        90deg,

        rgba(0,0,0,0.78) 5%,

        rgba(0,15,35,0.65) 35%,

        rgba(0,0,0,0.15) 80%

        ),

        url(hero.jpg);



    background-size: cover;

    background-position: center;

}





.overlay {



    position: absolute;

    inset: 0;



    background:

        radial-gradient(

            circle at top,

            rgba(70,170,255,.35),

            transparent 45%

        );

}





/* ======================

   HORNÍ LIŠTA

====================== */





.logo {



    position: absolute;



    top: 40px;

    left: 60px;



    z-index: 5;

}





.logo img {



    width: 230px;



}





.hashtag {



    position: absolute;



    right: 60px;

    top: 55px;



    color: #d6e5ff;



    font-size: 20px;



    font-weight: 400;



    z-index: 5;

}





/* ======================

   TEXT HERO

====================== */





.hero-content {



    position: relative;



    z-index: 5;



    width: 640px;



    padding-top: 180px;

    margin-left: 60px;



}





.hero h1 {



    font-size: 82px;



    font-weight: 800;



    letter-spacing: -3px;



    line-height: .95;

}







.line {



    width: 70px;

    height: 4px;



    background: var(--blue);



    border-radius: 10px;



    margin: 30px 0;



    box-shadow:

        0 0 20px var(--blue);



}







.hero h2 {



    font-size: 34px;



    line-height: 1.25;



    font-weight: 700;



}





.hero h2 span {



    color: var(--blue);



}







.hero p {





    margin-top: 30px;



    color: var(--text-soft);



    font-size: 22px;



    line-height: 1.7;



    max-width: 600px;

}







/* ======================

   TLAČÍTKO

====================== */





.status-button {



    margin-top: 45px;



    display: inline-flex;



    align-items: center;



    gap: 12px;



    max-width: 250px;



    padding: 18px 32px;





    border-radius: 40px;





    background:

        rgba(18, 40, 70, .75);





    border:

        1px solid rgba(255,255,255,.25);





    color: white;





    text-decoration: none;



    font-size: 20px;



    font-weight: 500;





    backdrop-filter: blur(10px);





    box-shadow:

        0 8px 30px rgba(0,0,0,.35);



    transition: .3s;



}







.status-button:hover {



    transform:

        translateY(0px);



    background:

        rgba(20,151,255,.35);



}







/* ======================

   KONTAKTNÍ KARTA

====================== */





.contact {



    margin-top: -90px;



    position: relative;



    z-index: 10;



    padding: 0 40px;



}





.card {





    max-width: 1500px;



    margin: auto;





    background:

        var(--card);





    border:

        1px solid var(--border);





    border-radius: 35px;





    backdrop-filter:

        blur(25px);





    box-shadow:

        0 20px 50px rgba(0,0,0,.55);





    display: flex;





    padding:

        55px 70px;





    gap: 40px;





}





.column {



    flex: 1;



    display: flex;



    gap: 35px;



}





.circle-icon {





    width: 130px;

    height: 130px;





    flex-shrink: 0;





    border-radius: 50%;





    border:

        1px solid rgba(60,140,255,.45);





    background:

        radial-gradient(

            circle,

            rgba(30,80,160,.25),

            transparent 70%

        );





    box-shadow:

        0 0 35px rgba(20,151,255,.35);



}





.divider {



    width: 1px;



    background:

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



}







/* ======================

   TEXT KARTY

====================== */





.card h3 {



    font-size: 42px;



    margin-bottom: 18px;



}





.small-line {



    width: 55px;



    height: 4px;



    background: var(--blue);



    border-radius: 20px;



    margin-bottom: 30px;



}





.card p {



    color: var(--text-soft);



    font-size: 22px;



    line-height: 1.65;



}





.highlight {



    margin-top: 30px;



    color: var(--blue) !important;



}













/* ======================

   EMAIL TLAČÍTKO

====================== */



.mail-button {



    display: inline-flex;



    align-items: center;



    justify-content: center;



    margin-top: 35px;



    padding: 18px 40px;



    max-width: 250px;



    border-radius: 50px;



    background: linear-gradient(

        90deg,

        #0099ff,

        #0fbcff

    );



    color: white;



    text-decoration: none;



    font-size: 22px;



    font-weight: 600;



    box-shadow:

        0 10px 35px rgba(0,150,255,.5);



    transition: .3s;

}





.mail-button:hover {



    transform: translateY(0px);



    box-shadow:

        0 15px 40px rgba(0,150,255,.8);



}





/* ======================

   VLASTNOSTI

====================== */





.features {



    max-width: 1500px;



    margin: 70px auto 0;



    display: grid;



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



    padding: 0 60px;



}





.feature {



    text-align: center;



    padding: 25px 35px;



    position: relative;



}





.feature:not(:last-child)::after {



    content: "";



    position: absolute;



    right: 0;



    top: 15px;



    width: 1px;



    height: 150px;



    background:

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



}





/* KULATÉ IKONY */



.feature-icon {



    width: 70px;



    height: 70px;



    margin: 0 auto 25px;



    opacity: .9;



    background-size: contain;



    background-repeat: no-repeat;



    background-position: center;



}





/* konkrétní SVG se vloží v části 4 */

.feature:nth-child(1) .feature-icon {

    background-image: url("icons/community.svg");

}



.feature:nth-child(2) .feature-icon {

    background-image: url("icons/mask.svg");

}



.feature:nth-child(3) .feature-icon {

    background-image: url("icons/globe.svg");

}



.feature:nth-child(4) .feature-icon {

    background-image: url("icons/shield.svg");

}





.feature h4 {



    font-size: 28px;



    font-weight: 600;



    margin-bottom: 18px;



}





.feature p {



    color: #c7d2e4;



    font-size: 22px;



    line-height: 1.55;



}







/* ======================

   VLNA + SPODNÍ ČÁST

====================== */





.wave-section {



    position: relative;



    margin-top: 80px;



    padding-top: 0px;



    padding-bottom: 30px;



    text-align: center;



    background: #031225;



    overflow: hidden;



}









/* Logo uprostřed */



.center-logo {



    position: absolute;



    top: -30px;



    left: 50%;



    transform: translateX(-50%);



    width: 120px;



    height: 120px;



    border-radius: 50%;



    background:

        rgba(10,30,60,.9);



    border:

        3px solid #bfe7ff;



    display: flex;



    align-items: center;



    justify-content: center;



    box-shadow:

        0 0 35px #42bfff;



}





.center-logo img {



    width: 70px;



}





/* Citace */



.quote {



    font-size: 54px;



    font-weight: 700;



    line-height: 1.25;



}





.quote span {



    color: #1497ff;



}





/* Sociální sítě */



.socials {



    margin-top: 50px;



    display: flex;



    justify-content: center;



    gap: 40px;



}





.socials a {



    width: 55px;



    height: 55px;



    border-radius: 50%;



    background:

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



    color: white;



    text-decoration: none;



    display: flex;



    align-items: center;



    justify-content: center;



    backdrop-filter: blur(8px);



    transition: .3s;



}





.socials a:hover {



    background: #1497ff;



    transform: translateY(-5px);



}





/* Patička */



footer {



    margin-top: 45px;



    color: #8894aa;



    font-size: 18px;



}















/* SVG ikony */



.svg-icon {



    width: 60px;

    height: 60px;



    stroke: #1497ff;

    stroke-width: 2;



    fill: none;



    filter:

        drop-shadow(

            0 0 8px #1497ff

        );

}





.circle-icon {



    display:flex;



    align-items:center;



    justify-content:center;

}







/* Ikony funkcí */



.feature-icon {



    font-size:60px;



    color:#1497ff;



    text-shadow:

        0 0 20px #1497ff;

}







/* Sociální ikony */



.socials a {



    font-size:0;

}





.socials a:nth-child(1)::before {



    content:"f";

    font-size:28px;

    font-weight:700;

}





.socials a:nth-child(2)::before {



    content:"◎";

    font-size:26px;

}





.socials a:nth-child(3)::before {



    content:"✉";

    font-size:24px;

}







/* Animace světla */



.hero::after {



    content:"";



    position:absolute;



    top:0;

    left:45%;



    width:250px;

    height:600px;



    background:

    radial-gradient(

        ellipse at top,

        rgba(255,255,255,.45),

        transparent 70%

    );



    filter:blur(25px);



    animation:

        lightMove 8s ease-in-out infinite;



}





@keyframes lightMove {



    0% {

        transform:translateX(-30px);

        opacity:.5;

    }



    50% {

        transform:translateX(30px);

        opacity:.9;

    }



    100% {

        transform:translateX(-30px);

        opacity:.5;

    }



}







/* RESPONZIVITA */



@media(max-width:1000px){





.hero-content {



width:auto;



margin:0 30px;



padding-top:140px;



}





.hero h1 {



font-size:56px;



}





.hero h2 {



font-size:28px;



}





.hero p,

.card p,

.feature p {



font-size:18px;



}





.card {



flex-direction:column;



padding:40px;



}





.divider {



width:100%;

height:1px;



}





.features {



grid-template-columns:1fr 1fr;



row-gap:50px;



}





.feature::after {



display:none;



}





.quote {



font-size:38px;



}





}





@media(max-width:600px){





.logo {



left:25px;

top:25px;



}





.logo img {



width:160px;



}





.hashtag {



display:none;



}





.hero {



min-height:700px;



}





.hero h1 {



font-size:44px;



}





.hero h2 {



font-size:24px;



}





.features {



grid-template-columns:1fr;



}





.column {



flex-direction:column;



align-items:center;



text-align:center;



}





.mail-button {



min-width:auto;



width:100%;



}





.quote {



font-size:28px;



}



}