/* ==========================================================
   Birthcase Website
========================================================== */

:root{

    --primary:#f06292;
    --primary-light:#ffd6e5;
    --primary-dark:#d81b60;

    --background:#fffafc;
    --card:#ffffff;

    --text:#222;
    --text-light:#666;

    --shadow:0 20px 45px rgba(0,0,0,.08);

    --radius:22px;

}


*{

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

}


html{

    scroll-behavior:smooth;

}


body{

    font-family:Inter,sans-serif;

    color:var(--text);

    background:linear-gradient(#fff,#fffafc);

    line-height:1.7;

}


img{

    max-width:100%;

    display:block;

}


a{

    text-decoration:none;

    color:inherit;

}


button{

    font-family:inherit;

}


.container{

    width:min(1200px,92%);

    margin:auto;

}


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


header{

    position:sticky;

    top:0;

    backdrop-filter:blur(12px);

    background:rgba(255,255,255,.82);

    z-index:999;

    border-bottom:1px solid rgba(0,0,0,.04);

}


.nav{

    height:80px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}


.logo{

    display:flex;

    align-items:center;

    gap:14px;

    font-size:30px;

    font-weight:800;

}


.logo img{

    width:48px;

    height:48px;

    object-fit:contain;

}


nav{

    display:flex;

    align-items:center;

    gap:35px;

}


nav a{

    color:#555;

    transition:.25s;

}


nav a:hover{

    color:var(--primary);

}


.language{

    display:flex;

    align-items:center;

    gap:5px;

}


.language button{

    border:none;

    background:transparent;

    cursor:pointer;

    font-size:15px;

    font-weight:700;

    padding:8px 10px;

    border-radius:12px;

    transition:.25s;

}


.language button:hover{

    background:var(--primary-light);

}

/* ==========================================================
MOBILE MENU
========================================================== */


.menu-toggle{

    display:none;

    width:44px;
    height:44px;

    border:none;

    background:transparent;

    cursor:pointer;

    flex-direction:column;

    justify-content:center;

    gap:6px;

}


.menu-toggle span{

    width:26px;

    height:3px;

    background:#222;

    border-radius:10px;

    transition:.3s;

}



/* animation hamburger */

.menu-toggle.active span:nth-child(1){

    transform:translateY(9px) rotate(45deg);

}


.menu-toggle.active span:nth-child(2){

    opacity:0;

}


.menu-toggle.active span:nth-child(3){

    transform:translateY(-9px) rotate(-45deg);

}




@media(max-width:768px){


    .menu-toggle{

        display:flex;

    }


    nav#mobile-menu{

        position:absolute;

        top:80px;

        left:0;

        right:0;


        background:white;

        padding:25px;


        display:flex;

        flex-direction:column;

        align-items:center;

        gap:20px;


        box-shadow:0 20px 40px rgba(0,0,0,.12);


        opacity:0;

        pointer-events:none;

        transform:translateY(-20px);

        transition:.3s;

    }



    nav#mobile-menu.open{

        opacity:1;

        pointer-events:auto;

        transform:translateY(0);

    }



    nav#mobile-menu a{

        display:block;

        font-size:18px;

        font-weight:600;

    }


}


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


