*,
*::before,
*::after {
    box-sizing: border-box;
}

.index-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    max-width: 100%;
    overflow-x: hidden;
}

/* =================
    1. 核心背景容器
   ================= */
.hero-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: clamp(40px, 8vh, 80px) clamp(24px, 5vw, 60px);
    background-color: #ffffff;
    background-image:
        linear-gradient(90deg, rgba(85, 134, 205, 0.12) 1px, transparent 1px),
        linear-gradient(0deg, rgba(85, 134, 205, 0.12) 1px, transparent 1px),
        radial-gradient(ellipse 80% 60% at 80% 30%, rgba(147, 197, 253, 0.5) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 20% 70%, rgba(167, 243, 208, 0.4) 0%, transparent 50%);
    background-size: clamp(50px, 10vw, 100px) clamp(50px, 10vw, 100px), 100% 100%, 100% 100%;
    background-position: 0 0, 0 0, 0 0, 0 0;
    background-repeat: repeat, repeat, no-repeat, no-repeat;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(24px, 5vw, 60px);
}

.hero-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0) 65%,
            rgba(255, 255, 255, 0.5) 100%);
    pointer-events: none;
    z-index: 0;
}

.hero-box {
    position: relative;
    max-width: 1500px;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(24px, 5vw, 60px);
}

.hero-content {
    z-index: 10;
    text-align: left;
    padding: clamp(1rem, 3vw, 2rem);
    max-width: clamp(280px, 40vw, 700px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.hero-span {
    display: inline-block;
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    font-weight: 500;
    color: #3B82F6;
    margin-bottom: clamp(0.5rem, 2vh, 1rem);
    letter-spacing: 0.05em;
}

.hero-image {
    flex: 1 1 clamp(380px, 40%, 800px);
    display: flex;
    justify-content: flex-end;
    position: relative;
}

h1 {
    font-size: clamp(2rem, 4vw + 0.5rem, 4rem);
    color: #111827;
    margin-bottom: clamp(0.5rem, 2vh, 1rem);
    letter-spacing: -0.05em;
}

.hero-section p {
    font-size: clamp(1rem, 1.5vw + 0.5rem, 1.8rem);
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: clamp(1rem, 3vh, 2rem);
}

.btn {
    display: inline-flex;
    align-items: center;
    padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(1rem, 2vw, 1.5rem);
    background-color: #111827;
    color: white;
    border-radius: clamp(0.25rem, 1vw, 0.5rem);
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    font-weight: 500;
    text-decoration: none;
    transition: transform 0.2s;
}

.btn:hover {
    transform: translateY(-2px);
}

/* 网格墙容器（错位图片墙） */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: clamp(8px, 2vw, 15px);
    padding: clamp(5px, 1vw, 10px);
    width: 100%;
    max-width: clamp(400px, 50vw, 800px);
    aspect-ratio: 1 / 1;
    margin: 0 auto;
}

.grid-container>div {
    overflow: hidden;
    /* 保证圆角裁剪 */
}

.grid-container div img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.item-1 {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    background: #3B82F6;
    border-radius: clamp(15px, 4vw, 30px) clamp(15px, 4vw, 30px) 0px clamp(15px, 4vw, 30px);
    width: 85%;
    height: 85%;
    justify-self: end;
    align-self: end;
}

.item-2 {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    background: #3B82F6;
    border-radius: clamp(15px, 4vw, 30px) clamp(15px, 4vw, 30px) clamp(15px, 4vw, 30px) 0px;
    width: 60%;
    height: 60%;
    justify-self: start;
    align-self: end;
}

.item-3 {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
    background: #ddd;
    border-radius: clamp(20px, 5vw, 40px) clamp(20px, 5vw, 40px) clamp(20px, 5vw, 40px) 0px;
    width: 100%;
    height: 100%;
    justify-self: start;
    align-self: start;
}

.item-4 {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
    background: #ddd;
    border-radius: clamp(20px, 5vw, 40px) 0px clamp(20px, 5vw, 40px) clamp(20px, 5vw, 40px);
    width: 50%;
    height: 100%;
    justify-self: end;
    align-self: start;
}

.item-5 {
    grid-column: 3 / 4;
    grid-row: 3 / 4;
    background: #ddd;
    border-radius: 0px clamp(15px, 4vw, 30px) clamp(15px, 4vw, 30px) clamp(15px, 4vw, 30px);
    width: 60%;
    height: 60%;
    justify-self: start;
    align-self: start;
}

/* ==============
    2. 产品设计区
   ============== */
.product-section {
    width: 100%;
    max-width: clamp(320px, 90vw, 1500px);
    min-height: 100vh;
    margin: 0 auto;
    padding: clamp(32px, 6vh, 60px) clamp(16px, 3vw, 24px);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(24px, 5vw, 60px);
    position: relative;
    overflow: hidden;
}

.product-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: clamp(12px, 2vh, 16px);
    max-width: clamp(280px, 30vw, 450px);
    max-height: clamp(400px, 80vh, 650px);
}

