/* global helpers */
html { scroll-behavior: smooth; }

/* Hero background moved from inline into CSS.
   Note: path is relative to this CSS file, so use ../images/... */
.hero-bg { background-position: center; background-size: cover; background-repeat: no-repeat; }
.hero-image {
    background-image: linear-gradient(rgba(9,10,26,0.45), rgba(9,10,26,0.45)), url('../../images/hero.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Ensure hero has a visible height on small screens */
.hero-image { min-height: 420px; }
@media (min-width: 768px) {
    .hero-image { min-height: 520px; padding-top: 6rem; padding-bottom: 6rem; }
}

/* Mobile menu slight separation (fallback if Tailwind utilities aren't applied immediately) */
#mobile-menu { background: rgba(255,255,255,0.98); }
#mobile-menu.hidden { display: none !important; }

/* Small responsive tweaks */
@media (min-width: 640px) {
    .hero-image { background-position: center right; }
}
@media (min-width: 1024px) {
    .hero-image { background-position: right center; }
}

/* Intersection reveal helper initial styles are applied via JS (Tailwind utilities) */

/* Powerful reports tile hover fill animation */
.report-tile {
    position: relative;
    overflow: hidden;
    background: #ffffff;
}
.report-tile::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: #8580ec;
    transition: width 360ms ease;
    z-index: 0;
}
.report-tile:hover::before {
    width: 100%;
}
.report-tile .report-content {
    position: relative;
    z-index: 1;
    transition: color 240ms ease;
}
.report-tile:hover .report-content {
    color: #ffffff;
}

/* Brand color helper to ensure the logo uses exact primary color */
.brand { color: #4941E3 !important; }