/* ==========================================================================
   NCIA Homepage — "Pro Max" UI/UX enhancement layer
   Scoped to body.home-enhanced so every other page that shares style.css
   is left untouched. Loaded AFTER style.css, so it refines/overrides.
   Tokens reuse the existing brand palette (navy #0B1F33 / red #E1251B).
   ========================================================================== */

.home-enhanced {
    --pm-shadow-sm: 0 6px 18px rgba(11, 31, 51, 0.07);
    --pm-shadow:    0 18px 42px rgba(11, 31, 51, 0.11);
    --pm-shadow-lg: 0 34px 64px rgba(11, 31, 51, 0.18);
    --pm-radius:    16px;
    --pm-red-grad:  linear-gradient(135deg, #ff5a50, #e1251b 48%, #a61b14);
    --pm-navy-grad: linear-gradient(150deg, #081726, #0b1f33 55%, #12324f);
    scroll-behavior: smooth;
}

.home-enhanced ::selection { background: rgba(225, 37, 27, 0.20); color: #fff; }

/* --------------------------------------------------------------------------
   1. Eyebrows — kept hidden across the homepage (per request)
   -------------------------------------------------------------------------- */
.home-enhanced .eyebrow { display: none; }

/* --------------------------------------------------------------------------
   2. Section headings — tighter display type + centered accent underline
   -------------------------------------------------------------------------- */
.home-enhanced .section-title { letter-spacing: -0.015em; }
.home-enhanced .section-heading.text-center .section-title::after {
    content: "";
    display: block;
    width: 62px;
    height: 4px;
    margin: 1.15rem auto 0;
    border-radius: 999px;
    background: var(--pm-red-grad);
}
.home-enhanced .section-lead { color: #5d6670; }

/* --------------------------------------------------------------------------
   3. Hero — cinematic depth, slow zoom, gradient accent + scroll cue
   -------------------------------------------------------------------------- */
.home-enhanced .home-hero .hero-bg { z-index: 0; }
.home-enhanced .home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 52%, rgba(6, 16, 27, 0.88));
}
.home-enhanced .hero-content { z-index: 2; }

.home-enhanced .hero-bg-slide { transform: scale(1.08); }
.home-enhanced .hero-bg-slide.is-active { animation: pmKenBurns 14s ease-out forwards; }
@keyframes pmKenBurns {
    from { transform: scale(1.08); }
    to   { transform: scale(1.18); }
}

.home-enhanced .hero-tagline span:last-child { color: #ff6a60; }
.home-enhanced .hero-sub { color: rgba(255, 255, 255, 0.86); }

/* CSS-only scroll indicator at the foot of the hero */
.home-enhanced .home-hero::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 26px;
    z-index: 2;
    width: 26px;
    height: 42px;
    transform: translateX(-50%);
    border: 2px solid rgba(255, 255, 255, 0.55);
    border-radius: 14px;
    background: radial-gradient(circle, #fff 0 3px, transparent 4px) no-repeat center 8px / 5px 5px;
    animation: pmScrollCue 1.7s ease-in-out infinite;
    opacity: 0.8;
}
@keyframes pmScrollCue {
    0%, 100% { background-position: center 9px; }
    50%      { background-position: center 19px; }
}

/* --------------------------------------------------------------------------
   4. Credibility bar — premium gradient + interactive stats
   -------------------------------------------------------------------------- */
.home-enhanced .credibility-bar {
    position: relative;
    background: var(--pm-navy-grad);
}
.home-enhanced .credibility-bar::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--ncia-red), transparent);
    opacity: 0.75;
}
.home-enhanced .credibility-grid > div {
    border-left-color: rgba(255, 255, 255, 0.08);
    transition: background-color 0.3s ease;
}
.home-enhanced .credibility-grid > div:hover { background: rgba(255, 255, 255, 0.05); }
.home-enhanced .credibility-grid strong { font-size: 1.7rem; font-weight: 800; }

/* --------------------------------------------------------------------------
   5. Cards — unified radius, depth, animated top accent + lift
   -------------------------------------------------------------------------- */
.home-enhanced .trust-card,
.home-enhanced .model-card,
.home-enhanced .division-card,
.home-enhanced .insight-tile,
.home-enhanced .reality-panel,
.home-enhanced .reality-item,
.home-enhanced .contact-form {
    border-radius: var(--pm-radius);
}

.home-enhanced .trust-card,
.home-enhanced .model-card {
    position: relative;
    overflow: hidden;
    box-shadow: var(--pm-shadow-sm);
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.home-enhanced .trust-card::before,
.home-enhanced .model-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--pm-red-grad);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}
.home-enhanced .trust-card:hover,
.home-enhanced .model-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--pm-shadow-lg);
    border-color: rgba(225, 37, 27, 0.22);
}
.home-enhanced .trust-card:hover::before,
.home-enhanced .model-card:hover::before { transform: scaleX(1); }

