/* ===========================================================================
   Homepage atmosphere layer
   Colours, backgrounds, borders and shadows only. No typography or sizing.
   Remove the <link> in templates/components/stylesheet.html.twig to revert.
   =========================================================================== */

/* ---- 1. Page background: layered brand glows + soft mint wash ----------- */
body.page-homepage-rebuild {
    background:
        radial-gradient(1100px 700px at 6% -4%, rgba(67, 201, 163, 0.30), transparent 62%),
        radial-gradient(900px 700px at 96% 14%, rgba(24, 81, 72, 0.16), transparent 60%),
        radial-gradient(800px 700px at 4% 58%, rgba(67, 201, 163, 0.20), transparent 60%),
        radial-gradient(1000px 800px at 98% 84%, rgba(24, 81, 72, 0.14), transparent 62%),
        linear-gradient(180deg, #edf8f3 0%, #e4f3ec 38%, #e9f5ef 66%, #e1f0e9 100%);
}

/* Fine grain so large flat areas read as material, not screen white */
body.page-homepage-rebuild::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.055;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 160px 160px;
}

/* ---- 2. Section rhythm: not every section is a white card any more ----- */

/* Hero: white with a mint sweep and a faint dot grid */
body.page-homepage-rebuild .homepage_rebuild .banner_rebuild {
    border-color: rgba(67, 201, 163, 0.28);
    background:
        radial-gradient(rgba(24, 81, 72, 0.075) 1px, transparent 1.2px) 0 0 / 22px 22px,
        linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 251, 248, 0.98) 55%, rgba(226, 246, 238, 0.98) 100%);
    box-shadow: 0 30px 60px rgba(24, 81, 72, 0.12);
}

/* Partner logos: float on the atmosphere, no card */
body.page-homepage-rebuild .homepage_rebuild .trust_v2 {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

/* Features and How-it-works: frosted glass over the gradient */
body.page-homepage-rebuild .homepage_rebuild .features_rebuild,
body.page-homepage-rebuild .homepage_rebuild .how_rebuild_inner,
body.page-homepage-rebuild .homepage_rebuild .story_rebuild_shell {
    border-color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.70);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    box-shadow: 0 30px 60px rgba(24, 81, 72, 0.10);
}

/* Modern UI and Interface: mint tinted bands */
body.page-homepage-rebuild .homepage_rebuild .modern_rebuild_shell,
body.page-homepage-rebuild .homepage_rebuild .interface_rebuild_slider {
    border-color: rgba(67, 201, 163, 0.26);
    background: linear-gradient(180deg, rgba(67, 201, 163, 0.16) 0%, rgba(67, 201, 163, 0.07) 100%);
    box-shadow: 0 24px 50px rgba(24, 81, 72, 0.08);
}

