/* =========================================================
   BRAINFRAME TECHNOLOGIES
   PRODUCTS PAGE STYLES
   ========================================================= */


/* =========================================================
   PAGE VARIABLES
   ========================================================= */

:root {

    --products-page-dark: #2E2E2E;
    --products-page-dark-deep: #242424;

    --products-page-soft: #F7F5F4;
    --products-page-card: #FFFFFF;

    --products-page-text-soft: #746B68;
    padding-top: 80px;
}


/* =========================================================
   PRODUCTS PAGE GLOBAL SECTIONS
   ========================================================= */

.products-page-hero,
.products-catalog-section,
.products-categories-section {

    position: relative;
    overflow: hidden;
    
}


/* =========================================================
   PRODUCTS HERO
   ========================================================= */

.products-page-hero {

    position: relative;

    background:
        linear-gradient(
            115deg,
            #242424 0%,
            #2E2E2E 48%,
            #282828 100%
        );

    color: var(--color-white);

    padding: 62px 0 0;
    

}


/* =========================================================
   HERO BACKGROUND IMAGE
   ========================================================= */

.products-hero-bg-img {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    z-index: 0;

    opacity: 0.3;

    pointer-events: none;

}


/* =========================================================
   HERO CONTAINER
   ========================================================= */

.products-page-hero .container {

    position: relative;

    z-index: 1;
    

}


/* =========================================================
   HERO EYEBROW
   ========================================================= */

.products-page-eyebrow {

    display: flex;

    align-items: center;

    gap: 7px;

    margin: 0 0 10px;

    color: var(--brand-red);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.17em;

    line-height: 1.3;

    text-transform: uppercase;

}


/* Red square */

.products-page-eyebrow span {

    display: inline-block;

    width: 5px;
    height: 5px;

    flex: 0 0 auto;

    background: var(--brand-red);

}


/* =========================================================
   HERO TITLE
   Same entrance behavior as Services hero title
   ========================================================= */

.products-page-hero-title {

    max-width: 790px;

    margin: 0;

    color: var(--color-white);

    font-family: "Fjalla One", sans-serif;

    font-size: clamp(45px, 5vw, 72px);

    font-weight: 400;

    line-height: 0.98;

    text-transform: uppercase;

    opacity: 0;

    transform: translateY(20px);

}


/* Trigger */

.products-page-hero.is-visible
.products-page-hero-title {

    animation:
        productsHeroTitleFade
        0.8s
        cubic-bezier(0.16, 1, 0.3, 1)
        forwards;

}


@keyframes productsHeroTitleFade {

    0% {

        opacity: 0;

        transform: translateY(20px);

    }

    100% {

        opacity: 1;

        transform: translateY(0);

    }

}


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

.products-page-hero-description {

    max-width: 720px;

    margin: 20px 0 0;

    color: rgba(255, 255, 255, 0.76);

    font-size: 14px;

    line-height: 1.65;

    opacity: 0;

    transform: translateY(20px);

}


/* Same timing relationship as Services */

.products-page-hero.is-visible
.products-page-hero-description {

    animation:
        productsHeroDescriptionFade
        0.8s
        cubic-bezier(0.16, 1, 0.3, 1)
        0.35s
        forwards;

}


@keyframes productsHeroDescriptionFade {

    0% {

        opacity: 0;

        transform: translateY(20px);

    }

    100% {

        opacity: 1;

        transform: translateY(0);

    }

}


/* =========================================================
   HERO ACTION AREA
   ========================================================= */

.products-page-hero-actions {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 26px;

}


/* =========================================================
   STATIC COMING SOON BUTTON
   IMPORTANT:
   This is NOT a link.
   It is deliberately non-interactive.
   ========================================================= */

.products-coming-soon-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    min-height: 42px;

    padding: 0 19px;

    background: var(--brand-red);

    color: var(--color-white);

    border: 1px solid rgba(255, 255, 255, 0.09);

    font-family: "Cantarell", sans-serif;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    cursor: default;

    user-select: none;

}


/* Clock icon */

.products-coming-soon-button
.material-symbols-outlined {

    font-size: 15px;

    line-height: 1;

}


/* No hover interaction */

