/* =========================================================
   DomainScan Homepage
   ========================================================= */


/* Hero */

.home-hero {
    position: relative;
    text-align: center;
    padding: 2.25rem 1.5rem 2rem;
    margin-bottom: 1.5rem;
}

.home-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;

    padding: 0.45rem 0.8rem;
    margin-bottom: 1rem;

    border-radius: 999px;

    background: rgba(37, 99, 235, 0.08);

    color: var(--primary-color);

    font-size: 0.78rem;
    font-weight: 700;

    letter-spacing: 0.02em;
}

.home-hero-title {
    max-width: 850px;

    margin: 0 auto 1rem;

    color: var(--text-dark);

    font-size: clamp(
        2rem,
        4vw,
        3.1rem
    );

    line-height: 1.15;

    letter-spacing: -0.035em;

    font-weight: 750;
}

.home-hero-description {
    max-width: 760px;

    margin: 0 auto;

    color: var(--text-muted);

    font-size: 1.05rem;

    line-height: 1.75;
}


/* Shared Home Sections */

.home-section {
    margin-top: 4.75rem;
}

.home-section-heading {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 2rem;

    margin-bottom: 1.75rem;
}

.home-section-heading > div {
    max-width: 720px;
}

.home-section-label {
    display: inline-block;

    margin-bottom: 0.5rem;

    color: var(--primary-color);

    font-size: 0.76rem;

    font-weight: 750;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}

.home-section-heading h2 {
    margin: 0 0 0.55rem;

    color: var(--text-dark);

    font-size: 1.8rem;

    line-height: 1.25;

    font-weight: 720;

    letter-spacing: -0.02em;
}

.home-section-heading p {
    margin: 0;

    color: var(--text-muted);

    line-height: 1.65;

    font-size: 0.95rem;
}


/* Popular Tools */

.home-tool-card {
    height: 100%;

    display: flex;

    gap: 1rem;

    padding: 1.35rem;

    border: 1px solid var(--border-color);

    border-radius: 16px;

    background: var(--sidebar-bg);

    text-decoration: none;

    box-shadow:
        0 8px 24px
        rgba(15, 23, 42, 0.035);

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}

.home-tool-card:hover {
    transform: translateY(-3px);

    border-color:
        color-mix(
            in srgb,
            var(--primary-color) 55%,
            var(--border-color)
        );

    box-shadow:
        0 14px 30px
        rgba(15, 23, 42, 0.075);
}

.home-tool-icon {
    flex: 0 0 46px;

    width: 46px;
    height: 46px;

    display: flex;

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

    border-radius: 12px;

    background:
        rgba(37, 99, 235, 0.09);

    color: var(--primary-color);

    font-size: 1.05rem;
}

.home-tool-content {
    min-width: 0;
}

.home-tool-content h3 {
    margin: 0 0 0.45rem;

    color: var(--text-dark);

    font-size: 1rem;

    line-height: 1.35;

    font-weight: 700;
}

.home-tool-content p {
    min-height: 3rem;

    margin: 0 0 0.75rem;

    color: var(--text-muted);

    font-size: 0.84rem;

    line-height: 1.55;
}

.home-tool-link {
    display: inline-flex;

    align-items: center;

    gap: 0.4rem;

    color: var(--primary-color);

    font-size: 0.8rem;

    font-weight: 700;
}

.home-tool-link i {
    font-size: 0.7rem;

    transition:
        transform
        0.2s ease;
}

.home-tool-card:hover
.home-tool-link i {
    transform:
        translateX(3px);
}


/* Latest Articles */

.home-articles-section {
    padding:
        2.25rem;

    border:
        1px solid
        var(--border-color);

    border-radius:
        20px;

    background:
        linear-gradient(
            180deg,
            rgba(37, 99, 235, 0.025),
            transparent 45%
        );
}

.home-view-all {
    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    color: var(--primary-color);

    font-size: 0.86rem;

    font-weight: 700;

    text-decoration: none;

    white-space: nowrap;
}

.home-view-all:hover {
    color: var(--primary-color);

    text-decoration: underline;
}

