/* ===========================================================
   SEO PAGES
   Shared layout for all knowledge center pages
=========================================================== */

.seo-page{
    padding:30px 20px 70px;
    animation:fadein .8s ease;
}

.seo-container{
    max-width:1150px;
    margin:0 auto;
}

/* ===========================================================
   Breadcrumb
=========================================================== */

.breadcrumb{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    margin-bottom:28px;
    font-size:14px;
    color:#667085;
}

.breadcrumb a{
    color:var(--brand);
    text-decoration:none;
    font-weight:600;
}

.breadcrumb a:hover{
    text-decoration:underline;
}

.breadcrumb .active{
    color:#111827;
    font-weight:700;
}

/* ===========================================================
   Hero
=========================================================== */

.hero-card{

    position:relative;
    overflow:hidden;

    border-radius:30px;

    background:
            radial-gradient(circle at top right,
            rgba(52,71,103,.10),
            transparent 45%),
            linear-gradient(
                    145deg,
                    #ffffff,
                    #f7f9fc
            );

    border:1px solid rgba(52,71,103,.10);

    padding:70px;

    box-shadow:
            0 30px 70px rgba(15,23,42,.08);

    margin-bottom:45px;

}

.hero-label{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:9px 18px;

    border-radius:999px;

    background:rgba(52,71,103,.08);

    color:var(--brand);

    font-size:13px;

    font-weight:800;

    letter-spacing:.4px;

    text-transform:uppercase;

    margin-bottom:22px;

}

.hero-card h1{

    font-size:clamp(38px,5vw,56px);

    line-height:1.05;

    letter-spacing:-.04em;

    font-weight:900;

    max-width:900px;

}

.hero-description{

    margin-top:22px;

    font-size:19px;

    line-height:1.8;

    color:var(--muted);

    max-width:860px;

}

.hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:16px;

    margin-top:36px;

}

.secondary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 28px;

    border-radius:14px;

    text-decoration:none;

    border:1px solid rgba(52,71,103,.15);

    color:var(--brand);

    background:#fff;

    font-weight:700;

    transition:.18s;

}

.secondary-btn:hover{

    background:#f7f9fc;

    transform:translateY(-2px);

}

.hero-stats{

    margin-top:50px;

    display:grid;

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

    gap:18px;

}

.hero-stat{

    padding:22px;

    border-radius:18px;

    background:#fff;

    border:1px solid rgba(52,71,103,.08);

    text-align:center;

}

.hero-stat strong{

    display:block;

    font-size:28px;

    color:var(--brand);

    font-weight:900;

    margin-bottom:8px;

}

.hero-stat span{

    font-size:14px;

    color:#5b6472;

    font-weight:600;

}

/* ===========================================================
   Quick Answer
=========================================================== */

.quick-answer{

    display:flex;

    gap:24px;

    align-items:flex-start;

    background:linear-gradient(
            135deg,
            rgba(52,71,103,.06),
            rgba(52,71,103,.03)
    );

    border-left:5px solid var(--brand);

    border-radius:22px;

    padding:34px;

    margin-bottom:45px;

}

.quick-answer-icon{

    font-size:42px;

    flex-shrink:0;

}

.quick-answer h2{

    margin-bottom:14px;

    font-size:29px;

}

.quick-answer p{

    color:var(--muted);

    line-height:1.9;

    font-size:17px;

}

/* ===========================================================
   TOC
=========================================================== */

.toc{

    margin-bottom:45px;

    padding:34px;

    border-radius:22px;

    background:#fff;

    border:1px solid rgba(52,71,103,.10);

    box-shadow:0 15px 40px rgba(15,23,42,.04);

}

.toc h2{

    margin-bottom:25px;

    font-size:30px;

}

.toc-grid{

    display:grid;

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

    gap:14px;

}

.toc-grid a{

    text-decoration:none;

    color:#374151;

    background:#f7f9fc;

    padding:15px 18px;

    border-radius:14px;

    transition:.18s;

    font-weight:700;

}

