/*
 * 盛通滙正式首頁視覺精緻化層
 * 只調整視覺呈現，不改動原始版型結構、內容與互動。
 */
:root {
    --home-polish-base: #03111f;
    --home-polish-surface: #061827;
    --home-polish-panel: #0b2438;
    --home-polish-panel-strong: #0d2b43;
    --home-polish-text: #eff8fb;
    --home-polish-muted: #9db4c3;
    --home-polish-cyan: #10c7ee;
    --home-polish-lime: #c9ee00;
    --home-polish-line: rgba(90, 209, 235, .2);
    --home-polish-grid: rgba(90, 209, 235, .055);
}

html,
body,
#wrapper,
#content,
.content-wrap {
    color: var(--home-polish-text);
    background-color: var(--home-polish-base);
}

body {
    background:
        radial-gradient(circle at 78% 5%, rgba(0, 184, 235, .12), transparent 30rem),
        var(--home-polish-base);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(var(--home-polish-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--home-polish-grid) 1px, transparent 1px);
    background-size: 64px 64px;
}

#wrapper { position: relative; z-index: 1; }

.home-site-header {
    background: rgba(3, 17, 31, .9) !important;
    border-bottom: 1px solid rgba(90, 209, 235, .16) !important;
    backdrop-filter: blur(18px);
}
.home-desktop-nav > a:not(.home-desktop-nav__cta) { color: #c7d9e2 !important; }
.home-desktop-nav > a:not(.home-desktop-nav__cta):hover,
.home-desktop-nav > a:not(.home-desktop-nav__cta):focus-visible { color: var(--home-polish-cyan) !important; }

.yogo-web-btn,
.yogo-app-button,
.yogo-hosting-button,
.yogo-seo-button,
.yogo-security-bottom a,
.yogo-works-more,
.yogo-cta-button { font-size: .85rem !important; }

.yogo-services-section,
.yogo-web-showcase,
.yogo-hosting-section,
.yogo-seo-section,
.yogo-selected-works {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--home-polish-text) !important;
    background:
        radial-gradient(circle at 86% 16%, rgba(0, 184, 235, .085), transparent 30rem),
        var(--home-polish-surface) !important;
}

.yogo-why-section,
.yogo-app-section,
.yogo-service-process {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--home-polish-text) !important;
    background:
        radial-gradient(circle at 14% 14%, rgba(0, 184, 235, .07), transparent 26rem),
        var(--home-polish-base) !important;
}

.yogo-services-section::before,
.yogo-why-section::before,
.yogo-web-showcase::before,
.yogo-app-section::before,
.yogo-hosting-section::before,
.yogo-seo-section::before,
.yogo-service-process::before,
.yogo-selected-works::before {
    position: absolute;
    right: -1rem;
    bottom: -2.5rem;
    z-index: -1;
    color: rgba(255, 255, 255, .026);
    font: 900 clamp(5.5rem, 12vw, 11rem)/1 Arial, sans-serif;
    letter-spacing: -.07em;
    pointer-events: none;
    white-space: nowrap;
}
.yogo-services-section::before { content: "CAPABILITIES"; }
.yogo-why-section::before { content: "WHY YOGO"; }
.yogo-web-showcase::before { content: "SOFTWARE"; }
.yogo-app-section::before { content: "MOBILE"; }
.yogo-hosting-section::before { content: "INFRASTRUCTURE"; }
.yogo-seo-section::before { content: "INTELLIGENCE"; }
.yogo-service-process::before { content: "PROCESS"; }
.yogo-selected-works::before { content: "WORKS"; }

.yogo-services-section h2,
.yogo-services-section h3,
.yogo-why-section h2,
.yogo-why-section h3,
.yogo-web-showcase h2,
.yogo-web-showcase h3,
.yogo-app-section h2,
.yogo-app-section h3,
.yogo-hosting-section h2,
.yogo-hosting-section h3,
.yogo-seo-section h2,
.yogo-seo-section h3,
.yogo-service-process h2,
.yogo-service-process h3,
.yogo-selected-works h2,
.yogo-selected-works h3 { color: var(--home-polish-text) !important; }

.yogo-services-section p,
.yogo-why-section p,
.yogo-web-showcase p,
.yogo-app-section p,
.yogo-hosting-section p,
.yogo-seo-section p,
.yogo-service-process p,
.yogo-selected-works p { color: var(--home-polish-muted) !important; }

.yogo-section-label,
.yogo-services-section small,
.yogo-why-section small,
.yogo-web-showcase small,
.yogo-app-section small,
.yogo-hosting-section small,
.yogo-seo-section small,
.yogo-service-process small,
.yogo-selected-works small { color: var(--home-polish-cyan) !important; }

.yogo-service-item,
.yogo-solution-item,
.yogo-web-card,
.yogo-app-card,
.yogo-hosting-card,
.yogo-seo-search-panel,
.yogo-seo-chart-panel,
.yogo-process-card,
.yogo-work-card {
    color: var(--home-polish-text) !important;
    background:
        linear-gradient(145deg, rgba(15, 48, 72, .97), rgba(6, 25, 40, .97)) !important;
    border-color: var(--home-polish-line) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .035), 0 24px 56px rgba(0, 0, 0, .17) !important;
}

