:root {
    --ff-primary: #8B1A1A;
    --ff-primary-dark: #6B1212;
    --ff-accent: #D4AF37;
    --ff-light: #FDF8F6;
}

/* Hero */
.hero-ff, .product-hero {
    color: #fff;
    padding: 90px 0 70px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Product Hero - Premium Purple Gradient */
.product-hero {
    background: linear-gradient(160deg, #0f0a3a 0%, #2b1a6b 35%, #4a0e8f 65%, #6610f2 100%);
}

/* Fire Fighting Hero - Premium Red Gradient */
.hero-ff {
    background: linear-gradient(160deg, #3a0a0a 0%, #6B1212 35%, #8B1A1A 65%, #B22222 100%);
}

/* Common Glow Effects */
.product-hero::before, .hero-ff::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -80px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* Extra Glow - Bottom Left */
.product-hero::after, .hero-ff::after {
    content: '';
    position: absolute;
    bottom: -100px;
    left: -60px;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* Content on top of effects */
.product-hero > *, .hero-ff > * {
    position: relative;
    z-index: 1;
}

.hero-badge {
    background: rgba(255,255,255,0.14);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.2);
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.5px;
}
.hero-title { font-size: 3.4rem; font-weight: 800; line-height: 1.1; letter-spacing: -1px; }
.hero-title span { color: var(--ff-accent); }
.btn-gold { background: var(--ff-accent); color: #1a1a1a; font-weight:700; border:none; transition:all .3s ease }
.btn-gold:hover { background:#c9a227; transform:translateY(-2px); box-shadow:0 10px 25px rgba(212,175,55,0.35) }

/* Card & sections */
.section-card { background:#fff; border-radius:20px; box-shadow:0 8px 30px rgba(0,0,0,0.06); overflow:hidden }
.section-title { color:var(--ff-primary); font-weight:700; font-size:1.35rem }
.spec-table td { padding:11px 0; border-bottom:1px solid #f0f0f0; font-size:0.93rem }
.spec-table tr:last-child td { border-bottom:none }
.app-box { background:#f8f9fa; border-radius:16px; padding:22px 12px; text-align:center; transition:all .3s ease; border:1px solid #eee; height:100% }
.app-box:hover { background:#fff; box-shadow:0 10px 25px rgba(0,0,0,0.06); transform:translateY(-4px); border-color:#f0d0d0 }

/* Gallery */
.gallery-item { position:relative; overflow:hidden; border-radius:16px; cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,0.08); transition:all .35s ease }
.gallery-item img { width:100%; height:180px; object-fit:cover; transition:transform .5s ease; display:block }
.gallery-item:hover img { transform:scale(1.08) }
.gallery-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 60%); opacity:0; transition:opacity .35s ease; display:flex; align-items:flex-end; padding:16px }
.gallery-item:hover .gallery-overlay { opacity:1 }
.gallery-overlay span { color:#fff; font-size:0.85rem; font-weight:600 }

/* CTA */
.cta-bar { background: linear-gradient(135deg, #6B1212 0%, #8B1A1A 100%); border-radius:24px; padding:42px 48px; color:#fff }
.support-card { background: linear-gradient(145deg, #6B1212, #8B1A1A); border-radius:18px; color:#fff; height: auto !important; }

/* Lightbox tweaks */
.lightboxOverlay { background: rgba(0,0,0,0.88) !important }
.lb-image { border-radius: 12px !important }
.lb-data .lb-caption { font-weight: 600 !important; font-size: 15px !important }

/* Responsive */
@media (max-width:991px) {
    .hero-title { font-size:2.5rem }
    .gallery-item img { height:150px }
}