/* =====================================================
   ObfuscatorJS Framework v3.0
   home.css
   Homepage System
   Production Version

   Compatible with:
   - js/tools.js v3.0
   - card.css v3.0
   - Full clickable tool cards
   - Centralized card system
===================================================== */


/* =====================================================
   HOME HERO
===================================================== */

.hero {

    position: relative;

    /*
     * Search suggestions must be able
     * to extend outside the hero.
     */
    overflow: visible;

    padding:
        var(--space-9)
        0
        var(--space-8);

    background:
        radial-gradient(
            circle at top right,
            rgba(37, 99, 235, 0.08),
            transparent 45%
        ),
        radial-gradient(
            circle at bottom left,
            rgba(99, 102, 241, 0.08),
            transparent 40%
        ),
        var(--background-color);

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

    text-align: center;

    /*
     * Keep search suggestions above
     * following sections.
     */
    z-index: 10;

}


/* =====================================================
   HERO CONTENT
===================================================== */

.hero-content {

    position: relative;

    z-index: 11;

    width: 100%;

    max-width: 920px;

    margin: 0 auto;

}


/* =====================================================
   HERO BADGE
===================================================== */

.hero-badge {

    display: inline-flex;

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

    gap: var(--space-2);

    padding: 8px 16px;

    margin-bottom: var(--space-5);

    border:
        1px solid
        rgba(37, 99, 235, 0.15);

    border-radius: var(--radius-round);

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

    color: var(--primary-color);

    font-size: var(--font-size-sm);

    font-weight: var(--font-semibold);

    line-height: 1.4;

    transition:
        transform .25s ease,
        background-color .25s ease;

}


.hero-badge:hover {

    transform: translateY(-2px);

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

}


/* =====================================================
   HERO TITLE
===================================================== */

.hero-title {

    max-width: 820px;

    margin:
        0
        auto
        var(--space-5);

    color: var(--text-color);

    font-size:
        clamp(
            40px,
            6vw,
            60px
        );

    font-weight: var(--font-bold);

    line-height: 1.15;

    letter-spacing: -0.02em;

}


.hero-title span {

    color: var(--primary-color);

}


/* =====================================================
   HERO DESCRIPTION
===================================================== */

.hero-description {

    max-width: 720px;

    margin:
        0
        auto
        var(--space-6);

    color: var(--text-light-color);

    font-size: var(--font-size-md);

    line-height: 1.8;

}


/* =====================================================
   HERO SEARCH
===================================================== */

.hero-search {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: var(--space-3);

    width: 100%;

    max-width: 760px;

    margin:
        0
        auto
        var(--space-5);

    z-index: 20;

}


.hero-search input {

    flex: 1;

    width: 100%;

    min-width: 0;

    height: var(--input-height);

    padding:
        0
        var(--space-4);

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

    border-radius: var(--radius-md);

    background: var(--surface-color);

    color: var(--text-color);

    font-family: var(--font-family);

    font-size: var(--font-size-sm);

    transition:
        border-color .25s ease,
        box-shadow .25s ease;

}


.hero-search input::placeholder {

    color: var(--text-muted-color);

}


.hero-search input:hover {

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

}


.hero-search input:focus {

    outline: none;

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

    box-shadow: var(--focus-ring);

}


/* =====================================================
   HERO SEARCH BUTTON
===================================================== */

.hero-search .btn {

    flex-shrink: 0;

    min-height: var(--input-height);

}


/* =====================================================
   HERO ACTIONS
===================================================== */

.hero-actions {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: var(--space-3);

    flex-wrap: wrap;

    margin-bottom: var(--space-5);

}


.hero-actions .btn {

    flex-shrink: 0;

}


/* =====================================================
   HERO POPULAR
===================================================== */

.hero-popular {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: var(--space-2);

}


.hero-popular > span {

    color: var(--text-color);

    font-size: var(--font-size-sm);

    font-weight: var(--font-semibold);

}


.hero-popular a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 6px 12px;

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

    border-radius: var(--radius-round);

    background: var(--surface-color);

    color: var(--text-light-color);

    font-size: var(--font-size-xs);

    line-height: 1.4;

    text-decoration: none;

    transition:
        color .25s ease,
        background-color .25s ease,
        border-color .25s ease,
        transform .2s ease;

}


