/* =========================================================
   Future Host /語系/index three.js globe 20260628-20
   Refined land / real satellite models / hover labels / smoother packet streams
   ========================================================= */

.fh-index-page {
    position: relative;
    min-height: 100vh;
    color: #f8fafc;
    overflow: hidden;
    background:
        radial-gradient(circle at 76% 22%, rgba(56, 213, 255, .26), transparent 32rem),
        radial-gradient(circle at 88% 46%, rgba(139, 92, 246, .28), transparent 38rem),
        radial-gradient(circle at 50% 78%, rgba(14, 165, 233, .10), transparent 34rem),
        linear-gradient(135deg, #02040d 0%, #031125 42%, #140d35 100%);
}

.fh-index-page * {
    box-sizing: border-box;
}

.fh-index-hero {
    position: relative;
    min-height: 730px;
    isolation: isolate;
    overflow: hidden;
}

.fh-three-globe-stage {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 63% 38%, rgba(56, 213, 255, .22), transparent 25rem),
        radial-gradient(circle at 77% 32%, rgba(168, 85, 247, .20), transparent 32rem),
        radial-gradient(circle at 85% 78%, rgba(56, 189, 248, .10), transparent 22rem),
        linear-gradient(180deg, rgba(2, 6, 23, .02), rgba(2, 6, 23, .28) 70%, rgba(2, 6, 23, .82));
}