.product-text h2 {
    font-size: clamp(1.5rem, 3vw + 0.5rem, 3rem);
    font-weight: bold;
    color: #111827;
    border-left: clamp(0.25rem, 0.5vw, 0.5rem) solid #3B82F6;
    padding-left: clamp(0.5rem, 1.5vw, 1rem);
}

.product-text p {
    font-size: clamp(0.875rem, 1.2vw + 0.3rem, 1.125rem);
    padding-top: clamp(1rem, 2vh, 2rem);
    color: #6b7280;
    line-height: 1.6;
}

.change-btn {
    margin-top: clamp(4rem, 3vh, 10rem);
    width: clamp(24px, 2vw, 57px);
}

.product-content {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(12px, 2.5vw, 24px);
    align-items: stretch;
    justify-content: center;
}

.product-image {
    flex: 1;
    min-width: clamp(150px, 25vw, 200px);
    max-height: clamp(300px, 80vh, 650px);
    background-color: #3B82F6;
    border-radius: clamp(1.5rem, 4vw, 3rem);
    transition: flex 0.4s ease;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

.product-image:hover {
    flex: 2;
}

.product-image img {
    width: 100%;
    height: 100%;
    max-height: clamp(300px, 80vh, 750px);
    object-fit: cover;
    display: block;
}

.product-image span {
    position: absolute;
    bottom: clamp(12px, 3vw, 24px);
    left: clamp(2rem, 5vw, 4rem);
    font-size: clamp(1.25rem, 2.5vw, 2.25rem);
    font-weight: bold;
    color: #3B82F6;
    writing-mode: horizontal-tb;
    transform-origin: left bottom;
    transform: rotate(-90deg);
    transition: transform 0.4s ease;
}

.product-image:hover span {
    transform: rotate(0deg);
}

/* =================
   3. 量化页面设计
   ================= */
.quant-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: clamp(24px, 5vw, 60px);
    padding: 0 clamp(16px, 3vw, 24px);
    box-sizing: border-box;
    background-image:
        linear-gradient(90deg, rgba(118, 67, 255, 0.08) 1px, transparent 1px),
        linear-gradient(0deg, rgba(118, 67, 255, 0.08) 1px, transparent 1px);
    background-size: clamp(50px, 10vw, 100px) clamp(50px, 10vw, 100px);
    background-position: 0 0, 0 0;
    background-repeat: repeat, repeat;
}

.quant-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0) 65%,
            rgba(255, 255, 255, 0.5) 100%);
    pointer-events: none;
    z-index: 0;
}

.quant-image {
    flex: 1;
    max-width: clamp(280px, 60vw, 890px);
    min-width: 0;
}

