:root{

    --gold:#c9a66b;
    --gold-dark:#a98245;

    --cream:#faf7f1;
    --white:#ffffff;

    --dark:#292522;
    --gray:#716b65;

    --border:#eadfce;

    --shadow:0 25px 70px rgba(42,32,20,.08);

}


/* ===================================================
RESET
=================================================== */

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


html{
    scroll-behavior:smooth;
}


body{

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

    background:
    linear-gradient(135deg,#fffaf4,#ffffff);

    color:var(--dark);

    line-height:1.7;

}



.page{

    max-width:1200px;

    margin:auto;

    padding:35px 30px 70px;

}



/* ===================================================
HEADER
=================================================== */


.top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:70px;

}



.logo{

    font-family:'Cormorant Garamond',serif;

    font-size:48px;

    font-weight:500;

}


.logo span{

    color:var(--gold);

}



nav a{

    margin-left:20px;

    text-decoration:none;

    color:#aaa;

    font-weight:600;

    transition:.25s;

}


nav a:hover,
nav .active{

    color:var(--gold);

}



/* ===================================================
HERO
=================================================== */


.hero{

    display:grid;

    grid-template-columns:1.2fr .8fr;

    gap:60px;

    align-items:center;

    min-height:550px;

}



.small-title{

    color:var(--gold);

    font-size:13px;

    letter-spacing:3px;

    text-transform:uppercase;

    font-weight:600;

    margin-bottom:25px;

}



.hero h1{

    font-family:'Cormorant Garamond',serif;

    font-size:clamp(48px,6vw,78px);

    line-height:1;

    font-weight:500;

    margin-bottom:30px;

}



.hero-text{

    color:var(--gray);

    font-size:18px;

    max-width:580px;

    margin-bottom:35px;

}



.btn{

    display:inline-block;

    padding:16px 40px;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}



.primary{

    background:var(--dark);

    color:#fff;

}



.primary:hover{

    background:var(--gold-dark);

}



.hero-card{

    background:#fff;

    border-radius:35px;

    padding:70px 40px;

    text-align:center;

    box-shadow:var(--shadow);

}



.number{

    font-family:'Cormorant Garamond',serif;

    font-size:80px;

    color:var(--gold);

}



/* ===================================================
COMMUNITY
=================================================== */


.community{

    background:#fff;

    margin-top:80px;

    padding:60px;

    border-radius:35px;

    text-align:center;

    box-shadow:var(--shadow);

}



.community h2,
.register h2{

    font-family:'Cormorant Garamond',serif;

    font-size:55px;

    font-weight:500;

}



.community p{

    max-width:700px;

    margin:20px auto;

    color:var(--gray);

}



.community-count{

    margin-top:20px;

    text-align:center;

    color:var(--gray);

    font-size:15px;

    line-height:1.8;

    font-weight:500;

}



.community-buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:15px;

    flex-wrap:wrap;

    margin-top:30px;

}



.facebook{

    display:inline-block;

    padding:15px 35px;

    border-radius:50px;

    background:#4267B2;

    color:#fff;

    text-decoration:none;

    transition:.3s;

}


.facebook:hover{

    opacity:.9;

}

/* ===================================================
FEATURES
=================================================== */


.features{

    display:grid;

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

    gap:30px;

    margin:80px 0;

}



.feature-card{

    background:#fff;

    padding:40px;

    border-radius:28px;

    border:1px solid var(--border);

    transition:.3s;

}



.feature-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}



.feature-card h3{

    font-family:'Cormorant Garamond',serif;

    font-size:34px;

    margin-bottom:15px;

}



.feature-card p{

    color:var(--gray);

}



/* ===================================================
REGISTRÁCIA
=================================================== */


.register{

    background:var(--cream);

    padding:60px;

    border-radius:35px;

    text-align:center;

}



.register > p{

    color:var(--gray);

    margin-bottom:30px;

}



/* ===================================================
VÝBER TYPU
=================================================== */


.choice{

    display:grid;

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

    gap:20px;

    max-width:750px;

    margin:0 auto 35px;

}



