/* =========================================================
   比心智能 — Design System
   深色高端科技风 · 玻璃质感 · 细腻层次
   ========================================================= */

:root {
    /* —— 背景层次 —— */
    --color-bg: #05080f;
    --color-bg-elevated: #080e1a;
    --color-bg-deep: #030509;

    /* —— 表面（玻璃卡片） —— */
    --surface-1: rgba(255, 255, 255, 0.028);
    --surface-2: rgba(255, 255, 255, 0.05);
    --surface-3: rgba(255, 255, 255, 0.075);
    --color-bg-card: rgba(255, 255, 255, 0.028);

    /* —— 描边（默认中性，仅在交互时点亮） —— */
    --line-1: rgba(255, 255, 255, 0.075);
    --line-2: rgba(255, 255, 255, 0.14);
    --color-border: rgba(255, 255, 255, 0.075);

    /* —— 文字 —— */
    --color-text: #eef2f8;
    --color-text-muted: #a3b1c6;
    --color-text-dim: #6f7d94;

    /* —— 品牌色 —— */
    --color-primary: #002147;
    --color-accent: #3ad7ff;
    --color-accent-2: #5b8cff;
    --color-accent-warm: #ff6a1a;
    --color-accent-gold: #e6c07d;
    --color-glow: rgba(58, 215, 255, 0.35);

    --grad-accent: linear-gradient(135deg, #3ad7ff 0%, #5b8cff 100%);
    --grad-warm: linear-gradient(135deg, #ff6a1a 0%, #ff9445 100%);
    --grad-text: linear-gradient(160deg, #ffffff 0%, #dce8f7 45%, #8fb6d8 100%);

    /* —— 阴影 —— */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 10px 30px -12px rgba(0, 0, 0, 0.75);
    --shadow-lg: 0 30px 70px -28px rgba(0, 0, 0, 0.9);
    --ring-inset: inset 0 1px 0 rgba(255, 255, 255, 0.07);

    /* —— 排版 —— */
    --font-sans: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-mono: "SF Mono", "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

    /* —— 布局 —— */
    --header-h: 76px;
    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --max-w: 1240px;
    --gutter: clamp(20px, 4vw, 40px);
    --section-y: clamp(72px, 9vw, 128px);

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --transition: 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    --transition-fast: 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 24px);
    overflow-x: hidden;
}

body {
    font-family: var(--font-sans);
    margin: 0;
    padding: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 1rem;
    line-height: 1.75;
    letter-spacing: 0.01em;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* 全局氛围光 — 固定在视口后方的柔和光晕，营造纵深 */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(900px 620px at 78% -8%, rgba(58, 215, 255, 0.10), transparent 62%),
        radial-gradient(760px 560px at 12% 22%, rgba(91, 140, 255, 0.09), transparent 60%),
        radial-gradient(700px 520px at 50% 108%, rgba(255, 106, 26, 0.06), transparent 62%);
}

/* 细微噪点，去除大面积纯色的廉价感 */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover { color: #7ee6ff; }

img, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
    letter-spacing: -0.015em;
    text-wrap: balance;
}

::selection { background: rgba(58, 215, 255, 0.28); color: #fff; }

/* 滚动条 */
@supports (scrollbar-width: thin) {
    html { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.16) transparent; }
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-bg-deep); }
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    border: 3px solid var(--color-bg-deep);
}
::-webkit-scrollbar-thumb:hover { background: rgba(58, 215, 255, 0.4); }

.skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: 9999;
    padding: 12px 20px;
    background: var(--color-accent);
    color: #00131c;
    border-radius: 8px;
    font-weight: 700;
}
.skip-link:focus { top: 16px; }

/* 顶部阅读进度条 */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: var(--grad-accent);
    box-shadow: 0 0 18px rgba(58, 215, 255, 0.7);
    z-index: 1200;
    pointer-events: none;
}

/* =========================================================
   Header
   ========================================================= */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--header-h);
    background: linear-gradient(180deg, rgba(5, 8, 15, 0.72) 0%, rgba(5, 8, 15, 0.28) 100%);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-bottom: 1px solid transparent;
    transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.site-header.scrolled {
    background: rgba(5, 8, 15, 0.88);
    border-bottom-color: var(--line-1);
    box-shadow: 0 12px 40px -20px rgba(0, 0, 0, 0.95);
}

.header-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    height: 100%;
    padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
    display: flex;
    align-items: center;
    gap: 24px;
}

.logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: opacity var(--transition-fast);
}
.logo:hover { opacity: 0.82; }
.logo img { height: 36px; width: auto; }

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    border: 1px solid var(--line-1);
    border-radius: 12px;
    background: var(--surface-1);
    color: var(--color-text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.nav-toggle:hover { border-color: var(--line-2); background: var(--surface-2); }
.nav-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.nav-toggle-icon {
    display: block;
    width: 18px;
    height: 1.5px;
    border-radius: 2px;
    background: currentColor;
    box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
    transition: transform var(--transition), box-shadow var(--transition);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon {
    box-shadow: none;
    transform: rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::after {
    content: "";
    display: block;
    width: 18px;
    height: 1.5px;
    border-radius: 2px;
    background: currentColor;
    transform: rotate(-90deg);
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    justify-content: center;
}
.main-nav a {
    position: relative;
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    font-weight: 500;
    padding: 8px 16px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    border-radius: 10px;
    transition: color var(--transition-fast), background var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}
.main-nav a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--grad-accent);
    transform: translateX(-50%);
    transition: width var(--transition);
}
.main-nav a:hover { color: var(--color-text); background: var(--surface-1); }
.main-nav a.active { color: var(--color-text); }
.main-nav a.active::after { width: 18px; }
.main-nav a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.header-actions { display: flex; gap: 10px; flex-shrink: 0; }

/* =========================================================
   Buttons
   ========================================================= */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 11px 24px;
    font-size: 0.9375rem;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.02em;
    line-height: 1.2;
    border-radius: 999px;
    cursor: pointer;
    border: none;
    overflow: hidden;
    white-space: nowrap;
    transition: transform var(--transition-fast), box-shadow var(--transition), background var(--transition), border-color var(--transition), color var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}
.btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.btn:active { transform: translateY(0) scale(0.985); }

/* 掠光效果 */
.btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -140%;
    width: 60%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    transform: skewX(-20deg);
    transition: left 0.75s var(--ease);
    pointer-events: none;
}
.btn:hover::after { left: 160%; }

.btn-primary {
    background: var(--grad-warm);
    color: #fff;
    box-shadow: 0 8px 24px -8px rgba(255, 106, 26, 0.75), var(--ring-inset);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px -10px rgba(255, 106, 26, 0.85), var(--ring-inset);
    color: #fff;
}

