/* =========================================================
   微小兔品牌官网 · 主题样式 theme.css
   VI 色板：深靛蓝 #0D1B4B / 深紫靛 #1A1066 /
        青翠绿 #00E5C8 / 皇家紫 #8B5CF6 /
        活力粉 #FF4D8F / 翡翠绿 #00D97E / 兔兔绿 #8DC63F(logo)
   ========================================================= */

:root {
    /* 深色背景 */
    --bg-base: #0D1B4B;
    --bg-violet: #1A1066;
    --bg-deep: #060A24;
    --bg-soft: #11163A;
    --bg-card: rgba(255, 255, 255, 0.05);
    --bg-card-strong: rgba(255, 255, 255, 0.075);

    /* 重音色 */
    --c-cyan: #00E5C8;
    --c-purple: #8B5CF6;
    --c-pink: #FF4D8F;
    --c-green: #00D97E;
    --c-bunny: #8DC63F;

    /* 文字 */
    --text-1: #FFFFFF;
    --text-2: rgba(255, 255, 255, 0.78);
    --text-3: rgba(255, 255, 255, 0.56);
    --text-4: rgba(255, 255, 255, 0.36);

    /* 边框 */
    --bd-1: rgba(255, 255, 255, 0.10);
    --bd-2: rgba(255, 255, 255, 0.16);
    --bd-glow: rgba(0, 229, 200, 0.35);

    /* 渐变 */
    --g-cyan-purple: linear-gradient(135deg, #00E5C8 0%, #8B5CF6 100%);
    --g-purple-pink: linear-gradient(135deg, #8B5CF6 0%, #FF4D8F 100%);
    --g-cyan-pink: linear-gradient(135deg, #00E5C8 0%, #FF4D8F 100%);
    --g-bg: linear-gradient(180deg, #0D1B4B 0%, #1A1066 50%, #2D0D5E 100%);
    --g-card: linear-gradient(135deg, rgba(0, 229, 200, 0.06) 0%, rgba(139, 92, 246, 0.06) 100%);

    /* 间距 */
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 40px;
    --space-xl: 80px;
    --space-2xl: 120px;

    /* 圆角 */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-full: 999px;

    /* 缓动 */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

    /* 容器 */
    --container: 1280px;
}

/* ========== Reset ========== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    background: var(--g-bg);
    color: var(--text-1);
    line-height: 1.6;
    font-size: 16px;
    overflow-x: hidden;
    min-height: 100vh;
}

/* ========== 全局氛围层 · 极光色斑 + GEO 等高线暗纹（固定不随滚动） ========== */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        /* GEO 等高线环 · 左上（青翠绿，呼应地理/生成式引擎双关） */
        repeating-radial-gradient(ellipse 900px 620px at -6% -8%, transparent 0 89px, rgba(0, 229, 200, 0.05) 89px 90px),
        /* GEO 等高线环 · 右下（皇家紫） */
        repeating-radial-gradient(ellipse 1050px 720px at 106% 108%, transparent 0 99px, rgba(139, 92, 246, 0.055) 99px 100px),
        /* GEO 等高线环 · 右上（活力粉，更淡） */
        repeating-radial-gradient(ellipse 760px 520px at 104% 4%, transparent 0 119px, rgba(255, 77, 143, 0.035) 119px 120px),
        /* 顶部极光 · 青翠绿 */
        radial-gradient(ellipse 92% 55% at 50% -12%, rgba(0, 229, 200, 0.14), transparent 62%),
        /* 右侧极光 · 皇家紫 */
        radial-gradient(ellipse 70% 45% at 88% 16%, rgba(139, 92, 246, 0.16), transparent 65%),
        /* 左中极光 · 活力粉 */
        radial-gradient(ellipse 55% 42% at 6% 66%, rgba(255, 77, 143, 0.10), transparent 65%),
        /* 底部微光 · 翡翠绿 */
        radial-gradient(ellipse 60% 38% at 90% 96%, rgba(0, 217, 126, 0.08), transparent 65%);
    animation: aurora-breathe 24s ease-in-out infinite;
}
@keyframes aurora-breathe {
    0%, 100% { opacity: 0.82; }
    50% { opacity: 1; }
}

/* ========== 全局科技暗纹 · 细点阵（缓慢漂移，中央聚焦边缘淡出） ========== */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.058) 1px, transparent 1px);
    background-size: 28px 28px;
    -webkit-mask-image: radial-gradient(ellipse 90% 85% at 50% 42%, rgba(0, 0, 0, 0.95), transparent 78%);
    mask-image: radial-gradient(ellipse 90% 85% at 50% 42%, rgba(0, 0, 0, 0.95), transparent 78%);
    animation: dot-drift 90s linear infinite;
}
@keyframes dot-drift {
    0% { background-position: 0 0; }
    100% { background-position: 280px 280px; }
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: none; background: none; cursor: pointer; color: inherit; }
ul, ol { list-style: none; }

