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

   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;

    height: 1px;

    background-size: cover;

    background-position: center;

}



.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; }

}



.hero::before {

    content: "";

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    height: 180px;

    background: linear-gradient(to bottom, transparent, #02101f);

}



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

   LOGO + HASHTAG

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



.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;

    z-index: 5;

}



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

   HERO TEXT

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



.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;

}



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

   CTA BUTTON

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



.status-button {

    margin-top: 45px;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    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;

    backdrop-filter: blur(10px);

    transition: .3s;

}



.status-button:hover {

    transform: translateY(-3px);

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

}



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

   CONTACT CARD

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



.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;

}



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

   FEATURES + NEW SECTIONS

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



.features,

.faq {

    max-width: 1500px;

    margin: 90px auto 0;

    padding: 0 60px;

}



.section-title {

    text-align: center;

    margin-bottom: 50px;

}



.section-title h3 {

    font-size: 44px;

    font-weight: 700;

}



.small-line {

    width: 55px;

    height: 4px;

    background: var(--blue);

    margin: 20px auto;

}



.feature {

    background: rgba(7, 24, 50, 0.35);

    border: 1px solid rgba(88, 140, 255, 0.15);

    border-radius: 20px;

    padding: 30px;

    transition: .3s;

}



.feature:hover {

    transform: translateY(-6px);

    border-color: rgba(88,140,255,.4);

}



/* grid */

.features {

    display: grid;

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

    gap: 25px;

}



/* FAQ */

.faq-item {

    background: rgba(7, 24, 50, 0.45);

    border: 1px solid rgba(88, 140, 255, 0.15);

    border-radius: 18px;

    padding: 25px;

    margin-bottom: 15px;

    transition: .3s;

}



.faq-item:hover {

    transform: translateY(-3px);

    border-color: rgba(88,140,255,.4);

}



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

   MAIL BUTTON

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



.mail-button {

    display: inline-flex;

    justify-content: center;

    margin-top: 30px;

    padding: 16px 30px;

    border-radius: 40px;

    background: linear-gradient(90deg,#0099ff,#0fbcff);

    color: white;

    text-decoration: none;

    font-weight: 600;

}







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

   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;



}







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

   RESPONSIVE

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



@media (max-width: 1000px) {

    .hero-content { width: auto; margin: 0 30px; }

    .features { grid-template-columns: 1fr 1fr; }

    .card { flex-direction: column; }

}



@media (max-width: 600px) {

    .hero h1 { font-size: 44px; }

    .features { grid-template-columns: 1fr; }

    .hashtag {display:none;}

}