/* ===== 1. Theme Vars ===== */
/* ============================================
   Jucheng Pipe Design System
   东莞俱成管业 - 工业科技蓝主题
   ============================================ */

:root {
  /* ---- Brand Primary: Deep Industrial Blue (高对比) ---- */
  --jc-blue-50: #EEEFF7;
  --jc-blue-100: #DCDDF0;
  --jc-blue-200: #C0C1E2;
  --jc-blue-300: #9D9ED2;
  --jc-blue-400: #7677BE;
  --jc-blue-500: #5A5BB1;
  --jc-blue-600: #4E4EA4;   /* 主色 - 深蓝 */
  --jc-blue-700: #40408E;
  --jc-blue-800: #31337B;
  --jc-blue-900: #20215C;   /* 深夜蓝 */
  --jc-blue-950: #15153A;   /* 极致深蓝 */

  /* ---- Accent: Industrial Amber (工业琥珀橙-高对比CTA) ---- */
  --jc-amber-50: #FAF4EA;
  --jc-amber-100: #F5E9D6;
  --jc-amber-200: #EED7B5;
  --jc-amber-300: #E4C08B;
  --jc-amber-400: #DAAA62;
  --jc-amber-500: #DAAA62;   /* 主CTA色 */
  --jc-amber-600: #C5954F;
  --jc-amber-700: #A87A38;
  --jc-amber-800: #87622E;
  --jc-amber-900: #684A23;

  /* ---- Core: Black & White ---- */
  --jc-white: #FFFFFF;
  --jc-black: #000000;

  /* ---- Neutral: Steel Gray (钢铁灰) ---- */
  --jc-gray-50: #F5F6F8;
  --jc-gray-100: #E8EAEE;
  --jc-gray-200: #D0D4DB;
  --jc-gray-300: #A9B0BC;
  --jc-gray-400: #7E8796;
  --jc-gray-500: #5C6575;
  --jc-gray-600: #454D5C;
  --jc-gray-700: #333945;
  --jc-gray-800: #222731;
  --jc-gray-900: #12151C;   /* 接近黑的深钢灰 */
  --jc-gray-950: #0A0C11;

  /* ---- State Colors ---- */
  --state-success: #0E8A4B;
  --state-success-bg: #D6F5E4;
  --state-warning: #B5651D;
  --state-warning-bg: #FFF0D6;
  --state-error: #C5221F;
  --state-error-bg: #FFE1E0;
  --state-info: #0A4A8F;
  --state-info-bg: #E6F0FA;

  /* ---- CTA: Industrial Amber ---- */
  --cta-amber-500: #DAAA62;
  --cta-amber-600: #C5954F;
  --cta-amber-700: #A87A38;

  /* ---- Radius Scale (工业硬朗风-更小圆角) ---- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-full: 9999px;

  /* ---- Typography ---- */
  --font-sans: 'Inter', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Source Han Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Consolas', 'Liberation Mono', monospace;
  --font-display: var(--font-sans);

  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */
  --text-4xl: 2.25rem;   /* 36px */
  --text-5xl: 3rem;      /* 48px */

  --leading-tight: 1.25;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  /* ---- Spacing ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 160px;
  --space-12: 192px;
  --space-13: 224px;
  --space-14: 256px;
  --space-15: 320px;

  /* ---- Shadow (border-led for static surfaces) ---- */
  --shadow-sm: 0 1px 2px rgba(20, 24, 31, 0.05);
  --shadow-md: 0 4px 12px rgba(20, 24, 31, 0.08);
  --shadow-lg: 0 12px 32px rgba(20, 24, 31, 0.12);

  /* ---- Semantic Aliases (for apply-html-head-contract) ---- */
  --jc-background: #FFFFFF;
  --jc-foreground: var(--jc-gray-900);
  --jc-card: #FFFFFF;
  --jc-card-foreground: var(--jc-gray-900);
  --jc-popover: #FFFFFF;
  --jc-popover-foreground: var(--jc-gray-900);
  --jc-primary: var(--jc-blue-600);
  --jc-primary-foreground: #FFFFFF;
  --jc-secondary: var(--jc-amber-500);
  --jc-secondary-foreground: #FFFFFF;
  --jc-accent: var(--jc-amber-500);
  --jc-accent-foreground: #FFFFFF;
  --jc-muted: var(--jc-gray-100);
  --jc-muted-foreground: var(--jc-gray-600);
  --jc-border: var(--jc-gray-200);
  --jc-input: var(--jc-gray-200);
  --jc-ring: var(--jc-blue-500);
  --jc-destructive: var(--state-error);
  --jc-destructive-foreground: #FFFFFF;
  --jc-radius-sm: var(--radius-sm);
  --jc-radius-md: var(--radius-md);
  --jc-radius-lg: var(--radius-lg);
  --jc-radius-small: var(--radius-sm);
  --jc-radius-medium: var(--radius-md);
  --jc-radius-large: var(--radius-lg);

  /* unprefixed aliases */
  --background: var(--jc-background);
  --foreground: var(--jc-foreground);
  --card: var(--jc-card);
  --card-foreground: var(--jc-card-foreground);
  --primary: var(--jc-primary);
  --primary-foreground: var(--jc-primary-foreground);
  --secondary: var(--jc-secondary);
  --secondary-foreground: var(--jc-secondary-foreground);
  --accent: var(--jc-accent);
  --accent-foreground: var(--jc-accent-foreground);
  --destructive: var(--jc-destructive);
  --destructive-foreground: var(--jc-destructive-foreground);
  --muted: var(--jc-muted);
  --muted-foreground: var(--jc-muted-foreground);
  --border: var(--jc-border);
  --input: var(--jc-input);
  --ring: var(--jc-ring);
  --radius-small: var(--radius-sm);
  --radius-medium: var(--radius-md);
  --radius-large: var(--radius-lg);

  /* ---- Page Surface Tokens ---- */
  --page-bg: #FFFFFF;
  --page-surface: var(--jc-gray-50);
  --page-surface-muted: var(--jc-gray-100);
  --page-text: var(--jc-gray-900);
  --page-text-secondary: var(--jc-gray-700);
  --page-text-muted: var(--jc-gray-500);
  --page-text-disabled: var(--jc-gray-400);
  --page-border: var(--jc-gray-200);
  --page-brand: var(--jc-blue-600);
  --page-brand-hover: var(--jc-blue-700);
  --page-brand-active: var(--jc-blue-800);
  --page-brand-soft: var(--jc-blue-50);
  --page-brand-soft-strong: var(--jc-blue-100);
  --page-brand-text: var(--jc-blue-800);

  /* ---- Dark Surface Tokens (工业深色区域) ---- */
  --dark-surface: var(--jc-blue-900);
  --dark-surface-2: var(--jc-blue-950);
  --dark-text: #FFFFFF;
  --dark-text-secondary: var(--jc-blue-100);
  --dark-text-muted: var(--jc-blue-200);
  --dark-border: rgba(255, 255, 255, 0.1);
  --dark-accent: var(--jc-amber-400);

  /* ---- Component: Buttons ---- */
  --btn-height: 44px;
  --btn-height-sm: 36px;
  --btn-height-lg: 52px;
  --btn-padding-x: 24px;
  --btn-padding-x-sm: 16px;

  /* ---- Component: Cards ---- */
  --card-border-width: 1px;
  --card-border-color: var(--jc-gray-200);
  --card-padding: 28px;
  --card-hover-border: var(--jc-blue-300);
  --card-hover-shadow: 0 8px 24px rgba(10, 74, 143, 0.1);
}