.btn-outline {
    background: var(--surface-1);
    color: var(--color-text);
    border: 1px solid var(--line-2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.btn-outline:hover {
    transform: translateY(-2px);
    border-color: rgba(58, 215, 255, 0.55);
    color: #fff;
    background: rgba(58, 215, 255, 0.09);
}

.btn-ghost {
    background: rgba(58, 215, 255, 0.08);
    color: var(--color-accent);
    border: 1px solid rgba(58, 215, 255, 0.24);
}
.btn-ghost:hover {
    transform: translateY(-2px);
    background: rgba(58, 215, 255, 0.15);
    border-color: rgba(58, 215, 255, 0.45);
    color: #9beeff;
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding-top: var(--header-h);
    isolation: isolate;
}
.hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.hero-media video,
.hero-media .hero-poster {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    /* 轻微放大：兼顾构图并裁去素材右下角水印 */
    transform: translate(-51.5%, -51%) scale(1.08);
    object-fit: cover;
    filter: saturate(0.92) contrast(1.06) brightness(0.86);
}
.hero-poster { display: none; }

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(5, 8, 15, 0.62) 0%, rgba(5, 8, 15, 0.30) 34%, rgba(5, 8, 15, 0.86) 78%, var(--color-bg) 100%),
        radial-gradient(ellipse 78% 62% at 50% 46%, rgba(58, 215, 255, 0.14) 0%, transparent 70%),
        radial-gradient(ellipse 60% 60% at 50% 50%, transparent 38%, rgba(3, 5, 9, 0.72) 100%);
}
.hero-grid {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image:
        linear-gradient(rgba(58, 215, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(58, 215, 255, 0.045) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(ellipse 68% 66% at 50% 48%, black 12%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 68% 66% at 50% 48%, black 12%, transparent 78%);
}
.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 48px max(var(--gutter), env(safe-area-inset-right)) 56px max(var(--gutter), env(safe-area-inset-left));
    max-width: 1000px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 20px 7px 16px;
    margin-bottom: 30px;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: var(--font-mono);
    color: #b9ecff;
    background: rgba(58, 215, 255, 0.07);
    border: 1px solid rgba(58, 215, 255, 0.22);
    border-radius: 999px;
    letter-spacing: 0.14em;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 0 40px -12px rgba(58, 215, 255, 0.5), var(--ring-inset);
}
.hero-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--color-accent);
    border-radius: 50%;
    box-shadow: 0 0 10px 2px rgba(58, 215, 255, 0.8);
    animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(1.35); }
}

.hero h1 {
    font-size: clamp(2rem, 5.4vw + 0.4rem, 4rem);
    font-weight: 800;
    line-height: 1.16;
    letter-spacing: -0.03em;
    margin: 0 0 22px;
    background: linear-gradient(102deg, #ffffff 0%, #ffffff 42%, #a9e6ff 50%, #ffffff 58%, #ffffff 100%);
    background-size: 320% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: shimmer 9s linear infinite;
    text-shadow: none;
}
@keyframes shimmer {
    0% { background-position: 0% center; }
    100% { background-position: 260% center; }
}
.hero-subtitle {
    font-size: clamp(1rem, 1.1vw + 0.7rem, 1.25rem);
    color: #c3cfe0;
    margin: 0 0 40px;
    line-height: 1.85;
    letter-spacing: 0.02em;
    max-width: 680px;
    margin-inline: auto;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
}
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}
.hero-actions .btn { padding-inline: 32px; min-height: 50px; font-size: 1rem; }

.hero-scroll {
    position: absolute;
    bottom: 34px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--color-text-dim);
    font-size: 0.6875rem;
    font-family: var(--font-mono);
    letter-spacing: 0.28em;
    text-indent: 0.28em;
}
.hero-scroll-line {
    position: relative;
    width: 1px;
    height: 48px;
    background: linear-gradient(180deg, rgba(58, 215, 255, 0.65), transparent);
    overflow: hidden;
}
.hero-scroll-line::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    height: 14px;
    background: var(--color-accent);
    box-shadow: 0 0 10px 1px var(--color-accent);
    animation: scrollDot 2.2s var(--ease) infinite;
}
@keyframes scrollDot {
    0% { top: -16px; opacity: 0; }
    30% { opacity: 1; }
    100% { top: 48px; opacity: 0; }
}

/* =========================================================
   Page banner（内页头图）
   ========================================================= */
.page-banner {
    position: relative;
    padding: calc(var(--header-h) + clamp(56px, 8vw, 96px)) var(--gutter) clamp(56px, 8vw, 96px);
    text-align: center;
    overflow: hidden;
    background: var(--color-bg-elevated);
    isolation: isolate;
}
.page-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 62% 100% at 50% -10%, rgba(58, 215, 255, 0.16) 0%, transparent 64%),
        radial-gradient(ellipse 40% 80% at 88% 10%, rgba(91, 140, 255, 0.12) 0%, transparent 62%),
        linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
    background-size: auto, auto, 48px 48px, 48px 48px;
    mask-image: linear-gradient(180deg, black 30%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, black 30%, transparent 100%);
}
.page-banner::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(640px, 76%);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(58, 215, 255, 0.5), transparent);
}
.page-banner-inner { position: relative; max-width: var(--max-w); margin: 0 auto; }
.page-banner h1 {
    font-size: clamp(1.9rem, 4.2vw, 3rem);
    margin: 0 0 16px;
    font-weight: 800;
    letter-spacing: -0.025em;
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.page-banner p {
    color: var(--color-text-muted);
    font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
    margin: 0 auto;
    max-width: 680px;
    line-height: 1.85;
}

/* =========================================================
   Sections
   ========================================================= */
main { flex: 1; }

.section {
    position: relative;
    padding: var(--section-y) max(var(--gutter), env(safe-area-inset-right)) var(--section-y) max(var(--gutter), env(safe-area-inset-left));
}
.section-alt {
    background: var(--color-bg-elevated);
    border-block: 1px solid var(--line-1);
}
.section-inner { max-width: var(--max-w); margin: 0 auto; }

.section-header {
    text-align: center;
    margin-bottom: clamp(40px, 5vw, 68px);
}
.section-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.6875rem;
    font-weight: 700;
    font-family: var(--font-mono);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 18px;
}
.section-label::before,
.section-label::after {
    content: "";
    width: 26px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(58, 215, 255, 0.7));
}
.section-label::after { background: linear-gradient(90deg, rgba(58, 215, 255, 0.7), transparent); }
.page-banner .section-label { margin-bottom: 20px; }

.section-title {
    font-size: clamp(1.65rem, 3.4vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.28;
    margin: 0 0 18px;
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.section-desc {
    color: var(--color-text-muted);
    font-size: 1.0625rem;
    line-height: 1.85;
    max-width: 680px;
    margin: 0 auto;
}

/* —— 通用玻璃卡片基底 —— */
.stat-card,
.feature-card,
.product-card,
.honor-item,
.news-card,
.content-block,
.shop-item,
.platform-guide-card,
.faq-item {
    position: relative;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.015) 100%);
    border: 1px solid var(--line-1);
    box-shadow: var(--shadow-md), var(--ring-inset);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* 鼠标位置光斑（由 JS 写入 --mx/--my） */
.feature-card::before,
.product-card::before,
.stat-card::before,
.platform-guide-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(58, 215, 255, 0.14), transparent 62%);
    transition: opacity var(--transition);
}
.feature-card:hover::before,
.product-card:hover::before,
.stat-card:hover::before,
.platform-guide-card:hover::before { opacity: 1; }

