@import "variables-pc.css";
@import "nav-bg-black.css";
@import "scrollbar-dark.css";

.content-wrapper {
    background: linear-gradient(180deg, #01040A 0%, #131422 100%);
    position: relative;
}

/* ==========================================================================
   indexV2 - 首页 V2
   ========================================================================== */
.light-wrapper {
    position: absolute;
    width: 100%;
    left: 0;
    top: -10rem;
    overflow: hidden;
    height: 103rem;
}

.light-wrapper img {
    width: 123%;
    height: 120%;
    top: -10rem;
    position: absolute;
    left: -12%;
}

/* ---------- 页面根容器 ---------- */
.index-v2 {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
}

/* ---------- 首屏 Hero ---------- */
.hero-banner {
    display: flex;
    flex-flow: column;
    align-items: center;
    margin-top: 7.15rem;
}

.hero-banner-content {
    position: relative;
}

.banner-small-title {
    position: absolute;
    margin: 0;
    top: 0;
    right: 16rem;
    font-size: 1.13rem;
    color: #7BCAFF;
    font-weight: 400;
    background: rgba(149, 182, 255, 0.23);
    border: 0.06rem solid rgba(166, 220, 255, 0.37);
    border-radius: 0.5rem;
    padding: 0.29rem 0.56rem;

}

.hero-banner-title {
    text-align: center;
    color: transparent;
    background-image: linear-gradient(180deg, #2BAAFF 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 4.5rem;
    margin: 0;
}

.hero-banner-subtitle {
    margin: 0;
    font-size: 4.25rem;
    text-align: center;
    color: #FFFFFF;
}

span.highlight-wrapper {
    position: relative;
    color: #fa851e;
    z-index: 5;
    margin-left: 0.5rem;
}

.hero-banner-subtitle span.highlight {
    background: linear-gradient(90deg, #FFD147 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    font-size: 4.25rem;
    position: absolute;
    left: -0.3rem;
    top: -0.7rem;
    z-index: 10;
}

.hero-banner-tagline {
    color: #F0F0F0;
    text-align: center;
    font-size: 2rem;
    margin: 0;
}

.hero-banner-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.69rem;
    margin-top: 7.81rem;
    margin-bottom: 6.19rem;
}

.hero-banner-cta {
    border-radius: 1rem;
    padding: 1.81rem 3.94rem;
    font-size: 1.88rem;
    color: #FFFFFF;
}

.hero-banner-cta-trial {
    background-image: linear-gradient(90deg, #2762EB 0%, #7B3AED 100%);
}

.hero-banner-cta-download {
    background-color: rgba(255, 255, 255, 0.12);
    border: 0.0625rem solid #8F7EB0;
}

.hero-banner-download-icon {
    width: 1.13rem;
    height: 1.34rem;
    margin-left: 0.88rem;
}

.hero-banner-screen {
    width: 42.51rem;
}

img.screen.hero-banner-screen.border {
    position: absolute;
    bottom: 0.5rem;
    width: 42.8rem;
    left: 10.5rem;
}

.section-content {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

h3.section-title-heading {
    margin: 7.4rem 0 0;
    font-size: 3rem;
    color: #FFFFFF;
    text-align: center;
}

span.highlight {
    color: #FFC25D;
    white-space: nowrap;
}

h4.section-title-subtitle {
    font-size: 32px;
    color: #FFFFFF;
    letter-spacing: 0;
    text-align: center;
    font-weight: 400;
    margin: 0 0 5rem;
}

/* ---------- 核心卖点 point-card 1/2/3 ---------- */
.point-heading {
}

.point-icon {
    background-color: #7568FF;
    clip-path: polygon(50% 0%, /* 顶部尖角 */ 60% 40%, /* 右上凹陷 */ 100% 50%, /* 右侧尖角 */ 60% 60%, /* 右下凹陷 */ 50% 100%, /* 底部尖角 */ 40% 60%, /* 左下凹陷 */ 0% 50%, /* 左侧尖角 */ 40% 40% /* 左上凹陷 */);
    width: 2rem;
    height: 2rem;
    position: relative;
    z-index: 5;
    margin-left: 0.81rem;
}

.point-icon.point-icon2 {
    position: absolute;
    width: 1.2rem;
    height: 1.2rem;
    top: 2.5rem;
    left: 1rem;
}

.point-icon.point-icon3 {
    width: 0.5rem;
    height: 0.5rem;
    position: absolute;
    top: 3.3rem;
    left: 1.8rem;
}

.point-num {
    display: flex;
    align-items: baseline;
    font-size: 4.5rem;
    color: #7568FF;
    font-weight: 500;
    position: relative;
}

.point-num span {
    box-shadow: 0 0.25rem #040914;
    position: relative;
    z-index: 5;
    margin-left: 0.75rem;
}

.point-num::after {
    content: "";
    position: absolute;
    background: #231E5A;
    border-radius: 1rem;
    width: 6.25rem;
    height: 1.5rem;
    bottom: 1.5rem;
    left: 0;
    z-index: 1;
}

.point-name-wrapper {
    text-align: left;
    color: transparent;
    background-image: linear-gradient(180deg, #CECDFA 0%, #9B9BFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2.63rem;
    margin: 0;
    line-height: 3.75rem;
    font-weight: 600;
}

.point-name {
    margin: 0;
}

.point-subname {
    margin: 0;
}

.point-desc {
    font-size: 1.25rem;
    width: 35.38rem;
    display: block;
    color: #9699C8;
    margin-top: 1.44rem;
    margin-bottom: 4.81rem;
}

.point-feature {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 1.38rem;
    line-height: 2;
    color: #FFFFFF;
}

.point-feature img.icon {
    margin-right: 1.16rem;
}

.point-image {
}

.point-card.point1 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.point-card.point1 img.point-image {
    width: 46.53rem;
    height: 46.63rem;
}

.point-card.point2 {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 6.38rem;
}

.point-card.point2 .point-left {
    border: 0.13rem solid #ffffff0f;
    border-radius: 1rem;
    background: #151627;
    padding: 3.19rem 0.06rem;
}

.point-card.point2 .point-image {
    width: 33.93rem;
    height: 18.74rem;
}

.point-card.point2 .point-desc {
    width: 50.88rem;
    margin-bottom: 2.81rem;
}

.point-card.point3 {
    display: flex;
    flex-flow: column;
    margin-top: 5.38rem;
    width: 94rem;
}

.point-card.point3 .point-desc {
    width: 100%;
    margin-bottom: 6.13rem;
}

/* agent 对话场景（point-bottom/chat/agent/point-image）已提取至 face/css/agent.css */


/* ---------- 企业级安全防护 ---------- */
.security-list {
    margin-top: 6rem;
}

.security-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4.81rem;
}

.security-card-permission {
}

.security-card-search {
}

.security-info {
    flex: 1;
}

.security-heading {
    text-align: left;
    color: transparent;
    background-image: linear-gradient(180deg, #CECDFA 0%, #9B9BFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2.63rem;
    margin: 0;
    line-height: 3.75rem;
    font-weight: 600;
}

.security-name {
}

.security-subname {
}

.security-desc {
    font-size: 1.25rem;
    color: #FFFFFF;
    letter-spacing: 0;
    text-align: justify;
    line-height: 2rem;
    font-weight: 400;
    width: 17.5rem;
}

.security-tags {
    display: flex;
    gap: 0.5rem;
}

.security-tag {
    border-radius: 1.31rem;
    padding: 0.44rem;
    width: 6.25rem;
    display: block;
    font-size: 1.25rem;
    color: #FFFFFF;
    letter-spacing: 0;
    text-align: center;
    font-weight: 500;
}

.tag1 {
    background-image: linear-gradient(180deg, #C5C4FB 0%, #6060FB 100%);
}

.tag2 {
    background-image: linear-gradient(180deg, #C5C4FB 0%, #B542FF 100%);
}

.tag3 {
    background-image: linear-gradient(180deg, #C5C4FB 0%, #FF9D41 100%);
}

.tag4 {
    background-image: linear-gradient(180deg, #C5C4FB 0%, #60B5FB 100%);
}

.security-media {
    background: #151627;
    border: 0.13rem solid rgba(255, 255, 255, 0.06);
    border-radius: 2.13rem;
    width: 30.24rem;
    height: 17rem;
    padding: 2rem 5.38rem;
}

.security-picture {
    width: 100%;
}

/* ---------- 4 周重塑工作流 ---------- */
.week-list {
    display: flex;
    gap: 1.38rem;
    align-items: stretch;
    justify-content: center;
}

.week-card {
    width: 16.06rem;
    background: #151627;
    border: 0.13rem solid rgba(255, 255, 255, 0.06);
    border-radius: 2.13rem;
    padding: 2.56rem 1.19rem;
}

.week-card-1 {
    color: #2CECAA;
}


.week-card-2 {
    color: #00CCF7;
}

.week-card-3 {
    color: #6DA0F6;
}

.week-card-4 {
    color: #CB823C;
}

.week-card-1:hover {
    border: 0.13rem solid #2CECAA;
}


.week-card-2:hover {
    border: 0.13rem solid #00CCF7;
}

.week-card-3:hover {
    border: 0.13rem solid #6DA0F6;
}

.week-card-4:hover {
    border: 0.13rem solid #CB823C;
}

.week-head {
}

.week-name {
    font-size: 0.88rem;
    letter-spacing: 0;
    text-align: justify;
    font-weight: 500;
    border-radius: 1.06rem;
    width: fit-content;
    padding: 0.31rem 0.63rem;
}

.week-card-1 .week-name {
    background: #113C3C;
}

.week-card-2 .week-name {
    background: #0F4760;
}

.week-card-3 .week-name {
    background: #25314F;
}

.week-card-4 .week-name {
    background: #392B2B;
}

.week-desc {
    font-size: 1.75rem;
    color: #FFFFFF;
    letter-spacing: 0;
    text-align: justify;
    line-height: 2.25rem;
    font-weight: 500;
}

.week-detail {
}

.week-label {
    text-align: justify;
    align-items: center;
    font-size: 1.25rem;
    letter-spacing: 0;
    line-height: 2rem;
    font-weight: 500;
    display: flex;
}

.week-icon {
    margin-right: 0.53rem;
    position: relative;
    top: 0.02rem;
    flex-shrink: 0;
}

.week-text {
    font-size: 1.13rem;
    color: #F0F0F0;
    letter-spacing: 0;
    text-align: justify;
    line-height: 1.88rem;
    font-weight: 400;
    height: 9.38rem;
    margin-bottom: 0;
}

.week-detail.detail2 .week-text {
    height: 7.5rem;
}

/* ---------- 没有限制 ---------- */
.limit-layout {
    background: #151627;
    border-radius: 1.38rem;
    display: flex;
    margin-top: 5.94rem;
}

.limit-media {
    background: linear-gradient(180deg, rgba(199, 201, 230, 0.34) 0%, rgba(40, 49, 184, 0.34) 100%);
    border-radius: 1.38rem;
    position: relative;
    display: flex;
    padding: 2.76rem 3.59rem;
    gap: 3.74rem;
}

.limit-media:after {
    content: '';
    background: #151627;
    position: absolute;
    z-index: 5;
    width: calc(100% - 0.26rem);
    height: calc(100% - 0.26rem);
    left: 0.13rem;
    top: 0.13rem;
    border-radius: 1.4rem;
}

.limit-picture-wrapper {
    position: relative;
    z-index: 9;
}

.limit-picture {
    position: relative;
    z-index: 9;
    width: 9.48rem;
}

.limit-picture-wrapper:after {
    content: '';
    transform: rotate(-6deg);
    background: #4128B1;
    position: absolute;
    z-index: 6;
    width: 10.63rem;
    height: 5.2rem;
    filter: blur(1rem);
    bottom: 0;
    right: -1rem;
    border-radius: 4.38rem;
}

.limit-media-desc {
    position: relative;
    z-index: 9;
    text-align: left;
    color: transparent;
    background-image: linear-gradient(180deg, #CECDFA 0%, #9B9BFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2.63rem;
    margin: 0;
    height: fit-content;
}

.limit-media-desc:after {
    content: '';
    position: absolute;
    z-index: 9;
    width: 11.5rem;
    height: 0.5rem;
    left: 1.13rem;
    bottom: -0.13rem;
    background-image: radial-gradient(circle at center,
    #A6A5FF 0%,
    #A6A5FF 60%,
    transparent 100%
    )
}

.limit-col {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    justify-content: space-evenly;
    font-size: 1.38rem;
    color: #FFFFFF;
    letter-spacing: 0;
    font-weight: 400;
    padding-right: 1.81rem;
}

.limit-col-left {
    margin-left: 1.94rem;
    position: relative;
}

.limit-col-left:after {
    background: rgba(150, 153, 200, 0.34);
    width: 0.06rem;
    height: 17.06rem;
    position: absolute;
    content: "";
    right: 0;
    top: 0.6em;
}

.limit-col-right {
    margin-left: 1.31rem;
}

.limit-item {
}

.limit-text {
}

.limit-item img.icon {
    width: 1.19rem;
    height: 0.89rem;
}

/* ---------- 零成本体验 / 价格 ---------- */
.pricing-list {
    display: flex;
    align-items: stretch;
    gap: 1.88rem;
    justify-content: center;
}

.pricing-card {
    background: #151627;
    border: 2px solid rgba(255, 255, 255, 0.06);
    border-radius: 34px;
    padding: 3.25rem 2.19rem;
    width: 33.62rem;
}

.pricing-card:hover {
    border: 2px solid #966AFF;
}

.pricing-card-trial {
}

.pricing-card-recharge {
}

.pricing-head {
    position: relative;
}

.pricing-name {
    margin: 0;
    text-align: left;
    color: transparent;
    background-image: linear-gradient(180deg, #CECDFA 0%, #9B9BFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.75rem;
}

.pricing-badge {
    position: absolute;
    background: #7568FF;
    border-radius: 8px;
    padding: 0.25rem 1.06rem;
    top: -1rem;
    right: 0;
    font-size: 1.25rem;
    color: #FFFFFF;
    letter-spacing: 0;
    text-align: justify;
    font-weight: 400;
}

.pricing-desc {
    font-size: 1.25rem;
    color: #FFFFFF;
    letter-spacing: 0;
    text-align: justify;
    font-weight: 400;
}

.pricing-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pricing-price {
    font-size: 1.5rem;
    color: #FFFFFF;
    letter-spacing: 0;
    text-align: justify;
    line-height: 50px;
    font-weight: 600;
}

.pricing-price span.highlight {
    color: #FFFFFF;
    font-size: 2.25rem;
}

.pricing-btn {
    background-image: linear-gradient(90deg, #2762EB 0%, #B33AED 100%);
    border-radius: 1.5rem;
    font-size: 1.25rem;
    color: #FFFFFF;
    letter-spacing: 0;
    text-align: justify;
    font-weight: 500;
    padding: 0.63rem 3.75rem;
}

.pricing-card-recharge a.pricing-btn {
    background-image: linear-gradient(90deg, #2762EB 0%, #7B3AED 100%);
}

/* ---------- 多设备下载 ---------- */
.download-list {
    display: flex;
    gap: 1rem;
    margin-top: 6.06rem;
}

.download-card {
    background: #151627;
    border: 0.13rem solid rgba(255, 255, 255, 0.06);
    border-radius: 1.88rem;
    padding: 1.94rem 2.91rem;
    display: flex;
    flex-flow: column;
    align-items: center;
}

.download-card:hover {
    border: 0.13rem solid rgba(255, 255, 255, 0.18);
}

.download-card-windows {
}

.download-card-macos {
}

.download-card-ios {
}

.download-card-android {
}

.download-cover {
    border-radius: 6px;
    width: 2.63rem;
    height: 2.63rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.download-card-windows .download-cover {
    background: #2C2227;
}

.download-card-macos .download-cover {
    background: #1A2638;
}

.download-card-ios .download-cover {
    background: #171D26;
}

.download-card-android .download-cover {
    background: #171D26;
}

.download-os-name {
}

.download-list .download-link {
    font-size: 1.5rem;
    letter-spacing: 0;
    text-align: center;
    font-weight: 500;
    color: #585D61;
    margin-top: 1.75rem;
}

.download-card-windows .download-link {
    color: #FF6C35;
}

.download-card-macos .download-link {
    color: #4A90D9;
}

.download-status {
    display: flex;
    align-items: center;
    gap: 0.38rem;
    font-size: 1.13rem;
    color: #4AD9C0;
    letter-spacing: 0;
    text-align: center;
    font-weight: 500;
}

.download-status-text {
}

.dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}

.download-card-windows .dot, .download-card-macos .dot {
    background: #4AD9C0;
}

.download-card-ios .dot, .download-card-android .dot {
    background: #D6983A;
}

.download-card-ios .download-status, .download-card-android .download-status {
    color: #D6983A;;
}

/* ---------- 品牌墙：样式已提取至 face/css/brand-list.css ---------- */

/* ---------- 企业信息表单：样式已提取至 face/css/contact-form.css ---------- */

/* ==========================================================================
   动效 / 交互（indexV2.js 配套样式）
   ========================================================================== */

/* ---------- hero 格子线画布（JS 动态插入 <canvas>，与导航同级、在导航下方） ---------- */
.hero-banner {
    position: relative;
}

.hero-banner-grid-canvas {
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

/* 内容浮于画布之上 */
.hero-banner > .hero-banner-content,
.hero-banner > .hero-banner-actions,
.hero-banner > .hero-banner-screen {
    position: relative;
    z-index: 1;
}

/* ---------- security-list 轮播 ---------- */
/* 两张卡叠在同一 grid 格内：容器高度取最高卡，宽度取最宽卡，两卡整体尺寸一致 */
.security-list {
    position: relative;
    overflow: hidden;
    display: grid;
}

.security-card {
    grid-area: 1 / 1;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.security-card:not(.is-active) {
    opacity: 0;
    transform: translateY(1.5rem);
    pointer-events: none;
}

/* 切换按钮：当前 #7568FF，等待 #FFFFFF */
.security-nav {
    display: flex;
    justify-content: center;
    gap: 0.63rem;
    margin-top: 2.25rem;
}

.security-nav-btn {
    width: 4.25rem;
    height: 0.63rem;
    border-radius: 0.31rem;
    border: none;
    padding: 0;
    background: #FFFFFF;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
}

.security-nav-btn.is-active {
    background: #7568FF;
}

.security-nav-btn:hover {
    transform: scale(1.25);
}

/* brand-list 跑马灯：样式已提取至 face/css/brand-list.css，脚本在 face/js/brand-list.js */

/* 提交状态 toast：样式已随表单提取至 face/css/contact-form.css（类名改为 .form-toast） */

/* ---------- 「没有限制 → 多设备覆盖」区域网格背景（纯 CSS，无光点） ---------- */
.grid-zone {
    width: 100%;
    background-image: linear-gradient(to right, rgba(153, 214, 255, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(153, 214, 255, 0.08) 1px, transparent 1px);
    background-size: 200px 200px; /* 与 hero 画布的 CELL=200 保持一致 */
    background-position: 0 0, 0 -1px;
}