.products-coming-soon-button:hover {

    background: rgba(255, 255, 255, 0.08);

    color: var(--color-white);

}


/* =========================================================
   HERO FEATURE STRIP
   ========================================================= */

.products-page-hero-strip {

    display: grid;

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

    margin-top: 38px;

    background:
        rgba(255, 255, 255, 0.075);

    border:
        1px solid rgba(255, 255, 255, 0.045);

    opacity: 0;

    transform: translateY(20px);

}


/* Description + strip appear together */

.products-page-hero.is-visible
.products-page-hero-strip {

    animation:
        productsHeroDescriptionFade
        0.8s
        cubic-bezier(0.16, 1, 0.3, 1)
        0.35s
        forwards;

}


/* =========================================================
   HERO STRIP ITEM
   ========================================================= */

.products-page-hero-strip-item {

    min-width: 0;

    padding: 19px 18px 18px;

    border-right:
        1px solid rgba(255, 255, 255, 0.07);

}


.products-page-hero-strip-item:last-child {

    border-right: 0;

}


/* =========================================================
   HERO STRIP TOP
   ========================================================= */

.products-page-strip-top {

    display: flex;

    align-items: baseline;

    gap: 5px;

}


/* Number */

.products-page-strip-number {

    color: var(--brand-red);

    font-family: "Fjalla One", sans-serif;

    font-size: 16px;

}


/* Title */

.products-page-strip-title {

    color: var(--color-white);

    font-family: "Cantarell", sans-serif;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.06em;

    text-transform: uppercase;

}


/* Description */

.products-page-hero-strip-item p {

    margin: 9px 0 0;

    color:
        rgba(255, 255, 255, 0.57);

    font-size: 10px;

    line-height: 1.45;

}


/* =========================================================
   PRODUCT CATALOG SECTION
   ========================================================= */

.products-catalog-section {

    background: var(--products-page-soft);

    padding: 90px 0 94px;

}


/* =========================================================
   CATALOG CONTENT
   ========================================================= */

.products-catalog-content {

    max-width: 900px;

    margin: 0 auto;

    text-align: center;

}


/* =========================================================
   CATALOG EYEBROW
   ========================================================= */

.products-catalog-eyebrow {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    margin: 0 0 12px;

    color: var(--brand-red);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.17em;

    text-transform: uppercase;

}


.products-catalog-eyebrow span {

    width: 5px;
    height: 5px;

    background: var(--brand-red);

}


/* =========================================================
   CATALOG TITLE
   ========================================================= */

.products-catalog-title {

    margin: 0;

    color: var(--color-charcoal);

    font-family: "Fjalla One", sans-serif;

    font-size: clamp(42px, 5vw, 68px);

    font-weight: 400;

    line-height: 0.98;

    text-transform: uppercase;

}


/* =========================================================
   CATALOG DESCRIPTION
   ========================================================= */

.products-catalog-description {

    max-width: 720px;

    margin: 20px auto 0;

    color: #706967;

    font-size: 14px;

    line-height: 1.7;

}


/* =========================================================
   PRODUCT CATEGORIES
   ========================================================= */

.products-categories-section {

    background: #FFFFFF;

    padding: 82px 0 90px;

}


/* =========================================================
   SECTION INTRO
   ========================================================= */

.products-section-intro {

    max-width: 850px;

    margin-bottom: 34px;

}


/* =========================================================
   SECTION EYEBROW
   ========================================================= */

.products-section-eyebrow {

    display: flex;

    align-items: center;

    gap: 7px;

    margin: 0 0 10px;

    color: var(--brand-red);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.17em;

    text-transform: uppercase;

}


.products-section-eyebrow span {

    width: 5px;
    height: 5px;

    background: var(--brand-red);

}


/* =========================================================
   SECTION TITLE
   ========================================================= */

.products-section-title {

    margin: 0;

    color: var(--color-charcoal);

    font-family: "Fjalla One", sans-serif;

    font-size: clamp(38px, 4vw, 57px);

    font-weight: 400;

    line-height: 1;

    text-transform: uppercase;

}


/* =========================================================
   CATEGORY GRID
   ========================================================= */

.products-categories-grid {

    display: grid;

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

    gap: 18px;

}


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