/* —— Stats —— */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: -56px auto 0;
    position: relative;
    z-index: 3;
    padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
    max-width: var(--max-w);
}
.stat-card {
    border-radius: var(--radius-lg);
    padding: 32px 24px;
    text-align: center;
    overflow: hidden;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.stat-card:hover {
    transform: translateY(-6px);
    border-color: rgba(58, 215, 255, 0.32);
    box-shadow: 0 26px 60px -26px rgba(0, 0, 0, 0.95), 0 0 46px -22px var(--color-glow), var(--ring-inset);
}
.stat-value {
    font-size: clamp(2rem, 4.4vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    margin-bottom: 8px;
    background: var(--grad-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.stat-label {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    letter-spacing: 0.06em;
}

/* —— Feature cards —— */
.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.feature-card {
    border-radius: var(--radius-lg);
    padding: 34px 28px 32px;
    overflow: hidden;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.feature-card:hover {
    transform: translateY(-8px);
    border-color: rgba(58, 215, 255, 0.34);
    box-shadow: 0 30px 64px -28px rgba(0, 0, 0, 0.95), 0 0 50px -24px var(--color-glow), var(--ring-inset);
}
.feature-icon {
    position: relative;
    width: 52px;
    height: 52px;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
    background: linear-gradient(150deg, rgba(58, 215, 255, 0.16), rgba(91, 140, 255, 0.06));
    border: 1px solid rgba(58, 215, 255, 0.22);
    border-radius: 15px;
    font-size: 1.375rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 24px -14px rgba(58, 215, 255, 0.9);
    transition: transform var(--transition), box-shadow var(--transition);
}
.feature-icon svg { width: 24px; height: 24px; display: block; }
.feature-card:hover .feature-icon {
    transform: translateY(-2px) scale(1.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 12px 30px -12px rgba(58, 215, 255, 0.9);
}
.feature-card h3 {
    font-size: 1.0625rem;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--color-text);
    letter-spacing: 0;
}
.feature-card p {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.8;
}

/* —— Product cards —— */
.products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}
.product-card {
    border-radius: var(--radius-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.product-card:hover {
    transform: translateY(-8px);
    border-color: rgba(58, 215, 255, 0.3);
    box-shadow: var(--shadow-lg), 0 0 60px -26px var(--color-glow), var(--ring-inset);
}
.product-card-image {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: linear-gradient(160deg, #0d1626, #060b14);
}
.product-card-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(6, 11, 20, 0.85) 100%);
    pointer-events: none;
}
.product-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s var(--ease);
}
.product-card:hover .product-card-image img { transform: scale(1.06); }
.product-card-tag {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 2;
    padding: 5px 14px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #fff;
    background: rgba(255, 106, 26, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 6px 20px -8px rgba(255, 106, 26, 0.9);
}
.product-card-body {
    padding: 30px 30px 32px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.product-card-body .product-series {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-accent);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
}
.product-card-body .product-series::before {
    content: "";
    width: 16px;
    height: 1px;
    background: var(--color-accent);
}
.product-card-body h3 {
    font-size: 1.4375rem;
    font-weight: 700;
    margin: 0 0 14px;
    letter-spacing: -0.01em;
}
.product-card-body p {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    margin: 0 0 26px;
    line-height: 1.85;
    flex: 1;
}
.product-card-body .btn { align-self: flex-start; }

/* —— AI 五层蛋糕观察站入口 —— */
.innovation-entry {
    overflow: hidden;
}
.innovation-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    min-height: 430px;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    border: 1px solid rgba(58, 215, 255, 0.2);
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, rgba(11, 21, 36, 0.96), rgba(8, 13, 23, 0.96));
    box-shadow: var(--shadow-lg), 0 0 80px -44px var(--color-glow), var(--ring-inset);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.innovation-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(620px circle at 72% 18%, rgba(58, 215, 255, 0.13), transparent 58%);
}
.innovation-card:hover {
    transform: translateY(-8px);
    border-color: rgba(58, 215, 255, 0.42);
    box-shadow: 0 36px 90px -34px rgba(0, 0, 0, 0.98), 0 0 74px -34px var(--color-glow), var(--ring-inset);
}
.innovation-visual {
    min-height: 430px;
    overflow: hidden;
    background: #07101c;
}
.innovation-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
    filter: saturate(0.9) contrast(1.05);
    transition: transform 1s var(--ease), opacity var(--transition);
}
.innovation-card:hover .innovation-visual img {
    transform: scale(1.035);
    opacity: 1;
}
.innovation-copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(34px, 5vw, 64px);
}
.innovation-kicker {
    color: var(--color-accent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    margin-bottom: 18px;
}
.innovation-copy h3 {
    margin: 0 0 18px;
    font-size: clamp(1.55rem, 3vw, 2.35rem);
    line-height: 1.25;
    letter-spacing: -0.025em;
}
.innovation-copy p {
    margin: 0 0 30px;
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1.85;
}
.innovation-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--color-accent);
    font-weight: 700;
}
.innovation-link span {
    transition: transform var(--transition-fast);
}
.innovation-card:hover .innovation-link span {
    transform: translate(3px, -3px);
}
@media (max-width: 820px) {
    .innovation-card {
        grid-template-columns: 1fr;
    }
    .innovation-visual {
        min-height: 250px;
        max-height: 330px;
    }
    .innovation-copy {
        padding: 32px 26px 38px;
    }
}
/* —— Honors 证书墙 —— */
.honors-grid {
    display: grid;
    /* auto-fit：4 张或 5 张证书都能排满一行，不出现落单 */
    grid-template-columns: repeat(auto-fit, minmax(208px, 1fr));
    gap: 20px;
}
.honor-item {
    border-radius: var(--radius);
    overflow: hidden;
    margin: 0;
    cursor: zoom-in;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.honor-item:hover {
    transform: translateY(-5px);
    border-color: rgba(230, 192, 125, 0.45);
    box-shadow: 0 26px 56px -26px rgba(0, 0, 0, 0.95), 0 0 40px -22px rgba(230, 192, 125, 0.55), var(--ring-inset);
}
.honor-item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    /* contain 保证证书完整可读，不再被裁切 */
    object-fit: contain;
    padding: 14px;
    background:
        radial-gradient(120% 100% at 50% 0%, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
    transition: transform var(--transition);
}
.honor-item:hover img { transform: scale(1.03); }
.honor-item figcaption {
    padding: 14px 16px;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    text-align: center;
    line-height: 1.5;
    border-top: 1px solid var(--line-1);
    background: rgba(0, 0, 0, 0.18);
    transition: color var(--transition-fast);
}
.honor-item:hover figcaption { color: var(--color-accent-gold); }

/* 证书灯箱 */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(20px, 5vw, 56px);
    background: rgba(2, 4, 8, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);
    cursor: zoom-out;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img {
    max-width: min(1100px, 100%);
    max-height: 86vh;
    width: auto;
    border-radius: var(--radius);
    border: 1px solid var(--line-2);
    box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 1);
    transform: scale(0.96);
    transition: transform var(--transition);
}
.lightbox.is-open img { transform: scale(1); }
.lightbox-caption {
    position: absolute;
    bottom: max(24px, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-text-muted);
    font-size: 0.875rem;
    letter-spacing: 0.06em;
}
.lightbox-close {
    position: absolute;
    top: max(20px, env(safe-area-inset-top));
    right: 20px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-1);
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--color-text);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.lightbox-close:hover { background: var(--surface-3); border-color: var(--line-2); }