.hero-popular a:hover {

    color: var(--primary-color);

    background:
        var(--primary-light-color);

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

    transform: translateY(-1px);

}


/* =====================================================
   STATS SECTION
===================================================== */

.stats {

    padding:
        var(--space-8)
        0;

    background:
        var(--surface-color);

}


.stats-grid {

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: var(--space-5);

}


.stat-card {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-width: 0;

    padding:
        var(--space-6)
        var(--space-5);

    overflow: hidden;

    text-align: center;

    background:
        var(--background-color);

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

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-sm);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;

}


.stat-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 3px;

    background:
        var(--primary-color);

    transform:
        scaleX(0);

    transform-origin:
        left;

    transition:
        transform .3s ease;

}


.stat-card:hover {

    transform:
        translateY(-5px);

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

    box-shadow:
        var(--shadow-md);

}


.stat-card:hover::before {

    transform:
        scaleX(1);

}


.stat-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-bottom:
        var(--space-3);

    color:
        var(--primary-color);

    font-size: 42px;

    line-height: 1;

}


.stat-number {

    margin:
        0
        0
        var(--space-2);

    color:
        var(--text-color);

    font-size: 38px;

    font-weight:
        var(--font-bold);

    line-height: 1.1;

}


.stat-title {

    color:
        var(--text-color);

    font-size:
        var(--font-size-sm);

    font-weight:
        var(--font-semibold);

    line-height: 1.4;

}


.stat-description {

    max-width: 220px;

    margin:
        var(--space-2)
        0
        0;

    color:
        var(--text-muted-color);

    font-size:
        var(--font-size-xs);

    line-height: 1.6;

}


/* =====================================================
   SECTION HEADER
===================================================== */

.section-header {

    max-width: 720px;

    margin:
        var(--space-5)
        auto
        var(--space-7);

    text-align: center;

}


.section-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 5px 12px;

    margin-bottom:
        var(--space-3);

    border:
        1px solid
        rgba(245, 158, 11, .15);

    border-radius:
        var(--radius-round);

    background:
        #fff8e6;

    color:
        #b7791f;

    font-size:
        var(--font-size-xs);

    font-weight:
        var(--font-semibold);

    line-height: 1.4;

}


.section-header h2 {

    margin:
        0
        0
        var(--space-3);

    color:
        var(--text-color);

    font-size:
        var(--h2);

    font-weight:
        var(--font-bold);

    line-height: 1.25;

}


.section-header p {

    max-width: 650px;

    margin:
        0
        auto;

    color:
        var(--text-light-color);

    font-size:
        var(--font-size-sm);

    line-height:
        var(--line-height);

}


/* =====================================================
   FEATURED TOOLS
===================================================== */

.featured-tools {

    padding:
        var(--space-8)
        0;

    background:
        var(--background-color);

}


/*
 * Homepage uses four columns on desktop.
 *
 * The actual tool-card styling comes from card.css.
 */

.featured-tools .tools-grid {

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap:
        var(--space-5);

    width: 100%;

    align-items: stretch;

}


/* =====================================================
   HOMEPAGE TOOL CARD OVERRIDES
===================================================== */

.featured-tools .tool-card {

    min-width: 0;

    min-height: 100%;

}


/*
 * Keep description heights visually consistent.
 */

.featured-tools .tool-card__description {

    display: -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

    overflow: hidden;

}


/*
 * Ensure arrow never behaves like a button.
 */

.featured-tools .tool-card__arrow {

    pointer-events: none;

}


/* =====================================================
   CATEGORIES SECTION
===================================================== */

.categories {

    padding:
        var(--space-8)
        0;

    background:
        var(--surface-color);

}


.categories-grid {

    display: grid;

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

    gap:
        var(--space-4);

}


/* =====================================================
   HOMEPAGE CATEGORY CARD
===================================================== */

.categories .category-card {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-width: 0;

    min-height: 150px;

    padding:
        var(--space-5);

    text-align: center;

    background:
        var(--background-color);

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

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-sm);

    color: inherit;

    text-decoration: none;

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;

}