.fh-three-globe-stage canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.fh-three-globe-stage__fallback {
    position: absolute;
    right: 10%;
    top: 38%;
    color: rgba(226, 232, 240, .45);
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.fh-three-node-layer {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

.fh-three-node {
    position: absolute;
    left: 50%;
    top: 50%;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transform: translate(-50%, -50%);
    border: 0;
    background: transparent;
    color: #f8fafc;
    pointer-events: auto;
    cursor: pointer;
    padding: 0;
    opacity: 0;
    transition: opacity .16s ease, transform .16s ease;
}

.fh-three-node__dot {
    position: relative;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #67e8f9, #8b5cf6);
    box-shadow:
        0 0 0 4px rgba(56, 189, 248, .095),
        0 0 18px rgba(56, 189, 248, .45),
        0 0 30px rgba(168, 85, 247, .18);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.fh-three-node__dot::before,
.fh-three-node__dot::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 999px;
    border: 1px solid rgba(56, 189, 248, .30);
    animation: fhThreeNodePulse 2.6s ease-out infinite;
}

.fh-three-node__dot::after {
    inset: -14px;
    animation-delay: .55s;
    opacity: .55;
}

.fh-three-node.is-core .fh-three-node__dot {
    width: 18px;
    height: 18px;
    background: #e0f2fe;
    box-shadow:
        0 0 0 6px rgba(56, 189, 248, .13),
        0 0 24px rgba(56, 189, 248, .34),
        0 0 42px rgba(168, 85, 247, .12);
}

.fh-three-node__label {
    display: grid;
    gap: 2px;
    min-width: 124px;
    padding: 10px 13px;
    border-radius: 14px;
    text-align: left;
    background: rgba(8, 13, 30, .74);
    border: 1px solid rgba(125, 211, 252, .28);
    box-shadow: 0 16px 42px rgba(0, 0, 0, .24);
    backdrop-filter: blur(14px);
    opacity: 0;
    transform: translateY(5px) scale(.96);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, border-color .18s ease, background .18s ease;
}

/* 台灣是核心視覺，不用大標籤擋住中心。 */
.fh-three-node.is-core .fh-three-node__label {
    display: none;
}

.fh-three-node__label strong {
    color: #f8fafc;
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
}

.fh-three-node__label small {
    color: #a9b6ca;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
}

.fh-three-node:hover .fh-three-node__dot,
.fh-three-node.is-active .fh-three-node__dot {
    transform: scale(1.26);
    box-shadow:
        0 0 0 6px rgba(56, 189, 248, .15),
        0 0 34px rgba(56, 189, 248, .62),
        0 0 62px rgba(139, 92, 246, .18);
}

.fh-three-node:hover .fh-three-node__label,
.fh-three-node.is-active .fh-three-node__label {
    opacity: 1;
    transform: translateY(-4px) scale(1);
    border-color: rgba(147, 197, 253, .64);
    background: rgba(8, 13, 30, .88);
}

@keyframes fhThreeNodePulse {
    0% {
        transform: scale(.72);
        opacity: .72;
    }
    100% {
        transform: scale(1.45);
        opacity: 0;
    }
}

.fh-index-hero__active-card {
    position: absolute;
    right: min(6vw, 76px);
    top: 118px;
    z-index: 5;
    width: 235px;
    display: grid;
    gap: 4px;
    padding: 15px 16px;
    border-radius: 18px;
    border: 1px solid rgba(125, 211, 252, .32);
    background:
        radial-gradient(circle at top right, rgba(56, 189, 248, .18), transparent 42%),
        rgba(8, 13, 30, .72);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .32);
    backdrop-filter: blur(16px);
    pointer-events: none;
}

.fh-index-hero__active-card span {
    color: #f8fafc;
    font-weight: 900;
}

.fh-index-hero__active-card strong {
    color: #7dd3fc;
    font-size: 13px;
}

.fh-index-hero__active-card small {
    color: #a9b6ca;
}

.fh-three-reset-btn {
    position: absolute;
    right: min(6vw, 76px);
    bottom: 168px;
    z-index: 20;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid rgba(125, 211, 252, .36);
    color: #e0f2fe;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .02em;
    background:
        radial-gradient(circle at 20% 20%, rgba(56, 189, 248, .22), transparent 38%),
        rgba(8, 13, 30, .72);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 18px 42px rgba(0,0,0,.30),
        0 0 20px rgba(56, 189, 248, .12);
    backdrop-filter: blur(14px);
    cursor: pointer;
    pointer-events: auto;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.fh-three-reset-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(125, 211, 252, .68);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 22px 54px rgba(0,0,0,.34),
        0 0 38px rgba(56, 189, 248, .28);
}

.fh-index-hero__inner {
    position: relative;
    z-index: 2;
    width: min(1320px, calc(100% - 48px));
    min-height: 730px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(360px, .68fr) minmax(420px, 1fr);
    gap: 48px;
    align-items: center;
    pointer-events: none;
}

.fh-index-hero__content,
.fh-index-hero__actions {
    pointer-events: auto;
}

.fh-index-hero__content {
    max-width: 640px;
    padding-top: 16px;
}

.fh-index-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 0 18px;
    border-radius: 999px;
    color: #dff7ff;
    font-weight: 800;
    letter-spacing: .03em;
    border: 1px solid rgba(56, 189, 248, .45);
    background:
        radial-gradient(circle at 10% 50%, rgba(56, 189, 248, .22), transparent 34%),
        rgba(15, 23, 42, .58);
    box-shadow: 0 0 32px rgba(56, 189, 248, .14), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.fh-index-pill::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: linear-gradient(135deg, #67e8f9, #8b5cf6);
    box-shadow: 0 0 16px #38bdf8;
}

.fh-index-hero h1 {
    margin: 22px 0 18px;
    color: #fff;
    font-size: clamp(48px, 5.7vw, 82px);
    line-height: 1.05;
    letter-spacing: -.065em;
    text-shadow: 0 18px 60px rgba(0, 0, 0, .35);
}

.fh-index-hero h1 span {
    display: inline-block;
    color: transparent;
    background: linear-gradient(135deg, #38bdf8, #7dd3fc 38%, #ffffff 82%);
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 0 22px rgba(56, 189, 248, .18));
}

.fh-index-hero p {
    max-width: 570px;
    color: #d7e3f2;
    font-size: 18px;
    line-height: 1.82;
    margin: 0;
}

.fh-index-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}

.fh-index-btn {
    min-height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 28px;
    border-radius: 12px;
    color: #f8fafc;
    font-size: 16px;
    font-weight: 900;
    text-decoration: none;
    border: 1px solid rgba(148, 163, 184, .24);
    background: rgba(15, 23, 42, .62);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.fh-index-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(125, 211, 252, .48);
}

