/* =============================================================
   catchweight.css — CatchWeight Solutions product landing page
   All rem values based on global.css base (19px)

   REUSE MAP — intentionally NOT redefined here, reused as-is:
     .container                                          -> global.css
     .cta-section / .cta-inner / .cta-content /
       .cta-heading                                       -> global.css
       ("Transform Your Inventory Management Today")
     .sd-benefits-section / -header / -title / -underline /
       .sd-benefit-card / -icon / -title / -desc           -> service-detail.css
       ("Why CatchWeight Solutions Matter" reuses the DevOps
       page's "Why DevOps Matters" 4-card grid — same pattern
       Office Buddy reused for its "Key Features" grid)
     .accordion / .accordion-item / .accordion-header /
       .accordion-title / .accordion-content /
       .accordion-arrow / .accordion-text                  -> global.css
       (bound automatically by initAccordion() / initHoverAccordion()
       in main.js)
     .ind-accordion / .ind-accordion-body /
       .ind-accordion-img-wrap / .ind-accordion-desc        -> industries.css
       ("Key Features of Our CatchWeight Solutions" reuses the
       Office Buddy "Why Choose" accordion pattern per request —
       cards up top for features, accordion below for the
       expandable feature list)
     .ind-serve-section / -header / -title / -underline /
       -subtitle / -list / -divider / -row / -item /
       -icon / -text / -item-title / -item-desc            -> industries.css
     .sd-why-list / -item / -icon / -text /
       -item-title / -item-desc                             -> service-detail.css
     .why-choose-right / .shadow-backdrop /
       .purple-container                                    -> global.css
       (re-themed to a plain image frame below via
       .cw-why-image-wrap, no purple fill needed here)
     .sd-accent                                             -> service-detail.css

   Everything below is unique to the CatchWeight Solutions page:
     1. Hero (+ eyebrow badge)
     2. Trusted-by logo marquee
     3. Key Features grid override (icon size)
     4. "Key Features of Our CatchWeight Solutions" accordion fix
     5. "Why Choose Technaureus" image frame (no purple bg)
     6. FAQ (tabs + accordion)
     7. CTA button variants
     8. Sticky "Download Brochure" tab
   ============================================================= */

.sd-accent {
    color: #F93;
}

/* ---------------------------------------------------------------
   Fix: give the "Key Features of Our CatchWeight Solutions"
   accordion room to show its taller image+list content when a
   panel is open, same technique service-detail.css and
   office-buddy.css use for their own accordions.
--------------------------------------------------------------- */


/* ---------------------------------------------------------------
   1. HERO
--------------------------------------------------------------- */
.cw-hero {
    position: relative;
    width: 100%;
    min-height: 46.105rem;
    /* 836px / 19 */
    overflow: hidden;
    background-color: #0a0a0a;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 14.91rem;
    padding-bottom: 11rem;
    color: #ffffff;
}

.cw-hero-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

.cw-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1;
}

.cw-hero-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.316rem;
    /* 25px */
    text-align: center;
    max-width: 64.4rem;
    /* 1223px */
    margin: 0 auto;
    padding: 0 1.5rem;
}

.cw-eyebrow-badge {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.8rem;
    padding: 0.526rem 1.05rem 0.326rem;
    border-radius: 100rem;
    background: rgba(255, 166, 76, 0.12);
    border: 0.053rem solid rgba(255, 166, 76, 0.4);
    color: #ffa64c;
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 0.789rem;
    letter-spacing: 0.02em;
}

.cw-hero-title {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 3.75rem;
    /* 60px */
    line-height: 4.158rem;
    /* 79px */
    color: #ffffff;
    max-width: 58rem;
}

.cw-hero-desc {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 1rem;
    /* 19px */
    line-height: 1.632rem;
    color: rgba(255, 255, 255, 0.92);
    max-width: 64.4rem;
}

.cw-hero-btns {
    display: flex;
    gap: 0.632rem;
    align-items: center;
    margin-top: 0.8rem;
}

.cw-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.632rem;
    /* 50px */
    padding: 0 1.9rem;
    border-radius: 1.579rem;
    font-family: var(--font-primary);
    font-size: 0.842rem;
    white-space: nowrap;
    transition: all 0.3s ease;
    border: 0.042rem solid #ffffff;
    cursor: pointer;
}

