/* =========================================================
   LIFE GROWTH DIGITAL - DARK HOMEPAGE HERO
   Only affects the first section of the homepage.
   Active when <html> has the class "home-dark".
   ========================================================= */

/* ---------- Background ---------- */
html.home-dark .hero {
    background:
        radial-gradient(1100px 700px at 12% 55%, rgba(26, 188, 156, 0.14) 0%, rgba(26, 188, 156, 0) 62%),
        radial-gradient(900px 620px at 88% 8%, rgba(44, 62, 80, 0.55) 0%, rgba(44, 62, 80, 0) 65%),
        radial-gradient(700px 420px at 50% 38%, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0) 70%),
        linear-gradient(180deg, #040506 0%, #0A0D10 55%, #0D1215 100%);
    color: #fff;
}
/* The bottom of the hero settles to one flat dark tone... */
html.home-dark .hero::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 420px;
    background: linear-gradient(180deg, rgba(13, 18, 21, 0) 0%, rgba(13, 18, 21, 0.85) 55%, #0D1215 100%);
    pointer-events: none;
    z-index: 1;
}
/* ...which then fades straight into the green showreel section */
html.home-dark .showreel-hero {
    background:
        linear-gradient(180deg, #0D1215 0%, #0D1215 22%, rgba(13, 18, 21, 0.6) 50%, rgba(13, 18, 21, 0) 82%),
        linear-gradient(135deg, #1ABC9C 0%, #2C3E50 100%) !important;
}
html.home-dark .hero .scroll-hint { color: rgba(255, 255, 255, 0.6); }
html.home-dark .hero > .container { position: relative; z-index: 2; }
html.home-dark .hero > .scroll-hint { z-index: 3; }

/* Existing glow shapes read as soft teal light on black */
html.home-dark .hero-gradient {
    background: radial-gradient(circle, rgba(26, 188, 156, 0.22) 0%, rgba(26, 188, 156, 0.06) 45%, rgba(0, 0, 0, 0) 70%);
}
html.home-dark .hero-gradient-2 {
    background: radial-gradient(circle, rgba(127, 227, 207, 0.08) 0%, rgba(0, 0, 0, 0) 60%);
}

/* ---------- Text ---------- */
html.home-dark .hero-title { color: #fff; }
html.home-dark .hero-subtitle { color: rgba(255, 255, 255, 0.72); }

/* "delivers." - aurora gradient: brand teal into bright aqua, sky blue and soft violet,
   with a slow shimmer across the word */
html.home-dark .hero .gradient-text {
    background-image: linear-gradient(90deg,
        #1ABC9C 0%, #2EE6C5 22%, #5CE1E6 42%, #7DB8FF 64%, #A78BFA 82%, #2EE6C5 100%);
    background-size: 200% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 0 28px rgba(46, 230, 197, 0.22));
    animation: lgh-aurora 9s ease-in-out infinite alternate;
}
html.home-dark .hero .gradient-text::after {
    background: linear-gradient(90deg, #1ABC9C 0%, #5CE1E6 45%, #7DB8FF 70%, #A78BFA 100%);
    opacity: 0.55;
}
@keyframes lgh-aurora {
    from { background-position: 0% 50%; }
    to   { background-position: 100% 50%; }
}
html.home-dark .hero-title { color: #fff; }

/* ---------- Buttons ---------- */
html.home-dark .hero .btn-primary {
    background-image: linear-gradient(135deg, #1ABC9C 0%, #128C76 100%);
    box-shadow: 0 10px 40px rgba(26, 188, 156, 0.35);
}
html.home-dark .hero .btn-secondary {
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: none;
}
html.home-dark .hero .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

/* ---------- Trusted by ---------- */
html.home-dark .hero-logos-label { color: #fff; }
/* The site dims the row and each logo; replace that with a clean white */
html.home-dark .hero .hero-logos-row { opacity: 1 !important; }
html.home-dark .hero .client-logo,
html.home-dark .hero .client-logo:hover {
    filter: brightness(0) invert(1) !important;
    opacity: 0.72 !important;
    transition: opacity .3s ease, transform .3s ease;
}
html.home-dark .hero .client-logo:hover { opacity: 1 !important; }

/* ---------- Header while it sits over the dark hero ---------- */
html.home-dark .lgh.lgh-over-dark:not(.menu-open) {
    background: transparent;
    box-shadow: none;
}
html.home-dark .lgh.lgh-over-dark.is-scrolled:not(.menu-open) {
    background: rgba(6, 8, 10, 0.55);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    backdrop-filter: saturate(160%) blur(18px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}
html.home-dark .lgh.lgh-over-dark:not(.menu-open) .lgh-logo img {
    filter: brightness(0) invert(1);
}
html.home-dark .lgh.lgh-over-dark:not(.menu-open) .lgh-cta {
    background: #fff;
    color: #1A1A1A;
}
html.home-dark .lgh.lgh-over-dark:not(.menu-open) .lgh-cta:hover { color: #fff; }
html.home-dark .lgh.lgh-over-dark:not(.menu-open) .lgh-menu-btn {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}
html.home-dark .lgh.lgh-over-dark:not(.menu-open) .lgh-menu-btn:hover { border-color: rgba(255, 255, 255, 0.6); }
html.home-dark .lgh .lgh-logo img,
html.home-dark .lgh .lgh-cta,
html.home-dark .lgh .lgh-menu-btn {
    transition: filter .4s ease, background .4s ease, color .4s ease, border-color .4s ease,
                height .5s cubic-bezier(0.16, 1, 0.3, 1), transform .35s cubic-bezier(0.16, 1, 0.3, 1);
}