.type-card{

    cursor:pointer;

}



.type-card input{

    display:none;

}



.type-card div{

    background:#fff;

    border:1px solid var(--border);

    border-radius:25px;

    padding:30px;

    text-align:left;

    transition:.3s;

    height:100%;

}



.type-card:hover div{

    border-color:var(--gold);

    transform:translateY(-5px);

}



.type-card input:checked + div{

    background:#fff8eb;

    border:2px solid var(--gold);

}



.type-card strong{

    display:block;

    font-size:19px;

    margin-bottom:6px;

}



.type-card span{

    color:var(--gray);

    font-size:14px;

}



/* ===================================================
FIREMNÝ FORMULÁR
=================================================== */


.company-box{

    max-width:550px;

    margin:0 auto 25px;

    background:#fff;

    padding:40px;

    border-radius:30px;

    box-shadow:var(--shadow);

}



.company-box h3{

    font-family:'Cormorant Garamond',serif;

    font-size:38px;

    margin-bottom:10px;

}



.company-box p{

    color:var(--gray);

    margin-bottom:25px;

}



/* ===================================================
INPUTY
=================================================== */


.company-box input:not([type="checkbox"]),
.company-box select,
.email-input{

    width:100%;

    padding:17px 20px;

    margin-bottom:15px;

    border-radius:16px;

    border:1px solid var(--border);

    font-size:16px;

    font-family:inherit;

    background:#fff;

}



.company-box input:not([type="checkbox"]):focus,
.company-box select:focus,
.email-input:focus{

    outline:none;

    border-color:var(--gold);

    box-shadow:0 0 0 4px rgba(201,166,107,.15);

}



.email-input{

    max-width:550px;

}

 /* ===================================================
GDPR
=================================================== */


.gdpr{

    display:flex;

    align-items:flex-start;

    gap:10px;

    width:100%;

    max-width:550px;

    margin:15px auto 25px;

    color:var(--gray);

    font-size:14px;

    line-height:1.5;

    text-align:left;

    cursor:pointer;

}



.gdpr input[type="checkbox"]{

    width:18px;

    height:18px;

    margin-top:2px;

    flex:0 0 auto;

    padding:0;

}



/* ===================================================
TLAČIDLO
=================================================== */


.submit-btn{

    width:100%;

    max-width:550px;

    padding:18px;

    border:0;

    border-radius:50px;

    background:var(--dark);

    color:#fff;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}



.submit-btn:hover{

    background:var(--gold-dark);

}



/* ===================================================
ALERTY
=================================================== */


.alert{

    padding:15px;

    border-radius:15px;

    margin-bottom:25px;

}



.success{

    background:#eaf7ea;

}



.error{

    background:#fdeaea;

}



/* ===================================================
ROLE NEVESTA / ŽENÍCH
=================================================== */


.role-box{

    max-width:520px;

    margin:0 auto 35px;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}



.role-box h3{

    font-family:'Cormorant Garamond',serif;

    font-size:34px;

    font-weight:500;

    margin-bottom:25px;

    text-align:center;

}



.role-box input{

    display:none;

}



.role-box label{

    display:flex;

    align-items:center;

    justify-content:center;

    width:80%;

    margin:6px 0;

    padding:20px;

    background:#fff;

    border:1px solid var(--border);

    border-radius:22px;

    cursor:pointer;

    color:var(--gray);

    transition:.3s;

    text-align:center;

}



.role-box label:hover{

    border-color:var(--gold);

    transform:translateY(-3px);

}



.role-box label:has(input:checked){

    background:#fff8eb;

    border:2px solid var(--gold);

    color:var(--dark);

    box-shadow:0 10px 30px rgba(201,166,107,.15);

}



/* ===================================================
SEO SECTION
=================================================== */


.seo-section{

    background:#fff;

    margin-top:80px;

    padding:60px;

    border-radius:35px;

    box-shadow:var(--shadow);

    text-align:center;

}



.seo-section h2{

    font-family:'Cormorant Garamond',serif;

    font-size:55px;

    font-weight:500;

    margin-bottom:30px;

}



.seo-section p{

    max-width:850px;

    margin:0 auto 25px;

    color:var(--gray);

    font-size:18px;

    line-height:1.8;

}



.seo-section strong{

    color:var(--dark);

}

 /* ===================================================
SEO KARTY
=================================================== */


.seo-boxes{

    display:grid;

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

    gap:25px;

    margin:50px 0;

}



.seo-card{

    background:#fffaf4;

    border:1px solid var(--border);

    border-radius:28px;

    padding:35px 25px;

    transition:.3s;

}



.seo-card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow);

}