::selection { background: var(--c-cyan); color: var(--bg-base); }

/* ========== 排版 ========== */
.h-hero {
    /* 上限 80px：标题较长，实测 84px 起会在 1440 宽撑成三行
       （"级"字单独掉行），80px 是保持两行的临界值。 */
    font-size: clamp(44px, 5.6vw, 80px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    font-weight: 800;
}
.h-1 {
    font-size: clamp(36px, 4vw, 56px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 800;
}
.h-2 {
    font-size: clamp(28px, 2.6vw, 36px);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.h-3 {
    font-size: clamp(20px, 1.6vw, 24px);
    line-height: 1.3;
    font-weight: 700;
}
.body-lg { font-size: 18px; color: var(--text-2); }
.body { font-size: 16px; color: var(--text-2); }
.body-sm { font-size: 14px; color: var(--text-3); }
.caption { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-4); }
.mono { font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; font-feature-settings: "tnum"; }

.gradient-text {
    background: var(--g-cyan-purple);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.gradient-text-pp {
    background: var(--g-purple-pink);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.gradient-text-cp {
    background: var(--g-cyan-pink);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ========== 布局 ========== */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 32px;
}
.container-narrow {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 32px;
}
.section {
    padding: 120px 0;
    position: relative;
}
.section-sm {
    padding: 80px 0;
    position: relative;
}
.section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 5%, rgba(0, 229, 200, 0.4) 35%, rgba(139, 92, 246, 0.4) 65%, transparent 95%);
    margin: 0;
    box-shadow: 0 0 12px rgba(0, 229, 200, 0.18), 0 0 24px rgba(139, 92, 246, 0.12);
}

/* ===== 段落晕染 · 整段色温底 + 大光斑 + 顶部色雾分隔带（三重差异）===== */
.section,
.section-sm {
    isolation: isolate;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
/* 大主色光斑：每段一团，强可感 */
.section::before,
.section-sm::before {
    content: '';
    position: absolute;
    width: 960px;
    height: 960px;
    border-radius: 50%;
    filter: blur(140px);
    opacity: 0.4;
    pointer-events: none;
    z-index: -1;
}
/* 顶部色雾分隔带：标记"新段落开始" */
.section::after,
.section-sm::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 150px;
    background: linear-gradient(180deg, var(--sec-accent-soft) 0%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}
/* VI 四色轮换：整段色温纵向渐变底（顶浓→中透→底微色）+ accent 变量 */
section.section:nth-of-type(4n+1),
section.section-sm:nth-of-type(4n+1) {
    --sec-accent: #00E5C8; --sec-accent-soft: rgba(0,229,200,0.15);
    background: linear-gradient(180deg, rgba(0,229,200,0.075) 0%, rgba(0,229,200,0.018) 38%, rgba(0,229,200,0) 62%, rgba(0,229,200,0.045) 100%);
}
section.section:nth-of-type(4n+2),
section.section-sm:nth-of-type(4n+2) {
    --sec-accent: #8B5CF6; --sec-accent-soft: rgba(139,92,246,0.16);
    background: linear-gradient(180deg, rgba(139,92,246,0.085) 0%, rgba(139,92,246,0.02) 38%, rgba(139,92,246,0) 62%, rgba(139,92,246,0.05) 100%);
}
section.section:nth-of-type(4n+3),
section.section-sm:nth-of-type(4n+3) {
    --sec-accent: #FF4D8F; --sec-accent-soft: rgba(255,77,143,0.15);
    background: linear-gradient(180deg, rgba(255,77,143,0.075) 0%, rgba(255,77,143,0.018) 38%, rgba(255,77,143,0) 62%, rgba(255,77,143,0.045) 100%);
}
section.section:nth-of-type(4n),
section.section-sm:nth-of-type(4n) {
    --sec-accent: #00D97E; --sec-accent-soft: rgba(0,217,126,0.15);
    background: linear-gradient(180deg, rgba(0,217,126,0.075) 0%, rgba(0,217,126,0.018) 38%, rgba(0,217,126,0) 62%, rgba(0,217,126,0.045) 100%);
}

section.section:nth-of-type(4n+1)::before,
section.section-sm:nth-of-type(4n+1)::before {
    left: -320px; top: 6%;
    background: radial-gradient(circle, #00E5C8 0%, transparent 66%);
}
section.section:nth-of-type(4n+2)::before,
section.section-sm:nth-of-type(4n+2)::before {
    right: -320px; top: 2%;
    background: radial-gradient(circle, #8B5CF6 0%, transparent 66%);
}
section.section:nth-of-type(4n+3)::before,
section.section-sm:nth-of-type(4n+3)::before {
    left: -320px; bottom: 6%;
    background: radial-gradient(circle, #FF4D8F 0%, transparent 66%);
}
section.section:nth-of-type(4n)::before,
section.section-sm:nth-of-type(4n)::before {
    right: -320px; bottom: 2%;
    background: radial-gradient(circle, #00D97E 0%, transparent 66%);
}

/* ========== 标签 / 徽章 ========== */
.kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid var(--bd-2);
    border-radius: var(--r-full);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-2);
    background: rgba(0, 229, 200, 0.06);
}
.kicker .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-cyan);
    box-shadow: 0 0 12px var(--c-cyan);
}

/* 首屏官方服务商徽章 —— 重点突出版（渐变描边 + 发光呼吸） */
.kicker-featured {
    padding: 10px 24px;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.2em;
    border-radius: 999px;
    color: var(--text-1);
    background:
        linear-gradient(rgba(13, 27, 75, 0.55), rgba(13, 27, 75, 0.55)),
        linear-gradient(135deg, rgba(0, 229, 200, 0.32), rgba(139, 92, 246, 0.28));
    background-clip: padding-box, border-box;
    border: 1.5px solid transparent;
    box-shadow:
        0 12px 36px -8px rgba(0, 229, 200, 0.5),
        0 0 56px rgba(0, 229, 200, 0.32),
        0 0 24px rgba(139, 92, 246, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    animation: kicker-pulse 3.2s ease-in-out infinite;
}
.kicker-featured .dot {
    width: 9px;
    height: 9px;
    background: #00E5C8;
    border-radius: 50%;
    box-shadow:
        0 0 14px #00E5C8,
        0 0 28px rgba(0, 229, 200, 0.7);
    animation: dot-pulse 2s ease-in-out infinite;
}
@keyframes kicker-pulse {
    0%, 100% {
        box-shadow:
            0 12px 36px -8px rgba(0, 229, 200, 0.5),
            0 0 56px rgba(0, 229, 200, 0.32),
            0 0 24px rgba(139, 92, 246, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }
    50% {
        box-shadow:
            0 16px 48px -8px rgba(0, 229, 200, 0.7),
            0 0 76px rgba(0, 229, 200, 0.5),
            0 0 32px rgba(139, 92, 246, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.18);
    }
}
@keyframes dot-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.85; }
}
.tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--r-sm);
    font-size: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--bd-1);
    color: var(--text-2);
}
.tag-cyan { background: rgba(0, 229, 200, 0.12); border-color: rgba(0, 229, 200, 0.3); color: var(--c-cyan); }
.tag-purple { background: rgba(139, 92, 246, 0.14); border-color: rgba(139, 92, 246, 0.35); color: var(--c-purple-lite); }
.tag-pink { background: rgba(255, 77, 143, 0.12); border-color: rgba(255, 77, 143, 0.3); color: var(--c-pink); }
.tag-green { background: rgba(0, 217, 126, 0.12); border-color: rgba(0, 217, 126, 0.3); color: var(--c-green); }

