/* =====================================================
   Tactical AI — Custom Styles
   Overrides and additions to the Sparsity template.
   Loaded after style.css and responsive.css.
   ===================================================== */


/* --- Hero Banner --- */

.main-banner {
    position: relative;
    overflow: hidden;
    background:
        /*radial-gradient(620px 280px at 82% 10%, rgba(255,72,0,.24), rgba(255,72,0,0) 70%),*/
        linear-gradient(180deg, #0b2454 0%, #0c111a 100%);
}
.main-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(900px 300px at 20% 100%, rgba(255,255,255,.05), rgba(255,255,255,0) 72%);
    pointer-events: none;
}
.main-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0, rgba(255,255,255,.018) 1px, transparent 1px, transparent 64px);
    opacity: .32;
    pointer-events: none;
}
.main-banner .d-table {
    position: relative;
    z-index: 1;
}
.featured-services-area {
    z-index: 4;
}
.main-banner-content {
    position: relative;
    z-index: 3;
    max-width: 860px;
}
.main-banner-content h1 {
    color: #ffffff;
    letter-spacing: -.02em;
    font-size: clamp(48px, 7.4vw, 90px);
    line-height: 1.03;
}
.main-banner-content h1 .tag-hero-emphasis {
    display: block;
    color: #ffd9cc;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: 600;
    letter-spacing: 0;
}
.main-banner-content p {
    color: rgba(255,255,255,.82);
    max-width: 680px;
}
.main-banner-content .btn-box .optional-btn {
    color: rgba(255,255,255,.9);
}
.main-banner-content .btn-box .optional-btn::before {
    background-color: rgba(255,255,255,.9);
}
.main-banner-content .btn-box .optional-btn:hover {
    color: #ffffff;
}


/* --- Navbar (dark hero state) --- */

.sparsity-nav .navbar .navbar-nav .nav-item a {
    color: rgba(255,255,255,.8);
}
.sparsity-nav .navbar .navbar-nav .nav-item a:hover,
.sparsity-nav .navbar .navbar-nav .nav-item a:focus,
.sparsity-nav .navbar .navbar-nav .nav-item a.active,
.sparsity-nav .navbar .navbar-nav .nav-item:hover a,
.sparsity-nav .navbar .navbar-nav .nav-item:focus a,
.sparsity-nav .navbar .navbar-nav .nav-item.active a {
    color: #ffffff;
}
.sparsity-nav .navbar .others-options .btn-primary {
    background-color: #ffffff;
    color: #131922;
}
.sparsity-nav .navbar .others-options .btn-primary:hover {
    background-color: #ff4800 !important;
    color: #ffffff !important;
}


/* --- Banner responsive fixes --- */

@media (min-width: 992px) and (max-width: 1199px) {
    .main-banner {
        height: auto;
        padding-top: 140px;
        padding-bottom: 60px;
    }
    .main-banner .d-table {
        display: block !important;
        height: auto;
    }
    .main-banner .d-table-cell {
        display: block !important;
    }
    .featured-services-area {
        position: relative;
        margin-top: 40px;
    }
}

@media (max-width: 991px) {
    .main-banner {
        height: auto;
        padding-top: 140px;
        padding-bottom: 60px;
    }
    .main-banner .d-table {
        display: block !important;
        height: auto;
    }
    .main-banner .d-table-cell {
        display: block !important;
    }
    .featured-services-area {
        position: relative;
    }
    .main-banner-content {
        margin-top: 0;
    }
}

@media (max-width: 767px) {
    .main-banner {
        padding-top: 120px;
        padding-bottom: 40px;
    }
}

@media only screen and (min-width: 1550px) {
    .main-banner {
        min-height: 950px;
    }
    .main-banner-content {
        margin-left: 0;
    }
}


/* --- TAG utility classes --- */

.tag-section-label { display: inline-block; font-size: 15px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #00a86b; margin-bottom: 12px; }
.tag-label-light { color: rgba(255,255,255,.7); }
.tag-badges { font-size: 13px; font-weight: 600; letter-spacing: .06em; color: rgba(255,255,255,.55); margin-top: 20px; margin-bottom: 0; }

.tag-faq { margin-top: 20px; }
.tag-faq-item { margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid #f0f0f0; }
.tag-faq-item h4 { font-size: 18px; font-weight: 700; color: #1a1a2e; margin-bottom: 10px; }
.tag-faq-item p { font-size: 15px; color: #666; margin: 0 0 8px; }
.tag-faq-item p:last-child { margin-bottom: 0; }

.tag-process-inline { margin: 24px 0; }
.tag-process-step { display: flex; gap: 16px; margin-bottom: 20px; align-items: flex-start; }
.tag-step-num { flex-shrink: 0; width: 32px; height: 32px; background: #ff4800; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.tag-process-step strong { display: block; font-size: 15px; color: #000; margin-bottom: 4px; }
.tag-process-step p { font-size: 14px; color: rgba(0,0,0,.7); margin: 0; }

.tag-persona-list { list-style: none; padding: 0; margin: 20px 0 28px; }
.tag-persona-list li { padding: 14px 0; border-bottom: 1px solid #f0f0f0; font-size: 15px; color: #555; line-height: 1.65; }
.tag-persona-list li:last-child { border-bottom: none; }
.tag-persona-list li strong { color: #1a1a2e; }

.tag-service-list { list-style: none; padding: 0; margin: 12px 0 0; }
.tag-service-list li { font-size: 13px; color: #666; padding: 4px 0 4px 24px; position: relative; line-height: 1.5; }
.tag-service-list li::before { content: "→"; position: absolute; left: 0; color: #00a86b; font-weight: 700; }
.single-services-box.active .tag-service-list li { color: rgba(255,255,255,.75); }
.single-services-box.active .tag-service-list li::before { color: rgba(255,255,255,.5); }

.section-title .btn { margin-top: 10px; }
.single-featured-services-box .icon img { width: 45px; height: 45px; filter: brightness(0) invert(1); }
.featured-services-area [class*="col-"] { display: flex; }
.featured-services-area .single-featured-services-box { width: 100%; }
.services-area .row [class*="col-"] { display: flex; }
.services-area .single-services-box { width: 100%; }
.single-services-box .icon { display: flex; align-items: center; justify-content: center; }
.webinar-area .webinar-content { padding: 70px 0; max-width: 100%; margin: 0 auto; }

.navbar-brand img,
.sparsity-responsive-menu .logo img { max-height: 60px; width: auto; }
.navbar-brand img.optional-logo,
.sparsity-responsive-menu img.optional-logo { max-height: 40px; }
.single-footer-widget .logo img { max-height: 50px; width: auto; }


/* --- Section overrides --- */

.feedback-area .tag-section-label { font-size: 32px; }
.tag-services-cta { margin-top: 50px; margin-bottom: 0; }


/* --- Contact form --- */

#contact-form { display: flex; flex-direction: column; gap: 12px; }
#contact-form .input-newsletter { width: 100%; border-radius: 8px; }
.tag-contact-textarea { display: block; width: 100%; background-color: #333; color: #fff; border: none; outline: 0; border-radius: 8px; padding: 12px 20px; resize: vertical; font-family: inherit; font-size: 15px; line-height: 1.5; }
.tag-contact-textarea::placeholder { color: #d5d5d5; }
#contact-form button { position: static; height: auto; padding: 12px 30px; line-height: normal; align-self: flex-start; border: 2px solid #ff4800; }
#contact-result { margin-top: 4px; font-size: 15px; font-weight: 600; padding: 12px 18px; border-radius: 8px; background: rgba(0,0,0,.75); max-width: 100%; }