.seo-card span{

    display:block;

    font-size:38px;

    margin-bottom:15px;

}



.seo-card h3{

    font-family:'Cormorant Garamond',serif;

    font-size:32px;

    margin-bottom:15px;

}



.seo-card p{

    font-size:16px;

    margin:0;

    color:var(--gray);

}



/* ===================================================
FOOTER SEO TEXT
=================================================== */


.footer-seo{

    max-width:850px;

    margin:20px auto 0;

    font-size:14px;

    line-height:1.7;

    color:#999;

    text-align:center;

}



/* ===================================================
FOOTER
=================================================== */


footer{

    margin-top:70px;

    text-align:center;

    color:#999;

}



/* ===================================================
RESPONSIVE TABLET
=================================================== */


@media(max-width:900px){


    .page{

        padding:25px 15px 50px;

    }



    .top{

        flex-direction:column;

        gap:20px;

        text-align:center;

    }



    .logo{

        font-size:38px;

    }



    .hero{

        grid-template-columns:1fr;

        text-align:center;

        gap:40px;

        min-height:auto;

    }



    .hero h1{

        font-size:clamp(42px,10vw,60px);

    }



    .hero-text{

        margin:0 auto 35px;

    }



    .hero-card{

        padding:45px 25px;

    }



    .number{

        font-size:60px;

    }



    .community,
    .register{

        padding:35px 20px;

    }



    .community h2,
    .register h2{

        font-size:42px;

    }



    .features{

        grid-template-columns:1fr;

    }



    .choice{

        grid-template-columns:1fr;

    }



    .company-box{

        padding:30px 25px;

    }



    .seo-section{

        padding:35px 20px;

        margin-top:50px;

    }



    .seo-section h2{

        font-size:42px;

    }



    .seo-section p{

        font-size:16px;

    }



    .seo-boxes{

        grid-template-columns:1fr;

        gap:20px;

        margin:35px 0;

    }



    .seo-card{

        padding:30px 20px;

    }


}

 /* ===================================================
RESPONSIVE MOBIL
=================================================== */


@media(max-width:600px){


    .page{

        padding:20px 12px 40px;

    }



    .logo{

        font-size:34px;

    }



    .hero h1{

        font-size:40px;

    }



    .hero-text{

        font-size:16px;

    }



    .community h2,
    .register h2{

        font-size:36px;

    }



    .feature-card{

        padding:30px 22px;

    }



    .company-box{

        padding:25px 18px;

    }



    .company-box h3{

        font-size:32px;

    }



    .company-box input:not([type="checkbox"]),
    .company-box select,
    .email-input{

        font-size:16px;

    }



    .submit-btn{

        font-size:16px;

    }



    /* ROLE */


    .role-box{

        display:flex;

        flex-direction:column;

        align-items:center;

    }



    .role-box label{

        width:100%;

        max-width:420px;

        margin:6px 0;

        justify-content:center;

        text-align:center;

    }



    /* GDPR */


    .gdpr{

        width:100%;

        max-width:100%;

        justify-content:flex-start;

        align-items:flex-start;

        text-align:left;

        gap:10px;

    }



    .gdpr input[type="checkbox"]{

        margin-top:2px;

        flex-shrink:0;

    }



    /* SEO */


    .seo-section{

        padding:30px 15px;

        border-radius:25px;

    }



    .seo-section h2{

        font-size:36px;

    }



    .seo-card h3{

        font-size:28px;

    }



    .seo-card span{

        font-size:32px;

    }


}