/* ---- 3. "Sve o sDoktoru": the dark contrast moment ---------------------- */
body.page-homepage-rebuild .homepage_rebuild .about_clean {
    border-color: rgba(255, 255, 255, 0.10);
    background:
        radial-gradient(700px 420px at 100% 0%, rgba(67, 201, 163, 0.38), transparent 62%),
        radial-gradient(600px 400px at 0% 100%, rgba(67, 201, 163, 0.18), transparent 60%),
        linear-gradient(135deg, #11423a 0%, #185148 48%, #1d6656 100%);
    box-shadow: 0 34px 70px rgba(17, 66, 58, 0.34);
}

body.page-homepage-rebuild .homepage_rebuild .about_clean .section_title h2 {
    color: #ffffff;
}

body.page-homepage-rebuild .homepage_rebuild .about_clean .section_title h2 span {
    color: #8fe6cc;
}

body.page-homepage-rebuild .homepage_rebuild .about_clean .section_title p,
body.page-homepage-rebuild .homepage_rebuild .about_clean p {
    color: rgba(255, 255, 255, 0.80);
}

body.page-homepage-rebuild .homepage_rebuild .about_clean_eyebrow {
    background: rgba(255, 255, 255, 0.12);
    color: #d6f6ec;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

body.page-homepage-rebuild .homepage_rebuild .about_clean_metrics li {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

body.page-homepage-rebuild .homepage_rebuild .about_clean_metrics strong {
    color: #ffffff;
}

body.page-homepage-rebuild .homepage_rebuild .about_clean_metrics li > span:last-child {
    color: rgba(255, 255, 255, 0.72);
}

body.page-homepage-rebuild .homepage_rebuild .about_clean .btn.white_btn {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.35);
    color: #ffffff;
}

body.page-homepage-rebuild .homepage_rebuild .about_clean .btn.white_btn:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

body.page-homepage-rebuild .homepage_rebuild .about_clean_visual_main,
body.page-homepage-rebuild .homepage_rebuild .about_clean_visual_side {
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 20px 44px rgba(9, 40, 35, 0.35);
}

/* ---- 4. Cards: mint edge, top highlight, gentle lift -------------------- */
body.page-homepage-rebuild .homepage_rebuild .data_block,
body.page-homepage-rebuild .homepage_rebuild .story_rebuild_item .story_box,
body.page-homepage-rebuild .homepage_rebuild .modern_rebuild .design_block li,
body.page-homepage-rebuild .homepage_rebuild .how_it_works .step_block ul li {
    border: 1px solid rgba(67, 201, 163, 0.24);
    background: linear-gradient(180deg, #ffffff 0%, #f5fcf9 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 1px 0 rgba(67, 201, 163, 0.10),
        0 18px 36px rgba(24, 81, 72, 0.08);
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

body.page-homepage-rebuild .homepage_rebuild .data_block:hover,
body.page-homepage-rebuild .homepage_rebuild .story_rebuild_item .story_box:hover,
body.page-homepage-rebuild .homepage_rebuild .modern_rebuild .design_block li:hover,
body.page-homepage-rebuild .homepage_rebuild .how_it_works .step_block ul li:hover {
    transform: translateY(-4px);
    border-color: rgba(67, 201, 163, 0.5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 26px 48px rgba(24, 81, 72, 0.14);
}

/* Feature icons: solid brand gradient instead of pale tint */
body.page-homepage-rebuild .homepage_rebuild .feature_icon_shell {
    background: linear-gradient(135deg, #4fd6b0 0%, #2fa585 100%);
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(67, 201, 163, 0.38);
}

body.page-homepage-rebuild .homepage_rebuild .feature_icon_shell i {
    color: #ffffff;
}

/* Primary buttons: gradient + glow */
body.page-homepage-rebuild .homepage_rebuild .btn.puprple_btn {
    background: linear-gradient(135deg, #52d7b1 0%, #33b08e 100%);
    border-color: transparent;
    box-shadow: 0 12px 26px rgba(67, 201, 163, 0.38);
}

body.page-homepage-rebuild .homepage_rebuild .btn.puprple_btn:hover {
    background: linear-gradient(135deg, #5fe0ba 0%, #2fa585 100%);
    box-shadow: 0 16px 32px rgba(67, 201, 163, 0.46);
}

/* Section eyebrow pills: slightly stronger tint so they read as accents */
body.page-homepage-rebuild .homepage_rebuild .trusted_label,
body.page-homepage-rebuild .homepage_rebuild .hero_eyebrow {
    background: rgba(67, 201, 163, 0.20);
    color: #14483f;
}

@media (prefers-reduced-motion: reduce) {
    body.page-homepage-rebuild .homepage_rebuild .data_block,
    body.page-homepage-rebuild .homepage_rebuild .story_rebuild_item .story_box,
    body.page-homepage-rebuild .homepage_rebuild .modern_rebuild .design_block li,
    body.page-homepage-rebuild .homepage_rebuild .how_it_works .step_block ul li {
        transition: none;
    }
}