/* ============================================================================
   store-home.css — Layout styles for the expanded landing page sections.

   Companion to store-animations.css (which owns motion); this file owns the
   *structure and skin* of the sections added beyond the original page:

     1. Brand marquee
     2. Stats band
     3. Why Choose Us cards
     4. Promo split banners
     5. Testimonials
     6. FAQ accordion skin
     7. Newsletter band

   Palette intentionally bridges the two halves of the page: deep navy +
   cyan/violet from the 3D hero, indigo from the existing USP strip, on the
   light body used by the catalog sections.
   ========================================================================== */

:root {
    --home-ink: #0f172a;
    /* Primary text on light sections */
    --home-muted: #64748b;
    /* Secondary text */
    --home-indigo: #5b63f2;
    /* Matches the existing USP strip band */
    --home-navy: #101736;
    /* Dark band background (hero family) */
    --home-surface: #ffffff;
    /* Card surface on light sections */
    --home-border: #e2e8f0;
    /* Hairline card borders */
}

/* ── 1. Brand marquee ─────────────────────────────────────────────────────
   Infinite horizontal scroll of partner-brand wordmarks. The track holds the
   list TWICE; animating to -50% then looping is seamless because the second
   copy is pixel-identical to the first. Pure CSS — no JS dependency. */
.brand-marquee {
    overflow: hidden;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--home-border);
    background: var(--home-surface);
    /* Fade the strip edges so brands appear/disappear softly, not clipped. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.brand-track {
    display: flex;
    width: max-content;
    /* Track sized to content so -50% is exact */
    gap: 3.5rem;
    align-items: center;
    animation: marquee-scroll 30s linear infinite;
}

/* Pause on hover — lets the visitor actually read the brand list. */
.brand-marquee:hover .brand-track {
    animation-play-state: paused;
}

.brand-item {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--home-muted);
    white-space: nowrap;
    opacity: 0.75;
    transition: opacity 0.25s ease, color 0.25s ease;
}

.brand-item:hover {
    opacity: 1;
    color: var(--home-indigo);
}

@keyframes marquee-scroll {
    to {
        transform: translateX(-50%);
    }
}

/* ── 2. Stats band ────────────────────────────────────────────────────────
   Dark counter strip that visually echoes the hero. The radial glows reuse
   the hologram palette so the page bookends feel related. */
.stats-band {
    background:
        radial-gradient(ellipse 60% 120% at 15% 0%, rgba(34, 211, 238, 0.12), transparent),
        radial-gradient(ellipse 60% 120% at 85% 100%, rgba(139, 92, 246, 0.14), transparent),
        var(--home-navy);
    color: #fff;
    padding: 3.5rem 0;
}

.stat-item {
    text-align: center;
}

.stat-number,
.stat-suffix {
    font-size: clamp(2rem, 4vw, 2.75rem);
    /* Scales with viewport, capped both ends */
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(120deg, #22d3ee, #8b5cf6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-label {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
}

/* ── 3. Why Choose Us cards ───────────────────────────────────────────────
   Light service cards. Hover states stay subtle — GSAP tilt is reserved for
   commerce cards (categories/products) so the effect keeps meaning. */
.why-card {
    height: 100%;
    /* Equal heights inside the Bootstrap row */
    padding: 1.75rem 1.5rem;
    border-radius: 1rem;
    border: 1px solid var(--home-border);
    background: var(--home-surface);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.why-card:hover {
    transform: translateY(-6px);
    border-color: rgba(91, 99, 242, 0.4);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1);
}

.why-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 1rem;
    border-radius: 0.85rem;
    font-size: 1.3rem;
    color: #fff;
    background: linear-gradient(135deg, var(--home-indigo), #8b5cf6);
}

.why-card h5 {
    color: var(--home-ink);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.why-card p {
    color: var(--home-muted);
    font-size: 0.92rem;
    margin-bottom: 0;
}

.why-card--image {
    padding: 0;
    overflow: hidden;
}

.why-card__img-wrap {
    height: 140px;
    overflow: hidden;
}

.why-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.why-card--image:hover .why-card__img {
    transform: scale(1.05);
}

.why-card--image h5,
.why-card--image p {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.why-card--image h5 {
    padding-top: 1.25rem;
}

.why-card--image p {
    padding-bottom: 1.5rem;
}

/* ── Showcase gallery ── */
.showcase-card {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.showcase-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(99, 102, 241, 0.18);
}

.showcase-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.showcase-card__label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.75rem 1rem;
    background: linear-gradient(transparent, rgba(15, 23, 42, 0.85));
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
}

/* ── 4. Promo split banners ───────────────────────────────────────────────
   Two service promos side by side. Each carries a large watermark icon in
   ::after — decorative depth without any image assets. */
.promo-card {
    position: relative;
    overflow: hidden;
    height: 100%;
    min-height: 260px;
    padding: 0;
    border-radius: 1.25rem;
    color: #fff;
    background-size: cover;
    background-position: center;
}

.promo-card--photo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.88) 0%, rgba(79, 70, 229, 0.55) 100%);
}

