: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);

}



* {

    box-sizing:border-box;
    margin:0;
    padding:0;

}



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;

}



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;

}



.primary {

    background:var(--dark);

    color:white;

}



.primary:hover {

    background:var(--gold-dark);

}





.hero-card {

    background:white;

    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:white;

    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 {

    color:var(--gray);

    max-width:700px;

    margin:20px auto;

}

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

.community-buttons .facebook{
    margin-top:0;
}


.facebook {

    display:inline-block;

    margin-top:20px;

    padding:15px 35px;

    border-radius:50px;

    background:#4267B2;

    color:white;

    text-decoration:none;

}





/* FEATURES */


.features {

    display:grid;

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

    gap:30px;

    margin:80px 0;

}



.feature-card {

    background:white;

    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;

}





/* VYBER 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:white;

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

    border-radius:25px;

    padding:30px;

    text-align:left;

    transition:.3s;

}



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

}



.type-card span {

    color:var(--gray);

    font-size:14px;

}





/* FIREMNA CAST */


.hidden-company {

    display:none;

}



.company-box {

    max-width:550px;

    margin:0 auto 25px;

    background:white;

    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;

}





.company-box input,
.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;

}



.company-box input: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 {

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    margin:10px auto 25px;

    color:var(--gray);

    font-size:14px;

}





.submit-btn {

    width:100%;

    max-width:550px;

    padding:18px;

    border:0;

    border-radius:50px;

    background:var(--dark);

    color:white;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

}



.submit-btn:hover {

    background:var(--gold-dark);

}





/* ALERTY */


.alert {

    padding:15px;

    border-radius:15px;

    margin-bottom:25px;

}



.success {

    background:#eaf7ea;

}



.error {

    background:#fdeaea;

}





footer {

    text-align:center;

    margin-top:70px;

    color:#999;

}





/* MOBIL */


@media(max-width:900px){


.page {

    padding:25px 15px 50px;

}


.hero {

    grid-template-columns:1fr;

    text-align:center;

}



.hero-card {

    padding:45px 25px;

}



.number {

    font-size:60px;

}



.features {

    grid-template-columns:1fr;

}



.choice {

    grid-template-columns:1fr;

}



.community,
.register {

    padding:35px 20px;

}



.community h2,
.register h2 {

    font-size:42px;

}


.logo {

    font-size:38px;

}


}