/**
 * NZY / CloudSpects 首页 — UI Design System
 * 基于 design token、组件基元、响应式容器与 WCAG AA 可访问性
 */

/* --------------------------------------------------------------------------
   Design tokens（可与 [data-theme="dark"] 扩展亮色页）
   -------------------------------------------------------------------------- */
.nzy-ds {
  --color-primary-100: #cffafe;
  --color-primary-500: #06b6d4;
  --color-primary-600: #0891b2;
  --color-primary-900: #164e63;

  --color-secondary-100: #f1f5f9;
  --color-secondary-300: #cbd5e1;
  --color-secondary-500: #64748b;
  --color-secondary-900: #0f172a;

  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;

  --font-family-primary: "Inter", system-ui, sans-serif;
  --font-family-display: "Space Grotesk", var(--font-family-primary);
  --font-family-mono: "JetBrains Mono", ui-monospace, monospace;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);

  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;

  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;

  /* 深色首页语义色 */
  --ds-bg-deep: #0f172a;
  --ds-bg-elevated: rgba(30, 41, 59, 0.85);
  --ds-border-subtle: rgba(6, 182, 212, 0.22);
  --ds-focus-ring: 0 0 0 3px rgb(6 182 212 / 0.35);
}

.nzy-ds body {
  font-family: var(--font-family-primary);
  background-color: var(--ds-bg-deep);
  color: var(--color-secondary-100);
}

.nzy-ds .nex-title {
  font-family: var(--font-family-display);
}

/* --------------------------------------------------------------------------
   容器 — mobile-first
   -------------------------------------------------------------------------- */
.nzy-ds .ds-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

