/* 
    Home Page Background — matches Auth/Login (auth-v2) aesthetic.
    Blue/cyan radial glows over a subtle square grid.
*/

:root {
    --bg-deep: #05070e;
    --bg-deep-mid: #080d1e;
    --accent-blue: #4461df;
    --accent-cyan: #45e0ff;
}

.page-wrapper.bg-dark {
    background-color: var(--bg-deep) !important;
}

.home-gradient-bg {
    position: relative;
    background-color: var(--bg-deep) !important;
    background-image:
        radial-gradient(circle at top left, rgba(68, 97, 223, 0.22), transparent 35%),
        radial-gradient(circle at bottom right, rgba(69, 224, 255, 0.15), transparent 30%),
        linear-gradient(135deg, var(--bg-deep) 0%, var(--bg-deep-mid) 100%) !important;
    z-index: 1;
    overflow: hidden;
}

/* Square grid overlay — same as .auth-v2-grid */
.home-gradient-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 36px 36px;
    pointer-events: none;
    z-index: 0;
}

/* Keep section content above the grid overlay */
.home-gradient-bg > * {
    position: relative;
    z-index: 1;
}

/* Home disclaimer — high-contrast risk warning */
.tv-disclaimer-section .disclaimer-wrap {
    background: rgba(255, 94, 98, 0.1) !important;
    border: 1px solid rgba(255, 94, 98, 0.28) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.tv-disclaimer-section .disclaimer-icon {
    width: 60px;
    height: 60px;
    background: rgba(239, 68, 68, 0.18) !important;
    color: #ff6b6b !important;
    font-size: 24px;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.tv-disclaimer-section .disclaimer-wrap h4 {
    color: #ffffff !important;
    font-size: 18px;
    letter-spacing: -0.01em;
}

.tv-disclaimer-section .disclaimer-wrap p {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 0.75rem;
}

.tv-disclaimer-section .disclaimer-wrap p:last-child {
    margin-bottom: 0;
}

.tv-disclaimer-section .disclaimer-wrap strong {
    color: #ffb4b6;
    font-weight: 700;
}

/* Glassmorphism effects for content containers within these sections */
.home-gradient-bg .service-box-eight,
.home-gradient-bg .tv-project-item,
.home-gradient-bg .industries-box {
    background: rgba(255, 255, 255, 0.02) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.4);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.home-gradient-bg .service-box-eight:hover,
.home-gradient-bg .tv-project-item:hover,
.home-gradient-bg .industries-box:hover {
    background: rgba(68, 97, 223, 0.05) !important;
    border-color: rgba(68, 97, 223, 0.4);
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.5), 0 0 20px rgba(69, 224, 255, 0.1);
}

/* Hide the existing background images */
.home-gradient-bg .bg.image,
.home-gradient-bg>img.bg.image,
.home-gradient-bg .mbm-overlay {
    display: none !important;
}

/* Section-specific tweaks */
.marquee-section.home-gradient-bg .marquee-inner {
    background: transparent !important;
}

.tv-about-section.home-gradient-bg .content-box {
    background: rgba(68, 97, 223, 0.1) !important;
    backdrop-filter: blur(15px);
    border-left: 4px solid var(--accent-blue);
}

/* ========================================
   Home Page Section Gap Minimization
   Reduces the excessive vertical spacing
   between each section on the landing page.
   ======================================== */

/* Hero section — tighten top margin on the inner wrapper */
.tv-hero-section.style-8 .hero-inner {
    margin-top: 20px !important;
}

/* About, Project, Integrations, Industries & Marquee sections */
.tv-about-section.style-7.space,
.tv-project-section.style-5.space,
.tv-integration-section.space,
.tv-industries-section.style-2.space,
.marquee-section.style-3 {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}

/* Tablet (max 1199px) */
@media (max-width: 1199px) {
    .tv-about-section.style-7.space,
    .tv-project-section.style-5.space,
    .tv-integration-section.space,
    .tv-industries-section.style-2.space,
    .marquee-section.style-3 {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }
}

/* Mobile (max 991px) */
@media (max-width: 991px) {
    .tv-about-section.style-7.space,
    .tv-project-section.style-5.space,
    .tv-integration-section.space,
    .tv-industries-section.style-2.space,
    .marquee-section.style-3 {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
}

/* Small mobile (max 575px) */
@media (max-width: 575px) {
    .tv-about-section.style-7.space,
    .tv-project-section.style-5.space,
    .tv-integration-section.space,
    .tv-industries-section.style-2.space,
    .marquee-section.style-3 {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }
}

/* Tighten gap between Integrations and Asset Classes sections.
   Integration icons extend below the layout (pb-90 on container); section
   padding was stacking on top of that and creating a large empty band. */
.tv-integration-section.space {
    padding-bottom: 0 !important;
}

.tv-integration-section.space + .tv-industries-section.style-2.space {
    padding-top: 40px !important;
}

@media (max-width: 1199px) {
    .tv-integration-section.space + .tv-industries-section.style-2.space {
        padding-top: 35px !important;
    }
}

@media (max-width: 991px) {
    .tv-integration-section.space + .tv-industries-section.style-2.space {
        padding-top: 30px !important;
    }
}

@media (max-width: 575px) {
    .tv-integration-section.space + .tv-industries-section.style-2.space {
        padding-top: 24px !important;
    }
}