.toc-grid a:hover{

    background:rgba(52,71,103,.08);

    color:var(--brand);

    transform:translateY(-2px);

}

/* ===========================================================
   Sections
=========================================================== */

.content-section{

    margin-top:70px;

}

.content-section h2{

    font-size:38px;

    margin-bottom:26px;

    line-height:1.15;

}

.content-section h3{

    margin-bottom:12px;

}

.content-section p{

    font-size:18px;

    line-height:1.95;

    color:var(--muted);

    margin-bottom:22px;

}

/* ===========================================================
   Highlight Card
=========================================================== */

.info-card{

    margin-top:28px;

    padding:28px;

    border-radius:20px;

    background:#fff;

    border-left:5px solid var(--brand);

    box-shadow:0 16px 40px rgba(15,23,42,.05);

}

.info-card h3{

    color:var(--brand);

    margin-bottom:12px;

}

.info-card p{

    margin:0;

}

/* ===========================================================
   Feature Grid
=========================================================== */

.feature-grid{

    display:grid;

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

    gap:22px;

    margin-top:34px;

}

.feature-card{

    padding:28px;

    border-radius:20px;

    background:#fff;

    border:1px solid rgba(52,71,103,.10);

    transition:.18s;

}

.feature-card:hover{

    transform:translateY(-5px);

    box-shadow:0 20px 50px rgba(15,23,42,.08);

}

.feature-card h3{

    color:var(--brand);

    margin-bottom:12px;

}

.feature-card p{

    margin:0;

    font-size:16px;

}

/* ===========================================================
   Process Timeline
=========================================================== */

.process-flow{

    margin-top:36px;

    display:flex;

    flex-direction:column;

    gap:18px;

}

.process-step{

    padding:28px;

    border-radius:20px;

    background:#fff;

    border:1px solid rgba(52,71,103,.08);

}

.step-number{

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--brand);

    color:#fff;

    font-weight:900;

    margin-bottom:18px;

}

.process-arrow{

    text-align:center;

    font-size:32px;

    color:var(--brand);

}

/* ===========================================================
   Comparison
=========================================================== */

.comparison-grid{

    display:grid;

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

    gap:24px;

    margin-top:34px;

}

.comparison-card{

    padding:28px;

    border-radius:20px;

}

.comparison-good{

    background:#f3fbf5;

    border:1px solid #cfead7;

}

.comparison-bad{

    background:#fff8f5;

    border:1px solid #f3d6ca;

}

.comparison-card ul{

    margin-top:18px;

    padding-left:18px;

}

.comparison-card li{

    margin-bottom:12px;

    line-height:1.7;

    color:#4b5563;

}

/* ===========================================================
   Myths
=========================================================== */

.myth-list{

    display:grid;

    gap:24px;

    margin-top:34px;

}

.myth-card{

    padding:30px;

    border-radius:20px;

    background:#fff;

    border:1px solid rgba(52,71,103,.10);

}

.myth-card strong{

    color:var(--brand);

}

.myth-card p:last-child{

    margin-bottom:0;

}

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

.cta-section{

    margin-top:80px;

}

.cta-box{

    text-align:center;

    padding:60px;

    border-radius:30px;

    background: var(--brand);


    color:#fff;

}

.cta-box h2{

    font-size:42px;

    margin-bottom:22px;

}

.cta-box p{

    color:rgba(255,255,255,.92);

    max-width:860px;

    margin:0 auto;

    line-height:1.9;

    font-size:18px;

}

.cta-benefits{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:14px;

    margin:34px 0;

}

.cta-benefits span{

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

    padding:12px 18px;

    border-radius:999px;

    font-weight:700;

}

.cta-box .primary-btn{

    background:#fff;

    color:var(--brand);

}

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

.faq-section{

    margin-top:80px;

}

.faq-section h2{

    margin-bottom:30px;

}