/* ---- Dark Mode (optional, for future use) ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --background: var(--jc-gray-900);
    --foreground: var(--jc-gray-50);
    --card: var(--jc-gray-800);
    --card-foreground: var(--jc-gray-50);
    --muted: var(--jc-gray-800);
    --muted-foreground: var(--jc-gray-400);
    --border: var(--jc-gray-700);
    --input: var(--jc-gray-700);
  }
}

/* ---- Base Reset ---- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  color: var(--foreground);
  background: var(--background);
  line-height: var(--leading-normal);
  font-feature-settings: 'cv11', 'ss01';
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* ---- Utility: Container ---- */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

@media (max-width: 768px) {
  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

/* ---- Utility: Section Spacing ---- */
.section {
  padding: var(--space-8) 0;
}

.section-sm {
  padding: var(--space-6) 0;
}

.section-lg {
  padding: var(--space-9) 0;
}

/* ---- Utility: Text ---- */
.text-mono {
  font-family: var(--font-mono);
}

.text-gradient {
  background: linear-gradient(135deg, var(--jc-blue-600), var(--jc-blue-400));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

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

/* ===== 2. Semantic Token Fallback ===== */
.bg-background { background-color: var(--jc-background); }
      .text-background { color: var(--jc-background); }
      .border-background { border-color: var(--jc-background); }
      .ring-background { --tw-ring-color: var(--jc-background); }
      .bg-foreground { background-color: var(--jc-foreground); }
      .text-foreground { color: var(--jc-foreground); }
      .border-foreground { border-color: var(--jc-foreground); }
      .ring-foreground { --tw-ring-color: var(--jc-foreground); }
      .bg-card { background-color: var(--jc-card); }
      .text-card { color: var(--jc-card); }
      .border-card { border-color: var(--jc-card); }
      .ring-card { --tw-ring-color: var(--jc-card); }
      .bg-card-foreground { background-color: var(--jc-card-foreground); }
      .text-card-foreground { color: var(--jc-card-foreground); }
      .border-card-foreground { border-color: var(--jc-card-foreground); }
      .ring-card-foreground { --tw-ring-color: var(--jc-card-foreground); }
      .bg-popover { background-color: var(--jc-popover); }
      .text-popover { color: var(--jc-popover); }
      .border-popover { border-color: var(--jc-popover); }
      .ring-popover { --tw-ring-color: var(--jc-popover); }
      .bg-popover-foreground { background-color: var(--jc-popover-foreground); }
      .text-popover-foreground { color: var(--jc-popover-foreground); }
      .border-popover-foreground { border-color: var(--jc-popover-foreground); }
      .ring-popover-foreground { --tw-ring-color: var(--jc-popover-foreground); }
      .bg-primary { background-color: var(--jc-primary); }
      .text-primary { color: var(--jc-primary); }
      .border-primary { border-color: var(--jc-primary); }
      .ring-primary { --tw-ring-color: var(--jc-primary); }
      .bg-primary-foreground { background-color: var(--jc-primary-foreground); }
      .text-primary-foreground { color: var(--jc-primary-foreground); }
      .border-primary-foreground { border-color: var(--jc-primary-foreground); }
      .ring-primary-foreground { --tw-ring-color: var(--jc-primary-foreground); }
      .bg-secondary { background-color: var(--jc-secondary); }
      .text-secondary { color: var(--jc-secondary); }
      .border-secondary { border-color: var(--jc-secondary); }
      .ring-secondary { --tw-ring-color: var(--jc-secondary); }
      .bg-secondary-foreground { background-color: var(--jc-secondary-foreground); }
      .text-secondary-foreground { color: var(--jc-secondary-foreground); }
      .border-secondary-foreground { border-color: var(--jc-secondary-foreground); }
      .ring-secondary-foreground { --tw-ring-color: var(--jc-secondary-foreground); }
      .bg-muted { background-color: var(--jc-muted); }
      .text-muted { color: var(--jc-muted); }
      .border-muted { border-color: var(--jc-muted); }
      .ring-muted { --tw-ring-color: var(--jc-muted); }
      .bg-muted-foreground { background-color: var(--jc-muted-foreground); }
      .text-muted-foreground { color: var(--jc-muted-foreground); }
      .border-muted-foreground { border-color: var(--jc-muted-foreground); }
      .ring-muted-foreground { --tw-ring-color: var(--jc-muted-foreground); }
      .bg-accent { background-color: var(--jc-accent); }
      .text-accent { color: var(--jc-accent); }
      .border-accent { border-color: var(--jc-accent); }
      .ring-accent { --tw-ring-color: var(--jc-accent); }
      .bg-accent-foreground { background-color: var(--jc-accent-foreground); }
      .text-accent-foreground { color: var(--jc-accent-foreground); }
      .border-accent-foreground { border-color: var(--jc-accent-foreground); }
      .ring-accent-foreground { --tw-ring-color: var(--jc-accent-foreground); }
      .bg-destructive { background-color: var(--jc-destructive); }
      .text-destructive { color: var(--jc-destructive); }
      .border-destructive { border-color: var(--jc-destructive); }
      .ring-destructive { --tw-ring-color: var(--jc-destructive); }
      .bg-destructive-foreground { background-color: var(--jc-destructive-foreground); }
      .text-destructive-foreground { color: var(--jc-destructive-foreground); }
      .border-destructive-foreground { border-color: var(--jc-destructive-foreground); }
      .ring-destructive-foreground { --tw-ring-color: var(--jc-destructive-foreground); }
      .bg-border { background-color: var(--jc-border); }
      .text-border { color: var(--jc-border); }
      .border-border { border-color: var(--jc-border); }
      .ring-border { --tw-ring-color: var(--jc-border); }
      .bg-input { background-color: var(--jc-input); }
      .text-input { color: var(--jc-input); }
      .border-input { border-color: var(--jc-input); }
      .ring-input { --tw-ring-color: var(--jc-input); }
      .bg-ring { background-color: var(--jc-ring); }
      .text-ring { color: var(--jc-ring); }
      .border-ring { border-color: var(--jc-ring); }
      .ring-ring { --tw-ring-color: var(--jc-ring); }

/* ===== 3. Base Utilities ===== */
.no-scrollbar::-webkit-scrollbar { display: none; }
      .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
      [data-icon] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        background-color: currentColor;
      }

/* ===== 4. Shared Header & Footer (source of truth: index.html) ===== */
/* ===== Header ===== */
    .site-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
        background: rgba(255, 255, 255, 0.98);
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        backdrop-filter: blur(10px);
        transition: box-shadow 0.3s ease;
    }