@media (min-width: 640px) {
  .nzy-ds .ds-container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .nzy-ds .ds-container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .nzy-ds .ds-container {
    max-width: 1024px;
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

@media (min-width: 1280px) {
  .nzy-ds .ds-container {
    max-width: 1280px;
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
}

/* 与 max-w-7xl (80rem) 对齐的宽屏内容区 — 独立断点，不套用窄屏 max-width */
.nzy-ds .ds-container--wide {
  width: 100%;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

@media (min-width: 1024px) {
  .nzy-ds .ds-container--wide {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

@media (min-width: 1280px) {
  .nzy-ds .ds-container--wide {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
}

/* --------------------------------------------------------------------------
   基础组件：按钮
   -------------------------------------------------------------------------- */
.nzy-ds .ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-primary);
  font-weight: 600;
  font-size: var(--font-size-lg);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
    background-color var(--transition-fast);
  user-select: none;
  min-height: 44px;
  min-width: 44px;
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-xl);
}

.nzy-ds .ds-btn:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

.nzy-ds .ds-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.nzy-ds .ds-btn--primary {
  background: linear-gradient(135deg, var(--color-primary-500) 0%, #0284c7 100%);
  color: #fff;
  box-shadow: var(--shadow-md);
}

.nzy-ds .ds-btn--primary:hover:not(:disabled) {
  background: linear-gradient(
    135deg,
    var(--color-primary-600) 0%,
    #0369a1 100%
  );
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

.nzy-ds .ds-btn--secondary {
  background: rgba(30, 41, 59, 0.85);
  color: #a5f3fc;
  border: 2px solid var(--ds-border-subtle);
  box-shadow: var(--shadow-sm);
}

.nzy-ds .ds-btn--secondary:hover:not(:disabled) {
  background: rgba(51, 65, 85, 0.95);
  border-color: rgba(6, 182, 212, 0.45);
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   表单（首页 CTA 深色主题）
   -------------------------------------------------------------------------- */
.nzy-ds .ds-input,
.nzy-ds .ds-textarea,
.nzy-ds .ds-select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
  font-family: var(--font-family-primary);
  background-color: #334155;
  color: #f8fafc;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.nzy-ds .ds-input::placeholder,
.nzy-ds .ds-textarea::placeholder {
  color: #94a3b8;
}

.nzy-ds .ds-input:focus,
.nzy-ds .ds-textarea:focus,
.nzy-ds .ds-select:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: var(--ds-focus-ring);
}

/* --------------------------------------------------------------------------
   卡片
   -------------------------------------------------------------------------- */
.nzy-ds .ds-card {
  background: var(--ds-bg-elevated);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--ds-border-subtle);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

.nzy-ds .ds-card:hover {
  box-shadow: var(--shadow-md);
}

/* 与现有 cyber-border 并存：增强层次 */
.nzy-ds .cyber-border.ds-card {
  background: rgba(15, 23, 42, 0.65);
}

/* 统计数字 */
.nzy-ds .ds-hero-stats .font-mono {
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Hero — 简约：轻背景、少装饰
   -------------------------------------------------------------------------- */
.nzy-ds .gradient-hero {
  background: linear-gradient(
    135deg,
    #1a2b4c 0%,
    var(--ds-bg-deep) 50%,
    #1e293b 100%
  );
}

.nzy-ds .gradient-hero.ds-hero-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 90% 55% at 50% 0%,
    rgb(6 182 212 / 0.12),
    transparent 55%
  );
}

.nzy-ds .gradient-hero.ds-hero-visual > .absolute.inset-0:first-of-type {
  opacity: 0.9;
}

/* 标题：柔和渐变字，减轻光晕 */
.nzy-ds .gradient-hero .ds-brand-wordmark {
  display: inline-block;
  background: linear-gradient(105deg, #f1f5f9 0%, #bae6fd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 统计：细线分区，不用重玻璃 */
.nzy-ds .ds-hero-stats {
  margin-top: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid rgb(51 65 85 / 0.8);
}

.nzy-ds .neon-accent {
  color: var(--color-primary-500);
  text-shadow: 0 0 20px rgb(6 182 212 / 0.25);
}

/* --------------------------------------------------------------------------
   聚焦与减弱动效（WCAG / 用户偏好）
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .nzy-ds .ds-btn,
  .nzy-ds .card-lift,
  .nzy-ds .ds-card,
  .nzy-ds .cyber-border {
    transition: none;
  }

  .nzy-ds .ds-btn:hover:not(:disabled),
  .nzy-ds .card-lift:hover {
    transform: none;
  }

  .nzy-ds .pulse-glow {
    animation: none;
  }

  .nzy-ds .ds-hero-stats {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Skip link 使用 token */
.nzy-ds .skip-link {
  background: var(--color-primary-500);
  color: var(--color-secondary-900);
}

.nzy-ds .skip-link:focus {
  outline: 3px solid var(--color-primary-500);
}

/* 与 Hero banner 一致的海军蓝通栏 — 覆盖 professional-white-navy 的全局白底与字色 */
.nzy-ds section.home-navy-panel {
  position: relative;
  background: linear-gradient(135deg, #1a2b4c 0%, #0f172a 48%, #1e3a5f 100%) !important;
  color: #e2e8f0;
}

.nzy-ds .home-navy-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 80% 50% at 50% 0%,
    rgb(6 182 212 / 0.08),
    transparent 55%
  );
}

.nzy-ds .home-navy-panel > .relative {
  position: relative;
  z-index: 1;
}

/* professional 里 .nex-title / .text-slate-* 带 !important，此处按深蓝场景收回 */
.nzy-ds .home-navy-panel h2.nex-title {
  color: #f1f5f9 !important;
}
.nzy-ds .home-navy-panel h2.nex-title .text-cyan-400 {
  color: #22d3ee !important;
}

.nzy-ds .home-navy-panel .text-slate-300 {
  color: #cbd5e1 !important;
}

.nzy-ds .home-navy-panel .text-slate-300\/90 {
  color: #cbd5e1 !important;
}

.nzy-ds .home-navy-panel .text-slate-400 {
  color: #94a3b8 !important;
}

.nzy-ds .home-navy-panel .text-slate-500 {
  color: #94a3b8 !important;
}

/* 通栏内卡片：略亮于底、带阴影，拉开与海背景的层次 */
.nzy-ds .home-navy-panel .navy-card {
  background: linear-gradient(
    165deg,
    rgb(30 41 59 / 0.92) 0%,
    rgb(15 23 42 / 0.88) 100%
  ) !important;
  border: 1px solid rgb(103 232 249 / 0.28) !important;
  box-shadow: 0 8px 32px rgb(0 0 0 / 0.22);
  color: #e2e8f0 !important;
}

.nzy-ds .home-navy-panel .navy-card h3 {
  color: #ffffff !important;
}

.nzy-ds .home-navy-panel .navy-card p {
  color: #cbd5e1 !important;
}

.nzy-ds .home-navy-panel .navy-card .text-cyan-400 {
  color: #22d3ee !important;
}

/* 首页首段通栏：白底，区外字黑/深灰，青色强调不变；卡片样式继承上方 .navy-card 规则 */
.nzy-ds section.home-navy-panel.home-navy-panel--light {
  background: #ffffff !important;
  color: #0f172a;
}

.nzy-ds section.home-navy-panel.home-navy-panel--light::after {
  display: none;
}

.nzy-ds .home-navy-panel.home-navy-panel--light h2.nex-title {
  color: #0f172a !important;
}

.nzy-ds .home-navy-panel.home-navy-panel--light h2.nex-title .text-cyan-400 {
  color: #22d3ee !important;
}

.nzy-ds .home-navy-panel.home-navy-panel--light .text-slate-300 {
  color: #0f172a !important;
}

.nzy-ds .home-navy-panel.home-navy-panel--light .text-slate-300\/90 {
  color: #1e293b !important;
}

.nzy-ds .home-navy-panel.home-navy-panel--light .text-slate-400 {
  color: #334155 !important;
}

.nzy-ds .home-navy-panel.home-navy-panel--light .text-slate-500 {
  color: #475569 !important;
}

.nzy-ds .home-navy-panel.home-navy-panel--light .text-slate-200 {
  color: #0f172a !important;
}

/* Industry pages 一行：正文深色，链接保持青 */
.nzy-ds .home-navy-panel.home-navy-panel--light p.text-slate-400 a.text-cyan-400 {
  color: #22d3ee !important;
}

.nzy-ds .home-navy-panel.home-navy-panel--light .text-cyan-300 {
  color: #22d3ee !important;
}

.nzy-ds .home-navy-panel.home-navy-panel--light .js-open-contact-modal.text-cyan-300:hover {
  color: #0891b2 !important;
}

/* 浅色通栏内：恢复海军卡内部字色（避免被上方 .text-slate-* 覆盖） */
.nzy-ds .home-navy-panel.home-navy-panel--light .navy-card h3 {
  color: #ffffff !important;
}

.nzy-ds .home-navy-panel.home-navy-panel--light .navy-card p {
  color: #cbd5e1 !important;
}

.nzy-ds .home-navy-panel.home-navy-panel--light .navy-card .text-slate-300 {
  color: #cbd5e1 !important;
}

.nzy-ds .home-navy-panel.home-navy-panel--light .navy-card .text-slate-400 {
  color: #94a3b8 !important;
}

/* 验货弹窗：与通栏统一的深色面板（ds-input 已由本文件定义） */
#inspectionRequestModal h2 {
  color: #5eead4 !important;
}

#inspectionRequestModal .text-slate-400 {
  color: #94a3b8 !important;
}

/* Hero 主按钮：防止被白底主题的全局 .btn 覆盖成错色 */
.nzy-ds .gradient-hero .ds-btn--primary {
  background: linear-gradient(135deg, var(--color-primary-500) 0%, #0284c7 100%) !important;
  color: #fff !important;
}

.nzy-ds .gradient-hero .ds-btn--secondary {
  background: rgb(15 23 42 / 0.45) !important;
  color: #ecfeff !important;
  border: 2px solid rgb(103 232 249 / 0.35) !important;
}

/* 页脚：professional 里 footer { text-align:center; 浅底 } 会打乱栅格与深色主题 */
.nzy-ds footer.site-footer {
  text-align: left !important;
  background: rgb(30 41 59) !important;
  border-top: 1px solid rgb(51 65 85) !important;
  margin-top: 0 !important;
}

.nzy-ds footer.site-footer .site-footer__heading {
  color: #22d3ee !important;
  margin-bottom: 0.75rem !important;
}

.nzy-ds footer.site-footer .site-footer__brand {
  color: #22d3ee !important;
}

.nzy-ds footer.site-footer a.site-footer__link {
  color: #94a3b8 !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  text-decoration: none !important;
}

.nzy-ds footer.site-footer a.site-footer__link:hover {
  color: #67e8f9 !important;
}

.nzy-ds footer.site-footer .site-footer__btn {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: #94a3b8 !important;
  font: inherit;
  cursor: pointer;
}

.nzy-ds footer.site-footer .site-footer__btn:hover {
  color: #67e8f9 !important;
}

/* 全局 nav { justify-content: space-between } 会让页脚 nav 在整行拉高时把列表挤到底部 */
.nzy-ds footer.site-footer nav {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

/* 全局 footer a 会剥掉背景与尺寸，社交图标需单独恢复 */
.nzy-ds footer.site-footer .site-footer__socials a {
  width: 2.5rem !important;
  height: 2.5rem !important;
  min-width: 2.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0.5rem !important;
  background: rgb(51 65 85) !important;
  color: rgb(203 213 225) !important;
}

.nzy-ds footer.site-footer .site-footer__socials a:hover {
  background: rgb(71 85 105) !important;
  color: rgb(241 245 249) !important;
}