.fh-index-btn--primary {
    border: 0;
    background: linear-gradient(135deg, #38bdf8, #2563eb 48%, #9333ea);
    box-shadow: 0 24px 52px rgba(56, 189, 248, .28);
}

.fh-index-btn--secondary {
    background: rgba(2, 6, 23, .48);
}

.fh-index-hero__stage {
    min-height: 500px;
}

.fh-index-products {
    position: relative;
    z-index: 4;
    width: min(1320px, calc(100% - 48px));
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: -42px auto 0;
}

.fh-index-product-card {
    min-height: 232px;
    padding: 22px;
    border-radius: 18px;
    border: 1px solid rgba(125, 211, 252, .28);
    background:
        radial-gradient(circle at top left, rgba(56, 189, 248, .16), transparent 42%),
        linear-gradient(180deg, rgba(15, 23, 42, .76), rgba(2, 6, 23, .66));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 20px 55px rgba(0,0,0,.24);
    backdrop-filter: blur(16px);
}

.fh-index-product-card:nth-child(2),
.fh-index-product-card:nth-child(4) {
    border-color: rgba(168, 85, 247, .36);
    background:
        radial-gradient(circle at top left, rgba(168, 85, 247, .18), transparent 42%),
        linear-gradient(180deg, rgba(15, 23, 42, .76), rgba(2, 6, 23, .66));
}

.fh-index-product-card__top {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 16px;
}

.fh-index-product-card__icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    color: #7dd3fc;
    background: rgba(56, 189, 248, .10);
    border: 1px solid rgba(56, 189, 248, .32);
    box-shadow: 0 0 32px rgba(56, 189, 248, .14);
    font-size: 26px;
}

.fh-index-product-card h3 {
    margin: 0;
    color: #f8fafc;
    font-size: 22px;
    letter-spacing: -.02em;
}

.fh-index-product-card p {
    margin: 3px 0 0;
    color: #a9b6ca;
    font-size: 13px;
}

.fh-index-product-card__price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(148, 163, 184, .16);
}

.fh-index-product-card__price small {
    color: #d7e3f2;
    font-size: 14px;
}

.fh-index-product-card__price strong {
    font-size: 34px;
    color: transparent;
    background: linear-gradient(135deg, #67e8f9, #a78bfa);
    -webkit-background-clip: text;
    background-clip: text;
    letter-spacing: -.04em;
}

.fh-index-product-card ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    color: #d7e3f2;
    font-size: 13px;
}

.fh-index-product-card li::before {
    content: "✓";
    color: #38bdf8;
    margin-right: 7px;
    font-weight: 900;
}

.fh-index-product-card__link {
    min-height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7dd3fc;
    font-weight: 900;
    text-decoration: none;
    border: 1px solid rgba(56, 189, 248, .46);
    background: rgba(2, 6, 23, .34);
}

.fh-index-feature-strip {
    position: relative;
    z-index: 4;
    width: min(1320px, calc(100% - 48px));
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 18px auto 70px;
    border-radius: 18px;
    border: 1px solid rgba(125, 211, 252, .22);
    background:
        radial-gradient(circle at left, rgba(56, 189, 248, .13), transparent 42%),
        linear-gradient(180deg, rgba(15, 23, 42, .72), rgba(2, 6, 23, .64));
    backdrop-filter: blur(16px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 48px rgba(0,0,0,.22);
}

.fh-index-feature {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 16px;
    align-items: center;
    min-height: 118px;
    padding: 22px;
    border-right: 1px solid rgba(148, 163, 184, .14);
}

.fh-index-feature:last-child {
    border-right: 0;
}

.fh-index-feature__icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: #7dd3fc;
    border: 1px solid rgba(56, 189, 248, .30);
    background: rgba(56, 189, 248, .08);
    font-size: 26px;
    font-weight: 900;
}

.fh-index-feature h3 {
    margin: 0 0 6px;
    color: #f8fafc;
    font-size: 19px;
}

.fh-index-feature p {
    margin: 0;
    color: #a9b6ca;
    font-size: 13px;
    line-height: 1.6;
}

@media (max-width: 1100px) {
    .fh-index-hero__inner {
        grid-template-columns: 1fr;
        min-height: 780px;
        align-items: start;
        padding-top: 68px;
    }

    .fh-index-hero__stage {
        min-height: 280px;
    }

    .fh-index-products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 28px;
    }

    .fh-index-feature-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fh-index-feature:nth-child(2) {
        border-right: 0;
    }

    .fh-index-feature:nth-child(1),
    .fh-index-feature:nth-child(2) {
        border-bottom: 1px solid rgba(148, 163, 184, .14);
    }

    .fh-index-hero__active-card {
        display: none;
    }
}