/* —— News —— */
.news-list { display: flex; flex-direction: column; gap: 18px; }
.news-card {
    display: grid;
    grid-template-columns: 104px 1fr;
    gap: 30px;
    align-items: start;
    border-radius: var(--radius-lg);
    padding: 30px 32px;
    overflow: hidden;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.news-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--grad-accent);
    transform: scaleY(0);
    transform-origin: 50% 0;
    transition: transform var(--transition);
}
.news-card:hover {
    transform: translateX(4px);
    border-color: rgba(58, 215, 255, 0.28);
    box-shadow: 0 24px 56px -28px rgba(0, 0, 0, 0.95), var(--ring-inset);
}
.news-card:hover::before { transform: scaleY(1); }
/* 未标注日期的条目不留空列 */
.news-card:not(:has(.news-date)) { grid-template-columns: 1fr; }
.news-date {
    text-align: center;
    padding: 16px 10px;
    background: linear-gradient(160deg, rgba(58, 215, 255, 0.12), rgba(58, 215, 255, 0.03));
    border-radius: var(--radius);
    border: 1px solid rgba(58, 215, 255, 0.18);
}
.news-date .day {
    display: block;
    font-size: 1.625rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--color-accent);
    line-height: 1.1;
}
.news-date .month {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-dim);
    letter-spacing: 0.08em;
    margin-top: 6px;
}
.news-card h3 {
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.55;
    margin: 0 0 12px;
}
.news-card h3 a { color: var(--color-text); }
.news-card h3 a:hover { color: var(--color-accent); }
.news-card p {
    color: var(--color-text-muted);
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.85;
}
.news-tag {
    display: inline-block;
    padding: 3px 12px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #ffb27a;
    background: rgba(255, 106, 26, 0.12);
    border: 1px solid rgba(255, 106, 26, 0.26);
    border-radius: 999px;
    margin-bottom: 14px;
}

/* —— Content blocks —— */
.content-block {
    border-radius: var(--radius-lg);
    padding: clamp(28px, 3.4vw, 44px);
    margin-bottom: 20px;
    overflow: hidden;
}
.content-block:last-child { margin-bottom: 0; }
.content-block h2 {
    position: relative;
    font-size: 1.3125rem;
    font-weight: 700;
    margin: 0 0 18px;
    padding-left: 16px;
    color: var(--color-text);
    letter-spacing: -0.01em;
}
.content-block h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.28em;
    bottom: 0.28em;
    width: 3px;
    border-radius: 3px;
    background: var(--grad-accent);
    box-shadow: 0 0 14px rgba(58, 215, 255, 0.7);
}
.content-block p {
    color: var(--color-text-muted);
    margin: 0 0 14px;
    line-height: 1.95;
    font-size: 1rem;
}
.content-block p:last-child { margin-bottom: 0; }
.content-block strong { color: var(--color-text); font-weight: 700; }
/* 重点定义块 */
.content-block.is-highlight {
    border-color: rgba(58, 215, 255, 0.3);
    background: linear-gradient(150deg, rgba(58, 215, 255, 0.09), rgba(255, 255, 255, 0.015));
    box-shadow: 0 0 60px -30px var(--color-glow), var(--shadow-md), var(--ring-inset);
}

.content-figure {
    margin: 28px 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--line-1);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
    box-shadow: var(--shadow-md), var(--ring-inset);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.content-figure:hover {
    border-color: var(--line-2);
    box-shadow: var(--shadow-lg), var(--ring-inset);
}
.content-figure img { width: 100%; cursor: zoom-in; }
/* 商品卡海报 —— 按接近原始尺寸居中展示，不铺满整幅 */
.content-figure.is-poster {
    max-width: 460px;
    margin-inline: auto;
}
/* 浅底示意图 —— 收进「纸张」中，与深色页面自然衔接 */
.content-figure.is-paper { padding: clamp(14px, 2vw, 22px); }
.content-figure.is-paper img {
    border-radius: var(--radius);
    background: #fff;
    box-shadow: 0 18px 44px -24px rgba(0, 0, 0, 1);
}
.content-figure.is-paper figcaption {
    margin: clamp(14px, 2vw, 22px) calc(-1 * clamp(14px, 2vw, 22px)) calc(-1 * clamp(14px, 2vw, 22px));
}
.content-figure figcaption {
    padding: 14px 20px;
    font-size: 0.875rem;
    color: var(--color-text-dim);
    text-align: center;
    letter-spacing: 0.04em;
    background: rgba(0, 0, 0, 0.24);
    border-top: 1px solid var(--line-1);
}

.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    align-items: center;
}
.two-col-images { display: grid; gap: 18px; align-content: start; }
/* 浅底产品图 —— 底部柔化融入深色页面 */
.two-col-images > img {
    mask-image: linear-gradient(180deg, #000 76%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 76%, transparent 100%);
    border: 0;
}
.two-col-images img {
    border-radius: var(--radius);
    border: 1px solid var(--line-1);
    box-shadow: var(--shadow-md);
    transition: transform var(--transition), border-color var(--transition);
}
.two-col-images img:hover { transform: translateY(-4px); border-color: var(--line-2); }
/* 低分辨率实拍图 —— 按原始尺寸小图展示，避免拉伸糊化 */
.thumb-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}
.thumb-row figure { margin: 0; text-align: center; }
.thumb-row img {
    width: auto;
    max-height: 168px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line-1);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: var(--shadow-md);
}
.thumb-row figcaption {
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--color-text-dim);
    letter-spacing: 0.06em;
}

/* —— AI 发展层级 —— */
.levels {
    position: relative;
    margin: 28px 0;
    padding: clamp(28px, 3.6vw, 44px);
    border-radius: var(--radius-lg);
    border: 1px solid var(--line-1);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
    box-shadow: var(--shadow-md), var(--ring-inset);
    overflow: hidden;
}
.levels::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 60% 70% at 88% 0%, rgba(91, 140, 255, 0.14), transparent 65%);
}
.levels > * { position: relative; }
.levels-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px 24px;
    margin-bottom: 26px;
}
.levels-title {
    font-size: clamp(1.25rem, 2.2vw, 1.625rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.levels-note {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-dim);
}
.levels-note strong { color: var(--color-accent); font-weight: 700; }

.levels-list {
    list-style: none;
    counter-reset: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.level-item {
    position: relative;
    display: grid;
    grid-template-columns: 52px 1fr;
    align-items: center;
    gap: 18px;
    padding: 16px 20px;
    border: 1px solid var(--line-1);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.022);
    transition: transform var(--transition), border-color var(--transition), background var(--transition);
}
.level-item:hover {
    transform: translateX(4px);
    border-color: var(--line-2);
    background: rgba(255, 255, 255, 0.045);
}
.level-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    font-family: var(--font-mono);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--line-1);
    border-radius: 10px;
}
.level-body h4 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 5px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--color-text);
}
.level-body h4 span {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-dim);
}
.level-body h4 span::before { content: "（"; }
.level-body h4 span::after { content: "）"; }
.level-body p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.75;
    color: var(--color-text-muted);
}
.level-flag {
    font-style: normal;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #ffb27a;
    background: rgba(255, 106, 26, 0.14);
    border: 1px solid rgba(255, 106, 26, 0.3);
    border-radius: 999px;
    padding: 2px 10px;
}
.level-item.is-current {
    border-color: rgba(58, 215, 255, 0.42);
    background: linear-gradient(100deg, rgba(58, 215, 255, 0.12), rgba(91, 140, 255, 0.05));
    box-shadow: 0 0 44px -18px var(--color-glow), var(--ring-inset);
}
.level-item.is-current .level-tag {
    color: #001722;
    background: var(--grad-accent);
    border-color: transparent;
    box-shadow: 0 6px 18px -8px var(--color-glow);
}
.levels-foot {
    margin: 24px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--line-1);
    text-align: center;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--color-accent);
}