.hero{

    padding:100px 0;

    background:
        radial-gradient(circle at top left,#ffe3ec 0%,transparent 45%),
        radial-gradient(circle at bottom right,#ffd6e5 0%,transparent 40%),
        linear-gradient(#fff,#fff8fb);

}


.hero-content{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}


.badge{

    display:inline-block;

    background:var(--primary-light);

    color:var(--primary-dark);

    padding:10px 18px;

    border-radius:999px;

    font-size:.9rem;

    font-weight:600;

    margin-bottom:25px;

}


.hero h1{

    font-size:clamp(40px,5vw,64px);

    line-height:1.05;

    margin-bottom:25px;

}


.hero p{

    font-size:20px;

    color:var(--text-light);

    margin-bottom:40px;

}


.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}


.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 32px;

    border-radius:999px;

    font-weight:700;

    transition:.3s;

}


.primary{

    background:var(--primary);

    color:white;

}


.primary:hover{

    transform:translateY(-2px);

    box-shadow:0 15px 35px rgba(240,98,146,.35);

}


.secondary{

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

    color:var(--primary);

}


.secondary:hover{

    background:var(--primary-light);

}


.disabled{

    opacity:.7;

    cursor:not-allowed;

}


.privacy-note{

    margin-top:30px;

    color:#666;

    font-weight:600;

}


/* ==========================================================
PHONE SCREENSHOTS
========================================================== */


.hero-images{

    display:flex;

    justify-content:center;

    gap:40px;

    flex-wrap:wrap;

}


.phone{

    width:290px;

    padding:10px;

    background:#111;

    border-radius:42px;

    box-shadow:
        0 30px 60px rgba(0,0,0,.18),
        inset 0 0 0 2px #444;

    transition:.35s;

}


.phone img{

    width:100%;

    border-radius:32px;

}


.phone:first-child{

    transform:rotate(-6deg);

}


.phone:last-child{

    transform:rotate(6deg);

}


.phone:hover{

    transform:translateY(-12px) scale(1.03);

}


/* ==========================================================
SECTIONS
========================================================== */


.section{

    padding:100px 0;

}


.section h2{

    font-size:42px;

    text-align:center;

    margin-bottom:55px;

}


.cards{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:35px;

}


.card{

    background:white;

    padding:40px;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    transition:.3s;

}


.card:hover{

    transform:translateY(-8px);

}


.icon{

    width:70px;

    height:70px;

    background:var(--primary-light);

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    margin-bottom:25px;

}


.card h3{

    margin-bottom:15px;

    font-size:24px;

}


.card p{

    color:#666;

}


/* ==========================================================
HIGHLIGHT
========================================================== */


.highlight{

    padding:110px 0;

    background:linear-gradient(135deg,#ffdbe7,#fff5f8);

}


.highlight-text{

    max-width:850px;

    margin:auto;

    text-align:center;

}


.highlight h2{

    font-size:48px;

    margin-bottom:25px;

}


.highlight p{

    font-size:20px;

    margin-bottom:20px;

    color:#555;

}


.highlight ul{

    margin-top:35px;

    list-style:none;

}


.highlight li{

    margin:14px 0;

    font-size:20px;

}


/* ==========================================================
FAQ
========================================================== */


.faq{

    max-width:900px;

    margin:auto;

}


.faq-item{

    background:white;

    border-radius:18px;

    padding:28px;

    margin-bottom:22px;

    box-shadow:var(--shadow);

}


.faq-item h3{

    margin-bottom:10px;

}


/* ==========================================================
PRIVACY
========================================================== */


.center{

    text-align:center;

}


.privacy-buttons{

    margin-top:35px;

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}


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


footer{

    background:#222;

    color:white;

    padding:60px 0;

    margin-top:70px;

}


.footer{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:30px;

}


.footer h3{

    margin-bottom:12px;

}


.footer a{

    display:block;

    margin-bottom:10px;

    color:#ddd;

}


.footer a:hover{

    color:white;

}


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


@media(max-width:1000px){


    .hero-content{

        grid-template-columns:1fr;

        text-align:center;

    }


    .hero-buttons{

        justify-content:center;

    }


    .hero-images{

        margin-top:40px;

    }


}


@media(max-width:768px){


    .logo{

        font-size:24px;

    }


    .hero{

        padding:40px 0;

    }


    .hero p{

        font-size:18px;

    }


    .hero-images{

        flex-direction:column;

        align-items:center;

    }


    .phone{

        transform:none !important;

        width:260px;

    }


    .section{

        padding:70px 0;

    }


    .section h2{

        font-size:34px;

    }


    .highlight h2{

        font-size:36px;

    }


}