/* ========================================================= */
/* HOME PAGE */
/* ========================================================= */

.home-container{
    max-width:1400px;
    margin:0 auto;
    padding:28px 24px 80px;
}

.home-search-wrap{
    margin:18px 0 28px;
}

.home-search-wrap .search-container{
    margin:0 auto 28px;
    max-width:960px;
}

.home-search-wrap #search-input{
    border-radius:18px !important;
    border:1px solid #e5e7eb !important;
    background:#ffffff !important;
    color:#111827 !important;
    box-shadow:0 8px 24px rgba(15,23,42,.04);
}

.home-search-wrap #search-input:focus{
    border-color:#2563eb !important;
    box-shadow:0 0 0 4px rgba(37,99,235,.10) !important;
}

.home-search-wrap .open-filter{
    border-radius:16px !important;
    background:#020617 !important;
    color:#ffffff !important;
}

/* ========================================================= */
/* SMART HERO */
/* ========================================================= */

.ai-smart-hero{
    position:relative;
    margin:22px 0 34px;
}

.ai-hero-shell{
    position:relative;
    overflow:hidden;
    border-radius:32px;
    background:#07111f;
    min-height:520px;
    box-shadow:0 24px 70px rgba(15,23,42,.18);
}

.ai-hero-slide{
    position:absolute;
    inset:0;
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);
    gap:30px;
    padding:64px 70px;
    opacity:0;
    visibility:hidden;
    transform:scale(.985);
    transition:.55s ease;
    background:
        radial-gradient(circle at 70% 30%,rgba(37,99,235,.38),transparent 34%),
        radial-gradient(circle at 20% 90%,rgba(168,85,247,.28),transparent 36%),
        linear-gradient(135deg,#07111f,#101827 58%,#111827);
}

.ai-hero-slide.active{
    opacity:1;
    visibility:visible;
    transform:scale(1);
}

.ai-hero-content{
    position:relative;
    z-index:3;
    align-self:center;
    max-width:720px;
}

.ai-hero-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:34px;
    padding:0 14px;
    border-radius:999px;
    background:rgba(37,99,235,.18);
    border:1px solid rgba(96,165,250,.28);
    color:#dbeafe;
    font-size:13px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.04em;
    margin-bottom:22px;
}

.ai-hero-title{
    color:#ffffff;
    font-size:66px;
    line-height:1.02;
    letter-spacing:-.045em;
    margin:0 0 22px;
    font-weight:950;
}

.ai-hero-description{
    color:#cbd5e1;
    font-size:19px;
    line-height:1.8;
    max-width:620px;
    margin:0 0 30px;
}

.ai-hero-actions{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-bottom:34px;
}

.ai-hero-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:54px;
    padding:0 22px;
    border-radius:16px;
    text-decoration:none !important;
    font-weight:900;
    font-size:15px;
}

.ai-hero-btn.primary{
    background:#2563eb;
    color:#ffffff !important;
    box-shadow:0 14px 30px rgba(37,99,235,.35);
}

.ai-hero-btn.primary:hover{
    background:#1d4ed8;
    transform:translateY(-2px);
}

.ai-hero-btn.secondary{
    background:rgba(255,255,255,.08);
    color:#ffffff !important;
    border:1px solid rgba(255,255,255,.18);
}

.ai-hero-btn.secondary:hover{
    background:rgba(255,255,255,.14);
    transform:translateY(-2px);
}

.ai-hero-trust{
    display:flex;
    align-items:center;
    gap:18px;
    color:#e5e7eb;
}

.ai-hero-stars{
    color:#fbbf24;
    letter-spacing:2px;
    font-size:17px;
}

.ai-hero-trust span{
    color:#cbd5e1;
    font-weight:700;
}

.ai-hero-visual{
    position:relative;
    z-index:2;
    align-self:center;
    min-height:380px;
}

.ai-orb{
    position:absolute;
    right:20px;
    top:20px;
    width:360px;
    height:360px;
    border-radius:50%;
    background:radial-gradient(
        circle at 40% 35%,
        #dbeafe,
        #60a5fa 28%,
        #1d4ed8 56%,
        #111827 74%
    );
    filter:drop-shadow(0 0 45px rgba(59,130,246,.45));
    opacity:.95;
}

.ai-orb::before{
    content:"";
    position:absolute;
    inset:42px;
    border-radius:50%;
    border:22px solid rgba(255,255,255,.14);
}

.ai-orb::after{
    content:"AI";
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:rgba(255,255,255,.88);
    font-size:84px;
    font-weight:950;
    letter-spacing:-.08em;
}

.ai-preview-stack{
    position:absolute;
    right:0;
    bottom:0;
    width:360px;
    display:grid;
    gap:14px;
}

.ai-preview-card{
    display:grid;
    grid-template-columns:1fr 86px;
    gap:14px;
    align-items:center;
    padding:18px;
    border-radius:20px;
    background:rgba(255,255,255,.09);
    border:1px solid rgba(255,255,255,.14);
    backdrop-filter:blur(16px);
    color:#ffffff;
    text-decoration:none !important;
    transition:.25s ease;
}