@media (max-width: 560px) {
    .level-item { grid-template-columns: 44px 1fr; gap: 14px; padding: 14px 16px; }
    .levels-head { flex-direction: column; align-items: flex-start; }
}

/* —— Shop —— */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}
.shop-item {
    border-radius: var(--radius-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.shop-item:hover {
    transform: translateY(-8px);
    border-color: rgba(58, 215, 255, 0.3);
    box-shadow: var(--shadow-lg), 0 0 60px -26px var(--color-glow), var(--ring-inset);
}
/* 商品海报为浅色截图 —— 收进统一的「展框」中，避免大白块割裂暗色页面 */
.shop-item > a {
    display: block;
    padding: 18px 18px 0;
    background: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.06), transparent 70%);
}
.shop-item > a img {
    width: 100%;
    border-radius: var(--radius);
    border: 1px solid var(--line-1);
    box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.95);
    transition: transform var(--transition);
}
.shop-item:hover > a img { transform: translateY(-3px); }
.shop-item-body {
    padding: 26px 28px 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: flex-start;
}
.shop-item-body h3 {
    margin: 0;
    font-size: 1.1875rem;
    font-weight: 700;
    flex: 1 1 100%;
    letter-spacing: -0.01em;
}
.shop-item-body h3 a { color: var(--color-text); }
.shop-item-body h3 a:hover { color: var(--color-accent); }

/* —— CTA —— */
.cta-section {
    position: relative;
    text-align: center;
    padding: clamp(72px, 9vw, 120px) var(--gutter);
    background: var(--color-bg-elevated);
    border-top: 1px solid var(--line-1);
    overflow: hidden;
    isolation: isolate;
}
.cta-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 60% 90% at 50% 100%, rgba(58, 215, 255, 0.16) 0%, transparent 62%),
        radial-gradient(ellipse 40% 70% at 14% 0%, rgba(255, 106, 26, 0.10) 0%, transparent 60%);
}
.cta-section::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: min(560px, 70%);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(58, 215, 255, 0.55), transparent);
}
.cta-section h2 {
    font-size: clamp(1.5rem, 3.2vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    margin: 0 0 18px;
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.cta-section p {
    color: var(--color-text-muted);
    margin: 0 auto 36px;
    max-width: 560px;
    line-height: 1.85;
}
.cta-section .btn { margin: 0 6px 10px; }

/* —— Partners —— */
.partners-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 48px;
    padding: 48px var(--gutter);
}
.partners-strip img {
    height: 44px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.5;
    transition: opacity var(--transition);
}
.partners-strip img:hover { opacity: 1; }

/* —— Platform guide cards —— */
.platform-guide-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.platform-guide-card {
    border-radius: var(--radius-lg);
    padding: 32px 26px;
    text-align: center;
    overflow: hidden;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.platform-guide-card:hover {
    transform: translateY(-6px);
    border-color: rgba(58, 215, 255, 0.32);
    box-shadow: 0 26px 60px -28px rgba(0, 0, 0, 0.95), var(--ring-inset);
}
.platform-guide-card .platform-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 16px;
    color: var(--color-accent);
    background: linear-gradient(150deg, rgba(58, 215, 255, 0.16), rgba(91, 140, 255, 0.06));
    border: 1px solid rgba(58, 215, 255, 0.22);
    border-radius: 15px;
    font-size: 1.5rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.platform-guide-card .platform-icon svg { width: 24px; height: 24px; }
.platform-guide-card h3 { font-size: 1.0625rem; font-weight: 700; margin: 0 0 10px; }
.platform-guide-card p {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.8;
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
    position: relative;
    background: var(--color-bg-deep);
    border-top: 1px solid var(--line-1);
    padding: clamp(56px, 7vw, 80px) max(var(--gutter), env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
}
.site-footer::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -1px;
    width: min(900px, 84%);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(58, 215, 255, 0.35), transparent);
}
.footer-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.7fr 1.2fr 1fr 1fr;
    gap: clamp(28px, 4vw, 56px);
}
.footer-brand img { height: 34px; margin-bottom: 20px; opacity: 0.95; }
.footer-brand p {
    color: var(--color-text-dim);
    font-size: 0.875rem;
    line-height: 1.9;
    margin: 0;
}
.footer-col h4 {
    font-size: 0.6875rem;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--color-text-dim);
    margin: 0 0 20px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 12px; }
.footer-col a {
    display: inline-block;
    color: var(--color-text-muted);
    font-size: 0.875rem;
    transition: color var(--transition-fast), transform var(--transition-fast);
}
.footer-col a:hover { color: var(--color-accent); transform: translateX(3px); }

.footer-bottom {
    max-width: var(--max-w);
    margin: clamp(40px, 5vw, 56px) auto 0;
    padding-top: 26px;
    border-top: 1px solid var(--line-1);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    color: var(--color-text-dim);
    font-size: 0.8125rem;
    line-height: 1.7;
}
.footer-bottom p { margin: 0; }
.footer-bottom a { color: var(--color-text-dim); }
.footer-bottom a:hover { color: var(--color-accent); }

/* —— 社媒 —— */
.social-links ul { list-style: none; padding: 0; margin: 0; }
.social-links li {
    margin-bottom: 14px;
    font-size: 0.8125rem;
    color: var(--color-text-dim);
    line-height: 1.6;
}
.social-links strong { color: var(--color-text); font-weight: 600; }
.social-links li:hover strong { color: var(--color-accent); }
.social-label { color: var(--color-text-dim); }
.social-hint {
    display: block;
    font-size: 0.6875rem;
    color: rgba(111, 125, 148, 0.8);
    margin-top: 3px;
    letter-spacing: 0.04em;
}
.social-copy-tip {
    font-size: 0.75rem;
    color: var(--color-text-dim);
    margin: 16px 0 0;
    line-height: 1.6;
}
.btn-copy-link { margin-top: 12px; min-height: 40px; padding: 8px 18px; font-size: 0.8125rem; }

.inapp-share-tip {
    position: fixed;
    bottom: max(24px, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%) translateY(140%);
    z-index: 1500;
    max-width: min(360px, calc(100vw - 32px));
    padding: 13px 22px;
    background: rgba(10, 16, 28, 0.96);
    border: 1px solid var(--line-2);
    border-radius: 999px;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    text-align: center;
    box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.5s var(--ease), opacity 0.5s var(--ease);
    opacity: 0;
    pointer-events: none;
}
.inapp-share-tip.is-visible { transform: translateX(-50%) translateY(0); opacity: 1; }
.inapp-share-tip strong { color: var(--color-accent); }