.home-article-card {
    height: 100%;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    border:
        1px solid
        var(--border-color);

    border-radius:
        15px;

    background:
        var(--sidebar-bg);

    box-shadow:
        0 8px 24px
        rgba(15, 23, 42, 0.035);

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.home-article-card:hover {
    transform:
        translateY(-4px);

    border-color:
        var(--primary-color);

    box-shadow:
        0 16px 34px
        rgba(15, 23, 42, 0.075);
}

.home-article-image-wrap {
    display: block;

    width: 100%;

    aspect-ratio:
        16 / 9;

    overflow: hidden;

    background:
        #eef3f8;
}

.home-article-image {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform
        0.45s ease;
}

.home-article-card:hover
.home-article-image {
    transform:
        scale(1.035);
}

.home-article-placeholder {
    width: 100%;

    height: 100%;

    display: flex;

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

    color:
        var(--primary-color);

    font-size:
        2rem;

    background:
        rgba(37, 99, 235, 0.06);
}

.home-article-body {
    padding:
        1.25rem;

    display: flex;

    flex: 1;

    flex-direction: column;
}

.home-article-meta {
    display: flex;

    align-items: center;

    gap: 0.45rem;

    margin-bottom:
        0.65rem;

    color:
        var(--text-muted);

    font-size:
        0.76rem;

    font-weight:
        550;
}

.home-article-meta i {
    color:
        var(--primary-color);
}

.home-article-title {
    margin:
        0 0 0.65rem;

    font-size:
        1.08rem;

    line-height:
        1.4;

    font-weight:
        700;
}

.home-article-title a {
    color:
        var(--text-dark);

    text-decoration:
        none;
}

.home-article-title a:hover {
    color:
        var(--primary-color);
}

.home-article-excerpt {
    margin:
        0 0 1rem;

    color:
        var(--text-muted);

    font-size:
        0.84rem;

    line-height:
        1.6;
}

.home-article-read {
    margin-top:
        auto;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.4rem;

    color:
        var(--primary-color);

    font-size:
        0.8rem;

    font-weight:
        700;

    text-decoration:
        none;
}

.home-article-read i {
    font-size:
        0.68rem;

    transition:
        transform
        0.2s ease;
}

.home-article-read:hover i {
    transform:
        translateX(3px);
}


/* Validation */

.home-validation-error {
    display: flex;

    align-items: center;

    gap: 0.9rem;

    padding:
        1rem;

    border:
        1px solid
        rgba(239, 68, 68, 0.22);

    border-left:
        4px solid #ef4444;

    border-radius:
        12px;

    background:
        rgba(239, 68, 68, 0.06);

    color:
        #dc2626;
}

.home-validation-icon {
    flex: 0 0 40px;

    width:
        40px;

    height:
        40px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        rgba(239, 68, 68, 0.12);
}


/* Checking Card */

.checking-card {
    border:
        1px dashed
        var(--primary-color) !important;

    border-radius:
        12px;

    overflow:
        hidden;

    background:
        rgba(37, 99, 235, 0.025);

    margin-bottom:
        25px;
}

.checking-card
.bg-white {
    border-radius:
        11px;
}


/* Dark Mode */

html.dark
.home-tool-card,
html.dark
.home-article-card {
    box-shadow:
        0 8px 24px
        rgba(0, 0, 0, 0.18);
}

html.dark
.home-tool-card:hover,
html.dark
.home-article-card:hover {
    box-shadow:
        0 16px 34px
        rgba(0, 0, 0, 0.28);
}

html.dark
.home-articles-section {
    background:
        linear-gradient(
            180deg,
            rgba(37, 99, 235, 0.045),
            transparent 45%
        );
}


/* Tablet */

@media (max-width: 991.98px) {

    .home-section {
        margin-top:
            4rem;
    }

    .home-articles-section {
        padding:
            1.5rem;
    }

}


/* Mobile */

@media (max-width: 767.98px) {

    .home-hero {
        padding:
            1.4rem 0.25rem 1.6rem;
    }

    .home-hero-title {
        font-size:
            2rem;
    }

    .home-hero-description {
        font-size:
            0.93rem;
    }

    .home-section {
        margin-top:
            3.25rem;
    }

    .home-section-heading {
        display:
            block;

        margin-bottom:
            1.4rem;
    }

    .home-section-heading h2 {
        font-size:
            1.5rem;
    }

    .home-tool-card {
        padding:
            1.15rem;
    }

    .home-tool-content p {
        min-height:
            0;
    }

    .home-articles-section {
        margin-left:
            -0.25rem;

        margin-right:
            -0.25rem;

        padding:
            1.25rem;

        border-radius:
            16px;
    }

}