.faq-item{

    padding:26px;

    border-radius:18px;

    background:#fff;

    border:1px solid rgba(52,71,103,.08);

    margin-bottom:18px;

}

.faq-item h3{

    margin-bottom:12px;

}

.faq-item p{

    margin:0;

}

/* ===========================================================
   Related Articles
=========================================================== */

.related-articles{

    margin-top:80px;
    animation:fadein .8s ease;


}

.related-grid{

    display:grid;

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

    gap:22px;

    margin-top:28px;

}

.related-card{

    display:block;

    text-decoration:none;

    color:inherit;

    padding:30px;

    border-radius:20px;

    background:#fff;

    border:1px solid rgba(52,71,103,.10);

    transition:.18s;

}

.related-card:hover{

    transform:translateY(-6px);

    box-shadow:0 20px 45px rgba(15,23,42,.08);

}

.related-card h3{

    color:var(--brand);

    margin-bottom:12px;

}

.related-card p{

    margin:0;

    color:var(--muted);

}


/* ===========================================================
   PREMIUM FOOTER V2
   Reusable on homepage and all SEO pages
=========================================================== */

.site-footer{

    margin-top:110px;

    /*background:*/
    /*        linear-gradient(*/
    /*                180deg,*/
    /*                #24324a 0%,*/
    /*                #1b2638 100%*/
    /*        );*/

    background: #1b2638;

    color:#fff;

    border-top:none;

    position:relative;

    overflow:hidden;

    padding:90px 20px 35px;

}

.site-footer::before{

    content:"";

    position:absolute;

    top:-180px;
    right:-120px;

    width:420px;
    height:420px;

    border-radius:50%;

    background:
            radial-gradient(
                    rgba(255,255,255,.05),
                    transparent 72%
            );

}

.site-footer::after{

    content:"";

    position:absolute;

    bottom:-220px;
    left:-120px;

    width:460px;
    height:460px;

    border-radius:50%;

    background:
            radial-gradient(
                    rgba(255,255,255,.04),
                    transparent 72%
            );

}

.footer-container{

    position:relative;

    z-index:2;

    max-width:1200px;

    margin:auto;

}


/* Better glass CTA */
.footer-top{

    position:relative;
    overflow:hidden;

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:50px;

    padding:50px;

    margin-bottom:70px;

    border-radius:28px;

    background:
            linear-gradient(
                    145deg,
                    rgba(255,255,255,.08),
                    rgba(255,255,255,.03)
            );

    border:1px solid rgba(255,255,255,.12);

    backdrop-filter:blur(16px);

}

.footer-top::before{

    content:"";

    position:absolute;

    right:-120px;
    top:-120px;

    width:280px;
    height:280px;

    border-radius:50%;

    background:
            radial-gradient(
                    rgba(255,255,255,.12),
                    transparent 72%
            );

}

.footer-top::after{

    content:"";

    position:absolute;

    left:-80px;
    bottom:-80px;

    width:180px;
    height:180px;

    border-radius:50%;

    background:
            radial-gradient(
                    rgba(255,255,255,.08),
                    transparent 70%
            );

}

.footer-brand,
.footer-top .primary-btn{

    position:relative;
    z-index:2;

}

.site-footer .primary-btn{

    background:#fff;

    color:var(--brand);

    font-weight:800;

    box-shadow:
            0 18px 35px rgba(0,0,0,.22);

}

.site-footer .primary-btn:hover{

    background:#fff;

    transform:translateY(-3px);

}

.footer-container{

    position:relative;

    z-index:2;

    max-width:1200px;

    margin:auto;

}

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

.footer-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:45px;

    margin-bottom:70px;

    padding:42px;

    border-radius:24px;

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

    backdrop-filter:blur(10px);

    border:1px solid rgba(255,255,255,.08);

}

.footer-brand{

    max-width:650px;

}

.footer-brand h2{

    color:#fff;

    font-size:38px;

    margin-bottom:16px;

}

.footer-brand p{

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

    line-height:1.9;

}