@media (max-width: 700px) {
    .fh-index-hero {
        min-height: 720px;
    }

    .fh-index-hero__inner,
    .fh-index-products,
    .fh-index-feature-strip {
        width: min(100% - 28px, 1320px);
    }

    .fh-index-hero__inner {
        min-height: 720px;
        padding-top: 42px;
    }

    .fh-index-hero h1 {
        font-size: 44px;
    }

    .fh-index-hero p {
        font-size: 16px;
    }

    .fh-three-node__label {
        display: none;
    }

    .fh-three-reset-btn {
        right: 18px;
        bottom: 126px;
        min-height: 38px;
        padding: 0 14px;
        font-size: 12px;
    }

    .fh-index-products,
    .fh-index-feature-strip {
        grid-template-columns: 1fr;
    }

    .fh-index-feature,
    .fh-index-feature:nth-child(2) {
        border-right: 0;
        border-bottom: 1px solid rgba(148, 163, 184, .14);
    }

    .fh-index-feature:last-child {
        border-bottom: 0;
    }
}

/* v9: HTML 不再畫節點圓點；只作 hover 文字標籤。 */
.fh-three-node {
    display: none !important;
}

.fh-three-node-label {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 8;
    min-width: 116px;
    display: grid;
    gap: 2px;
    padding: 9px 12px;
    border-radius: 13px;
    text-align: left;
    color: #f8fafc;
    background:
        radial-gradient(circle at 15% 10%, rgba(56, 189, 248, .16), transparent 42%),
        rgba(8, 13, 30, .74);
    border: 1px solid rgba(125, 211, 252, .24);
    box-shadow: 0 16px 42px rgba(0, 0, 0, .24);
    backdrop-filter: blur(14px);
    opacity: 0;
    pointer-events: none;
    transform: translate(10px, -50%) scale(.96);
    transition: opacity .16s ease, transform .16s ease, border-color .16s ease, background .16s ease;
}

.fh-three-node-label.is-active {
    border-color: rgba(147, 197, 253, .52);
    background:
        radial-gradient(circle at 15% 10%, rgba(56, 189, 248, .22), transparent 42%),
        rgba(8, 13, 30, .86);
}

.fh-three-node-label strong {
    color: #f8fafc;
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
}

.fh-three-node-label small {
    color: #a9b6ca;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
}

.fh-three-node-label.is-core {
    display: none;
}

/* v10: hover 說明離地浮出，不再貼在節點旁邊擋地圖。 */
.fh-three-node-label {
    min-width: 128px;
    padding: 10px 13px;
    background:
        radial-gradient(circle at 15% 10%, rgba(56, 189, 248, .15), transparent 42%),
        rgba(8, 13, 30, .70);
    border-color: rgba(125, 211, 252, .22);
    box-shadow:
        0 18px 46px rgba(0, 0, 0, .28),
        0 0 28px rgba(56, 189, 248, .08);
}

.fh-three-node-label__line {
    position: absolute;
    left: 0;
    top: 50%;
    width: 62px;
    height: 1px;
    pointer-events: none;
    opacity: .38;
    transform: translateX(-68px);
    transform-origin: 100% 50%;
    background: linear-gradient(90deg, rgba(125, 211, 252, 0), rgba(125, 211, 252, .45), rgba(168, 85, 247, .18));
}

.fh-three-node-label.is-active .fh-three-node-label__line {
    opacity: .42;
}

.fh-three-globe-stage::before {
    content: "";
    position: absolute;
    inset: -12%;
    pointer-events: none;
    opacity: .24;
    background-image:
        linear-gradient(rgba(56, 213, 255, .10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(56, 213, 255, .09) 1px, transparent 1px);
    background-size: 92px 92px;
    transform: perspective(900px) rotateX(58deg) translateY(18%);
    transform-origin: 50% 50%;
    mask-image: radial-gradient(circle at 68% 46%, #000 0%, transparent 68%);
}

.fh-three-globe-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 68% 44%, rgba(56, 213, 255, .12), transparent 20rem),
        radial-gradient(circle at 84% 42%, rgba(168, 85, 247, .12), transparent 24rem);
    mix-blend-mode: screen;
}

/* v11：保留 3D 球，強化藍紫科技 HUD 與卡片光感 */
.fh-three-node-label {
    background:
        linear-gradient(135deg, rgba(5, 14, 34, .80), rgba(12, 18, 48, .68)),
        radial-gradient(circle at 16% 8%, rgba(56, 213, 255, .20), transparent 46%);
    border-color: rgba(56, 213, 255, .38);
    box-shadow:
        0 22px 58px rgba(0, 0, 0, .34),
        0 0 26px rgba(56, 213, 255, .12),
        inset 0 0 24px rgba(139, 92, 246, .08);
}