.cw-hero-btn--outline {
    background: transparent;
    color: #ffffff;
}


.cw-hero-btn--solid {
    background: var(--primary-blue);
    color: #ffffff;
}

.cw-hero-btn--solid:hover {
    background: #053b66;
    transform: translateY(-2px);
}

@media (max-width: 1024px) {
    .cw-hero {
        padding: 9rem 0 9rem;
        min-height: 36rem;
    }

    .cw-hero-title {
        font-size: 2.4rem;
        line-height: 1.25;
    }
}

@media (max-width: 600px) {
    .cw-hero-title {
        font-size: 1.9rem;
    }
}

/* ---------------------------------------------------------------
   2. TRUSTED-BY LOGO MARQUEE (Overlapping the bottom of hero)
--------------------------------------------------------------- */
.cw-hero-marquee-section,
.cw-marquee-section {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6.474rem;
    background-color: var(--body-bg-white);
    border-top-left-radius: 2.526rem;
    border-top-right-radius: 2.526rem;
    overflow: hidden;
    z-index: 3;
    display: flex;
    align-items: center;
}

.ob-hero-trust-client {
    margin-top: 1.5rem;
    margin-bottom: -1.38rem;
    font-size: 1.125rem;
    font-weight: 400;
}

.cw-marquee-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    direction: ltr;
}

.cw-marquee-wrapper::before,
.cw-marquee-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 5rem;
    z-index: 2;
    pointer-events: none;
}

.cw-marquee-wrapper::before {
    left: 0;
    background: linear-gradient(to right, var(--body-bg-white) 0%, transparent 100%);
}

.cw-marquee-wrapper::after {
    right: 0;
    background: linear-gradient(to left, var(--body-bg-white) 0%, transparent 100%);
}

.cw-marquee-track {
    display: flex;
    align-items: center;
    gap: clamp(4rem, 7vw, 8rem);
    white-space: nowrap;
    width: max-content;
    animation: cw-marquee-scroll 28s linear infinite;
    will-change: transform;
}

.cw-marquee-wrapper:hover .cw-marquee-track {
    animation-play-state: paused;
}

.cw-marquee-item {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    height: 2.632rem;
}

.cw-marquee-item img {
    height: 2.79438rem;
    width: auto;
    object-fit: contain;
    opacity: 0.75;
    filter: grayscale(100%);
    transition: opacity 0.2s ease, filter 0.2s ease;
}

.cw-marquee-item:hover img {
    opacity: 1;
    filter: grayscale(0%);
}

@keyframes cw-marquee-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* ---------------------------------------------------------------
   3. KEY FEATURES GRID — 4-up variant of sd-benefits-grid.
   sd-benefits-grid already reflows to 4 columns at desktop width,
   this page simply has 4 cards so nothing extra to override.
--------------------------------------------------------------- */
.cw-benefits-section {
    background-color: var(--body-bg-white);
}

/* ---------------------------------------------------------------
   5. "WHY CHOOSE TECHNAUREUS" IMAGE FRAME
   Same offset-backdrop composition as .why-choose-right, but a
   plain light-gray backdrop instead of the purple fill used on
   the DevOps page.
--------------------------------------------------------------- */
.cw-why-image-wrap {
    position: relative;
    width: 32.421rem;
    /* 616px */
    height: 35.789rem;
    /* 680px */
    margin-left: 1.895rem;
    margin-top: 2.158rem;
}

.cw-why-image-backdrop {
    position: absolute;
    background-color: #e8e8e8;
    width: 32.421rem;
    height: 35.789rem;
    top: 2.158rem;
    left: -1.895rem;
    border-radius: 0.105rem;
    z-index: 1;
}

.cw-why-image-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 32.421rem;
    height: 35.789rem;
    border-radius: 0.105rem;
    overflow: hidden;
    z-index: 2;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.cw-why-image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 1024px) {
    .cw-why-image-wrap {
        width: 100%;
        height: 22rem;
        margin: 3rem 0 0;
    }

    .cw-why-image-backdrop,
    .cw-why-image-frame {
        width: 100%;
        height: 22rem;
    }
}