.categories .category-card:hover {

    transform:
        translateY(-4px);

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

    box-shadow:
        var(--shadow-md);

}


.categories .category-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-bottom:
        var(--space-3);

    color:
        var(--primary-color);

    font-size: 36px;

    line-height: 1;

}


.categories .category-card h3 {

    margin:
        0
        0
        var(--space-2);

    color:
        var(--text-color);

    font-size:
        var(--font-size-md);

    font-weight:
        var(--font-bold);

    line-height: 1.35;

}


.categories .category-card p {

    margin: 0;

    color:
        var(--text-light-color);

    font-size:
        var(--font-size-xs);

    line-height: 1.5;

}


.categories .category-card__content {

    width: 100%;

}


.categories .category-card__count {

    display: inline-block;

    margin-top:
        var(--space-2);

    color:
        var(--primary-color);

    font-size:
        var(--font-size-xs);

    font-weight:
        var(--font-semibold);

}


/* =====================================================
   FEATURES SECTION
===================================================== */

.features {

    padding:
        var(--space-8)
        0;

    background:
        var(--background-color);

}


.features-grid {

    display: grid;

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

    gap:
        var(--space-4);

}


/* =====================================================
   HOMEPAGE FEATURE CARD
===================================================== */

.features .feature-card {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-width: 0;

    min-height: 190px;

    padding:
        var(--space-5);

    text-align: center;

    background:
        var(--surface-color);

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

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-sm);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;

}


.features .feature-card:hover {

    transform:
        translateY(-4px);

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

    box-shadow:
        var(--shadow-md);

}


.features .feature-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-bottom:
        var(--space-3);

    color:
        var(--primary-color);

    font-size: 42px;

    line-height: 1;

}


.features .feature-card h3 {

    margin:
        0
        0
        var(--space-2);

    color:
        var(--text-color);

    font-size:
        var(--font-size-md);

    font-weight:
        var(--font-bold);

    line-height: 1.35;

}


.features .feature-card p {

    max-width: 300px;

    margin: 0;

    color:
        var(--text-light-color);

    font-size:
        var(--font-size-sm);

    line-height: 1.65;

}


/* =====================================================
   TESTIMONIALS
===================================================== */

.testimonials {

    padding:
        var(--space-8)
        0;

    background:
        var(--surface-color);

}


.testimonials-grid {

    display: grid;

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

    gap:
        var(--space-4);

}


.testimonial-card {

    display: flex;

    flex-direction: column;

    min-width: 0;

    padding:
        var(--space-5);

    background:
        var(--background-color);

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

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-sm);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;

}


.testimonial-card:hover {

    transform:
        translateY(-4px);

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

    box-shadow:
        var(--shadow-md);

}


.testimonial-stars {

    margin-bottom:
        var(--space-3);

    color:
        #f59e0b;

    font-size:
        var(--font-size-md);

    letter-spacing:
        2px;

    line-height: 1;

}


.testimonial-text {

    flex: 1;

    margin:
        0
        0
        var(--space-5);

    color:
        var(--text-light-color);

    font-size:
        var(--font-size-sm);

    line-height:
        1.7;

}


.testimonial-user {

    display: flex;

    flex-direction: column;

    gap: 2px;

}


.testimonial-user strong {

    color:
        var(--text-color);

    font-size:
        var(--font-size-sm);

    font-weight:
        var(--font-semibold);

}


.testimonial-user span {

    color:
        var(--text-light-color);

    font-size:
        var(--font-size-xs);

}


/* =====================================================
   DARK MODE
===================================================== */

html.dark .hero {

    background:
        radial-gradient(
            circle at top right,
            rgba(37, 99, 235, .12),
            transparent 45%
        ),
        radial-gradient(
            circle at bottom left,
            rgba(99, 102, 241, .10),
            transparent 40%
        ),
        var(--background-color);

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

}


html.dark .hero-badge {

    background:
        rgba(37, 99, 235, .14);

    border-color:
        rgba(147, 197, 253, .15);

}


html.dark .hero-popular a {

    background:
        var(--surface-color);

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

}


html.dark .hero-popular a:hover {

    background:
        var(--primary-color);

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

    color:
        var(--white);

}