/* ========== 按钮 ========== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: var(--r-full);
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s var(--ease);
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
}
.btn-primary {
    background: var(--c-cyan);
    color: var(--bg-base);
    box-shadow: 0 0 0 0 rgba(0, 229, 200, 0.4), 0 8px 24px rgba(0, 229, 200, 0.2);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 24px 4px rgba(0, 229, 200, 0.3), 0 12px 32px rgba(0, 229, 200, 0.3);
}
.btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-1);
    border-color: var(--bd-2);
    backdrop-filter: blur(20px);
}
.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--c-cyan);
}
.btn-accent {
    background: var(--g-cyan-purple);
    color: var(--text-1);
}
.btn-accent:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(139, 92, 246, 0.35);
}
.btn-ghost {
    background: transparent;
    color: var(--text-2);
    padding: 10px 18px;
}
.btn-ghost:hover { color: var(--c-cyan); }

/* ========== 卡片 ========== */
.card {
    background: var(--bg-card);
    border: 1px solid var(--bd-1);
    border-radius: var(--r-lg);
    padding: 32px;
    backdrop-filter: blur(20px);
    transition: all 0.4s var(--ease);
    position: relative;
    overflow: hidden;
}
.card:hover {
    border-color: var(--bd-2);
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}
.card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 229, 200, 0.4), transparent);
    opacity: 0;
    transition: opacity 0.4s var(--ease);
}
.card:hover::before { opacity: 1; }

