/* 跨屏渐变边框 + 框内点阵 */

:root {
    --frame-inset-x: clamp(4rem, 10vw, 8rem);
    --frame-inset-y-top: clamp(4.5rem, 14vh, 7.5rem);
    --frame-inset-y-bottom: clamp(4.5rem, 14vh, 7.5rem);
    --frame-line-color: rgba(255, 255, 255, 0.28);
    --frame-dot-color: #6A6A6A;
    --frame-dot-radius: 1px;
    --frame-dot-gap: 1.75rem;
}

.panel-frame {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.panel-frame__vline {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
}

.panel-frame__vline--left {
    left: var(--frame-inset-x);
}

.panel-frame__vline--right {
    right: var(--frame-inset-x);
}

/* 第 2 屏：竖线自上而下渐显 */
.panel-frame--start .panel-frame__vline--left,
.panel-frame--start .panel-frame__vline--right {
    background: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 45%,
        var(--frame-line-color) 78%,
        var(--frame-line-color) 100%
    );
}

/* 第 3 屏：竖线全高 */
.panel-frame--center .panel-frame__vline--left,
.panel-frame--center .panel-frame__vline--right {
    background: linear-gradient(
        to bottom,
        var(--frame-line-color) 0%,
        var(--frame-line-color) 100%
    );
}

/* 第 4 屏：竖线向上渐隐 */
.panel-frame--end .panel-frame__vline--left,
.panel-frame--end .panel-frame__vline--right {
    background: linear-gradient(
        to bottom,
        var(--frame-line-color) 0%,
        var(--frame-line-color) 22%,
        transparent 55%,
        transparent 100%
    );
}

/* 产品页第 1 屏：竖线自下而上渐隐（承接第 2 屏延伸） */
.panel-frame--hero .panel-frame__vline--left,
.panel-frame--hero .panel-frame__vline--right {
    background: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 42%,
        var(--frame-line-color) 72%,
        var(--frame-line-color) 100%
    );
}

/* 产品页第 1 屏：点阵全屏铺满 */
.panel-frame--hero.panel-frame--has-dots .panel-frame__dots {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: auto;
}

.panel-frame__hline {
    position: absolute;
    left: var(--frame-inset-x);
    right: var(--frame-inset-x);
    height: 1px;
    background: linear-gradient(
        to right,
        transparent 0%,
        var(--frame-line-color) 12%,
        var(--frame-line-color) 88%,
        transparent 100%
    );
}

.panel-frame__hline--top {
    top: var(--frame-inset-y-top);
}

.panel-frame__hline--bottom {
    bottom: var(--frame-inset-y-bottom);
}

/* 顶格横线：左右贴屏幕边缘，贯穿竖线 */
.panel-frame__hline--solid {
    left: 0;
    right: 0;
    background: var(--frame-line-color);
}

/* 产品页 2 / 3 / 4 屏：底半横线，左右交替 */
.panel-frame__hline-half {
    position: absolute;
    bottom: var(--frame-inset-y-bottom);
    width: calc((100% - 2 * var(--frame-inset-x)) / 2);
    height: 1px;
    background: var(--frame-line-color);
}

.panel-frame__hline-half--left {
    left: var(--frame-inset-x);
}

.panel-frame__hline-half--right {
    right: var(--frame-inset-x);
}

.panel-frame__hline-cap {
    position: absolute;
    top: 50%;
    width: 0.6875rem;
    height: 0.6875rem;
    transform: translateY(-50%);
}

.panel-frame__hline-cap::before,
.panel-frame__hline-cap::after {
    content: '';
    position: absolute;
    background: rgba(255, 255, 255, 0.55);
}

.panel-frame__hline-cap::before {
    width: 0.5625rem;
    height: 1px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.panel-frame__hline-cap::after {
    width: 1px;
    height: 0.5625rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.panel-frame__hline-half--left .panel-frame__hline-cap {
    right: 0;
    transform: translate(50%, -50%);
}

.panel-frame__hline-half--right .panel-frame__hline-cap {
    left: 0;
    transform: translate(-50%, -50%);
}

.panel-frame__dots {
    position: absolute;
    top: var(--frame-inset-y-top);
    bottom: var(--frame-inset-y-bottom);
    left: var(--frame-inset-x);
    right: var(--frame-inset-x);
    background-image: radial-gradient(circle, var(--frame-dot-color) var(--frame-dot-radius), transparent var(--frame-dot-radius));
    background-size: var(--frame-dot-gap) var(--frame-dot-gap);
    z-index: 0;
}

.panel-frame__corner {
    position: absolute;
    width: 0.6875rem;
    height: 0.6875rem;
    z-index: 3;
}

.panel-frame__corner::before,
.panel-frame__corner::after {
    content: '';
    position: absolute;
    background: rgba(255, 255, 255, 0.55);
}

.panel-frame__corner::before {
    width: 0.5625rem;
    height: 1px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.panel-frame__corner::after {
    width: 1px;
    height: 0.5625rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.panel-frame__corner--tl {
    top: var(--frame-inset-y-top);
    left: var(--frame-inset-x);
    transform: translate(-50%, -50%);
}

.panel-frame__corner--tr {
    top: var(--frame-inset-y-top);
    right: var(--frame-inset-x);
    transform: translate(50%, -50%);
}

.panel-frame__corner--bl {
    bottom: var(--frame-inset-y-bottom);
    left: var(--frame-inset-x);
    transform: translate(-50%, 50%);
}

.panel-frame__corner--br {
    bottom: var(--frame-inset-y-bottom);
    right: var(--frame-inset-x);
    transform: translate(50%, 50%);
}

.product-section,
.results-section,
.about-panel-story,
.about-panel-team,
.about-panel-contact,
.product-panel-hero,
.product-panel-feature {
    position: relative;
}

@media (max-width: 768px) {
    :root {
        --frame-inset-x: 1.5rem;
        --frame-inset-y-top: 4rem;
        --frame-inset-y-bottom: 4rem;
    }

    /* 首页 / 关于我们：隐藏两侧竖向渐变线，横线保留；产品页竖线不动 */
    body.home .panel-frame__vline,
    body.stbledge-about-page .panel-frame__vline {
        display: none;
    }
}