/* ---------------------------------------------------------------
   6. FAQ (Tabs + accordion, reuses .accordion / .accordion-item)
--------------------------------------------------------------- */
.cw-faq-section {
    margin-top: 5rem;
    padding: 6rem 0;
}

.cw-faq-header {
    max-width: 58rem;
    margin-bottom: 2.9rem;
}

.cw-faq-title {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 2.5rem;
    text-transform: capitalize;
    color: var(--base-dark, #101828);
    margin-bottom: 0.6rem;
}

.cw-faq-subtitle {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--text-sub);
}

.cw-faq-tabs {
    display: inline-flex;
    gap: 0.6rem;
    background-color: var(--bg-white);
    border: 0.053rem solid var(--border-gray);
    border-radius: 0.632rem;
    padding: 0.6rem;
    margin-bottom: 1.8rem;
}

.cw-faq-tab {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0.6rem 0.9rem;
    border-radius: 0.421rem;
    font-family: var(--font-primary);
    font-size: 1rem;
    color: var(--text-sub);
    transition: all 0.2s ease;
}

.cw-faq-tab.active {
    background: linear-gradient(154deg, #a8c8ff 0%, #4a8aff 25%, #1a5ce6 55%, #0f3fa8 100%);
    color: #ffffff;
}

.cw-faq-panel {
    display: none;
}

.cw-faq-panel.active {
    display: block;
}

.cw-faq-accordion {
    background-color: var(--bg-white);
    border-radius: 1.263rem;
    box-shadow: 0 2px 6px rgba(25, 33, 61, 0.1);
    padding: 0 2rem;
}

.cw-faq-accordion .accordion-item {
    border-bottom: 0.053rem solid #eef0f7;
    padding: 1.474rem 0;
}

.cw-faq-accordion .accordion-item:last-child {
    border-bottom: none;
}

.cw-faq-accordion .accordion-title {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 1.125rem;
    color: var(--base-dark, #101828);
}

.cw-faq-accordion .accordion-item.active .accordion-title {
    color: var(--primary-blue);
}

.cw-faq-accordion .accordion-text {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 0.947rem;
    line-height: 1.6;
    color: var(--text-sub);
    padding-top: 0.9rem;
}

/* ---------------------------------------------------------------
   7. CTA BUTTON VARIANTS (Transform Your Inventory Management)
--------------------------------------------------------------- */
.cw-cta-btns {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
    justify-content: center;
}

.cw-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.632rem;
    padding: 0 1.7rem;
    border-radius: 1.579rem;
    font-family: var(--font-primary);
    font-size: 0.842rem;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.cw-cta-btn--outline {
    background: transparent;
    color: #ffffff;
    border: 0.053rem solid rgba(255, 255, 255, 0.6);
}

.cw-cta-btn--outline:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}

.cw-cta-btn--solid {
    background-color: #ffffff;
    color: var(--base-dark);
    border: 0.053rem solid #ffffff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
}

.cw-cta-btn--solid:hover {
    background-color: #f0f7ff;
    transform: translateY(-2px);
}

/* ---------------------------------------------------------------
   8. STICKY "DOWNLOAD BROCHURE" SIDE TAB (same treatment as
   Office Buddy's .ob-brochure-tab)
--------------------------------------------------------------- */
.cw-brochure-tab {
    position: fixed;
    right: 0;
    top: 55%;
    transform: translateY(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    z-index: 60;
    background-color: var(--bg-light);
    color: var(--text-sub);
    font-family: var(--font-primary);
    font-size: 0.789rem;
    letter-spacing: 0.06em;
    padding: 1.4rem 0.6rem;
    border-radius: 0 0.632rem 0.632rem 0;
    text-transform: uppercase;
    transition: padding 0.25s ease;
    box-shadow: -6px 1px 23px 0 rgba(0, 98, 178, 0.18);
}

.cw-brochure-tab:hover {
    padding-right: 1rem;
    box-shadow: -6px 1px 23px 0 rgba(0, 98, 178, 0.35);
}

/* ---------------------------------------------------------------
   9. SCROLL REVEAL ANIMATIONS
   Now globally standardized in global.css & main.js
--------------------------------------------------------------- */

@media (max-width: 1600px) and (min-width: 1024px) {
  .cw-hero {
    padding-top: 11.91rem;
  }
}