.quant-image img {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.quant-text {
    flex: 1;
    max-width: clamp(280px, 48vw, 720px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: clamp(16px, 3vh, 32px);
}

.quant-box {
    width: clamp(260px, 30vw, 380px);
    height: clamp(48px, 6vh, 60px);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border: clamp(2px, 0.3vw, 3px) solid #F7F7F7;
    border-radius: clamp(15px, 3vw, 30px);
    background-color: #ffffff;
}

.quant-span {
    width: clamp(70px, 8vw, 92px);
    height: clamp(30px, 4vh, 38px);
    color: #fff;
    font-size: clamp(0.75rem, 1.2vw, 1rem);
    font-weight: 600;
    background-color: #B291D1;
    border-radius: clamp(15px, 2.5vw, 19px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 clamp(4px, 1vw, 8px) 0 clamp(6px, 1.5vw, 11px);
}

.quant-message {
    flex: 1;
    font-size: clamp(0.75rem, 1vw, 0.875rem);
    font-weight: 500;
    color: #868686;
    display: flex;
    align-items: center;
}

.quant-svg {
    width: clamp(14px, 1.5vw, 17px);
    padding-right: clamp(4px, 1vw, 8px);
}

.quant-text h2 {
    font-size: clamp(1.75rem, 4vw + 1rem, 4.7rem);
    font-weight: semi-bold;
    text-align: right;
}

.quant-text p {
    font-size: clamp(1rem, 1.8vw, 1.5rem);
    font-weight: regular;
    color: #828282;
    text-align: right;
}

.quant-btn {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: clamp(12px, 2vw, 24px);
}

.btn-left {
    width: clamp(180px, 22vw, 288px);
    height: clamp(48px, 7vh, 64px);
    background-color: #7643FF;
    color: #fff;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    font-weight: 600;
    border-radius: clamp(20px, 3.5vw, 32px);
    box-shadow: clamp(2px, 0.5vw, 4px) clamp(2px, 0.5vw, 4px) clamp(4px, 1vw, 8px) rgba(118, 67, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-right {
    width: clamp(150px, 18vw, 225px);
    height: clamp(44px, 6vh, 56px);
    background-color: #fff;
    box-shadow: clamp(2px, 0.5vw, 4px) clamp(2px, 0.5vw, 4px) clamp(4px, 1vw, 8px) rgba(185, 185, 185, 0.25);
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    font-weight: 500;
    border-radius: clamp(18px, 3vw, 28px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =================
   4. 笔记区
   ================= */
.note-section {
    position: relative;
    width: 100%;
    max-width: clamp(320px, 90vw, 1500px);
    min-height: 100vh;
    margin: auto;
    padding: clamp(32px, 6vh, 60px) clamp(16px, 3vw, 24px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(32px, 6vh, 60px);
}

.note-title {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(12px, 2vh, 16px);
}

.note-title h2 {
    font-size: clamp(1.5rem, 3vw + 0.5rem, 3rem);
    font-weight: bold;
    color: #000000;
    letter-spacing: -0.02em;
}

.small-line {
    width: clamp(60px, 8vw, 90px);
    height: clamp(6px, 0.5vw, 10px);
    background-color: #5586CD;
    border-radius: 5px;
}

.note-title p {
    font-size: clamp(0.875rem, 1.2vw + 0.3rem, 1.125rem);
    font-weight: 300;
    color: #7d7d7d;
    line-height: 1.6;
}

/* --- 笔记内容 --- */
.note-content {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: clamp(40px, 8vh, 90px);
    gap: clamp(24px, 6vw, 60px);
}

.note-item {
    background: #fff;
    width: clamp(280px, 40vw, 450px);
    height: clamp(320px, 70vh, 450px);
    padding: clamp(24px, 4vw, 40px) clamp(20px, 3vw, 30px);
    border-radius: clamp(16px, 3vw, 24px);
    text-align: center;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
}

/* --- 图标样式 --- */
.note-icon {
    width: clamp(100px, 20vw, 170px);
    height: clamp(100px, 20vw, 170px);
    background: #f0f2f5;
    border-radius: clamp(30px, 6vw, 45px);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto clamp(12px, 2vh, 20px) auto;
    transition: all 0.3s ease;
}

.note-icon svg {
    width: clamp(34px, 5vw, 50px);
    height: clamp(34px, 5vw, 50px);
}

/* --- 文字内容 --- */
.note-item h3 {
    font-size: clamp(1.125rem, 2.5vw, 1.5rem);
    color: #1a1a1a;
    margin: clamp(12px, 2vh, 20px);
    font-weight: 700;
    transition: color 0.3s ease;
}

.note-item p {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: #D9D9D9;
    line-height: 1.5;
    transition: color 0.3s ease;
}

/* --- 交互状态：悬停 (Hover) --- */
.note-item:hover {
    transform: translateY(-10px);
    background-color: #5586CD;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    color: #fff;
}

/* =================
   5. 新闻区
   ================= */
.news-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: clamp(60px, 5vw, 150px);
    padding: 0 clamp(16px, 3vw, 24px);
    box-sizing: border-box;
    flex-wrap: wrap;
    background-image:
        linear-gradient(90deg, rgba(118, 67, 255, 0.03) 1px, transparent 1px),
        linear-gradient(0deg, rgba(118, 67, 255, 0.03) 1px, transparent 1px);
    background-size: clamp(50px, 10vw, 100px) clamp(50px, 10vw, 100px);
    background-position: 0 0, 0 0;
    background-repeat: repeat, repeat;
}

.news-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0) 65%,
            rgba(255, 255, 255, 0.5) 100%);
    pointer-events: none;
    z-index: 0;
}

/* 左边 */
.news-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    max-width: clamp(280px, 40vw, 650px);
}

.news-lefttitle {
    font-weight: bold;
    font-size: clamp(1.75rem, 5vw, 4rem);
    color: #000;
    margin-bottom: clamp(24px, 6vh, 4rem);
}

.news-articles {
    max-width: clamp(280px, 40vw, 650px);
    font-size: clamp(1rem, 2vw, 1.5rem);
    font-weight: regular;
    color: #9E9E9E;
    margin-bottom: clamp(24px, 6vh, 4rem);
}

.news-btn {
    background-color: #9E3FC1;
    background-image: linear-gradient(135deg, #9E3FC1, #FC6D18);
    border-radius: clamp(4px, 1vw, 8px);
    padding: clamp(12px, 2vh, 20px) clamp(16px, 3vw, 30px);
    font-size: clamp(1rem, 2.5vw, 2rem);
    font-weight: bold;
    color: #fff;
}

.news-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: clamp(16px, 4vh, 32px);
}

.news-itemcard {
    width: min(clamp(280px, 50vw, 625px), 100%);
    height: clamp(120px, 20vh, 180px);
    padding: clamp(12px, 2vw, 20px);
    background-color: #fff;
    border-left: clamp(6px, 1vw, 12px) solid #DFDFDF;
    border-radius: clamp(6px, 1vw, 10px);
    display: flex;
    flex-direction: row;
    align-items: center;
    box-sizing: border-box;
    box-shadow: clamp(2px, 0.5vw, 4px) clamp(2px, 0.5vw, 4px) clamp(4px, 1vw, 8px) rgba(213, 213, 213, 0.25);
}

.news-itemcard:nth-child(2) {
    border-left: clamp(6px, 1vw, 12px) solid #886AC9;
}

.news-itemcard:nth-child(1) {
    margin-left: clamp(60px, 10vw, 130px);
}

.news-itemcard:nth-child(3) {
    margin-left: clamp(60px, 10vw, 130px);
}

.news-icons {
    flex-shrink: 0;
    width: clamp(80px, 15vw, 140px);
    height: clamp(80px, 15vw, 140px);
    border-radius: clamp(40px, 7.5vw, 70px);
    background-color: #3B82F6;
}

.news-boxs {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-left: clamp(12px, 2vw, 24px);
}

.news-boxtop {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: clamp(200px, 35vw, 400px);
}

.news-title {
    font-weight: bold;
    font-size: clamp(1rem, 2.5vw, 2rem);
    color: #000;
}

.news-svg {
    margin: clamp(2px, 0.5vw, 5px);
}

.news-svg svg {
    height: clamp(18px, 4vw, 30px);
}

.news-article {
    font-size: clamp(0.875rem, 2vw, 1.5rem);
    max-width: clamp(200px, 35vw, 400px);
    color: #9E9E9E;
}

/* =================
   6. 网页快速导航
   ================= */
.quick-section {
    position: relative;
    width: 100%;
    max-width: 1500px;
    padding: clamp(40px, 6vh, 60px) clamp(24px, 4vw, 48px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: clamp(32px, 5vh, 50px);
    align-items: start;
}

.quick-container {
    width: 100%;
    max-width: 1500px;
    grid-column: 1/3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.quick-long {
    font-size: clamp(1.5rem, 1.5vw, 2rem);
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #1E293B;
    padding: clamp(16px, 3vh, 24px) 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    margin-bottom: clamp(16px, 2.5vh, 24px);
}

.none-display {
    display: none;
}

.quick-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: clamp(600px, 70vw, 1200px);
    gap: clamp(18px, 2vw, 32px);
}

.quick-grid .grid-item {
    flex: 1 1 calc(25% - clamp(10px, 2vw, 16px));
    max-width: calc(25% - clamp(10px, 2vw, 16px));
}

.grid-item {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: clamp(8px, 1.5vw, 12px);
    padding: clamp(16px, 2vh, 24px) clamp(12px, 2vw, 20px);
    border-radius: clamp(12px, 2vw, 20px);
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
    cursor: pointer;
    min-height: clamp(70px, 10vh, 100px);
}

.grid-item:hover {
    background: rgba(255, 255, 255, 1);
}

.grid-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.grid-icon svg {
    height: clamp(28px, 5vw, 48px);
    width: auto;
}

.grid-item span {
    font-size: clamp(0.75rem, 1.5vw, 1.25rem);
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
}

/* 快速导航链接区 */
.quick-linkBox {
    display: flex;
    max-width: clamp(280px, 60vw, 900px);
    gap: clamp(40px, 10vw, 120px);
    flex: 1;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
}

.quick-title {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 2vh, 16px);
}

.big-title {
    font-weight: bold;
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    padding-bottom: clamp(0.5rem, 1.5vh, 1rem);
}

.quick-links {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2.5vh, 2.25rem);
    padding-right: clamp(1rem, 2vw, 2rem);
}

.quick-links a {
    font-size: clamp(0.75rem, 1.2vw, 0.875rem);
    color: #000000;
    text-decoration: none;
    transition: color 0.2s ease;
}

.quick-links a:hover {
    color: #3B82F6;
}

/* 邮件表单样式 */
.email-form {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 2vh, 16px);
    width: clamp(280px, 40vw, 600px);
}

.form-title {
    font-size: clamp(0.625rem, 1vw, 0.75rem);
    font-weight: 400;
    letter-spacing: 0.1em;
}

.email-form input,
.email-form textarea {
    padding: clamp(10px, 1.5vw, 12px) clamp(12px, 2vw, 14px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: clamp(6px, 1vw, 8px);
    font-family: var(--font-primary);
    font-size: clamp(0.75rem, 1.2vw, 0.875rem);
    background: rgba(255, 255, 255, 0.9);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.email-form input:focus,
.email-form textarea:focus {
    outline: none;
    border-color: #3B82F6;
    box-shadow: 0 0 0 clamp(2px, 0.4vw, 3px) rgba(59, 130, 246, 0.1);
}

.email-form textarea {
    min-height: clamp(80px, 15vh, 100px);
    resize: vertical;
}

.email-form button {
    padding: clamp(10px, 1.5vw, 12px) clamp(16px, 2.5vw, 24px);
    background: #1E293B;
    color: #fff;
    border: none;
    border-radius: clamp(6px, 1vw, 8px);
    font-family: var(--font-primary);
    font-size: clamp(0.75rem, 1.2vw, 0.875rem);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.email-form button:hover {
    background: #334155;
    transform: translateY(-1px);
}

.email-form>div {
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    font-weight: bold;
    color: #000000;
}

/* =================
   Modal 弹窗
   ================= */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 999;
    align-items: center;
    justify-content: center;
}

.modal-box {
    background: #fff;
    padding: clamp(24px, 4vw, 32px) clamp(24px, 5vw, 40px);
    border-radius: clamp(8px, 1.5vw, 12px);
    text-align: center;
    min-width: clamp(240px, 30vw, 280px);
    box-shadow: 0 clamp(4px, 1vw, 8px) clamp(16px, 3vw, 30px) rgba(0, 0, 0, 0.15);
}

.modal-box p {
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    margin-bottom: clamp(12px, 2.5vh, 20px);
    color: #1E293B;
}

.modal-close {
    padding: clamp(6px, 1.2vw, 8px) clamp(20px, 4vw, 32px);
    background: #1E293B;
    color: #fff;
    border: none;
    border-radius: clamp(6px, 1vw, 8px);
    font-size: clamp(0.75rem, 1.2vw, 0.875rem);
    cursor: pointer;
    transition: background 0.2s;
}

.modal-close:hover {
    background: #334155;
}

/* =================
   7. 底部Footer样式
   ================= */
.index-footer {
    background: #fff;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: clamp(20px, 5vh, 40px);
}

.index-footerBox {
    padding: clamp(1rem, 2vh, 1.5rem) clamp(0.5rem, 2vw, 1rem);
    width: 95%;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.index-footerCopyright {
    font-size: clamp(0.6875rem, 1.1vw, 0.8125rem);
    color: #64748B;
}

.index-footerIcon {
    display: flex;
    gap: clamp(0.5rem, 1.5vw, 1rem);
}

.index-footerIcon svg {
    width: clamp(16px, 2vw, 20px);
    height: clamp(16px, 2vw, 20px);
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.index-footerPolicy {
    font-size: clamp(0.6875rem, 1.1vw, 0.8125rem);
    color: #64748B;
}

/* ========================================
   响应式断点
   ======================================== */

/* === 平板（<=768px） === */
@media (max-width: 768px) {
    .hero-box {
        flex-direction: column;
        gap: clamp(16px, 4vw, 32px);
    }

    .hero-content {
        flex: 0 0 auto;
        max-width: 100%;
        text-align: center;
        padding: 0;
    }

    .hero-content h1 {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }

    .hero-section p {
        font-size: clamp(0.875rem, 3vw, 1rem);
    }

    .hero-image {
        max-width: 100%;
        justify-content: center;
    }

    .grid-container {
        max-width: 380px;
    }

    .product-section {
        flex-direction: column;
        gap: clamp(20px, 4vh, 32px);
        min-height: auto;
    }

    .product-text {
        max-width: 100%;
        max-height: none;
    }

    .product-text h2 {
        font-size: clamp(1.25rem, 5vw, 1.75rem);
    }

    .product-text p {
        font-size: clamp(0.8125rem, 2.5vw, 0.9375rem);
    }

    .product-content {
        width: 100%;
        flex-direction: column;
    }

    .product-image {
        min-width: 100%;
        max-height: 300px;
    }

    .product-image span {
        transform: rotate(0deg);
        bottom: clamp(8px, 2vw, 16px);
        left: clamp(1rem, 3vw, 1.5rem);
    }

    .quant-section {
        flex-direction: column;
        min-height: auto;
        padding: clamp(40px, 6vh, 60px) clamp(16px, 4vw, 24px);
        gap: clamp(24px, 4vh, 32px);
    }

    .quant-image {
        max-width: 100%;
    }

    .quant-text {
        align-items: flex-start;
        max-width: 100%;
    }

    .quant-text h2 {
        font-size: clamp(1.5rem, 6vw, 2rem);
        text-align: left;
    }

    .quant-text p {
        font-size: clamp(0.875rem, 3vw, 1rem);
        text-align: left;
    }

    .quant-btn {
        flex-direction: column;
        width: 100%;
        align-items: stretch;
    }

    .btn-left,
    .btn-right {
        width: 100%;
        height: clamp(44px, 7vh, 56px);
        font-size: clamp(0.875rem, 3vw, 1rem);
    }

    .note-section {
        padding: clamp(24px, 4vh, 40px) clamp(16px, 3vw, 24px);
        gap: clamp(24px, 4vh, 40px);
        min-height: auto;
    }

    .note-content {
        flex-direction: column;
        align-items: center;
        margin-top: clamp(24px, 5vh, 40px);
    }

    .note-item {
        width: 100%;
        max-width: clamp(280px, 80vw, 400px);
        height: auto;
        min-height: clamp(280px, 60vh, 320px);
        padding: clamp(20px, 4vw, 28px) clamp(14px, 3vw, 20px);
    }

    .note-icon {
        width: clamp(90px, 15vw, 110px);
        height: clamp(90px, 15vw, 110px);
        border-radius: clamp(22px, 4vw, 28px);
    }

    .note-icon svg {
        width: clamp(34px, 5vw, 40px);
        height: clamp(34px, 5vw, 40px);
    }

    .note-item h3 {
        font-size: clamp(1rem, 2.5vw, 1.125rem);
        margin: clamp(12px, 2vh, 16px) 0 clamp(8px, 1.5vh, 12px);
    }

    .note-item p {
        font-size: 0.9375rem;
    }

    .news-section {
        min-height: auto;
        padding: clamp(40px, 6vh, 60px) clamp(16px, 4vw, 24px);
        flex-direction: column;
        gap: clamp(32px, 6vh, 60px);
    }

    .news-text {
        max-width: 100%;
        align-items: center;
    }

    .news-lefttitle {
        text-align: center;
    }

    .news-articles {
        text-align: center;
    }

    .news-btn {
        align-self: center;
    }

    .news-content {
        align-items: center;
    }

    .news-itemcard {
        margin-left: 0 !important;
    }

    .quick-section {
        display: flex;
        flex-direction: column;
        height: auto;
        gap: clamp(24px, 5vh, 40px);
        padding: clamp(32px, 5vh, 48px) clamp(16px, 4vw, 24px);
    }

    .quick-container {
        grid-column: auto;
        width: 100%;
    }

    .quick-linkBox {
        max-width: 100%;
        border-right: none;
        flex-wrap: wrap;
        gap: clamp(16px, 4vw, 24px);
        padding-bottom: clamp(16px, 3vh, 24px);
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    .quick-title {
        min-width: clamp(100px, 20vw, 120px);
        flex: 1;
    }

    .big-title {
        font-size: clamp(1rem, 3.5vw, 1.25rem);
    }

    .quick-links {
        gap: clamp(0.5rem, 1.5vh, 0.75rem);
    }

    .email-form {
        width: 100%;
    }

    .quick-long {
        font-size: clamp(0.75rem, 2.5vw, 0.875rem);
        padding: clamp(12px, 2.5vh, 20px) 0;
        margin-bottom: clamp(12px, 2vh, 20px);
    }

    .quick-grid {
        gap: clamp(8px, 2vw, 12px);
    }

    .quick-grid .grid-item {
        flex: 1 1 calc(33.33% - clamp(8px, 2vw, 12px));
        max-width: calc(33.33% - clamp(8px, 2vw, 12px));
    }

    .grid-item {
        min-height: clamp(60px, 10vw, 80px);
        padding: clamp(10px, 2vw, 16px);
        gap: clamp(6px, 1.5vw, 10px);
    }

    .grid-icon svg {
        height: clamp(24px, 5vw, 36px);
    }

    .grid-item span {
        font-size: clamp(0.625rem, 2vw, 0.875rem);
    }

    .index-footerBox {
        flex-direction: column;
        gap: clamp(8px, 2vh, 16px);
        text-align: center;
    }

    .index-footerIcon {
        gap: clamp(0.75rem, 2vw, 1rem);
    }

    .sidebar-time {
        display: none;
    }
}

/* === 小屏手机（<=480px） === */
@media (max-width: 480px) {
    .hero-section {
        padding: clamp(40px, 8vh, 50px) clamp(12px, 3vw, 12px) clamp(24px, 5vh, 32px);
    }

    .grid-container {
        max-width: clamp(240px, 80vw, 300px);
        gap: clamp(4px, 1.5vw, 6px);
        padding: clamp(2px, 0.8vw, 4px);
    }

    .hero-content h1 {
        font-size: clamp(1.25rem, 4vw, 1.375rem);
    }

    .product-section {
        padding: clamp(16px, 4vw, 24px) clamp(12px, 3vw, 12px);
    }

    .product-text h2 {
        font-size: clamp(1rem, 4vw, 1.125rem);
    }

    .product-image {
        max-height: clamp(180px, 50vh, 220px);
    }

    .quant-section {
        padding: clamp(24px, 5vh, 32px) clamp(12px, 3vw, 12px);
    }

    .quant-text h2 {
        font-size: clamp(1.25rem, 4vw, 1.375rem);
    }

    .note-section {
        padding: clamp(16px, 4vh, 20px) clamp(12px, 3vw, 12px);
    }

    .note-item {
        max-width: 100%;
        min-height: clamp(260px, 60vh, 280px);
        padding: clamp(16px, 4vw, 20px) clamp(12px, 3vw, 16px);
    }

    .note-icon {
        width: clamp(80px, 20vw, 90px);
        height: clamp(80px, 20vw, 90px);
        border-radius: clamp(18px, 5vw, 22px);
    }

    .note-icon svg {
        width: clamp(28px, 7vw, 34px);
        height: clamp(28px, 7vw, 34px);
    }

    .note-item h3 {
        font-size: clamp(0.875rem, 2.5vw, 1rem);
    }

    .note-item p {
        font-size: clamp(0.75rem, 2vw, 0.8125rem);
    }

    .quick-section {
        padding: clamp(16px, 4vw, 24px) clamp(12px, 3vw, 12px);
        gap: clamp(20px, 4vh, 28px);
    }

    .quick-linkBox {
        flex-direction: column;
        align-items: flex-start;
        gap: clamp(16px, 4vw, 20px);
    }

    .quick-title {
        min-width: 100%;
        width: 100%;
    }

    .quick-grid {
        gap: clamp(6px, 2vw, 10px);
    }

    .quick-grid .grid-item {
        flex: 1 1 calc(50% - clamp(6px, 2vw, 10px));
        max-width: calc(50% - clamp(6px, 2vw, 10px));
    }

    .grid-item {
        min-height: clamp(50px, 12vw, 70px);
        padding: clamp(8px, 2vw, 12px);
        gap: clamp(4px, 1vw, 8px);
    }

    .grid-icon svg {
        height: clamp(20px, 5vw, 28px);
    }

    .grid-item span {
        font-size: clamp(0.5rem, 2vw, 0.625rem);
    }

    .email-form {
        width: 100%;
    }

    .index-footerBox {
        padding: clamp(0.5rem, 2vw, 0.75rem) clamp(0.25rem, 1vw, 0.5rem);
    }
}