.promo-card__content {
    position: relative;
    z-index: 1;
    padding: 2.25rem 2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.promo-card--indigo {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
}

.promo-card--navy {
    background: linear-gradient(135deg, #0f2447, #164e63);
}

.promo-card h4 {
    font-weight: 800;
}

.promo-card p {
    color: rgba(255, 255, 255, 0.85);
    max-width: 42ch;
}

.promo-watermark {
    position: absolute;
    right: -18px;
    bottom: -22px;
    font-size: 7.5rem;
    opacity: 0.14;
    pointer-events: none;
    /* Decorative — never intercepts clicks */
}

.btn-promo {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.55rem 1.4rem;
    border-radius: 2rem;
    font-weight: 600;
    color: var(--home-ink);
    background: #fff;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.btn-promo:hover {
    color: var(--home-ink);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* ── 5. Testimonials ─────────────────────────────────────────────────────*/
.testimonial-card {
    height: 100%;
    padding: 1.75rem;
    border-radius: 1rem;
    border: 1px solid var(--home-border);
    background: var(--home-surface);
}

.testimonial-stars {
    color: #f59e0b;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

.testimonial-text {
    color: var(--home-ink);
    font-size: 0.95rem;
    line-height: 1.65;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

/* Initial-letter avatar — no photo assets required. */
.testimonial-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--home-indigo), #22d3ee);
}

.testimonial-name {
    font-weight: 700;
    color: var(--home-ink);
    font-size: 0.92rem;
}

.testimonial-role {
    color: var(--home-muted);
    font-size: 0.8rem;
}

/* ── 6. FAQ accordion skin ────────────────────────────────────────────────
   Softens Bootstrap's default accordion into rounded, separated items and
   recolors the active state to the page's indigo. */
.faq-accordion .accordion-item {
    border: 1px solid var(--home-border);
    border-radius: 0.85rem !important;
    /* !important: Bootstrap zeroes radius on inner items */
    margin-bottom: 0.75rem;
    overflow: hidden;
}

.faq-accordion .accordion-button {
    font-weight: 600;
    color: var(--home-ink);
    padding: 1.1rem 1.35rem;
}

.faq-accordion .accordion-button:not(.collapsed) {
    color: var(--home-indigo);
    background: rgba(91, 99, 242, 0.06);
    box-shadow: none;
}

.faq-accordion .accordion-body {
    color: var(--home-muted);
    font-size: 0.95rem;
}

/* ── 7. Newsletter band ──────────────────────────────────────────────────*/
.newsletter-band {
    background:
        radial-gradient(ellipse 50% 140% at 80% 0%, rgba(34, 211, 238, 0.12), transparent),
        var(--home-navy);
    color: #fff;
    border-radius: 1.25rem;
    padding: 2.5rem 2rem;
}

.newsletter-band h3 {
    font-weight: 800;
}

.newsletter-band p {
    color: rgba(255, 255, 255, 0.7);
}

.newsletter-input {
    height: 52px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 2rem 0 0 2rem;
    /* Pill left half; button completes the pill */
    padding: 0 1.4rem;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    flex: 1 1 auto;
    min-width: 0;
    /* Lets the input shrink inside flex on mobile */
}

.newsletter-input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.newsletter-input:focus {
    outline: 2px solid #22d3ee;
    /* Visible keyboard focus on the dark band */
    outline-offset: 1px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.newsletter-btn {
    height: 52px;
    padding: 0 1.75rem;
    border: none;
    border-radius: 0 2rem 2rem 0;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(120deg, #22d3ee, #5b63f2);
    transition: filter 0.25s ease;
}

.newsletter-btn:hover {
    filter: brightness(1.12);
}

/* ── Reduced motion ───────────────────────────────────────────────────────
   The marquee is this file's only keyframe animation; freeze it for users
   who prefer reduced motion (list remains readable as a static strip). */
@media (prefers-reduced-motion: reduce) {
    .brand-track {
        animation: none;
    }
}

.reduced-motion .brand-track {
    animation: none;
}