/* 覆盖 body.home 的 overflow-x:hidden，改用 clip 以允许 position:sticky 正常工作。
         overflow:hidden 会让 body 成为 sticky 的滚动容器并破坏 sticky 行为；
         overflow:clip 仅做视觉裁剪、不创建滚动容器，sticky 能正常相对 viewport 定位 */
      html, body.home {
        overflow-x: clip;
      }
      @supports not (overflow-x: clip) {
        html, body.home {
          overflow-x: hidden;
        }
      }

      /* 桌面端 header 防换行：
         实际 DOM 结构是 .head1 > .logo + .nav，登录/注册的 .right 是 .nav 的子元素（.head1 > .nav > .right）。
         关键要让 .head1、.nav 都 nowrap，.nav 内部的 .menu 可收缩，.right 保持固定宽度不换行。
         默认 .head1 为 flex-xb-yc（flex-wrap:wrap）、.nav 仅是 flex 容器（也会 wrap）、.menu 为 flex-yc（wrap），
         这三层任何一层 wrap 都会导致 .right 掉到第二行 */
      @media (min-width: 769px) {
        .head1 {
          flex-wrap: nowrap !important;
          -webkit-flex-wrap: nowrap !important;
          -ms-flex-wrap: nowrap !important;
        }
        .head1 > .logo { flex: 0 1 auto; min-width: 0; }
        .head1 > .nav {
          flex: 1 1 auto;
          min-width: 0;
          flex-wrap: nowrap !important;
          -webkit-flex-wrap: nowrap !important;
          justify-content: flex-end;  /* 让菜单 + 右侧整体靠右排布 */
          gap: clamp(8px, 0.8vw, 16px);
        }
        .head1 .nav .menu.pc {
          flex: 1 1 auto;
          flex-wrap: nowrap !important;
          -webkit-flex-wrap: nowrap !important;
          min-width: 0;
          margin-right: 0 !important;
          justify-content: flex-end;
        }
        .head1 .nav .menu.pc li { flex-shrink: 0; }
        .head1 .nav .right {
          flex: 0 0 auto;
          white-space: nowrap;
        }
      }
      /* 窄桌面（769-1279px）：等比例压缩 header 内部横向空隙 */
      @media (min-width: 769px) and (max-width: 1279px) {
        .head1 { padding: 0 2vw !important; }
        .head1 .nav .menu.pc { margin-right: 0.8vw !important; }
        .head1 .nav .menu.pc li { margin: 0 0.7vw !important; }
        .logo a { flex-wrap: nowrap !important; }
        .logo a span { white-space: nowrap !important; font-size: 12px !important; }
        .logo svg { width: 4.6vw !important; margin-right: 0.3vw !important; }
        .logo a img { width: 1.9vw !important; margin-right: 0.3vw !important; }
      }
      /* 极窄桌面（769-1099px）：进一步压缩 padding 和菜单间距（logo 文字保留） */
      @media (min-width: 769px) and (max-width: 1099px) {
        .head1 { padding: 0 1.2vw !important; }
        .head1 .nav .menu.pc li { margin: 0 0.4vw !important; }
        .head1 .nav .menu.pc li a { font-size: 13px !important; }
        .logo svg { width: 4.2vw !important; }
        .logo a span { font-size: 11px !important; }
      }

      .si-hero {
        position: relative;
        width: 100%;
        background: #fff;
        --si-bg: #fff; /* 页面底色：供视频四周渐变遮罩引用，若改 sticky 背景色需同步此值 */
      }
      .si-hero * { box-sizing: border-box; }

      /* 滚动占位 + sticky viewport：.head-zhanwei 已占掉 header 高度，故 viewport 从 header 下方开始；
         sticky 的高度需要扣掉 header 的 var(--head)，否则 viewport 底部会越过可视区。
         不设 position:relative，避免 .si-video-layer（absolute）把它当作 containing block
         （那样 top:50% 会基于整段高度定位，导致视频跑到第二屏）。 */
      .si-scroll-container {
        width: 100%;
        height: calc(300vh - var(--head));
      }

      .si-sticky-viewport {
        position: -webkit-sticky;
        position: sticky;
        top: var(--head); /* 吸附到 fixed header 下沿，让 viewport 始终完整显示在 header 以下的可视区 */
        width: 100%;
        height: calc(100vh - var(--head));
        height: calc(100svh - var(--head));
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: #fff;
      }

      /* 扩散光斑：位于视频层之上（z-index 高于 .si-video-layer 的 5） */
      .si-blob {
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
        z-index: 6;
      }

      .si-blob-left {
        bottom: -60px;
        left: -5%;
        width: 55%;
        height: 340px;
        background: radial-gradient(ellipse at 40% 60%,
          rgba(122,232,0,0.52) 0%,
          rgba(170,255,0,0.28) 35%,
          rgba(0,229,204,0.12) 65%,
          transparent 100%);
        filter: blur(48px);
      }

      .si-blob-right {
        bottom: -40px;
        right: -8%;
        width: 42%;
        height: 260px;
        background: radial-gradient(ellipse at 60% 55%,
          rgba(170,255,0,0.38) 0%,
          rgba(122,232,0,0.18) 45%,
          transparent 100%);
        filter: blur(52px);
      }

      .si-blob-center {
        bottom: -20px;
        left: 30%;
        width: 40%;
        height: 200px;
        background: radial-gradient(ellipse at 50% 70%,
          rgba(0,200,150,0.3) 0%,
          rgba(0,229,204,0.14) 50%,
          transparent 100%);
        filter: blur(44px);
      }

      /* 视频 */
      .si-video-layer {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100vw;
        transform: translate(-50%, -50%);
        transform-origin: center center;
        pointer-events: none;
        z-index: 5;
        overflow: hidden;
        /* 不设 will-change / isolation / filter，否则会新建合成层导致子视频 mix-blend-mode 失效 */
      }

      /* mix-blend-mode: multiply 让视频的白色背景与页面白底相乘仍为白（视觉上透明），
         仅保留深色动画内容。不能给 video 或 video-layer 加背景色，否则 multiply 会叠白色。 */
      .si-hero-video {
        position: relative;
        width: 100%;
        max-width: none;
        height: auto;
        display: block;
        mix-blend-mode: multiply;
      }

      /* 四周渐变遮罩：让视频边缘融入页面背景，避免方形硬边。用透明→页面底色（sticky viewport 背景）的渐变覆盖视频。 */
      .si-video-layer::before {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
          linear-gradient(to right,
            var(--si-bg) 0%,
            rgba(255,255,255,0) 12%,
            rgba(255,255,255,0) 88%,
            var(--si-bg) 100%),
          linear-gradient(to bottom,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,0) 80%,
            var(--si-bg) 100%);
        z-index: 2;
      }

      /* 标题块 */
      .si-title-block {
        position: relative;
        z-index: 10;
        text-align: center;
        padding: 0 24px;
        width: 100%;
        will-change: transform, opacity;
      }

      /* 字号与 https://www.super-i.cn/ 原站 .main-title 完全一致 */
      .si-hero-title {
        font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Noto Sans SC', sans-serif;
        font-size: 6.7708vw;
        font-weight: 700;
        color: #070707;
        line-height: 1.05;
        margin: 0;
      }

      .si-hero-title em {
        font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Noto Sans SC', sans-serif;
        font-size: 5vw;
        font-style: italic;
        letter-spacing: -0.2083vw;
        padding-right: 0.15em;
        vertical-align: middle;
      }

      /* 副标题与原站 .home6 .t2 一致：margin: 1.0833vw 0 0，字号 20px ≈ 1.0416vw */
      .si-hero-subtitle {
        font-size: 1.0416vw;
        color: #070707;
        margin: 1.0833vw 0 0;
        line-height: 1.6;
      }

      /* 社群推广卡片 */
      .si-shequn-card {
        display: inline-flex;
        align-items: center;
        gap: 1.04vw;
        margin-top: 2vw;
        padding: 0.83vw 1.5vw 0.83vw 0.83vw;
        background: rgba(255, 255, 255, 0.78);
        border: 1px solid rgba(0, 0, 0, 0.06);
        border-radius: 16px;
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        text-align: left;
      }
      .si-shequn-qr {
        width: 5.2vw; height: 5.2vw; min-width: 80px; min-height: 80px;
        max-width: 110px; max-height: 110px;
        flex-shrink: 0;
        background: #fff;
        border-radius: 10px;
        padding: 4px;
        overflow: hidden;
      }
      .si-shequn-qr img { width: 100%; height: 100%; display: block; object-fit: contain; }
      .si-shequn-info { display: flex; flex-direction: column; gap: 0.2vw; }
      .si-shequn-title { font-size: 0.94vw; font-weight: 700; color: #1a1a1a; line-height: 1.4; }
      .si-shequn-count { font-size: 0.78vw; color: #4a4a4a; line-height: 1.5; }
      .si-shequn-num { color: #07C160; font-weight: 700; font-size: 0.94vw; }
      .si-shequn-yest { font-size: 0.72vw; color: #6a6a6a; line-height: 1.5; margin-top: 0.1vw; }
      .si-shequn-yest-num { color: #07C160; font-weight: 700; }
      .si-shequn-desc { font-size: 0.7vw; color: #888; line-height: 1.5; margin-top: 0.2vw; }
      @media (max-width: 768px) {
        .si-shequn-card { gap: 12px; padding: 10px 16px 10px 10px; margin-top: 24px; border-radius: 12px; }
        .si-shequn-qr { width: 76px; height: 76px; padding: 3px; min-width: 76px; min-height: 76px; }
        .si-shequn-title { font-size: 13px; }
        .si-shequn-count { font-size: 11px; }
        .si-shequn-num { font-size: 13px; }
        .si-shequn-yest { font-size: 10px; }
        .si-shequn-desc { font-size: 10px; }
      }

      /* 三角形包装 */
      .si-triangle-wrapper {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: min(1200px, 98vw);
        z-index: 15;
        will-change: opacity;
        opacity: 0;
        pointer-events: none;
      }

      .si-triangle-root {
        position: relative;
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
      }

      .si-triangle-svg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 1;
        transition: opacity 0.5s ease 0.1s;
      }

      .si-triangle-svg line {
        transition: stroke 0.25s ease, stroke-width 0.25s ease, stroke-dasharray 0.25s ease;
      }

      .si-triangle-svg polygon {
        transition: fill 0.25s ease;
      }

      .si-triangle-spacer {
        padding-top: 64%;
      }

      /* 节点 */
      .si-tri-node {
        position: absolute;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 10;
        transition: opacity 0.5s ease;
        opacity: 0;
      }

      .si-tri-btn {
        padding: 14px 36px;
        border-radius: 9999px;
        border: 1.5px solid rgba(0,0,0,0.22);
        background: rgba(255,255,255,0.92);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        white-space: nowrap;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1),
                    box-shadow 0.22s ease,
                    background 0.22s ease,
                    border-color 0.22s ease;
        display: block;
        text-decoration: none;
      }

      .si-tri-btn span {
        font-size: 17px;
        font-weight: 600;
        color: #111;
        font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
        letter-spacing: 0.02em;
        position: relative;
        z-index: 1;
      }

      .si-tri-btn.is-top {
        background: #AAFF00;
        border-color: #AAFF00;
        box-shadow: 0 4px 16px rgba(170,255,0,0.3);
      }

      /* 移动端共享面板的"当前激活按钮"高亮（与 is-top 同款绿） */
      .si-tri-btn.is-active {
        background: #AAFF00 !important;
        border-color: #AAFF00 !important;
        box-shadow: 0 4px 16px rgba(170,255,0,0.35) !important;
      }

      /* 移动端：取消 AI学习按钮常绿背景，让 .is-active 来控制三个按钮的高亮态，保持互斥 */
      @media (max-width: 768px) {
        .si-tri-btn.is-top:not(.is-active) {
          background: rgba(255,255,255,0.96) !important;
          border-color: rgba(0,0,0,0.12) !important;
          box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
        }
      }

      /* PC 端 hover 反馈；触屏设备禁用，避免 tap 后状态粘连导致按钮显示为高亮态 */
      @media (hover: hover) and (pointer: fine) {
        .si-tri-btn:hover {
          background: #AAFF00 !important;
          border-color: #AAFF00 !important;
          box-shadow: 0 8px 28px rgba(170,255,0,0.45) !important;
          transform: translateY(-4px) scale(1.06) !important;
        }
      }

      .si-tri-btn::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.45) 50%, transparent 100%);
        transform: translateX(-100%) skewX(-15deg);
        transition: none;
      }

      @media (hover: hover) and (pointer: fine) {
        .si-tri-btn:hover::after {
          animation: siShimmer 0.6s ease-out forwards;
        }
      }

      /* Tooltip：统一显示在按钮上方 */
      .si-tri-tooltip {
        position: absolute;
        bottom: calc(100% + 24px);
        left: 50%;
        transform: translateX(-50%) translateY(-6px);
        white-space: nowrap;
        z-index: 20;
        pointer-events: auto;
        opacity: 0;
        transition: opacity 0.2s ease, transform 0.2s ease;
      }

      .si-tri-node:hover .si-tri-tooltip {
        opacity: 1;
        transform: translateX(-50%) translateY(0px);
      }

      .si-tri-tooltip-inner {
        background: rgba(255,255,255,0.97);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-radius: 12px;
        padding: 24px 32px;
        border: 1px solid rgba(170,255,0,0.4);
        box-shadow: 0 6px 20px rgba(0,0,0,0.1);
        font-size: 18px;
        color: #444;
        font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
        line-height: 1.5;
      }

      .si-tri-tooltip-tools {
        min-width: 340px;
      }

      .si-tri-tooltip-desc {
        display: block;
        font-size: 16px;
        color: #444;
        margin-bottom: 10px;
        white-space: normal;
      }

      .si-tri-tooltip-tools .si-tri-tooltip-desc {
        white-space: nowrap;
      }

      .si-tri-tooltip-links {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .si-tri-tooltip-link {
        display: block;
        min-width: 220px;
        padding: 10px 14px;
        border-radius: 10px;
        border: 1px solid rgba(0,0,0,0.12);
        background: #fff;
        font-size: 15px;
        font-weight: 600;
        color: #1a1a1a;
        text-align: center;
        text-decoration: none;
        transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
      }

      .si-tri-tooltip-link:hover {
        border-color: #7AE800;
        background: rgba(170,255,0,0.14);
        transform: translateY(-1px);
      }

      .si-tri-bottom-heading {
        position: absolute;
        top: calc(77.5% + 56px);
        left: 50%;
        transform: translateX(-50%);
        width: min(90vw, 980px);
        text-align: center;
        font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
        font-size: 32px;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: -1px;
        color: #111;
        white-space: nowrap;
        z-index: 16;
        pointer-events: none;
        text-shadow: 0 2px 10px rgba(255, 255, 255, 0.65);
        margin: 0;
      }

      /* 滚动提示：使用 max(32px, 4vh) 使在 2K/4K 超高屏幕上距离底部也有足够余量 */
      .si-scroll-hint {
        position: absolute;
        bottom: max(32px, 4vh);
        left: 50%;
        transform: translateX(-50%);
        z-index: 20;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        pointer-events: none;
        transition: opacity 0.3s ease;
      }

      .si-scroll-hint-text {
        font-size: 12px;
        color: #888;
        letter-spacing: 0.06em;
      }

      .si-scroll-hint-line {
        width: 1px;
        height: 32px;
        background: linear-gradient(to bottom, #888, transparent);
        animation: siFloatLine 1.4s ease-in-out infinite alternate;
      }

      @keyframes siShimmer {
        0%   { transform: translateX(-100%) skewX(-15deg); }
        100% { transform: translateX(200%)  skewX(-15deg); }
      }

      @keyframes siFloatLine {
        from { transform: translateY(0); }
        to   { transform: translateY(-6px); }
      }

      /* 响应式 */
      @media (max-width: 768px) {
        .si-hero-title { font-size: 46px; line-height: 1.05; margin-bottom: 8px; }
        .si-hero-title em { font-size: 36px; letter-spacing: -1.5px; }
        .si-hero-subtitle { font-size: 14px; }
        .si-tri-btn { padding: 10px 22px; }
        .si-tri-btn span { font-size: 14px; }
        .si-tri-tooltip-tools { min-width: 260px; }

        /* 移动端：每个按钮原位 tooltip 不显示；统一由顶部共享面板 #siTriMobilePanel 显示 */
        .si-tri-tooltip { display: none !important; }

        .si-tri-mobile-panel {
          display: block !important;
          position: absolute;
          top: 6%;
          left: 50%;
          transform: translateX(-50%);
          z-index: 30;
          width: min(86vw, 360px);
          background: rgba(255,255,255,0.97);
          backdrop-filter: blur(14px);
          -webkit-backdrop-filter: blur(14px);
          border-radius: 14px;
          padding: 12px 16px;
          border: 1px solid rgba(170,255,0,0.5);
          box-shadow: 0 8px 24px rgba(0,0,0,0.12);
          text-align: center;
          opacity: 0;
          transition: opacity 0.25s ease;
          pointer-events: none;
        }
        .si-tri-mobile-panel-title {
          font-size: 13px;
          font-weight: 700;
          color: #1a1a1a;
          margin-bottom: 6px;
          letter-spacing: 0.5px;
        }
        .si-tri-mobile-panel-desc {
          font-size: 13px;
          color: #444;
          line-height: 1.5;
        }
        .si-tri-mobile-panel-links {
          display: flex;
          gap: 8px;
          justify-content: center;
          margin-top: 8px;
          flex-wrap: wrap;
        }
        .si-tri-mobile-panel-link {
          flex: 1 1 auto;
          min-width: 0;
          padding: 6px 10px;
          border-radius: 8px;
          border: 1px solid rgba(0,0,0,0.12);
          background: #fff;
          font-size: 12px;
          font-weight: 600;
          color: #1a1a1a;
          text-decoration: none;
          white-space: nowrap;
        }
        .si-tri-bottom-heading {
          top: calc(77.5% + 44px);
          width: min(92vw, 520px);
          font-size: 22px;
          letter-spacing: -0.5px;
          line-height: 1.28;
          white-space: normal;
        }
      }
      /* PC 端：共享面板默认不显示 */
      .si-tri-mobile-panel { display: none; }