/* =====================================================
   KENALI DIA LANDING PAGE
   STYLE.CSS v2.0
   Romantic Premium Theme
===================================================== */

:root{
    --primary:#C56A73;
    --primary-hover:#B65A64;
    --text:#2F2A2D;
    --text-light:#6F6768;
    --bg:#FFF8F6;
    --bg-soft:#FDF3F4;
    --card:#FFFFFF;
    --border:#F0E5E6;
    --radius:24px;
    --shadow:0 12px 40px rgba(0,0,0,.06);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    font-family:"Inter",sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.8;
    -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}

.container{max-width:1180px;margin:auto;padding:0 24px}

h1,h2,h3{
    font-family:"DM Serif Display",serif;
    font-weight:400;
    color:var(--text);
}
h1{font-size:64px;line-height:1.08}
h2{font-size:46px;line-height:1.2;margin-bottom:18px}
h3{font-size:28px;margin-bottom:16px}
p{font-size:18px;color:var(--text-light)}

section{padding:100px 0}

.section-label{
    display:inline-block;
    background:#F8E8EA;
    color:var(--primary);
    padding:10px 22px;
    border-radius:999px;
    font-weight:600;
    margin-bottom:24px;
}

.section-intro{
    max-width:760px;
    margin:0 auto;
}

.btn-primary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:var(--primary);
    color:#fff;
    padding:18px 36px;
    border-radius:999px;
    font-weight:600;
    transition:.25s;
    box-shadow:0 10px 30px rgba(197,106,115,.25);
}
.btn-primary:hover{
    background:var(--primary-hover);
    transform:translateY(-2px);
}

/* HERO */

#hero{
    padding:40px 0 90px;
    text-align:center;
}

.hero-label{
    display:inline-block;
    background:#F8E8EA;
    color:var(--primary);
    padding:10px 20px;
    border-radius:999px;
    font-weight:600;
    margin-bottom:28px;
}

#hero h1{
    max-width:900px;
    margin:0 auto 28px;
}

.hero-description{
    max-width:760px;
    margin:0 auto 22px;
}

.hero-tagline{
    color:var(--text);
    font-weight:600;
    margin-top:12px;
}

.hero-action{margin-top:48px}
.hero-note{font-size:15px;color:#8b8b8b;margin-top:16px}

/* Shared Cards */

.problem-grid,
.solution-content,
.benefit-grid,
.preview-gallery,
.target-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-top:60px;
}

.problem-card,
.solution-item,
.benefit-item,
.preview-item,
.target-item,
.pricing-card{
    background:#fff;
    border-radius:24px;
    box-shadow:var(--shadow);
    padding:36px;
}

#problem,#benefit,#target-user,#form{
    background:var(--bg-soft);
}

#problem,
#solution,
#benefit,
#preview,
#target-user,
#pricing,
#faq{
    text-align:center;
}

.problem-card,
.solution-item,
.benefit-item,
.target-item{
    text-align:left;
}

.problem-icon,
.solution-number,
.benefit-icon,
.target-icon{
    margin-bottom:20px;
}

.solution-number{
    width:64px;height:64px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:var(--primary);color:#fff;font-weight:700;
}

.preview-item{padding:0;overflow:hidden}
.preview-item img{width:100%;display:block}
.preview-item h3,.preview-item p{padding:0 28px}
.preview-item h3{margin-top:24px}
.preview-item p{padding-bottom:28px}

.pricing-card{
    max-width:620px;
    margin:60px auto 0;
}

.price-promo{
    font-size:64px;
    color:var(--primary);
    margin:16px 0;
}

#checkoutForm{
    max-width:700px;
    margin:50px auto 0;
    text-align:left;
}

.form-group{margin-bottom:24px}
.form-group label{
    display:block;
    margin-bottom:8px;
    font-weight:600;
}
.form-group input{
    width:100%;
    padding:18px;
    border:1px solid var(--border);
    border-radius:16px;
    background:#fff;
}
.form-group input:focus{
    outline:none;
    border-color:var(--primary);
}
.form-checkbox{margin:28px 0}

.faq-list{
    max-width:900px;
    margin:60px auto 0;
}
.faq-item{
    border-bottom:1px solid var(--border);
    text-align:left;
}
.faq-question{
    width:100%;
    border:none;
    background:none;
    padding:24px 0;
    font-size:20px;
    font-weight:600;
    cursor:pointer;
}
.faq-answer{display:none;padding-bottom:24px}

#footer{
    background:#2F2A2D;
    color:#fff;
    text-align:center;
    padding:70px 0;
}
.footer-description,
.footer-copy{
    color:#d9d9d9;
}
.footer-links{
    display:flex;
    justify-content:center;
    gap:24px;
    flex-wrap:wrap;
    margin:28px 0;
}

@media(max-width:768px){

h1{font-size:42px}
h2{font-size:32px}
p{font-size:16px}

section{padding:70px 0}

.problem-grid,
.solution-content,
.benefit-grid,
.preview-gallery,
.target-grid{
grid-template-columns:1fr;
}

.problem-card,
.solution-item,
.benefit-item,
.preview-item,
.target-item,
.pricing-card{
padding:28px;
}

.preview-item{
padding:0;
}

.btn-primary{
width:100%;
}
}

/* =========================
   HIDDEN FORM
========================= */

.hidden-form{

    display:none;

}