/* Model card icon comes alive on hover */
.home-enhanced .model-card__icon {
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.home-enhanced .model-card:hover .model-card__icon {
    background: var(--pm-red-grad);
    border-color: transparent;
    color: #fff;
    transform: scale(1.08) rotate(-4deg);
    box-shadow: 0 12px 26px rgba(225, 37, 27, 0.32);
}

/* Solutions cards — framed photo with a gentle zoom */
.home-enhanced .division-card {
    box-shadow: var(--pm-shadow-sm);
    overflow: hidden;
}
.home-enhanced .division-card:hover { box-shadow: var(--pm-shadow-lg); }
.home-enhanced .division-card .card-photo {
    background-size: 102%;
    transition: background-size 0.6s ease;
}
.home-enhanced .division-card:hover .card-photo { background-size: 114%; }

/* Reality items — subtle interactivity */
.home-enhanced .reality-item { transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease; }
.home-enhanced .reality-item:hover {
    transform: translateX(4px);
    border-color: rgba(225, 37, 27, 0.25);
    box-shadow: var(--pm-shadow-sm);
}

/* Insight tiles — accent rail + lift */
.home-enhanced .insight-tile {
    border-left: 3px solid transparent;
    box-shadow: var(--pm-shadow-sm);
}
.home-enhanced .insight-tile:hover {
    border-left-color: var(--ncia-red);
    box-shadow: var(--pm-shadow);
}

/* --------------------------------------------------------------------------
   6. Claims preview (navy) — ambient glow + glassy proof cards
   -------------------------------------------------------------------------- */
.home-enhanced #claims-preview { position: relative; overflow: hidden; }
.home-enhanced #claims-preview::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(620px 320px at 88% 8%, rgba(225, 37, 27, 0.20), transparent 60%);
}
.home-enhanced .proof-card {
    border-radius: var(--pm-radius);
    background: rgba(255, 255, 255, 0.06);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-color: rgba(255, 255, 255, 0.15);
    transition: transform 0.3s ease, background-color 0.3s ease;
}
.home-enhanced .proof-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.10);
}

/* --------------------------------------------------------------------------
   7. Contact form — softer fields with a clear focus ring
   -------------------------------------------------------------------------- */
.home-enhanced .contact-form { box-shadow: var(--pm-shadow); }
.home-enhanced .form-control,
.home-enhanced .form-control-lg {
    border-radius: 10px;
    padding: 0.95rem 1.1rem;
}
.home-enhanced .form-control:focus,
.home-enhanced .form-control-lg:focus {
    box-shadow: 0 0 0 4px rgba(225, 37, 27, 0.13);
}

/* --------------------------------------------------------------------------
   8. Final CTA — rich gradient with a light bloom
   -------------------------------------------------------------------------- */
.home-enhanced .final-cta {
    position: relative;
    overflow: hidden;
    background: linear-gradient(120deg, #a61b14, #e1251b 55%, #ff5a50);
}
.home-enhanced .final-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(520px 240px at 12% 18%, rgba(255, 255, 255, 0.20), transparent 60%);
}
.home-enhanced .final-cta .container { position: relative; z-index: 1; }
.home-enhanced .final-cta h2 { font-size: 2.45rem; }

/* --------------------------------------------------------------------------
   9. Primary buttons — gradient fill with a one-shot sheen on hover
   -------------------------------------------------------------------------- */
.home-enhanced .btn-premium {
    position: relative;
    overflow: hidden;
    background: var(--pm-red-grad);
    border-color: transparent;
}
.home-enhanced .btn-premium::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 55%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.38), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
}
.home-enhanced .btn-premium:hover::after { left: 150%; }

/* --------------------------------------------------------------------------
   Gradient text (guarded so unsupported browsers keep a visible color)
   -------------------------------------------------------------------------- */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .home-enhanced .hero-tagline span:last-child,
    .home-enhanced .credibility-grid strong,
    .home-enhanced .proof-card strong {
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
    .home-enhanced .hero-tagline span:last-child { background-image: linear-gradient(120deg, #ff8079, #e1251b); }
    .home-enhanced .credibility-grid strong { background-image: linear-gradient(120deg, #ffffff, #cdddec); }
    .home-enhanced .proof-card strong { background-image: linear-gradient(120deg, #ffffff, #ffd4d0); }
}

/* --------------------------------------------------------------------------
   Motion-safety
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .home-enhanced { scroll-behavior: auto; }
    .home-enhanced .hero-bg-slide.is-active { animation: none; }
    .home-enhanced .home-hero::after { animation: none; }
    .home-enhanced .btn-premium::after { display: none; }
}

/* --------------------------------------------------------------------------
   Responsive tidy-ups
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .home-enhanced .final-cta h2 { font-size: 2rem; }
}
@media (max-width: 575.98px) {
    .home-enhanced .home-hero::after { display: none; }
    .home-enhanced .section-heading.text-center .section-title::after { margin-top: 0.9rem; }
}
