/* JAPI EXTRA CSS Edit
 * Nazwa: Dodatkowy CSS 2
 * Plik: custom-2.css
 * Globalny plik dodatkowych stylów PrestaShop.
 * Autor modułu: kubaweb.dev by Kuba Pieczewski
 */
/* =========================================================
   BOSS-HAKER – INTRO H1 NA STRONIE GŁÓWNEJ SKLEPU
   2026-08-06 v1.0.0
   ========================================================= */

#index .cm-home-intro {
    position: relative;
    width: calc(100% - 48px);
    max-width: 1480px;
    margin: 46px auto 52px;
    padding: 0;
}

#index .cm-home-intro__panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 36px 45px 34px;

    background:
        radial-gradient(
            circle at 14% 0%,
            rgba(217, 31, 24, 0.24) 0%,
            rgba(217, 31, 24, 0) 36%
        ),
        radial-gradient(
            circle at 88% 100%,
            rgba(239, 44, 36, 0.15) 0%,
            rgba(239, 44, 36, 0) 40%
        ),
        linear-gradient(
            135deg,
            #080a09 0%,
            #0b0e0d 48%,
            #151817 100%
        );

    border: 1px solid rgba(239, 44, 36, 0.28);
    border-radius: 24px;

    box-shadow:
        0 26px 60px rgba(0, 0, 0, 0.34),
        0 8px 22px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);

    font-family: "Montserrat", sans-serif;
}

#index .cm-home-intro__panel::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -90px;
    left: -70px;

    width: 250px;
    height: 250px;

    border: 1px solid rgba(239, 44, 36, 0.22);
    border-radius: 50%;

    box-shadow:
        0 0 80px rgba(217, 31, 24, 0.08),
        inset 0 0 45px rgba(217, 31, 24, 0.04);
}

#index .cm-home-intro__panel::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -85px;
    bottom: -120px;

    width: 300px;
    height: 300px;

    background:
        radial-gradient(
            circle,
            rgba(217, 31, 24, 0.16) 0%,
            rgba(217, 31, 24, 0.04) 46%,
            rgba(217, 31, 24, 0) 72%
        );

    border-radius: 50%;
}

#index .cm-home-intro__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 13px;
    padding: 7px 15px;

    background: rgba(217, 31, 24, 0.11);
    border: 1px solid rgba(239, 44, 36, 0.28);
    border-radius: 999px;

    color: #f1f1f1;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

#index .cm-home-intro__eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;

    background: #ef2c24;
    border-radius: 50%;

    box-shadow:
        0 0 0 4px rgba(239, 44, 36, 0.14),
        0 0 16px rgba(239, 44, 36, 0.55);
}

#index .cm-home-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    margin: 0;
    padding: 0;

    color: #ffffff;
    text-align: center;
}

#index .cm-home-heading__brand {
    font-size: clamp(36px, 3.2vw, 54px);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.045em;

    background: linear-gradient(
        110deg,
        #ffffff 0%,
        #f1f1f1 48%,
        #ef2c24 100%
    );

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.26));
}

#index .cm-home-heading__text {
    max-width: 900px;

    color: #bfc2c1;
    font-size: clamp(18px, 1.45vw, 23px);
    line-height: 1.45;
    font-weight: 500;
    letter-spacing: -0.015em;
}

#index .cm-home-intro__features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;

    margin-top: 23px;
}

#index .cm-home-intro__features span {
    position: relative;
    padding: 8px 14px 8px 28px;

    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 10px;

    color: #d8d9d9;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 600;

    box-shadow:
        0 5px 16px rgba(0, 0, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

#index .cm-home-intro__features span::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 13px;

    width: 6px;
    height: 6px;

    background: #d91f18;
    border-radius: 50%;
    transform: translateY(-50%);

    box-shadow: 0 0 10px rgba(217, 31, 24, 0.48);
}

@media (max-width: 767px) {
    #index .cm-home-intro {
        width: calc(100% - 28px);
        margin: 26px auto 34px;
    }

    #index .cm-home-intro__panel {
        padding: 27px 18px 26px;
        border-radius: 18px;
    }

    #index .cm-home-intro__eyebrow {
        margin-bottom: 12px;
        padding: 6px 12px;
        font-size: 10px;
        letter-spacing: 0.08em;
    }

    #index .cm-home-heading {
        gap: 9px;
    }

    #index .cm-home-heading__brand {
        font-size: 36px;
    }

    #index .cm-home-heading__text {
        max-width: 330px;
        font-size: 16px;
        line-height: 1.45;
    }

    #index .cm-home-intro__features {
        gap: 7px;
        margin-top: 20px;
    }

    #index .cm-home-intro__features span {
        padding: 7px 11px 7px 25px;
        font-size: 11px;
    }

    #index .cm-home-intro__features span::before {
        left: 11px;
    }
}

#index .cm-home-intro {
    clear: both;
    display: block;
    box-sizing: border-box;

    width: calc(100% - 48px);
    max-width: 1480px;

    margin: 0 auto 52px !important;
    padding-top: 52px !important;
}

@media (max-width: 767px) {
    #index .cm-home-intro {
        width: calc(100% - 28px);
        margin-bottom: 34px !important;
        padding-top: 28px !important;
    }
}