/* =========================================================
   Modal
   ========================================================= */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(2, 4, 8, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);
}
.modal-overlay.is-open { opacity: 1; visibility: visible; }
.modal {
    position: relative;
    background: linear-gradient(170deg, #101a2b 0%, #0a1120 100%);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-xl);
    padding: clamp(28px, 4vw, 42px);
    max-width: 500px;
    width: 100%;
    transform: translateY(24px) scale(0.96);
    transition: transform var(--transition);
    box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 1), var(--ring-inset);
    overflow: hidden;
}
.modal::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(58, 215, 255, 0.14), transparent 70%);
}
.modal > * { position: relative; }
.modal-overlay.is-open .modal { transform: translateY(0) scale(1); }
.modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 38px;
    height: 38px;
    border: 1px solid var(--line-1);
    background: var(--surface-1);
    color: var(--color-text-muted);
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.modal-close:hover { background: var(--surface-3); color: var(--color-text); transform: rotate(90deg); }
.modal h2 {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 10px;
}
.modal > p {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    margin: 0 0 28px;
}
.contact-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    background: var(--surface-1);
    border: 1px solid var(--line-1);
    border-radius: var(--radius);
    margin-bottom: 12px;
    transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}
.contact-item:hover {
    border-color: rgba(58, 215, 255, 0.35);
    background: rgba(58, 215, 255, 0.06);
    transform: translateX(3px);
}
.contact-item:last-child { margin-bottom: 0; }
.contact-item-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
    background: linear-gradient(150deg, rgba(58, 215, 255, 0.16), rgba(91, 140, 255, 0.06));
    border: 1px solid rgba(58, 215, 255, 0.2);
    border-radius: 12px;
    font-size: 1.0625rem;
    flex-shrink: 0;
}
.contact-item-icon svg { width: 20px; height: 20px; }
.contact-item-text strong {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-dim);
    letter-spacing: 0.08em;
    margin-bottom: 3px;
}
.contact-item-text a,
.contact-item-text span {
    color: var(--color-text);
    font-size: 0.9375rem;
    font-weight: 500;
}
.contact-item-text a:hover { color: var(--color-accent); }

/* =========================================================
   FAQ
   ========================================================= */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
    border-radius: var(--radius);
    padding: 0 24px;
    overflow: hidden;
    transition: border-color var(--transition), background var(--transition);
}
.faq-item:hover { border-color: var(--line-2); }
.faq-item summary {
    position: relative;
    cursor: pointer;
    list-style: none;
    padding: 20px 40px 20px 0;
    -webkit-tap-highlight-color: transparent;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "";
    position: absolute;
    right: 4px;
    top: 50%;
    width: 9px;
    height: 9px;
    margin-top: -6px;
    border-right: 1.5px solid var(--color-accent);
    border-bottom: 1.5px solid var(--color-accent);
    transform: rotate(45deg);
    transition: transform var(--transition);
}
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq-item summary h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.6;
    transition: color var(--transition-fast);
}
.faq-item summary:hover h3 { color: var(--color-accent); }
.faq-item[open] summary { border-bottom: 1px solid var(--line-1); }
.faq-item p {
    margin: 0;
    padding: 18px 0 22px;
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    line-height: 1.9;
}

/* =========================================================
   Reveal 动画
   ========================================================= */