.card-glow {
    position: relative;
}
.card-glow::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: var(--g-cyan-purple);
    z-index: -1;
    opacity: 0;
    filter: blur(20px);
    transition: opacity 0.4s var(--ease);
}
.card-glow:hover::after { opacity: 0.4; }

/* glass 玻璃 */
.glass {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--bd-1);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

/* ========== 节奏 ========== */
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

/* ========== 滚动入场 ========== */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.is-in {
    opacity: 1;
    transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* ========== 全局背景元素 ========== */
.bg-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 229, 200, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 229, 200, 0.055) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.85) 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.85) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.bg-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
}
.bg-glow--cyan { background: rgba(0, 229, 200, 0.25); }
.bg-glow--purple { background: rgba(139, 92, 246, 0.3); }
.bg-glow--pink { background: rgba(255, 77, 143, 0.2); }

/* ========== 响应式基础 ========== */
@media (max-width: 980px) {
    .section { padding: 80px 0; }
    .section-sm { padding: 56px 0; }
    .container, .container-narrow { padding: 0 20px; }
}
@media (max-width: 640px) {
    .section { padding: 56px 0; }
}

/* ============================================================
   V8.1 官网改版 · 紫色文字提亮（20:47）
   问题：--c-purple #8B5CF6 用在深蓝底（#0D1B4B）上的**文字**时，
        对比度只有 4.11:1，小字号（13-14px）偏暗发闷、看不清。
   方案：新增 --c-purple-lite #A78BFA（对比度 5.56:1）专供文字使用；
        背景、渐变、边框仍用原 --c-purple，品牌紫不变。
   ============================================================ */
:root {
    --c-purple-lite: #A78BFA;
    --c-purple-text: #A78BFA;
}