/* ==========================================================================
   One continuous page background
   The template gives most sections their own background image, which makes
   visible seams between sections. Here the page gets a single background
   instead, and sections without a real photo become transparent:
     - <html>:         base navy
     - body::before:   soft light pools spread down the whole page, alternating
                       sides, so each part of the page is lit a little
                       differently while the background stays seamless
     - body:           random star field (assets/img/stars.svg, 1600×1800 tile)
   Sections with photo backgrounds (testimonials, sub-page heroes, the
   footer image panel) keep their images.
   Loaded last on every page.
   ========================================================================== */

html {
    background-color: var(--DarkBg);
}

body.dark-theme {
    position: relative;
    background-color: transparent;
    background-image: url(../img/stars.svg);
    background-size: 1600px 1800px;
    background-repeat: repeat;
}

/* Spans the full document height (body is position: relative), so the light
   pools scroll past with the content instead of staying fixed */
body.dark-theme::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(900px 700px at 92% 9%,  rgba(67, 165, 254, 0.11), transparent 70%),
        radial-gradient(800px 900px at 4% 21%,  rgba(0, 100, 193, 0.12), transparent 70%),
        radial-gradient(1000px 700px at 96% 37%, rgba(88, 120, 255, 0.09), transparent 70%),
        radial-gradient(900px 800px at 2% 52%,  rgba(67, 165, 254, 0.09), transparent 70%),
        radial-gradient(1100px 700px at 50% 66%, rgba(0, 100, 193, 0.08), transparent 70%),
        radial-gradient(900px 800px at 94% 80%, rgba(67, 165, 254, 0.1), transparent 70%),
        radial-gradient(1000px 700px at 10% 96%, rgba(88, 120, 255, 0.08), transparent 70%);
}

/* ---------- Sections without a photo: transparent ---------- */

.features-section-2,
.about-section,
.brand-section-2,
.team-section,
.pricing-section,
.contact-section-title,
.contact-section,
.footer-area,
.footer-widget-info,
.copy-right-area {
    background-color: transparent !important;
    background-image: none !important;
}

/* ---------- Front-page hero: fade out instead of ending on a band ---------- */

.hero-section-2.hero-animated {
    background-color: transparent;
}
.hero-animated .hero-bg {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
}

/* ---------- Feature cards without the corner labels ---------- */
/* The template reserved 75px at the top for a corner label ("Palvelut",
   "Haaste", …). The labels were removed, so tighten the top padding. */
.features-section-2 .feature-box {
    padding-top: 40px;
}
/* Long Finnish compound words must wrap inside narrow cards, never be clipped */
.features-section-2 .feature-box h3 {
    overflow-wrap: break-word;
    -webkit-hyphens: manual;
    hyphens: manual;
}
/* Cards in the same row share the same height (index.html already did this inline) */
.features-section-2 .row > [class*="col-"] { display: flex; }
.features-section-2 .row > [class*="col-"] > .feature-box { width: 100%; }