/* =========================================================
   HOME PAGE
========================================================= */

.home-page .hero{
    padding:28px 0 22px;
}

/* HERO GRID */

.home-hero-grid{

    display:grid;

    grid-template-columns:1fr 1.05fr;

    gap:26px;

    align-items:center;
}

/* SMALL LABEL */

.small-label{

    font-size:13px;

    font-weight:700;

    color:#2563eb;

    margin-bottom:12px;

    letter-spacing:.3px;
}

/* HERO TITLE */

.home-page h1{

    font-size:42px;

    line-height:1.05;

    font-weight:800;

    color:#172033;

    margin-bottom:16px;

    max-width:700px;
}

/* HERO TEXT */

.hero-text{

    font-size:15px;

    line-height:1.7;

    color:#4b5563;

    max-width:720px;

    margin-bottom:18px;
}

/* BUTTONS */

.compact-buttons{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

    margin-bottom:14px;
}

.compact-buttons .btn{

    padding:12px 18px;

    font-size:14px;

    border-radius:10px;
}

/* MINI INFO */

.hero-mini{

    font-size:12px;

    color:#6b7280;

    margin-bottom:16px;
}

/* TAGS */

.compact-tags{

    display:flex;

    flex-wrap:wrap;

    gap:8px;
}

.compact-tags .tag{

    padding:7px 12px;

    font-size:12px;

    border-radius:10px;
}

/* HERO IMAGE */

.compact-image img{

    width:100%;

    border-radius:16px;

    box-shadow:
        0 18px 45px rgba(0,0,0,.14);
}

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

.compact-section{

    padding:42px 0;
}

/* TITLES */

.compact-title{

    margin-bottom:24px;
}

.compact-title h2{

    font-size:30px;

    color:#172033;

    margin-bottom:10px;

    font-weight:800;
}

.compact-title p{

    font-size:15px;

    color:#4b5563;

    max-width:820px;

    line-height:1.6;
}

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

.mini-features-grid{

    display:grid;

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

    gap:16px;
}

.mini-feature{

    background:white;

    border:1px solid #e5e7eb;

    border-radius:14px;

    padding:18px;
}

.mini-feature h3{

    font-size:18px;

    margin-bottom:8px;

    color:#172033;
}

.mini-feature p{

    font-size:14px;

    line-height:1.6;

    color:#4b5563;
}

/* =========================================================
   CARDS
========================================================= */

.compact-cards-grid{

    gap:18px;
}

.compact-card{

    border-radius:16px;
}

.compact-card .card-content{

    padding:18px;
}

.compact-card h3{

    font-size:20px;

    margin-bottom:8px;
}

.compact-card p{

    font-size:14px;

    line-height:1.6;
}

/* =========================================================
   STEPS
========================================================= */

.steps-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;
}

.step-box{

    background:white;

    border:1px solid #e5e7eb;

    border-radius:16px;

    padding:20px;
}

.step-number{

    width:32px;
    height:32px;

    border-radius:50%;

    background:#2563eb;

    color:white;

    display:flex;

    align-items:center;
    justify-content:center;

    font-size:14px;
    font-weight:700;

    margin-bottom:12px;
}

.step-box h3{

    font-size:18px;

    margin-bottom:10px;

    color:#172033;
}

.step-box p{

    font-size:14px;

    line-height:1.6;

    color:#4b5563;
}

/* =========================================================
   MINI CODEBOX
========================================================= */

.mini-codebox{

    margin:14px 0;

    padding:14px 16px;

    border-radius:12px;
}

.mini-codebox code{

    font-size:13px;
}

/* =========================================================
   CODE SECTION
========================================================= */

.compact-codebox{

    margin-top:16px;

    padding:18px 20px;

    border-radius:14px;
}

.compact-codebox code{

    font-size:13px;

    line-height:1.5;
}

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

.faq-grid{

    display:grid;

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

    gap:16px;
}

.faq-item{

    background:white;

    border:1px solid #e5e7eb;

    border-radius:14px;

    padding:18px;
}

.faq-item h3{

    font-size:16px;

    margin-bottom:8px;

    color:#172033;
}

.faq-item p{

    font-size:14px;

    line-height:1.6;

    color:#4b5563;
}

/* =========================================================
   CTA
========================================================= */

.compact-cta{

    padding:46px 0;
}

.compact-cta h2{

    font-size:34px;

    margin-bottom:14px;
}

.compact-cta p{

    font-size:16px;

    max-width:760px;

    margin:auto;

    margin-bottom:24px;

    line-height:1.7;
}

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

@media(max-width:1100px){

.home-hero-grid{

    grid-template-columns:1fr;
}

.home-page h1{

    font-size:36px;
}

.compact-title h2{

    font-size:26px;
}

}

/* MOBILE */

@media(max-width:768px){

.home-page .hero{

    padding:24px 0 20px;
}

.home-page h1{

    font-size:30px;
}

.hero-text{

    font-size:14px;
}

.compact-title h2{

    font-size:24px;
}

.compact-section{

    padding:34px 0;
}

.steps-grid{

    grid-template-columns:1fr;
}

.compact-cta h2{

    font-size:28px;
}

.compact-cta p{

    font-size:15px;
}

}