.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
    transition-delay: calc(var(--reveal-i, 0) * 90ms);
    will-change: opacity, transform;
}
.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .hero h1 { animation: none; -webkit-text-fill-color: #fff; color: #fff; }
    .hero-badge::before { animation: none; }
    .hero-scroll-line::after { animation: none; }
    .reveal { opacity: 1; transform: none; }
    .hero-media video { display: none; }
    .hero-poster { display: block; }
    .btn::after { display: none; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1080px) {
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .honors-grid { grid-template-columns: repeat(3, 1fr); }
    .footer-inner { grid-template-columns: 1.4fr 1fr; }
}

@media (max-width: 1120px) {
    .nav-toggle { display: flex; }
    .main-nav {
        position: fixed;
        top: var(--header-h);
        left: 0;
        right: 0;
        bottom: 0;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        padding: 20px var(--gutter) 48px;
        background: rgba(5, 8, 15, 0.98);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        gap: 4px;
        transform: translateX(100%);
        transition: transform var(--transition);
        overflow-y: auto;
    }
    .main-nav.is-open { transform: translateX(0); }
    .main-nav a {
        padding: 16px 18px;
        font-size: 1.0625rem;
        border-radius: var(--radius);
        border-bottom: 1px solid var(--line-1);
    }
    .main-nav a::after { display: none; }
    .main-nav a.active { color: var(--color-accent); background: rgba(58, 215, 255, 0.07); }
    .header-actions { display: none; }
    .main-nav .mobile-cta {
        display: block;
        margin-top: 24px;
    }
    .main-nav .mobile-cta .btn { width: 100%; min-height: 50px; }
}

@media (max-width: 768px) {
    :root { --section-y: 64px; }
    .stats-grid {
        grid-template-columns: 1fr;
        margin-top: -36px;
        gap: 14px;
    }
    .stat-card { padding: 24px 20px; display: flex; align-items: baseline; justify-content: center; gap: 14px; text-align: left; }
    .stat-value { margin-bottom: 0; font-size: 2rem; }
    .products-grid,
    .shop-grid,
    .two-col { grid-template-columns: 1fr; }
    .honors-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .news-card { grid-template-columns: 1fr; gap: 18px; padding: 26px 24px; }
    .news-date {
        display: inline-flex;
        gap: 10px;
        align-items: baseline;
        justify-content: center;
        padding: 8px 16px;
        justify-self: start;
    }
    .news-date .day { font-size: 1.125rem; }
    .news-date .month { margin-top: 0; }
    .footer-inner { grid-template-columns: 1fr; gap: 36px; }
    .footer-bottom { justify-content: center; text-align: center; }
    .hero { min-height: 88vh; }
    .platform-guide-grid { grid-template-columns: 1fr; }
    .product-card-body { padding: 26px 24px 28px; }
}

@media (max-width: 480px) {
    :root { --header-h: 66px; }
    .hero-actions { flex-direction: column; width: 100%; }
    .hero-actions .btn { width: 100%; }
    .features-grid { grid-template-columns: 1fr; }
    .cta-section .btn { width: 100%; margin-inline: 0; }
    .shop-item-body .btn,
    .content-block .btn { flex: 1 1 100%; }
}

@media (min-width: 1121px) {
    .main-nav .mobile-cta { display: none; }
}


/* —— Shop product families · 2026-08-09 —— */
.shop-official-logo{display:flex;align-items:center;justify-content:center}.shop-official-logo img{width:102px;height:58px;object-fit:contain;border-radius:10px;box-shadow:0 8px 28px rgba(255,32,32,.2)}
.shop-family{position:relative;overflow:hidden}.shop-family-hosts{background:radial-gradient(80% 70% at 15% 25%,rgba(255,106,26,.08),transparent 68%),var(--color-bg)}.shop-family-glasses{border-top:1px solid var(--line-1);background:radial-gradient(75% 70% at 85% 20%,rgba(58,215,255,.09),transparent 70%),var(--color-bg-elevated)}
.shop-family-heading{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:8vw;align-items:end;margin-bottom:46px}.shop-family-heading h2{margin:14px 0 0;font-size:clamp(2.25rem,5vw,4.75rem);line-height:1.02;letter-spacing:-.055em}.shop-family-heading>p{margin:0;color:var(--color-text-muted);font-size:1rem;line-height:1.9}
.shop-family-stage{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(360px,.65fr);gap:28px;align-items:stretch}.shop-family-stage.reverse{grid-template-columns:minmax(360px,.65fr) minmax(0,1.35fr)}.shop-family-stage.reverse .shop-family-video{order:2}.shop-family-stage.reverse .shop-series-card{order:1}
.shop-family-video{position:relative;min-height:440px;overflow:hidden;border:1px solid var(--line-1);border-radius:var(--radius-xl);background:#020408;box-shadow:var(--shadow-lg)}.shop-family-video video{display:block;width:100%;height:100%;min-height:440px;aspect-ratio:16/9;object-fit:cover;background:#020408}.shop-video-caption{position:absolute;left:20px;right:20px;bottom:20px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:13px 16px;border:1px solid rgba(255,255,255,.14);border-radius:13px;background:rgba(4,8,15,.78);backdrop-filter:blur(16px);pointer-events:none}.shop-video-caption span{color:var(--color-accent);font-size:.68rem;letter-spacing:.14em}.shop-video-caption strong{font-size:.92rem}.shop-video-caption small{color:var(--color-text-muted)}
.shop-series-card{display:grid;grid-template-rows:minmax(0,250px) auto;overflow:hidden;border:1px solid var(--line-1);border-radius:var(--radius-xl);background:linear-gradient(160deg,rgba(18,29,47,.96),rgba(7,12,22,.98));box-shadow:var(--shadow-lg)}.shop-series-poster{display:block;overflow:hidden;background:#101725}.shop-series-poster img{width:100%;height:100%;object-fit:cover;object-position:center 28%;transition:transform .8s var(--ease)}.shop-series-card:hover .shop-series-poster img{transform:scale(1.035)}.shop-series-copy{padding:28px}.shop-series-kicker{color:var(--color-accent);font-size:.7rem;font-weight:700;letter-spacing:.13em}.shop-series-copy h3{margin:11px 0 13px;font-size:1.45rem}.shop-series-copy h3 a{color:var(--color-text)}.shop-series-copy p{margin:0;color:var(--color-text-muted);font-size:.92rem;line-height:1.75}.shop-series-copy ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:20px 0 24px;padding:0}.shop-series-copy li{padding:7px 10px;border:1px solid var(--line-1);border-radius:999px;color:var(--color-text-soft);font-size:.72rem}.shop-series-actions{display:flex;flex-wrap:wrap;gap:10px}
@media(max-width:980px){.shop-family-heading{grid-template-columns:1fr;gap:18px}.shop-family-stage,.shop-family-stage.reverse{grid-template-columns:1fr}.shop-family-stage.reverse .shop-family-video,.shop-family-stage.reverse .shop-series-card{order:initial}.shop-series-card{grid-template-columns:minmax(220px,.75fr) minmax(0,1.25fr);grid-template-rows:none}.shop-family-video,.shop-family-video video{min-height:0}}
@media(max-width:640px){.shop-official-logo img{width:82px;height:50px}.shop-family-heading{margin-bottom:30px}.shop-family-heading h2{font-size:2.35rem}.shop-family-stage{gap:16px}.shop-series-card{grid-template-columns:1fr;grid-template-rows:230px auto}.shop-family-video video{aspect-ratio:16/9}.shop-video-caption{position:static;grid-template-columns:1fr;padding:14px 16px;border:0;border-top:1px solid var(--line-1);border-radius:0;background:#090f1a}.shop-video-caption small{display:none}.shop-series-copy{padding:24px 20px}.shop-series-actions .btn{flex:1 1 100%}}


/* —— Official enterprise mark · 2026-08-09 —— */
.logo img.brand-mark-header{width:102px;height:58px;object-fit:contain;border-radius:10px;box-shadow:0 8px 28px rgba(255,32,32,.18)}
.footer-brand img.brand-mark-footer{width:132px;height:88px;object-fit:contain;margin-bottom:16px;opacity:1;border-radius:12px}
.shop-family-videos{display:grid;gap:16px;align-content:start}.shop-family-videos-double{grid-template-columns:repeat(2,minmax(0,1fr))}.shop-family-videos-double .shop-family-video,.shop-family-videos-double .shop-family-video video{min-height:0}.shop-family-videos-double .shop-video-caption{left:12px;right:12px;bottom:12px;grid-template-columns:1fr;gap:4px;padding:10px 12px}.shop-family-videos-double .shop-video-caption small{display:none}
@media(max-width:980px){.shop-family-videos-double{grid-template-columns:repeat(2,minmax(0,1fr))}.shop-family-stage.reverse .shop-family-video{order:initial}}
@media(max-width:640px){.logo img.brand-mark-header{width:82px;height:50px}.footer-brand img.brand-mark-footer{width:116px;height:78px}.shop-family-videos-double{grid-template-columns:1fr}.shop-family-videos-double .shop-video-caption{position:static}.shop-family-videos-double .shop-video-caption small{display:block}}


/* =========================================================
   BixinAI Premium System · 2026-08-09
   Brand red · obsidian · warm white · restrained ice blue
   ========================================================= */
:root{
  --color-bg:#07090d;
  --color-bg-elevated:#0d1117;
  --color-bg-deep:#030507;
  --surface-1:rgba(255,255,255,.035);
  --surface-2:rgba(255,255,255,.055);
  --surface-3:rgba(255,255,255,.08);
  --color-bg-card:rgba(255,255,255,.035);
  --line-1:rgba(255,255,255,.085);
  --line-2:rgba(255,255,255,.16);
  --color-border:rgba(255,255,255,.085);
  --color-text:#f6f3ee;
  --color-text-muted:#a7abb5;
  --color-text-dim:#717783;
  --color-primary:#171015;
  --color-accent:#ff4a5f;
  --color-accent-2:#ff8a58;
  --color-accent-warm:#ff7448;
  --color-accent-gold:#d9b87b;
  --color-glow:rgba(255,74,95,.25);
  --grad-accent:linear-gradient(135deg,#ff334d 0%,#ff7952 100%);
  --grad-warm:linear-gradient(135deg,#ff4a5f 0%,#ff8a58 100%);
  --grad-text:linear-gradient(150deg,#fff 0%,#f2eee8 55%,#b9bec8 100%);
  --shadow-md:0 16px 40px -24px rgba(0,0,0,.82);
  --shadow-lg:0 34px 90px -42px rgba(0,0,0,.95);
  --radius-sm:9px;
  --radius:14px;
  --radius-lg:20px;
  --radius-xl:26px;
  --max-w:1260px;
  --section-y:clamp(82px,9vw,132px);
}
body{background:#07090d;color:var(--color-text);letter-spacing:0;line-height:1.78}
body::before{background:radial-gradient(900px 620px at 8% 10%,rgba(255,74,95,.075),transparent 66%),radial-gradient(820px 620px at 92% 38%,rgba(98,215,232,.055),transparent 66%),linear-gradient(180deg,#07090d,#090c12 55%,#07090d)}
body::after{opacity:.022}
a{color:#ff6979}a:hover{color:#ff9ba5}
::selection{background:rgba(255,74,95,.3)}
.scroll-progress{height:2px;background:var(--grad-accent);box-shadow:0 0 14px rgba(255,74,95,.45)}
.site-header{height:82px;background:rgba(7,9,13,.72);border-bottom:1px solid rgba(255,255,255,.065)}
.site-header.scrolled{background:rgba(7,9,13,.91);border-bottom-color:rgba(255,255,255,.09);box-shadow:0 16px 50px -30px #000}
.header-inner{max-width:1320px;gap:30px}
.main-nav{gap:4px}.main-nav>a{padding:10px 13px;border-radius:9px;color:#aeb2bb;font-size:.94rem}.main-nav>a:hover,.main-nav>a.active{color:#fff;background:rgba(255,255,255,.055)}
.main-nav>a.active::after{height:2px;background:var(--grad-accent);box-shadow:none}
.btn{min-height:46px;padding:11px 22px;border-radius:11px;letter-spacing:.01em;box-shadow:none}
.btn-primary{background:var(--grad-accent);color:#fff;border-color:transparent;box-shadow:0 14px 32px -18px rgba(255,74,95,.8)}
.btn-primary:hover{color:#fff;transform:translateY(-2px);box-shadow:0 18px 42px -18px rgba(255,74,95,.75)}
.btn-outline,.btn-ghost{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.025);color:#e9e6e1}
.btn-outline:hover,.btn-ghost:hover{border-color:rgba(255,74,95,.5);background:rgba(255,74,95,.07);color:#fff}
.hero{min-height:940px}.hero-overlay{background:linear-gradient(90deg,rgba(3,5,8,.92) 0%,rgba(3,5,8,.69) 48%,rgba(3,5,8,.34) 100%),linear-gradient(0deg,#07090d 0%,transparent 28%,rgba(0,0,0,.2) 100%)}
.hero-grid{opacity:.24;background-size:56px 56px}
.hero-content{max-width:1260px;padding-top:72px}.hero-content>div,.hero-content>h1,.hero-content>p{max-width:850px}
.hero-badge{border-color:rgba(255,255,255,.14);background:rgba(8,10,14,.58);color:#c6c1bb;box-shadow:none}
.hero-badge::before{background:#ff4a5f;box-shadow:0 0 16px rgba(255,74,95,.7)}
.hero h1{font-size:clamp(3.5rem,7.2vw,7.25rem);line-height:.93;letter-spacing:-.07em;font-weight:650;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-subtitle{max-width:760px!important;color:#b7bac2;font-size:clamp(1.04rem,1.7vw,1.28rem);line-height:1.9}
.page-banner{min-height:480px;padding:176px var(--gutter) 104px;background:radial-gradient(720px 400px at 78% 22%,rgba(255,74,95,.09),transparent 68%),linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px),#090d14;background-size:auto,54px 54px,54px 54px,auto}
.page-banner::before{background:linear-gradient(180deg,rgba(7,9,13,.05),#090d14)}
.page-banner h1{max-width:1050px;margin:16px 0 22px;font-size:clamp(3rem,6.4vw,6.2rem);line-height:.98;letter-spacing:-.06em;font-weight:620;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.page-banner p{max-width:760px;color:#a9aeba;font-size:clamp(1rem,1.5vw,1.18rem);line-height:1.85}
.section{padding:var(--section-y) var(--gutter)}.section-alt{background:#0b0f15;border-top:1px solid rgba(255,255,255,.055);border-bottom:1px solid rgba(255,255,255,.055)}
.section-header{max-width:860px;margin:0 auto clamp(46px,6vw,76px)}
.section-label{color:#ff6b7c;font-size:.72rem;letter-spacing:.18em}.section-label::before{background:#ff4a5f}.section-label::after{background:linear-gradient(90deg,rgba(255,74,95,.7),transparent)}
.section-title{font-size:clamp(2.35rem,5vw,4.8rem);line-height:1.02;letter-spacing:-.055em;font-weight:620}
.section-desc{max-width:720px;color:#9ea3ad;font-size:1rem;line-height:1.9}
.stat-card,.feature-card,.product-card,.honor-item,.news-card,.content-block,.shop-item,.platform-guide-card,.faq-item{background:linear-gradient(155deg,rgba(255,255,255,.048),rgba(255,255,255,.018));border:1px solid rgba(255,255,255,.085);box-shadow:0 18px 55px -38px #000}
.feature-card::before,.product-card::before,.stat-card::before,.platform-guide-card::before{display:none}
.feature-card:hover,.product-card:hover,.shop-item:hover,.news-card:hover{transform:translateY(-4px);border-color:rgba(255,74,95,.32);box-shadow:0 26px 70px -42px rgba(255,74,95,.35)}
.feature-icon{background:rgba(255,74,95,.08);border-color:rgba(255,74,95,.22);color:#ff6a7a}
.content-block{padding:clamp(28px,4vw,48px);margin-bottom:20px}.content-block h2{font-size:clamp(1.6rem,3vw,2.35rem);letter-spacing:-.035em}.content-block h2::before{background:var(--grad-accent);box-shadow:none}.content-block p{color:#a9adb6;font-size:1rem;line-height:1.9}
.two-col{gap:clamp(28px,6vw,76px)}
.products-grid,.shop-grid{gap:22px}
.product-card-body,.shop-item-body{padding:30px}
.news-list{gap:16px}.news-card{padding:30px 34px}.news-card::before{background:var(--grad-accent)}
.faq-list{gap:12px}.faq-item{border-radius:16px}.faq-item summary{padding:24px 26px}.faq-item p{padding:22px 26px 28px;color:#a9adb6}
.honor-item{padding:12px}.honor-item img{border-radius:12px}.honor-item figcaption{color:#b7bac2}
.cta-section{padding:clamp(88px,10vw,140px) var(--gutter);background:radial-gradient(700px 360px at 50% 30%,rgba(255,74,95,.10),transparent 70%),#0a0d12;border-top-color:rgba(255,255,255,.07)}
.cta-section h2{font-size:clamp(2.4rem,5.5vw,5rem);letter-spacing:-.055em}.cta-section p{color:#a8adb6;font-size:1.05rem}
.site-footer{background:#05070a;border-top:1px solid rgba(255,255,255,.075)}.site-footer::before{background:linear-gradient(90deg,transparent,rgba(255,74,95,.45),transparent)}
.footer-inner{padding-top:68px;padding-bottom:50px}.footer-col h4{color:#f0ece7}.footer-col a{color:#8f949f}.footer-col a:hover{color:#ff7786}
.shop-family-hosts{background:radial-gradient(80% 70% at 12% 20%,rgba(255,116,72,.07),transparent 68%),#080b10}.shop-family-glasses{background:radial-gradient(75% 70% at 86% 20%,rgba(98,215,232,.07),transparent 70%),#0b0f15}
.shop-series-card,.shop-family-video{border-color:rgba(255,255,255,.09);box-shadow:0 28px 80px -50px #000}.shop-series-kicker{color:#ff6f7f}
@media(max-width:760px){
 .site-header{height:70px}.header-inner{gap:14px}.main-nav{background:#0b0e13}
 .hero{min-height:780px}.hero-content{padding-top:36px}.hero h1{font-size:3.55rem}.hero-subtitle br{display:none}
 .page-banner{min-height:400px;padding:132px 20px 74px}.page-banner h1{font-size:3.15rem}
 .section{padding:76px 20px}.section-title{font-size:2.65rem}.content-block{padding:26px 22px}
 .news-card{padding:25px 22px}.footer-inner{padding-top:50px}
}