/* Extracted from index.html inline <style> blocks */

    /* Smooth, layered background transition for index only */
    body{
        background:
            radial-gradient(130% 90% at 0% 0%, rgba(229, 132, 50, 0.46) 0%, rgba(229, 132, 50, 0.06) 46%, transparent 62%),
            radial-gradient(90% 70% at 100% 15%, rgba(27, 54, 104, 0.42) 0%, rgba(27, 54, 104, 0.08) 52%, transparent 68%),
            radial-gradient(105% 82% at 55% 100%, rgba(7, 28, 66, 0.56) 0%, rgba(7, 28, 66, 0.18) 54%, transparent 70%),
            conic-gradient(from 230deg at 58% 40%, #422316 0deg, #1f1c23 85deg, #0a1733 210deg, #060f24 320deg, #422316 360deg) !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        background-attachment: fixed !important;
    }

    .quick_nav{ display:none !important; }
    body.index-page{
        --index-svg-tone-desktop: #ffd7ad;
        --index-svg-tone-mobile: #f0c987;
    }
    html,
    body.index-page{
        overflow-x: hidden;
    }
    body.index-page #software path,
    body.index-page #websites path,
    body.index-page #downloads path,
    body.index-page #consulting path,
    body.index-page #ki path{
        stroke: var(--index-svg-tone-desktop) !important;
    }
    body.index-page #ki text{
        stroke: var(--index-svg-tone-desktop) !important;
    }
    .index_top_links{
        position: absolute;
        top: 18px;
        left: clamp(4px, 2.2vw, 28px);
        z-index: 26;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }
    .index_top_link{
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.5rem 0.85rem;
        border-radius: 999px;
        border: 1px solid rgba(255, 196, 142, 0.5);
        background: linear-gradient(145deg, rgba(26, 18, 12, 0.9), rgba(10, 12, 17, 0.92));
        color: #ffd7ad;
        text-decoration: none;
        box-shadow: 0 7px 16px rgba(3, 8, 17, 0.3), 0 1px 0 rgba(255, 224, 189, 0.09) inset;
        transition: transform 0.18s ease, box-shadow 0.22s ease, border-color 0.22s ease, color 0.22s ease, background 0.22s ease;
    }
    .index_top_link:hover{
        transform: translateY(-1px);
        border-color: rgba(255, 196, 142, 0.9);
        color: #ffe2c2;
        background: linear-gradient(145deg, rgba(26, 18, 12, 0.9), rgba(10, 12, 17, 0.92));
        box-shadow: 0 10px 20px rgba(5, 10, 20, 0.38), 0 0 18px rgba(238, 152, 72, 0.22), 0 1px 0 rgba(255, 229, 199, 0.14) inset;
    }
    .index_top_link .material-symbols-outlined{
        font-size: 24px;
        line-height: 1;
        color: #ffffff;
        font-variation-settings: "FILL" 0, "wght" 280, "GRAD" 0, "opsz" 24;
        text-shadow: 0 0 10px rgba(238, 152, 72, 0.24);
    }
    .index_top_link span:last-child{
        font-family: "Outfit", Arial, Helvetica, sans-serif;
        font-size: 0.8rem;
        font-weight: 500;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    body.index-page.has-site-footer #site-footer{
        width: calc(100vw - clamp(0.65rem, 1.2vw, 1.1rem) - clamp(0.65rem, 1.2vw, 1.1rem)) !important;
        max-width: calc(100vw - clamp(0.65rem, 1.2vw, 1.1rem) - clamp(0.65rem, 1.2vw, 1.1rem)) !important;
        margin-top: auto !important;
        margin-right: auto !important;
        margin-bottom: clamp(0.7rem, 1.5vw, 1rem) !important;
        margin-left: auto !important;
    }

    @media (max-width: 1024px), (max-device-width: 1024px), (hover: none) and (pointer: coarse){
        body.index-page.has-site-footer #site-footer{
            width: calc(100% - 1rem) !important;
            max-width: calc(100% - 1rem) !important;
            margin-right: auto !important;
            margin-bottom: 0.75rem !important;
            margin-left: auto !important;
        }

        body.index-page .black_div_background{
            position: relative !important;
            min-height: 100svh !important;
            height: auto !important;
            overflow-x: hidden !important;
            overflow-y: hidden !important;
        }

        .index_top_links{
            display: none !important;
        }
        .quick_nav{
            display: block !important;
            position: fixed;
            top: 10px;
            left: 10px;
            right: auto;
            z-index: 42;
        }
        .quick_nav_toggle{
            display: inline-flex;
            align-items: center;
            gap: 0.42rem;
            padding: 0.56rem 0.86rem;
            border-radius: 999px;
            border: 1px solid rgba(242, 176, 98, 0.58);
            background: linear-gradient(145deg, rgba(24, 17, 15, 0.9), rgba(18, 12, 10, 0.86));
            color: #f0c987;
            font-family: "Outfit", Arial, Helvetica, sans-serif;
            font-size: 0.86rem;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            cursor: pointer;
        }
        .quick_nav_toggle .material-symbols-outlined{
            font-size: 22px;
            line-height: 1;
            color: #ffffff;
        }
        .quick_nav_menu{
            position: absolute;
            top: calc(100% + 7px);
            left: 0;
            right: auto;
            display: flex;
            flex-direction: column;
            gap: 6px;
            min-width: 146px;
            padding: 8px;
            border-radius: 12px;
            border: 1px solid rgba(240, 170, 88, 0.5);
            background:
                linear-gradient(155deg, rgba(20, 13, 11, 0.9), rgba(12, 9, 8, 0.9)),
                radial-gradient(circle at 14% 10%, rgba(237, 141, 52, 0.18), transparent 58%);
            box-shadow:
                0 12px 26px rgba(4, 9, 18, 0.38),
                0 1px 0 rgba(255, 219, 180, 0.09) inset;
            opacity: 0;
            transform: translateY(-6px);
            pointer-events: none;
            transition: opacity 0.16s ease, transform 0.16s ease;
        }
        .quick_nav.open .quick_nav_menu{
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }
        .quick_nav_item{
            min-width: 0;
            min-height: 0;
            width: 100%;
            padding: 0.45rem 0.6rem;
            gap: 0.34rem;
            justify-content: flex-start;
            border-radius: 10px;
            border: 1px solid rgba(242, 176, 98, 0.5);
            background: linear-gradient(145deg, rgba(34, 25, 22, 0.76), rgba(16, 12, 10, 0.72));
            box-shadow:
                0 6px 14px rgba(3, 8, 17, 0.28),
                0 1px 0 rgba(255, 224, 189, 0.08) inset;
            color: #ffd7ad;
        }
        .quick_nav_item_icon{
            font-size: 18px !important;
        }
        .quick_nav_item_label{
            max-width: none;
            font-size: 0.74rem;
            opacity: 1;
            transform: none;
            letter-spacing: 0.045em;
            text-transform: uppercase;
        }
        #line_upper,
        #line_lower{
            width: min(400px, calc(100vw - 2px));
            max-width: calc(100vw - 2px);
        }

        body.index-page .black_div_background > #logo.logo_mobile,
        body.index-page .black_div_background > #line_upper,
        body.index-page .black_div_background > #line_lower,
        body.index-page .black_div_background > #software,
        body.index-page .black_div_background > #websites,
        body.index-page .black_div_background > #downloads,
        body.index-page .black_div_background > #consulting,
        body.index-page .black_div_background > #ki{
            position: absolute !important;
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            z-index: 12 !important;
        }

        /* Fallback: show SVG content immediately on mobile */
        #ki .ki_char_dash,
        #ki .ki_char_k,
        #ki .ki_char_i{
            animation: none !important;
            opacity: 1 !important;
            stroke-dasharray: none !important;
            stroke-dashoffset: 0 !important;
        }

        /* Mobile draw animation is initialized via JS using real path lengths */
        body.index-page #software path,
        body.index-page #websites path,
        body.index-page #downloads path,
        body.index-page #consulting path,
        body.index-page #ki path{
            opacity: 1 !important;
        }

        #software,
        #websites,
        #downloads,
        #consulting,
        #ki{
            transform: translate(-50%, -50%) !important;
            filter: drop-shadow(0 1px 0 rgba(10, 8, 7, 0.58)) drop-shadow(0 0 8px rgba(255, 190, 124, 0.4)) !important;
        }

        /* Hard fallback for mobile hero visibility */
        .desktop_only{
            display: none !important;
        }
        .mobile_only{
            display: block !important;
        }
        #logo.logo_mobile{
            display: block !important;
            position: absolute !important;
            top: 22svh !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
            width: min(205vw, 1550px) !important;
            height: auto !important;
            z-index: 12 !important;
        }
        #line_upper{
            top: 16svh !important;
            left: 50% !important;
            width: min(55.2vw, 276px) !important;
            height: 2px !important;
            opacity: 0.92 !important;
        }
        #line_lower{
            top: 28svh !important;
            left: 50% !important;
            width: min(55.2vw, 276px) !important;
            height: 2px !important;
            opacity: 0.92 !important;
        }
        #software,
        #websites,
        #downloads,
        #consulting{
            display: block !important;
            width: auto !important;
            height: clamp(28px, 4.9vw, 40px) !important;
            opacity: 1 !important;
            z-index: 12 !important;
            left: 50% !important;
        }
        #ki{
            display: block !important;
            width: auto !important;
            height: clamp(28px, 4.9vw, 40px) !important;
            opacity: 1 !important;
            z-index: 12 !important;
            left: 50% !important;
        }
        #software{
            top: 44svh !important;
            left: 29% !important;
        }
        #websites{
            top: 44svh !important;
            left: 71% !important;
        }
        #ki{
            top: 82svh !important;
            left: 50% !important;
        }
        #downloads{
            top: 68svh !important;
            left: 29% !important;
        }
        #consulting{
            top: 68svh !important;
            left: 71% !important;
        }
        #software path,
        #websites path,
        #downloads path,
        #consulting path,
        #ki path{
            stroke: var(--index-svg-tone-mobile) !important;
        }
        #ki text{
            stroke: var(--index-svg-tone-mobile) !important;
            stroke-width: 6 !important;
        }

        /* Restore mobile SVG baseline from style_mobile.css (only SVG-related) */
        body.index-page .logo_mobile{
            position: absolute !important;
        }

        body.index-page #logo.logo_mobile{
            position: absolute !important;
            top: 25% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
            width: 320px !important;
            height: 140px !important;
        }

        body.index-page #line_upper{
            position: absolute !important;
            top: 20% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
            width: 400px !important;
            height: 2px !important;
            opacity: 0.86 !important;
        }

        body.index-page #line_lower{
            position: absolute !important;
            top: 30% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
            width: 400px !important;
            opacity: 0.86 !important;
        }

        body.index-page #software{
            position: absolute !important;
            top: 48% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
            width: 160px !important;
            height: auto !important;
        }

        body.index-page #websites{
            position: absolute !important;
            top: 54% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
            width: 160px !important;
            height: auto !important;
        }

        body.index-page #downloads{
            position: absolute !important;
            top: 60% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
            width: 180px !important;
            height: auto !important;
        }

        body.index-page #consulting{
            position: absolute !important;
            top: 66% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
            width: 180px !important;
            height: auto !important;
        }

        body.index-page #ki{
            position: absolute !important;
            top: 74% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
            width: auto !important;
            height: clamp(34px, 5.9vw, 48px) !important;
            min-width: 84px !important;
            opacity: 1 !important;
            z-index: 12 !important;
            pointer-events: auto !important;
            overflow: visible !important;
        }

        @keyframes mobile-svg-draw{
            to{
                stroke-dashoffset: 0;
            }
        }
    }