.fh-three-node-label.is-active {
    border-color: rgba(158, 239, 255, .62);
    box-shadow:
        0 24px 64px rgba(0, 0, 0, .40),
        0 0 34px rgba(56, 213, 255, .20),
        inset 0 0 30px rgba(168, 85, 247, .12);
}

.fh-three-node-label strong {
    color: #f8feff;
    text-shadow: 0 0 14px rgba(56, 213, 255, .18);
}

.fh-three-node-label small {
    color: #9eefff;
}

.fh-three-node-label__line {
    background: linear-gradient(90deg, rgba(56, 213, 255, 0), rgba(56, 213, 255, .54), rgba(168, 85, 247, .28));
}

/* 產品卡與功能條同步藍紫光感，讓球和下方卡片融成同一套視覺 */
.fh-index-product-card {
    border-color: rgba(56, 213, 255, .32) !important;
    background:
        radial-gradient(circle at 15% 8%, rgba(56, 213, 255, .18), transparent 44%),
        radial-gradient(circle at 92% 0%, rgba(168, 85, 247, .12), transparent 36%),
        linear-gradient(180deg, rgba(10, 20, 46, .78), rgba(3, 9, 25, .72)) !important;
    box-shadow:
        0 22px 70px rgba(0, 0, 0, .30),
        inset 0 1px 0 rgba(255, 255, 255, .045);
}

.fh-index-product-card:hover {
    border-color: rgba(158, 239, 255, .56) !important;
    box-shadow:
        0 26px 76px rgba(0, 0, 0, .36),
        0 0 42px rgba(56, 213, 255, .11),
        inset 0 1px 0 rgba(255, 255, 255, .06);
}

.fh-index-feature-strip {
    border-color: rgba(56, 213, 255, .28) !important;
    background:
        radial-gradient(circle at left, rgba(56, 213, 255, .16), transparent 42%),
        radial-gradient(circle at right, rgba(168, 85, 247, .12), transparent 36%),
        linear-gradient(180deg, rgba(10, 20, 46, .70), rgba(3, 9, 25, .66)) !important;
}

.fh-index-btn--primary {
    box-shadow:
        0 12px 34px rgba(56, 213, 255, .24),
        0 0 30px rgba(168, 85, 247, .18);
}

.fh-index-hero__active-card {
    border-color: rgba(56, 213, 255, .42) !important;
    background:
        radial-gradient(circle at top right, rgba(56, 213, 255, .20), transparent 42%),
        linear-gradient(180deg, rgba(8, 17, 40, .80), rgba(5, 9, 27, .72)) !important;
    box-shadow:
        0 24px 70px rgba(0, 0, 0, .36),
        0 0 34px rgba(56, 213, 255, .10);
}

/* v12：加強 3D 地球整體發光感與封包能量感 */
.fh-index-page {
    background:
        radial-gradient(circle at 72% 20%, rgba(56, 213, 255, .34), transparent 31rem),
        radial-gradient(circle at 88% 45%, rgba(168, 85, 247, .34), transparent 39rem),
        radial-gradient(circle at 54% 76%, rgba(14, 165, 233, .13), transparent 34rem),
        linear-gradient(135deg, #01030a 0%, #031125 42%, #170d3b 100%) !important;
}

.fh-three-globe-stage {
    background:
        radial-gradient(circle at 64% 42%, rgba(56, 213, 255, .28), transparent 24rem),
        radial-gradient(circle at 80% 35%, rgba(168, 85, 247, .26), transparent 33rem),
        radial-gradient(circle at 86% 78%, rgba(56, 189, 248, .12), transparent 22rem),
        linear-gradient(180deg, rgba(2, 6, 23, .01), rgba(2, 6, 23, .24) 68%, rgba(2, 6, 23, .84)) !important;
}

.fh-three-globe-stage::after {
    background:
        radial-gradient(circle at 68% 44%, rgba(56, 213, 255, .18), transparent 20rem),
        radial-gradient(circle at 84% 42%, rgba(168, 85, 247, .18), transparent 24rem),
        radial-gradient(circle at 74% 55%, rgba(224, 251, 255, .07), transparent 16rem) !important;
}