.site-header.scrolled {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }

.header-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 68px;
    }

.logo {
        display: flex;
        flex-direction: column;
        line-height: 1.1;
    }

.logo-img {
        height: 40px;
        width: auto;
        display: block;
    }

.logo-cn {
        font-size: var(--text-xl);
        font-weight: 700;
        color: #FFFFFF;
        letter-spacing: 0.03em;
    }

.logo-en {
        font-size: 11px;
        color: var(--jc-blue-200);
        letter-spacing: 0.15em;
        font-weight: 500;
        margin-top: 2px;
        text-transform: uppercase;
    }

.nav-main {
        display: flex;
        align-items: center;
        gap: var(--space-1);
    }

.nav-main a {
        padding: var(--space-2) var(--space-4);
        font-size: var(--text-sm);
        font-weight: 500;
        color: var(--jc-gray-800);
        border-radius: var(--radius-sm);
        transition: color 0.2s ease, background-color 0.2s ease;
        white-space: nowrap;
    }

.nav-main a:hover {
        color: var(--jc-blue-600);
        background: rgba(78, 78, 164, 0.06);
    }

.nav-main a.active {
        color: var(--jc-blue-600);
        font-weight: 600;
    }

.header-right {
        display: flex;
        align-items: center;
        gap: var(--space-5);
    }