.ai-preview-card:hover{
    transform:translateX(-4px);
    background:rgba(255,255,255,.14);
    border-color:rgba(255,255,255,.24);
}

.ai-preview-card strong{
    display:block;
    font-size:16px;
    line-height:1.35;
    color:#ffffff;
}

.ai-preview-card span{
    display:inline-flex;
    color:#cbd5e1;
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    margin-bottom:6px;
}

.ai-preview-icon{
    width:76px;
    height:76px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.12);
    font-size:34px;
}

.ai-hero-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:46px;
    height:46px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(15,23,42,.52);
    color:#ffffff;
    z-index:10;
    cursor:pointer;
    font-size:22px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.ai-hero-nav:hover{
    background:rgba(37,99,235,.72);
}

.ai-hero-nav.prev{
    left:18px;
}

.ai-hero-nav.next{
    right:18px;
}

.ai-hero-dots{
    position:absolute;
    left:50%;
    bottom:26px;
    transform:translateX(-50%);
    display:flex;
    gap:10px;
    z-index:12;
}

.ai-hero-dot{
    width:10px;
    height:10px;
    border-radius:999px;
    border:none;
    background:rgba(255,255,255,.45);
    cursor:pointer;
    transition:.2s ease;
}

.ai-hero-dot.active{
    width:30px;
    background:#2563eb;
}

/* ========================================================= */
/* CATEGORY STRIP */
/* ========================================================= */

.ai-category-strip{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:0;
    margin:0 0 42px;
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(15,23,42,.05);
}

.ai-category-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:18px 20px;
    text-decoration:none !important;
    color:#111827 !important;
    border-right:1px solid #e5e7eb;
}

.ai-category-item:last-child{
    border-right:none;
}

.ai-category-item:hover{
    background:#f8fafc;
}

.ai-category-icon{
    width:38px;
    height:38px;
    border-radius:12px;
    background:#eff6ff;
    color:#2563eb;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
}

.ai-category-item strong{
    display:block;
    font-size:14px;
    line-height:1.2;
}

.ai-category-item span{
    display:block;
    color:#6b7280;
    font-size:12px;
    margin-top:3px;
}

/* ========================================================= */
/* HOME SECTIONS */
/* ========================================================= */

.home-section{
    margin-top:52px;
}

.home-section .section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:22px;
}

.home-section .section-head h2{
    font-size:34px;
    line-height:1.15;
    margin:0;
    letter-spacing:-.025em;
}

.home-section .section-head p{
    color:#6b7280;
    margin:8px 0 0;
}

/* ========================================================= */
/* HOME TOOL SWIPERS */
/* ========================================================= */

.home-tools-swiper,
.trendingSwiper,
.recommendedSwiper{
    position:relative;
    width:100% !important;
    overflow:hidden !important;
    padding:8px 6px 46px;
}

.home-tools-swiper .swiper-wrapper,
.trendingSwiper .swiper-wrapper,
.recommendedSwiper .swiper-wrapper{
    display:flex !important;
    flex-direction:row !important;
    align-items:stretch !important;
    transition-timing-function:linear !important;
}

.home-tools-swiper .swiper-slide,
.trendingSwiper .swiper-slide,
.recommendedSwiper .swiper-slide{
    height:auto !important;
    display:flex !important;
    flex-shrink:0 !important;
}

.home-tools-swiper .tool-card,
.trendingSwiper .tool-card,
.recommendedSwiper .tool-card{
    height:100% !important;
    min-width:260px !important;
}

.home-tools-swiper:hover{
    cursor:grab;
}

.home-tools-swiper .swiper-button-next,
.home-tools-swiper .swiper-button-prev,
.trendingSwiper .swiper-button-next,
.trendingSwiper .swiper-button-prev,
.recommendedSwiper .swiper-button-next,
.recommendedSwiper .swiper-button-prev{
    width:44px !important;
    height:44px !important;
    border-radius:50% !important;
    background:#ffffff !important;
    box-shadow:0 8px 24px rgba(15,23,42,.12) !important;
    color:#111827 !important;
}

.home-tools-swiper .swiper-button-next:after,
.home-tools-swiper .swiper-button-prev:after,
.trendingSwiper .swiper-button-next:after,
.trendingSwiper .swiper-button-prev:after,
.recommendedSwiper .swiper-button-next:after,
.recommendedSwiper .swiper-button-prev:after{
    font-size:15px !important;
    font-weight:900 !important;
}

.home-tools-swiper .swiper-pagination,
.trendingSwiper .swiper-pagination,
.recommendedSwiper .swiper-pagination{
    bottom:8px !important;
}

.home-tools-swiper .swiper-pagination-bullet,
.trendingSwiper .swiper-pagination-bullet,
.recommendedSwiper .swiper-pagination-bullet{
    background:#cbd5e1 !important;
    opacity:1 !important;
}