.products-category-card {

    min-height: 280px;

    display: flex;

    flex-direction: column;

    padding: 22px 20px 19px;

    background: var(--products-page-soft);

    border:
        1px solid rgba(23, 23, 23, 0.04);

    opacity: 0;

    transform: translateY(35px);

    transition:
        opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);

}


/* =========================================================
   CATEGORY REVEAL
   ========================================================= */

.products-categories-section.is-visible
.products-category-card {

    opacity: 1;

    transform: translateY(0);

}


/* Stagger */

.products-categories-section.is-visible
.products-category-card:nth-child(1) {

    transition-delay: 0.1s;

}


.products-categories-section.is-visible
.products-category-card:nth-child(2) {

    transition-delay: 0.2s;

}


.products-categories-section.is-visible
.products-category-card:nth-child(3) {

    transition-delay: 0.3s;

}


.products-categories-section.is-visible
.products-category-card:nth-child(4) {

    transition-delay: 0.4s;

}


.products-categories-section.is-visible
.products-category-card:nth-child(5) {

    transition-delay: 0.5s;

}


.products-categories-section.is-visible
.products-category-card:nth-child(6) {

    transition-delay: 0.6s;

}


/* =========================================================
   CATEGORY CARD TOP
   ========================================================= */

.products-category-card-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 22px;

}


/* Icon */

.products-category-card-top
.material-symbols-outlined {

    width: 30px;

    height: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        rgba(225, 7, 7, 0.09);

    color: var(--brand-red);

    font-size: 17px;

}


/* Category label */

.products-category-card-top span:last-child {

    color: #89827F;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.14em;

    text-transform: uppercase;

}




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

@media (max-width: 991.98px) {


    .products-page-hero {

        padding-top: 54px;

    }


    .products-page-hero-title {

        max-width: 680px;

        font-size:
            clamp(42px, 7vw, 62px);

    }


    .products-page-hero-strip {

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

    }


    .products-page-hero-strip-item:nth-child(2) {

        border-right: 0;

    }


    .products-page-hero-strip-item:nth-child(-n + 2) {

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

    }


    .products-categories-grid {

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

    }

}


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

@media (max-width: 767.98px) {


    .products-page-hero {

        padding-top: 46px;

    }


    .products-page-eyebrow {

        font-size: 8px;

    }


    .products-page-hero-title {

        max-width: none;

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

    }


    .products-page-hero-description {

        font-size: 12px;

        line-height: 1.65;

    }


    .products-page-hero-actions {

        align-items: flex-start;

    }


    .products-coming-soon-button {

        min-height: 42px;

    }


    .products-page-hero-strip {

        grid-template-columns: 1fr;

        margin-top: 30px;

    }


    .products-page-hero-strip-item {

        padding: 16px;

        border-right: 0;

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

    }


    .products-page-hero-strip-item:last-child {

        border-bottom: 0;

    }


    .products-catalog-section {

        padding: 58px 0 64px;

    }


    .products-catalog-title {

        font-size:
            clamp(36px, 10vw, 49px);

    }


    .products-catalog-description {

        font-size: 12px;

        line-height: 1.7;

    }


    .products-categories-section {

        padding: 58px 0 64px;

    }


    .products-section-title {

        font-size:
            clamp(36px, 10vw, 49px);

    }


    .products-categories-grid {

        grid-template-columns: 1fr;

        gap: 12px;

    }


    .products-category-card {

        min-height: auto;

        padding: 20px;

    }

}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1400px) {


    .products-page-hero {

        padding-top: 72px;

    }


    .products-page-hero-title {

        max-width: 900px;

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

    }


    .products-page-hero-description {

        font-size: 15px;

    }


    .products-page-hero-strip-item {

        padding: 22px;

    }


    .products-catalog-section,
    .products-categories-section {

        padding-top: 96px;

        padding-bottom: 100px;

    }


    .products-categories-grid {

        gap: 22px;

    }


    .products-category-card {

        min-height: 320px;

        padding: 25px 23px;

    }

}


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

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


    .products-page-hero-title,
    .products-page-hero-description,
    .products-page-hero-strip,
    .products-category-card {

        opacity: 1;

        transform: none;

        animation: none;

        transition: none;

    }

}