.yogo-service-item,
.yogo-solution-item,
.yogo-web-card,
.yogo-app-card,
.yogo-hosting-card,
.yogo-process-card,
.yogo-work-card { position: relative; overflow: hidden; }

.yogo-service-item::after,
.yogo-solution-item::after,
.yogo-web-card::after,
.yogo-app-card::after,
.yogo-hosting-card::after,
.yogo-process-card::after {
    content: "";
    position: absolute;
    top: 25px;
    right: 25px;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(90, 209, 235, .4);
    background:
        linear-gradient(90deg, transparent 47%, var(--home-polish-cyan) 48% 52%, transparent 53%),
        linear-gradient(transparent 47%, var(--home-polish-cyan) 48% 52%, transparent 53%);
    opacity: .75;
    pointer-events: none;
}

.yogo-service-item:hover,
.yogo-solution-item:hover,
.yogo-process-card:hover {
    box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 28px 60px rgba(0, 184, 235, .12) !important;
}

.yogo-seo-search-panel input,
.yogo-seo-search-panel select,
.yogo-seo-search-panel textarea {
    color: var(--home-polish-text) !important;
    background: rgba(2, 15, 27, .72) !important;
    border-color: var(--home-polish-line) !important;
}

.yogo-security-backup {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(115deg, rgba(2, 15, 27, .96), rgba(5, 33, 51, .91)) !important;
}
.yogo-security-backup::after {
    content: "SECURE DATA";
    position: absolute;
    right: -1rem;
    bottom: -2rem;
    color: rgba(255, 255, 255, .035);
    font: 900 clamp(5rem, 11vw, 10rem)/1 Arial, sans-serif;
    letter-spacing: -.07em;
    pointer-events: none;
}
.yogo-security-panel {
    background: rgba(6, 25, 40, .82) !important;
    border-color: var(--home-polish-line) !important;
    backdrop-filter: blur(14px);
}

.yogo-home-cta {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 76% 48%, rgba(0, 184, 235, .18), transparent 23rem),
        #020e19 !important;
    border-top: 1px solid var(--home-polish-line);
}
.yogo-home-cta::after {
    content: "CONNECTED";
    position: absolute;
    right: -1rem;
    bottom: -2rem;
    color: rgba(255, 255, 255, .035);
    font: 900 clamp(5rem, 12vw, 11rem)/1 Arial, sans-serif;
    letter-spacing: -.07em;
    pointer-events: none;
}

#footer {
    position: relative;
    background:
        radial-gradient(circle at 18% 0, rgba(0, 184, 235, .1), transparent 26rem),
        #020d17 !important;
    border-top: 1px solid var(--home-polish-line);
}

.home-ambient-rail {
    position: fixed;
    top: 145px;
    right: 17px;
    bottom: 72px;
    z-index: 30;
    width: 28px;
    color: var(--home-polish-cyan);
    pointer-events: none;
    opacity: .7;
}
.home-ambient-rail__label {
    position: absolute;
    top: 0;
    right: 0;
    color: rgba(118, 219, 241, .7);
    font-family: Arial, sans-serif;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .13em;
    line-height: 1;
    writing-mode: vertical-rl;
}
.home-ambient-rail__line {
    position: absolute;
    top: 148px;
    right: 6px;
    bottom: 0;
    width: 1px;
    background: linear-gradient(rgba(0, 184, 235, .68), rgba(0, 184, 235, .05));
}
.home-ambient-rail__node {
    position: absolute;
    right: 2px;
    width: 9px;
    height: 9px;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: #04111d;
    box-shadow: 0 0 13px rgba(0, 184, 235, .48);
}
.home-ambient-rail__node--one { top: 38%; }
.home-ambient-rail__node--two { top: 64%; }
.home-ambient-rail__node--three { bottom: 1px; }

[data-home-page] .block-slider-3 { isolation: isolate; }
[data-home-page] .block-slider-3::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    background-image: linear-gradient(rgba(0, 184, 235, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 184, 235, .045) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, .95), transparent 78%);
    pointer-events: none;
}
[data-home-page] .block-slider-3::after {
    content: "CONNECTED";
    position: absolute;
    right: -1.5rem;
    bottom: 4rem;
    z-index: 5;
    color: rgba(255, 255, 255, .045);
    font: 900 clamp(5rem, 12vw, 11rem)/1 Arial, sans-serif;
    letter-spacing: -.07em;
    pointer-events: none;
}

@media (max-width: 767px) {
    body::before { background-size: 42px 42px; }
    .yogo-services-section::before,
    .yogo-why-section::before,
    .yogo-web-showcase::before,
    .yogo-app-section::before,
    .yogo-hosting-section::before,
    .yogo-seo-section::before,
    .yogo-service-process::before,
    .yogo-selected-works::before,
    .yogo-home-cta::after,
    .yogo-security-backup::after,
    [data-home-page] .block-slider-3::after { font-size: 4.6rem; }
    .yogo-service-item::after,
    .yogo-solution-item::after,
    .yogo-web-card::after,
    .yogo-app-card::after,
    .yogo-hosting-card::after,
    .yogo-process-card::after { width: 34px; height: 34px; top: 18px; right: 18px; }
}

@media (max-width: 1180px) {
    .home-ambient-rail { display: none; }
}