/* --- 基础 Reset & 通用样式 --- */
    * { box-sizing: border-box; margin: 0; padding: 0; }
    .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
    :root {
      --btn-gradient-primary: linear-gradient(120deg, #10b981, #14b8a6);
      --btn-border-primary: rgba(16, 185, 129, 0.65);
      --btn-text-primary: #fff;
      --btn-shadow-primary: rgba(5, 95, 70, 0.35);
      --btn-hover-scale: 1.02;
    }
    html { scroll-behavior: smooth; }
    body { margin:0; padding:0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif; background: radial-gradient(circle at 20% 20%, #0e3126 0%, #050912 55%, #02050b 100%); color:#e2e8f0; line-height:1.65; color-scheme: dark; }
    body.theme-light { background: linear-gradient(180deg, #eef3fb 0%, #f8fafc 60%, #ffffff 100%); color: #0f172a; color-scheme: light;
      --btn-gradient-primary: linear-gradient(120deg, #090909, #1a1a1a);
      --btn-border-primary: rgba(255, 255, 255, 0.15);
      --btn-shadow-primary: rgba(0, 0, 0, 0.45);
      --btn-text-primary: #f8fafc;
    }
    a { color: #38bdf8; text-decoration: none; }
    body.theme-light a { color: #0f766e; }
    body.theme-light p,
    body.theme-light li,
    body.theme-light span,
    body.theme-light dd,
    body.theme-light dt { color: #1f2937; }
    body.theme-light ul li { color: #1f2937; }
    body.theme-light h3 { color: #0f172a; }
    body.theme-light strong { color: #0f172a; }
    body.theme-light .modal__refresh {
      background: rgba(15,23,42,0.08);
      color: #0f172a;
      border-color: rgba(15,23,42,0.2);
      box-shadow: 0 10px 20px rgba(15,23,42,0.08);
    }
    body.theme-light .cta-btn,
    body.theme-light .nav-cta,
    body.theme-light .contact-form button,
    body.theme-light .modal__submit {
      box-shadow: 0 18px 32px rgba(71, 82, 120, 0.15);
      background: var(--btn-gradient-primary);
      border-color: transparent;
      color: var(--btn-text-primary);
    }
    img { max-width: 100%; height: auto; display: block; }

    /* --- 容器 & 布局 --- */
    .container { width: min(94%, 1100px); margin: 0 auto; padding: 60px 0; }
    header { background: radial-gradient(circle at top left, rgba(16,185,129,0.25), rgba(2,6,23,0.95)); color: white; padding: 80px 10px 70px; text-align: center; border-bottom: 1px solid rgba(148,163,184,0.08); position: relative; overflow: hidden; }
    body.theme-light header { background: linear-gradient(145deg, #fdfdfd, #eef1f7 70%); color: #0f172a; border-bottom: 1px solid rgba(15,23,42,0.08); }
    header h1 { font-size: 44px; margin-bottom: 14px; letter-spacing: 0.5px; }
    header p { font-size: 18px; margin-bottom: 28px; color: rgba(226,232,240,0.85); }
    body.theme-light header p { color: #475569; }
    .site-nav { display: flex; align-items: center; justify-content: space-between; gap: 28px; max-width: 1100px; margin: 0 auto 32px; text-align: left; }
    .site-brand { display: flex; align-items: center; flex-shrink: 0; min-height: 44px; }
    .site-brand img { height: 34px; width: 120px; max-width: 120px; object-fit: contain; display: block; }
    .site-brand .logo-light { display: none; }
    body.theme-light .site-brand .logo-dark { display: none; }
    body.theme-light .site-brand .logo-light { display: block; }
    .primary-nav { display: flex; gap: 22px; margin-left: 24px; margin-right: auto; }
    .primary-nav a { color: rgba(226,232,240,0.65); font-size: 14px; padding: 8px 14px; border-radius: 999px; border: 1px solid transparent; transition: color 0.2s ease, border 0.2s ease, background 0.2s ease; }
    .primary-nav a:hover,
    .primary-nav a.is-active { color: #f8fafc; border-color: rgba(45,212,191,0.35); background: rgba(4,12,20,0.6); }
    body.theme-light .primary-nav a { color: #475569; }
    body.theme-light .primary-nav a:hover,
    body.theme-light .primary-nav a.is-active { color: #0f172a; border-color: rgba(14,165,233,0.35); background: rgba(14,165,233,0.12); }
    .nav-right { display: flex; align-items: center; gap: 14px; margin-left: auto; }
    .nav-cta { border: 1px solid transparent; border-radius: 999px; padding: 8px 18px; color: var(--btn-text-primary); font-size: 14px; background: var(--btn-gradient-primary); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; box-shadow: 0 18px 35px var(--btn-shadow-primary); position: relative; overflow: hidden; }
    .nav-cta::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255,255,255,0.25), transparent 50%); opacity: 0; transition: opacity 0.3s ease; }
    .nav-cta:hover { transform: scale(var(--btn-hover-scale)); border-color: var(--btn-border-primary); box-shadow: 0 24px 45px var(--btn-shadow-primary); }
    .nav-cta:hover::after { opacity: 1; }
    .language-switch { display: flex; gap: 10px; background: rgba(15,23,42,0.4); padding: 6px; border-radius: 999px; border: 1px solid rgba(148,163,184,0.2); }
    body.theme-light .language-switch { background: rgba(248,250,252,0.9); border-color: rgba(148,163,184,0.25); }
    .language-switch button { border: 1px solid transparent; background: transparent; color: rgba(248,250,252,0.9); font-size: 13px; padding: 6px 14px; border-radius: 999px; cursor: pointer; transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; font-family: inherit; }
    .language-switch button.active { background: #0f172a; color: #f8fafc; box-shadow: 0 14px 30px rgba(15,23,42,0.25); font-weight: 600; border-color: #38bdf8; }
    .language-switch button:hover:not(.active) { color: #f8fafc; background: transparent; }
    body.theme-light .language-switch button { color: #0f172a; background: transparent; border-color: transparent; }
    body.theme-light .language-switch button.active { background: #f8fafc; color: #0f172a; box-shadow: 0 14px 30px rgba(15,23,42,0.1); border-color: #0f172a; }
    body.theme-light .language-switch button:hover:not(.active) { color: #0f172a; background: transparent; }
    .theme-toggle { border-radius: 999px; padding: 8px 14px; background: var(--btn-gradient-primary); border: 1px solid var(--btn-border-primary); color: var(--btn-text-primary); cursor: pointer; transition: transform 0.25s ease, box-shadow 0.25s ease; box-shadow: 0 14px 30px rgba(15,23,42,0.25); display: inline-flex; align-items: center; justify-content: center; }
    .theme-toggle:hover { transform: scale(1.02); box-shadow: 0 20px 36px rgba(15,23,42,0.35); }
    body.theme-light .theme-toggle { border-color: rgba(15,23,42,0.12); box-shadow: 0 14px 30px rgba(15,23,42,0.15); color: var(--btn-text-primary); }
    .cta-btn { display: inline-flex; justify-content: center; align-items: center; padding: 12px 28px; background: var(--btn-gradient-primary); color: var(--btn-text-primary); font-size: 15px; border-radius: 999px; margin: 0 8px 14px; border: 1px solid transparent; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; box-shadow: 0 18px 40px var(--btn-shadow-primary); position: relative; overflow: hidden; }
    .cta-btn::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at top, rgba(255,255,255,0.2), rgba(255,255,255,0)); opacity: 0; transition: opacity 0.3s ease; }
    .cta-btn:hover { transform: scale(var(--btn-hover-scale)); box-shadow: 0 26px 40px var(--btn-shadow-primary); border-color: var(--btn-border-primary); }
    .cta-btn:hover::after { opacity: 0.35; }
    .cta-btn--disabled { border-color: rgba(15,23,42,0.2); background: linear-gradient(135deg, #e4e4e7, #d4d4d8); color: #404040; box-shadow: none; cursor: not-allowed; }
    .cta-btn--disabled::after { display: none; }
    section { padding: 36px 0; position: relative; }
    h2 { font-size: 28px; margin-bottom: 16px; text-align: center; color: #f8fafc; letter-spacing: 0.6px; position: relative; display: inline-block; }
    body.theme-light h2 { color: #0f172a; }
    h2::after { content: ""; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); width: 48px; height: 3px; background: linear-gradient(120deg, #38bdf8, #6366f1); border-radius: 999px; }
    .grid { display: flex; flex-wrap: wrap; gap: 28px; }
    .card { background: radial-gradient(circle at top, rgba(19,84,73,0.45), rgba(3,7,18,0.9)); border-radius: 24px; padding: 30px; flex: 1 1 300px; min-width: 280px; border: 1px solid rgba(67,226,171,0.24); box-shadow: 0 28px 50px rgba(2,6,23,0.55); position: relative; overflow: hidden; transition: transform 0.2s ease-out, border-color 0.2s ease-out, box-shadow 0.2s ease-out; display: flex; flex-direction: column; gap: 12px; backdrop-filter: blur(4px); will-change: transform, box-shadow; }
    .card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at top right, rgba(46,204,149,0.35), transparent 60%); opacity: 0.75; mix-blend-mode: screen; pointer-events: none; }
    .card::after { content: ""; position: absolute; inset: 1px; border-radius: 22px; border: 1px solid rgba(255,255,255,0.04); pointer-events: none; }
    .card > * { position: relative; z-index: 1; }
    .card:hover { transform: translateY(-4px); border-color: rgba(45,212,191,0.5); box-shadow: 0 32px 60px rgba(2,6,23,0.6); }
    .card h3 { margin-top: 6px; margin-bottom: 4px; color: #f8fafc; font-size: 19px; letter-spacing: 0.3px; }
    .core-card { color: #fff; border-color: rgba(45,212,191,0.3); box-shadow: 0 40px 70px rgba(5,10,20,0.7); }
    .core-card::before { display: none; }
    .core-card h3 { color: #fff; font-size: 20px; }
    .core-card p { color: rgba(255,255,255,0.88); }
    .core-card::after { display:none; }
    .core-card--blue,
    .core-card--purple,
    .core-card--teal { background: inherit; }
    .core-card .card-content { position: relative; z-index: 2; }
    .two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; }
    .tier-card { position: relative; overflow: hidden; }
    .tier-card::after { content: ""; position: absolute; inset: 0; opacity: 0.2; background: radial-gradient(circle at 80% 0%, rgba(45,212,191,0.3), transparent 55%); pointer-events: none; mix-blend-mode: screen; }
    .tier-card--open,
    .tier-card--enterprise { background: inherit; border-color: inherit; }
    .tier-card h3 { font-size: 21px; }
    .tier-card p { color: rgba(226,232,240,0.85); }
    .tier-card ul { margin: 18px 0 14px 18px; }
    .tier-card li { color: rgba(226,232,240,0.8); font-size: 14px; margin-bottom: 8px; }
    ul { margin-left: 18px; margin-bottom: 14px; }
    li { margin-bottom: 6px; font-size: 14px; color: rgba(226,232,240,0.75); }
    footer { background: linear-gradient(120deg, rgba(2,6,23,0.95), rgba(2,8,35,0.95)); color: #9ca3af; padding: 30px 10px; text-align: center; font-size: 13px; border-top: 1px solid rgba(148,163,184,0.12); }

    #deployment .architecture-media { width: min(100%, 880px); margin: 28px auto 0; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px rgba(2,6,23,0.55); border: 1px solid rgba(148,163,184,0.15); display: block; background-color: #f8fafc; padding: 18px; }
    body.theme-light #deployment .architecture-media { border-color: rgba(15,23,42,0.08); box-shadow: 0 18px 40px rgba(15,23,42,0.15); }

    .scenario-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px; margin-top: 30px; }
    .scenario-card { background: radial-gradient(circle at top left, rgba(9,52,43,0.7), rgba(2,6,23,0.95)); border-radius: 22px; border: 1px solid rgba(67,226,171,0.2); padding: 28px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 25px 55px rgba(2,6,23,0.55); min-height: 220px; }
    .scenario-icon { width: 54px; height: 54px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #0f4a39, #11a97d); box-shadow: 0 10px 22px rgba(17,169,125,0.35); }
    .scenario-icon svg { width: 32px; height: 32px; }
    .scenario-icon svg path,
    .scenario-icon svg rect,
    .scenario-icon svg circle,
    .scenario-icon svg line {
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .scenario-card h3 { font-size: 18px; margin: 0; letter-spacing: 0.2px; color: #f1f5f9; }
    .scenario-card p { margin: 0; font-size: 14px; color: rgba(226,232,240,0.78); line-height: 1.6; }
    .scenario-card--institution .scenario-icon,
    .scenario-card--dao .scenario-icon,
    .scenario-card--family .scenario-icon,
    .scenario-card--custody .scenario-icon { background: inherit; box-shadow: inherit; }

    #security .security-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 36px; align-items: center; margin-top: 26px; }
    .security-checklist { background: radial-gradient(circle at top, rgba(17,94,89,0.55), rgba(4,9,20,0.95)); border-radius: 24px; padding: 30px 34px; border: 1px solid rgba(67,226,171,0.2); box-shadow: 0 35px 65px rgba(2,6,23,0.55); display: flex; flex-direction: column; gap: 20px; }
    .security-step { display: flex; gap: 18px; align-items: flex-start; }
    .security-step-icon { width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, #0f4a39, #11a97d); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; letter-spacing: 0.5px; flex-shrink: 0; box-shadow: 0 12px 28px rgba(17,169,125,0.35); }
    .security-step h3 { margin: 0; font-size: 17px; color: #f8fafc; }
    .security-step p { margin: 6px 0 0; font-size: 14px; color: rgba(226,232,240,0.78); line-height: 1.6; }
    .security-flow-diagram { background: radial-gradient(circle at top, rgba(37,99,235,0.2), rgba(2,6,23,0.95)); border-radius: 24px; border: 1px solid rgba(148,163,184,0.18); padding: 24px; box-shadow: 0 35px 65px rgba(2,6,23,0.45); }
    .security-flow-diagram img { width: 100%; height: auto; display: block; }

    #faq { margin-top: 36px; }
    .faq-list { display: flex; flex-direction: column; gap: 18px; margin-top: 20px; }
    .faq-item { background: radial-gradient(circle at top left, rgba(27,94,82,0.55), rgba(2,8,20,0.92)); border-radius: 22px; border: 1px solid rgba(67,226,171,0.18); padding: 22px 26px; box-shadow: 0 25px 55px rgba(2,6,23,0.5); }
    .faq-item dt { font-size: 18px; color: #f8fafc; margin-bottom: 8px; font-weight: 600; }
    .faq-item dd { margin: 0; font-size: 14px; color: rgba(226,232,240,0.85); line-height: 1.7; }

    #contact { background: radial-gradient(circle at top left, rgba(16,185,129,0.25), rgba(3,7,18,0.95)); border-radius: 36px; border: 1px solid rgba(67,226,171,0.2); padding: 70px 20px 60px; margin-top: 40px; box-shadow: 0 45px 80px rgba(2,6,23,0.55); }
    #contact h2 { color: #f8fafc; margin-bottom: 18px; }
    body.theme-light #contact h2 { color: #0f172a; }
    .contact-card { max-width: 620px; margin: 0 auto; text-align: center; }
    .contact-card p { color: rgba(226,232,240,0.78); font-size: 15px; margin-bottom: 28px; line-height: 1.8; }
    .contact-form { display: flex; flex-direction: column; gap: 18px; margin-bottom: 32px; }
    .contact-form input,
    .contact-form textarea { width: 100%; padding: 16px 20px; border-radius: 18px; border: 1px solid rgba(148,163,184,0.25); background: rgba(15,23,42,0.6); color: #e2e8f0; font-size: 15px; font-family: inherit; resize: vertical; transition: border-color 0.25s ease, box-shadow 0.25s ease; }
    .contact-form textarea { min-height: 140px; }
    .contact-form input::placeholder,
    .contact-form textarea::placeholder { color: rgba(226,232,240,0.55); }
    .contact-form input:focus,
    .contact-form textarea:focus { border-color: rgba(14,165,233,0.8); box-shadow: 0 0 0 3px rgba(14,165,233,0.2); outline: none; }
    .contact-form button { border-radius: 999px; padding: 14px 40px; align-self: center; background: var(--btn-gradient-primary); color: var(--btn-text-primary); font-weight: 600; font-size: 15px; cursor: pointer; border: 1px solid transparent; box-shadow: 0 20px 40px var(--btn-shadow-primary); transition: transform 0.25s ease, box-shadow 0.25s ease; position: relative; overflow: hidden; }
    .contact-form button::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at top, rgba(255,255,255,0.2), transparent 60%); opacity: 0; transition: opacity 0.3s ease; }
    .contact-form button:hover { transform: scale(1.02); box-shadow: 0 28px 45px var(--btn-shadow-primary); }
    .contact-form button:hover::after { opacity: 0.4; }
    .contact-status { min-height: 24px; margin-bottom: 16px; font-size: 14px; color: rgba(236, 252, 231, 0.9); letter-spacing: 0.1px; }
    .contact-status.success { color: #86efac; }
    .contact-status.error { color: #fca5a5; }
    .contact-brand { display: flex; align-items: center; justify-content: center; gap: 12px; color: rgba(226,232,240,0.7); font-size: 16px; letter-spacing: 1px; }
    .contact-brand::before,
    .contact-brand::after { content: ""; flex: 1; height: 1px; background: rgba(148,163,184,0.25); }
    .contact-brand span { background: transparent; padding: 0 12px; font-weight: 600; color: #f8fafc; }

    .modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(2,6,23,0.85); }
    .modal.is-visible { display: flex; }
    .modal__content { background: #050f19; border-radius: 24px; padding: 28px; max-width: 360px; width: min(90%, 360px); text-align: center; box-shadow: 0 20px 60px rgba(2,6,23,0.65); border: 1px solid rgba(56,189,248,0.4); }
    .modal__content img { width: 100%; border-radius: 18px; margin-top: 12px; }
    .modal__label { display: block; width: 100%; margin-top: 18px; text-align: left; }
    .modal__label span { display: block; font-size: 13px; color: rgba(248,250,252,0.75); margin-bottom: 6px; letter-spacing: 0.4px; }
    .modal__label input { width: 100%; padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(148,163,184,0.35); background: rgba(15,23,42,0.75); color: #f8fafc; font-family: inherit; font-size: 15px; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
    .modal__label input:focus { border-color: rgba(56,189,248,0.8); box-shadow: 0 0 0 3px rgba(56,189,248,0.2); outline: none; }
    .modal__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }
    .modal__submit,
    .modal__refresh { border-radius: 999px; padding: 10px 16px; font-size: 14px; font-weight: 600; border: 1px solid transparent; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; }
    .modal__submit { background: var(--btn-gradient-primary); color: var(--btn-text-primary); border-color: var(--btn-border-primary); box-shadow: 0 18px 40px var(--btn-shadow-primary); }
    .modal__refresh { background: rgba(15,23,42,0.8); color: #cbd5f5; border-color: rgba(148,163,184,0.4); }
    .modal__submit:hover,
    .modal__refresh:hover { transform: translateY(-1px); box-shadow: 0 16px 32px rgba(0,0,0,0.35); }
    .modal__status { min-height: 18px; margin-top: 10px; font-size: 13px; color: rgba(248,250,252,0.75); letter-spacing: 0.4px; }
    .modal__status.error { color: #f9a8d4; }
    .modal__status.success { color: #86efac; }
    .modal__close { position: absolute; top: 14px; right: 16px; border: none; background: transparent; color: #f8fafc; font-size: 22px; cursor: pointer; }

    .video-modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(2, 6, 23, 0.92); padding: 20px; z-index: 1000; }
    .video-modal.is-visible { display: flex; }
    .video-modal__content { position: relative; width: min(96%, 1040px); max-width: 1024px; background: transparent; border-radius: 24px; padding: 0; box-shadow: 0 25px 60px rgba(2, 6, 23, 0.8); border: none; }
    .video-modal__iframe-wrapper { width: 100%; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; background: #000; box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.25); }
    .video-modal__iframe-wrapper iframe { width: 100%; height: 100%; border: 0; display: block; }
    .video-modal__close { position: absolute; top: 14px; right: 18px; border: none; background: rgba(15, 23, 42, 0.7); color: #f8fafc; font-size: 22px; width: 42px; height: 42px; border-radius: 999px; cursor: pointer; transition: background 0.2s ease; }
    .video-modal__close:hover { background: rgba(56, 189, 248, 0.55); }

    body.theme-light .card,
    body.theme-light .tier-card,
    body.theme-light .core-card,
    body.theme-light .scenario-card,
    body.theme-light .faq-item { background: #ffffff; border-color: rgba(15,23,42,0.06); color: #0f172a; box-shadow: 0 18px 40px rgba(15,23,42,0.06); }
    body.theme-light .card p,
    body.theme-light .tier-card p,
    body.theme-light .tier-card li,
    body.theme-light .scenario-card p,
    body.theme-light .faq-item dd,
    body.theme-light .security-step p { color: #1f2937; }
    body.theme-light .scenario-icon { background: #090909; box-shadow: 0 10px 16px rgba(0,0,0,0.25); }
    body.theme-light .security-checklist,
    body.theme-light .security-flow-diagram { background: #ffffff; border-color: rgba(15,23,42,0.08); box-shadow: 0 30px 60px rgba(15,23,42,0.08); }
    body.theme-light .security-step h3 { color: #0f172a; }
    body.theme-light .security-step p { color: #0f172a; opacity: 0.9; }
    body.theme-light .security-step-icon { background: #090909; border: 1px solid rgba(15,23,42,0.2); box-shadow: 0 12px 28px rgba(0,0,0,0.35); }
    body.theme-light #contact,
    body.theme-light footer { background: linear-gradient(120deg, rgba(255,255,255,0.95), rgba(226,232,240,0.9)); border-color: rgba(15,23,42,0.08); color: #0f172a; }
    body.theme-light .contact-card p { color: #334155; }
    body.theme-light .contact-form input,
    body.theme-light .contact-form textarea { background: #fff; border-color: rgba(15,23,42,0.1); color: #0f172a; }
    body.theme-light .contact-form input::placeholder,
    body.theme-light .contact-form textarea::placeholder { color: rgba(51,65,85,0.6); }
    body.theme-light .contact-brand span { color: #0f172a; }
    body.theme-light .faq-item dt { color: #0f172a; }

    /* --- 头图 --- */
    .hero-video { width: 100%; max-width: 860px; margin: 24px auto 0; border-radius: 24px; overflow: hidden; border: 1px solid rgba(67,226,171,0.25); box-shadow: 0 35px 70px rgba(2,6,23,0.75); aspect-ratio: 16 / 9; position: relative; background: transparent; display: grid; place-items: center; }
    .hero-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease, opacity 0.6s ease; filter: saturate(0.9); opacity: 0.88; z-index: 0; }
    .hero-video::after { content: ""; position: absolute; inset: 0; background: rgba(2,6,23,0.2); opacity: 0.3; transition: opacity 0.3s ease; z-index: 1; }
    .hero-video::before { content: ""; position: absolute; inset: 0; border-radius: 24px; border: 1px solid rgba(255,255,255,0.04); pointer-events: none; z-index: 2; }
    body.theme-light .hero-video { border-color: rgba(14,165,233,0.35); box-shadow: 0 32px 60px rgba(15,23,42,0.15); background: transparent; }
    body.theme-light .hero-video::after { background: rgba(248,250,252,0.35); opacity: 0.15; }
    .hero-video:hover img { transform: scale(1.02); opacity: 1; }
    .hero-video:hover::after { opacity: 0.65; }
    .hero-video .play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 84px; height: 84px; border-radius: 50%; background: linear-gradient(135deg, #0f4a39, #11a97d); display: flex; align-items: center; justify-content: center; box-shadow: 0 18px 40px rgba(17,169,125,0.45); z-index: 3; }
    .hero-video .play-btn svg { width: 26px; height: 26px; fill: #0f172a; margin-left: 4px; }
    .hero-video .video-hint { position: absolute; left: 24px; bottom: 20px; color: #fff; font-size: 15px; letter-spacing: 0.5px; display: flex; gap: 8px; align-items: center; z-index: 3; }
    .hero-video .video-hint span { background: rgba(15,23,42,0.55); padding: 6px 12px; border-radius: 999px; font-size: 12px; text-transform: uppercase; }
    body.theme-light .hero-video .video-hint { color: #0f172a; }
    body.theme-light .hero-video .video-hint span { background: rgba(255,255,255,0.85); color: #0f172a; }

    /* --- 响应式 / 媒体查询 --- */
    @media (max-width: 1024px) {
      .site-nav { flex-wrap: wrap; justify-content: center; gap: 18px; }
      .primary-nav { flex-wrap: wrap; margin-left: 0; margin-right: 0; justify-content: center; }
    }

    @media (max-width: 768px) {
      header { padding: 64px 16px 52px; }
      header h1 { font-size: 30px; }
      header p { font-size: 15px; }
      h2 { font-size: 20px; }
      .grid { flex-direction: column; }
      .two-col { grid-template-columns: 1fr; }
      .site-nav { flex-direction: column; align-items: stretch; gap: 16px; text-align: left; }
      .primary-nav { flex-wrap: wrap; margin: 0; justify-content: flex-start; gap: 12px; }
      .nav-right { width: 100%; flex-direction: column; align-items: stretch; gap: 10px; }
      .language-switch { flex-wrap: wrap; justify-content: flex-start; width: 100%; }
      .nav-cta { width: 100%; text-align: center; }
      .container { width: 92%; }
      .card { padding: 22px; }
      .cta-btn { padding: 10px 20px; font-size: 14px; }
      .hero-video { border-radius: 18px; }
    }

    @media (max-width: 480px) {
      .site-nav { gap: 12px; }
      .primary-nav a { flex: 1 1 calc(50% - 8px); text-align: center; }
      .card { border-radius: 20px; padding: 20px; }
      .language-switch { padding: 4px; }
      .hero-video { border-radius: 16px; }
    }

    @media (max-width: 960px) {
      .container { padding: 48px 0; }
      section { padding: 28px 0; }
      .two-col { grid-template-columns: 1fr; gap: 22px; }
      .scenario-grid { gap: 20px; }
      .contact-card { padding: 0 8px; }
      #security .security-layout { grid-template-columns: 1fr; }
      .security-checklist, .security-flow-diagram { margin-top: 0; }
    }

    @media (max-width: 640px) {
      header { padding: 56px 12px 48px; }
      .site-nav { flex-direction: column; align-items: flex-start; }
      .nav-right { align-items: flex-start; }
      .language-switch { justify-content: flex-start; }
      .cta-btn { width: 100%; text-align: center; }
      .scenario-card { min-height: 200px; }
      .security-step { flex-direction: column; align-items: stretch; }
      .security-step-icon { margin-bottom: 6px; }
      #contact { padding: 60px 16px; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
      }
    }