html.dark .section-badge {

    background:
        rgba(245, 158, 11, .10);

    border-color:
        rgba(245, 158, 11, .15);

    color:
        #fbbf24;

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1100px) {

    .featured-tools .tools-grid {

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

    }

}


@media (max-width: 992px) {

    .hero {

        padding:
            var(--space-8)
            0
            var(--space-7);

    }


    .hero-title {

        font-size:
            clamp(
                36px,
                6vw,
                52px
            );

    }


    .stats-grid {

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

    }


    .featured-tools .tools-grid {

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

    }


    .categories-grid {

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

    }


    .features-grid {

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

    }


    .testimonials-grid {

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

    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 768px) {

    .hero {

        padding:
            var(--space-7)
            0
            var(--space-6);

    }


    .hero-content {

        max-width: 100%;

    }


    .hero-title {

        font-size:
            clamp(
                32px,
                8vw,
                44px
            );

        letter-spacing:
            -0.015em;

    }


    .hero-description {

        margin-bottom:
            var(--space-5);

        font-size:
            var(--font-size-sm);

        line-height: 1.7;

    }


    .hero-search {

        flex-direction: column;

        gap:
            var(--space-3);

    }


    .hero-search input {

        width: 100%;

    }


    .hero-search .btn {

        width: 100%;

    }


    .hero-actions {

        flex-direction: column;

        width: 100%;

    }


    .hero-actions .btn {

        width: 100%;

    }


    .section-header {

        margin-bottom:
            var(--space-6);

    }


    .section-header h2 {

        font-size:
            var(--h3);

    }


    .stat-number {

        font-size: 34px;

    }


    .featured-tools,
    .categories,
    .features,
    .testimonials,
    .stats {

        padding:
            var(--space-7)
            0;

    }


    .featured-tools .tools-grid {

        grid-template-columns:
            1fr;

    }


    .categories-grid {

        grid-template-columns:
            1fr;

    }


    .features-grid {

        grid-template-columns:
            1fr;

    }


    .testimonials-grid {

        grid-template-columns:
            1fr;

    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 576px) {

    .hero-badge {

        padding:
            7px 12px;

        font-size:
            var(--font-size-xs);

    }


    .hero-title {

        font-size:
            clamp(
                30px,
                9vw,
                40px
            );

        line-height:
            1.18;

    }


    .hero-popular {

        gap:
            var(--space-2);

    }


    .hero-popular a {

        padding:
            5px 10px;

        font-size:
            11px;

    }


    .stats-grid {

        grid-template-columns:
            1fr;

    }


    .stat-card {

        padding:
            var(--space-5);

    }


    .categories .category-card {

        min-height:
            140px;

        padding:
            var(--space-5);

    }


    .features .feature-card {

        min-height:
            170px;

        padding:
            var(--space-5);

    }

}


/* =====================================================
   EXTRA SMALL MOBILE
===================================================== */

@media (max-width: 380px) {

    .hero-title {

        font-size: 28px;

    }


    .hero-description {

        font-size:
            var(--font-size-xs);

    }


    .hero-popular > span {

        width: 100%;

    }


    .stat-number {

        font-size: 30px;

    }

}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {

    .hero-badge,
    .hero-popular a,
    .stat-card,
    .stat-card::before,
    .featured-tools .tool-card,
    .categories .category-card,
    .features .feature-card,
    .testimonial-card {

        transition:
            none !important;

    }


    .hero-badge:hover,
    .hero-popular a:hover,
    .stat-card:hover,
    .featured-tools .tool-card:hover,
    .categories .category-card:hover,
    .features .feature-card:hover,
    .testimonial-card:hover {

        transform:
            none !important;

    }

}


/* =====================================================
   PRINT
===================================================== */

@media print {

    .hero {

        padding: 40px 0;

        background:
            #ffffff;

        border-bottom:
            1px solid
            #000000;

    }


    .hero-search,
    .hero-actions {

        display: none;

    }


    .stat-card,
    .featured-tools .tool-card,
    .categories .category-card,
    .features .feature-card,
    .testimonial-card {

        box-shadow:
            none;

        border-color:
            #000000;

    }


    .tool-card__arrow {

        display: none;

    }

}


/* =====================================================
   END OF HOME.CSS
===================================================== */