.header-phone {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        font-size: var(--text-xs);
        color: var(--jc-gray-800);
        font-weight: 500;
    }

.header-phone .phone-icon {
        width: 16px;
        height: 16px;
        color: var(--jc-blue-600);
    }

.header-phone .phone-number {
        font-family: var(--font-mono);
        font-size: var(--text-sm);
        font-weight: 600;
        color: var(--jc-gray-900);
    }

.mobile-menu-btn {
        display: none;
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: var(--radius-sm);
        color: #FFFFFF;
    }

/* ===== Footer ===== */
    .site-footer {
        background: var(--jc-gray-900);
        color: var(--jc-gray-400);
        padding-top: var(--space-9);
    }

.footer-grid {
        display: grid;
        grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
        gap: var(--space-7);
        margin-bottom: var(--space-7);
    }

.footer-col-title {
        font-size: var(--text-sm);
        font-weight: 700;
        color: #FFFFFF;
        margin-bottom: var(--space-4);
        letter-spacing: 0.03em;
    }

.footer-brand .logo-cn {
        color: #FFFFFF;
        font-size: var(--text-xl);
    }

.footer-brand .logo-en {
        color: var(--jc-gray-500);
    }

.footer-brand-desc {
        margin-top: var(--space-4);
        font-size: var(--text-sm);
        line-height: var(--leading-relaxed);
        color: var(--jc-gray-400);
        margin-bottom: var(--space-4);
    }

.footer-contact-mini {
        font-size: var(--text-sm);
        color: var(--jc-gray-400);
        line-height: 2;
    }

.footer-contact-mini strong {
        color: var(--jc-amber-400);
        font-family: var(--font-mono);
        font-weight: 600;
    }

.footer-links {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

.footer-links a {
        font-size: var(--text-sm);
        color: var(--jc-gray-400);
        transition: color 0.2s ease;
    }

.footer-links a:hover {
        color: var(--jc-amber-400);
    }

.footer-product-list {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

.footer-product-list a {
        font-size: var(--text-sm);
        color: var(--jc-gray-400);
        transition: color 0.2s ease;
    }

.footer-product-list a:hover {
        color: var(--jc-amber-400);
    }

.footer-qr-wrap {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

.footer-qr {
        width: 110px;
        height: 110px;
        background: #FFFFFF;
        border-radius: var(--radius-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--jc-gray-900);
        font-size: var(--text-xs);
        font-weight: 500;
        text-align: center;
        padding: var(--space-2);
    }

.footer-qr-text {
        font-size: var(--text-xs);
        color: var(--jc-gray-500);
        line-height: 1.6;
    }

.footer-qr-text strong {
        color: #FFFFFF;
        font-weight: 600;
    }

.footer-bottom {
        border-top: 1px solid var(--jc-gray-800);
        padding: var(--space-5) 0;
        font-size: var(--text-xs);
        color: var(--jc-gray-500);
        background: var(--jc-gray-950);
    }

.footer-bottom-inner {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--space-3);
        padding-left: var(--space-5);
        padding-right: var(--space-5);
    }

.footer-bottom a {
        color: var(--jc-gray-500);
    }

.footer-bottom a:hover {
        color: var(--jc-gray-300);
    }