.home-tools-swiper .swiper-pagination-bullet-active,
.trendingSwiper .swiper-pagination-bullet-active,
.recommendedSwiper .swiper-pagination-bullet-active{
    background:#2563eb !important;
}

/* Prevent old personalized grid */

.personalized-section #personalized-tools{
    display:unset !important;
    grid-template-columns:unset !important;
}

/* ========================================================= */
/* LATEST BLOG */
/* ========================================================= */

.latest-blog-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:22px;
}

.blog-feature-card{
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:24px;
    overflow:hidden;
    text-decoration:none !important;
    color:#111827 !important;
    box-shadow:0 10px 30px rgba(15,23,42,.05);
    transition:.25s ease;
}

.blog-feature-card:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 42px rgba(15,23,42,.09);
}

.blog-card-thumb{
    height:180px;
    background:
        radial-gradient(circle at 70% 30%,rgba(37,99,235,.55),transparent 30%),
        linear-gradient(135deg,#0f172a,#1e3a8a);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#ffffff;
    font-size:42px;
}

.blog-card-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.blog-card-content{
    padding:22px;
}

.blog-card-badge{
    display:inline-flex;
    min-height:26px;
    padding:0 10px;
    align-items:center;
    border-radius:999px;
    background:#eff6ff;
    color:#2563eb;
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    margin-bottom:12px;
}

.blog-feature-card h3{
    font-size:21px;
    line-height:1.35;
    margin:0 0 10px;
}

.blog-feature-card p{
    color:#4b5563;
    line-height:1.7;
    margin:0 0 14px;
}

.blog-card-meta{
    color:#6b7280;
    font-size:13px;
}

/* ========================================================= */
/* STATS STRIP */
/* ========================================================= */

.home-stats-strip{
    margin-top:54px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:0;
    background:#07111f;
    color:#ffffff;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 18px 48px rgba(15,23,42,.16);
}

.home-stat{
    padding:26px 24px;
    border-right:1px solid rgba(255,255,255,.12);
}

.home-stat:last-child{
    border-right:none;
}

.home-stat strong{
    display:block;
    font-size:28px;
    margin-bottom:4px;
}

.home-stat span{
    color:#cbd5e1;
    font-size:14px;
}

/* ========================================================= */
/* FEATURED HOME COMPARISONS */
/* ========================================================= */

.featured-comparisons-section{
    margin:48px 0 54px;
}

.featured-comparisons-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:20px;
}

.featured-comparison-card{
    display:block;
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:22px;
    padding:24px;
    text-decoration:none !important;
    color:#111827 !important;
    box-shadow:0 10px 30px rgba(15,23,42,.05);
    transition:.25s ease;
}

.featured-comparison-card span{
    display:inline-flex;
    min-height:28px;
    padding:0 10px;
    align-items:center;
    border-radius:999px;
    background:#eff6ff;
    color:#2563eb;
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    margin-bottom:16px;
}

.featured-comparison-card strong{
    display:block;
    font-size:20px;
    line-height:1.35;
    margin-bottom:12px;
}

.featured-comparison-card em{
    display:block;
    color:#6b7280;
    font-style:normal;
    line-height:1.7;
    font-size:14px;
}

.featured-comparison-card:hover{
    transform:translateY(-4px);
    border-color:#2563eb;
    box-shadow:0 18px 42px rgba(15,23,42,.09);
}

/* ========================================================= */
/* RESPONSIVE */
/* ========================================================= */

@media(max-width:1100px){

    .featured-comparisons-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:900px){

    .ai-hero-shell{
        min-height:720px;
    }

    .ai-hero-slide{
        grid-template-columns:1fr;
        padding:48px 28px 82px;
    }

    .ai-hero-title{
        font-size:44px;
    }

    .ai-hero-visual{
        min-height:260px;
    }

    .ai-orb{
        width:220px;
        height:220px;
        right:20px;
        top:0;
    }

    .ai-preview-stack{
        width:100%;
        right:auto;
        left:0;
        bottom:0;
        grid-template-columns:1fr;
    }

    .ai-preview-card{
        grid-template-columns:1fr 64px;
        padding:14px;
    }

    .ai-preview-icon{
        width:56px;
        height:56px;
        font-size:26px;
    }

    .ai-category-strip{
        grid-template-columns:1fr 1fr;
    }

    .ai-category-item{
        border-right:none;
        border-bottom:1px solid #e5e7eb;
    }

    .home-section .section-head{
        align-items:flex-start;
        flex-direction:column;
    }
}

@media(max-width:640px){

    .featured-comparisons-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:600px){

    .home-container{
        padding:18px 14px 70px;
    }

    .ai-hero-title{
        font-size:36px;
    }

    .ai-hero-description{
        font-size:16px;
    }

    .ai-category-strip{
        grid-template-columns:1fr;
    }
}