.footer-top .primary-btn{

    flex-shrink:0;

    min-width:230px;

}

/* ===========================================================
   Footer Columns
=========================================================== */

.footer-links-grid{

    display:grid;

    grid-template-columns:
            1.3fr
            1.3fr
            1.3fr
            1.1fr
            .9fr;

    gap:55px;

    margin-bottom:65px;

}

.footer-column{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}

.footer-column h3{

    position:relative;

    padding-bottom:12px;

    margin-bottom:22px;

    color:#fff;

    font-size:17px;

    font-weight:800;

}

.footer-column h3::after{

    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:42px;
    height:3px;

    border-radius:50px;

    background:#5f8ffb;

}

.footer-column ul{

    list-style:none;

    width:100%;

}

.footer-column li{

    width:100%;

    margin-bottom:14px;

}

.footer-column a{

    display:flex;

    align-items:center;

    width:100%;

    text-align:left;

    text-decoration:none;

    color:rgba(255,255,255,.74);

    transition:.18s;

    font-weight:600;

}

.footer-column a::before{

    content:"›";

    opacity:0;

    margin-right:0;

    transition:.18s;

}

.footer-column a:hover{

    color:#fff;

}

.footer-column a:hover::before{

    opacity:1;

    margin-right:8px;

}

/* ===========================================================
   Bottom
=========================================================== */

.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:25px;

    flex-wrap:wrap;

    padding-top:28px;

    border-top:1px solid rgba(255,255,255,.08);

}

.footer-bottom p{

    color:rgba(255,255,255,.65);

    font-size:14px;

}

.footer-bottom-links{

    display:flex;

    flex-wrap:wrap;

    gap:22px;

}

.footer-bottom-links a{

    text-decoration:none;

    color:rgba(255,255,255,.65);

    font-size:14px;

    font-weight:600;

}

.footer-bottom-links a:hover{

    color:#fff;

}

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

@media(max-width:1100px){

    .hero-card{

        padding:50px;

    }

    .footer-links-grid{

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

    }

}

@media(max-width:900px){

    .hero-card{

        padding:35px;

    }

    .hero-stats{

        grid-template-columns:1fr;

    }

    .toc-grid{

        grid-template-columns:1fr;

    }

    .feature-grid{

        grid-template-columns:1fr;

    }

    .comparison-grid{

        grid-template-columns:1fr;

    }

    .related-grid{

        grid-template-columns:1fr;

    }

    .footer-top{

        flex-direction:column;

        align-items:flex-start;

        text-align:left;

    }

    .footer-top .primary-btn{

        width:100%;

        min-width:0;

    }

    .footer-links-grid{

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

        gap:30px;

    }

}

@media(max-width:700px){

    .seo-page{

        padding:20px 14px 50px;

    }

    .hero-card{

        border-radius:22px;

        padding:28px 22px;

    }

    .hero-card h1{

        font-size:34px;

    }

    .hero-description{

        font-size:16px;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .primary-btn,
    .secondary-btn{

        width:100%;

    }

    .quick-answer{

        flex-direction:column;

        padding:24px;

    }

    .quick-answer h2{

        font-size:24px;

    }

    .content-section{

        margin-top:55px;

    }

    .content-section h2{

        font-size:30px;

    }

    .content-section p{

        font-size:16px;

    }

    .cta-box{

        padding:40px 24px;

    }

    .cta-box h2{

        font-size:30px;

    }

    .cta-benefits{

        flex-direction:column;

    }

    .footer-links-grid{

        grid-template-columns:1fr;

        gap:26px;

    }

    .footer-column{

        align-items:flex-start;

        text-align:left;

        padding-bottom:24px;

        border-bottom:1px solid rgba(255,255,255,.08);

    }

    .footer-column:last-child{

        border-bottom:none;

        padding-bottom:0;

    }


    .footer-bottom{

        flex-direction:column;

        text-align:center;

    }

    .footer-bottom-links{

        justify-content:center;

    }

}