/* ============================================
   英同科技 - 企业站样式 (xtech 完整复刻)
   ============================================ */

:root {
  --primary: #1677ff;
  --primary-hover: #4096ff;
  --primary-bg: #e6f4ff;
  --accent: #f5a623;
  --text: #1d2129;
  --text-secondary: #4e5969;
  --text-muted: #86909c;
  --bg: #ffffff;
  --bg-section: #f7f8fa;
  --border: #e5e6eb;
  --radius: 4px;
  --max-width: 1100px;
  --nav-height: 64px;
  --font: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f0f0f0; }
::-webkit-scrollbar-thumb { background: #c0c0c0; border-radius: 3px; }

/* ====== Keyframes ====== */
@keyframes fadeInUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInScale { from{opacity:0;transform:scale(0.95)} to{opacity:1;transform:scale(1)} }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }

/* ====== Particle ====== */
#particle-canvas {
  position:fixed; top:0; left:0;
  width:100vw; height:100vh;
  pointer-events:none; z-index:0; opacity:0.35;
}

/* ====== Section ====== */
.section { padding: 96px 0; position: relative; z-index: 1; }
.section-header { text-align: center; margin-bottom: 56px; }

.section-tag {
  display:inline-block; padding:4px 12px; border-radius:4px;
  font-size:12px; font-weight:600; color:var(--primary);
  background:var(--primary-bg); margin-bottom:12px; letter-spacing:1px;
}
.section-title {
  font-size:clamp(26px,3vw,36px); font-weight:700;
  margin-bottom:12px; letter-spacing:-0.5px;
}
.title-bar { width:40px; height:3px; background:var(--primary); border-radius:2px; margin:0 auto 16px; }
.section-desc {
  font-size:15px; color:var(--text-secondary);
  max-width:520px; margin:0 auto; line-height:1.7;
}

/* ====== Navbar ====== */
#navbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  transition:all 0.3s; padding:0 24px;
}
#navbar.scrolled {
  background:rgba(255,255,255,0.92); backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--border);
}
.nav-inner { max-width:var(--max-width); margin:0 auto; display:flex; align-items:center; justify-content:space-between; height:var(--nav-height); }
.nav-logo { display:flex; flex-direction:column; gap:0; text-decoration:none; line-height:1.2; }
.logo-brand { font-size:18px; font-weight:800; color:#fff; letter-spacing:0.5px; }
.logo-sub { font-size:11px; font-weight:500; color:rgba(255,255,255,0.65); letter-spacing:2px; }
#navbar.scrolled .logo-brand { color:var(--text); }
#navbar.scrolled .logo-sub { color:var(--text-muted); }

.nav-links { display:flex; list-style:none; gap:4px; }
.nav-link {
  padding:8px 16px; font-size:14px; font-weight:500;
  color:rgba(255,255,255,0.8); text-decoration:none; border-radius:6px; transition:all 0.2s;
}
.nav-link:hover { color:#fff; background:rgba(255,255,255,0.08); }
.nav-link.active { color:#fff; font-weight:600; }
#navbar.scrolled .nav-link { color:var(--text-secondary); }
#navbar.scrolled .nav-link:hover { color:var(--primary); background:var(--primary-bg); }
#navbar.scrolled .nav-link.active { color:var(--primary); }

.nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; }
.nav-toggle span { display:block; width:22px; height:2px; background:#fff; border-radius:1px; transition:all 0.3s; }
#navbar.scrolled .nav-toggle span { background:var(--text); }

/* ====== Hero ====== */
.hero-section {
  position:relative; min-height:100vh; display:flex;
  align-items:flex-start; justify-content:center; overflow:hidden;
  padding:140px 24px 40px; z-index:1; background:#031d6a;
}
.hero-parallax {
  position:absolute; top:-3%; left:-3%; width:106%; height:103%;
  background:#031d6a url(../images/hero-bg.jpg) repeat scroll center 0;
  background-size:cover; pointer-events:none; z-index:0; will-change:transform;
}
.hero-content { position:relative; z-index:2; text-align:center; max-width:720px; }
.hero-badge {
  display:inline-flex; align-items:center; gap:6px; padding:4px 14px;
  border-radius:20px; font-size:13px; font-weight:500;
  color:rgba(255,255,255,0.85); background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.15); margin-bottom:20px;
}
.badge-dot { width:6px; height:6px; border-radius:50%; background:#40a9ff; animation:pulse 2s ease infinite; }
.hero-title { margin-bottom:14px; }
.hero-title span { display:block; font-size:clamp(32px,7vw,64px); font-weight:800; letter-spacing:-1px; line-height:1.15; color:#fff; }
.hero-sub {
  background:linear-gradient(135deg,#40a9ff,#69c0ff);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  font-size:clamp(24px,5vw,48px)!important; margin-top:4px;
}
.hero-slogan {
  font-size:clamp(18px,3vw,28px); font-weight:700; color:var(--accent);
  margin-bottom:12px; letter-spacing:4px; min-height:36px;
  display:flex; align-items:center; justify-content:center; gap:2px;
}
.hero-slogan .char { opacity:0; transition:opacity 0.8s ease; }
.hero-slogan .char.show { opacity:1; }
.hero-desc { font-size:15px; color:rgba(255,255,255,0.7); margin-bottom:28px; line-height:1.8; max-width:520px; margin:0 auto 28px; }
.hero-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

.btn {
  display:inline-flex; align-items:center; gap:6px; padding:12px 28px;
  border-radius:8px; text-decoration:none; font-size:15px; font-weight:600; transition:all 0.25s; cursor:pointer;
}
.btn-primary { background:var(--primary); color:#fff; box-shadow:0 4px 14px rgba(22,119,255,0.3); }
.btn-primary:hover { background:var(--primary-hover); transform:translateY(-1px); box-shadow:0 6px 20px rgba(22,119,255,0.35); }
.btn-primary .btn-arrow { transition:transform 0.25s; }
.btn-primary:hover .btn-arrow { transform:translateX(3px); }
.btn-ghost { border:1px solid rgba(255,255,255,0.25); color:#fff; background:transparent; }
.btn-ghost:hover { border-color:#40a9ff; color:#fff; background:rgba(255,255,255,0.08); }

.scroll-indicator {
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:rgba(255,255,255,0.4); animation:float 2s ease-in-out infinite; z-index:2;
}
.scroll-text { font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:2px; }
.scroll-line { width:1px; height:24px; background:rgba(255,255,255,0.3); opacity:0.5; }

/* ====== Products — xtech "自然好用的设计" 风格 ====== */
.products-section { background:var(--bg-section); }

.design-box-wrapper {
  display:flex; align-items:flex-start; justify-content:center; gap:32px;
}
.design-item-link {
  display:inline-block; width:33.33%; max-width:320px;
  color:#5e6e7d; font-size:14px; text-decoration:none; cursor:pointer;
  opacity:0; transform:translateY(30px);
  transition:all 0.4s cubic-bezier(0.16,1,0.3,1);
}
.design-item-link.visible { opacity:1; transform:translateY(0); }
.design-box { position:relative; margin:auto; text-align:center; }

.design-box .design-image {
  position:relative; z-index:1; display:flex; align-items:center; justify-content:center;
  width:180px; height:180px; margin:20px auto 32px; background:#fff;
  border-radius:180px; transition:box-shadow 0.3s ease-out,transform 0.3s ease-out;
}
.design-item-link:hover .design-image {
  box-shadow:0 24px 48px rgba(10,64,115,0.18)!important;
  transform:translateY(-6px);
}
.design-box .title { margin:8px auto; color:#0d1a26; font-size:20px; font-weight:600; }
.design-box .description { width:240px; margin:0 auto; color:var(--text-secondary); font-size:13px; line-height:1.8; }

/* ====== About — xtech "简单可靠的技术" 风格 ====== */
.about-section {
  color:#fff; text-align:center;
  background:url(../images/wave-bg.svg) no-repeat top;
  background-size:cover;
  overflow:hidden;
}
.about-section .section-tag { background:rgba(255,255,255,0.1); color:#fff; }

.technology-list {
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  max-width:960px; margin:0 auto;
}
.technology-item {
  background:linear-gradient(180deg,#2469f4,#113bbf);
  box-shadow:0 16px 40px #0f2da0;
  transition:transform 0.3s cubic-bezier(.645,.045,.355,1),box-shadow 0.3s cubic-bezier(.645,.045,.355,1);
  border-radius:4px; position:relative; height:280px; overflow:hidden;
  opacity:0; transform:translateY(30px);
  transition:all 0.5s cubic-bezier(0.16,1,0.3,1);
}
.technology-item.visible { opacity:1; transform:translateY(0); }
.technology-item:hover { box-shadow:0 20px 40px #0f2da0; transform:translateY(-4px); }
.technology-item.visible:hover { transform:translateY(-4px); }

.technology-item-bg {
  position:absolute; bottom:0; left:0; display:flex; justify-content:center; width:100%; pointer-events:none;
}
.technology-item-desc {
  position:relative; z-index:1; padding:48px 32px 32px;
}
.technology-item-desc h4 { color:#fff; font-size:22px; font-weight:600; margin-bottom:16px; }
.technology-item-desc p { color:rgba(255,255,255,0.75); font-size:13px; line-height:1.9; text-align:left; }

/* ====== Contact ====== */
.contact-section { background:var(--bg-section); }
.contact-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:800px; margin:0 auto; }
.contact-card {
  text-align:center; padding:36px 20px; border-radius:8px;
  background:var(--bg-card); border:1px solid var(--border);
  transition:all 0.3s; opacity:0; transform:translateY(30px);
}
.contact-card.visible { opacity:1; transform:translateY(0); }
.contact-card:hover { border-color:var(--primary); box-shadow:0 8px 24px rgba(0,0,0,0.06); transform:translateY(-4px); }
.contact-card.visible:hover { transform:translateY(-4px); }
.contact-icon {
  width:48px; height:48px; border-radius:12px; background:var(--primary-bg);
  display:flex; align-items:center; justify-content:center; margin:0 auto 14px; color:var(--primary);
}
.contact-label { font-size:13px; font-weight:600; color:var(--text-muted); margin-bottom:6px; letter-spacing:0.5px; }
.contact-value { font-size:14px; color:var(--text); text-decoration:none; display:block; word-break:break-word; }
.contact-card a.contact-value:hover { color:var(--primary); }

/* ====== Footer ====== */
.footer { background:#1d2129; color:rgba(255,255,255,0.8); padding:56px 0 28px; z-index:1; position:relative; }
.footer-top { display:flex; justify-content:space-between; gap:48px; margin-bottom:40px; flex-wrap:wrap; }
.footer-logo { margin-bottom:12px; }
.footer-logo-brand { font-size:18px; font-weight:800; color:#fff; display:block; }
.footer-logo-sub { font-size:11px; font-weight:500; color:rgba(255,255,255,0.5); letter-spacing:2px; }
.footer-tagline { font-size:13px; color:rgba(255,255,255,0.5); margin-bottom:6px; }
.footer-email { font-size:13px; color:rgba(255,255,255,0.35); }
.footer-links { display:flex; gap:48px; flex-wrap:wrap; }
.footer-col { display:flex; flex-direction:column; gap:8px; min-width:120px; }
.footer-col h4 { font-size:13px; font-weight:700; color:#fff; margin-bottom:6px; letter-spacing:1px; }
.footer-col a, .footer-col span { font-size:13px; color:rgba(255,255,255,0.5); text-decoration:none; transition:color 0.2s; line-height:1.8; }
.footer-col a:hover { color:var(--primary-hover); }
.footer-bottom { padding-top:20px; border-top:1px solid rgba(255,255,255,0.08); text-align:center; font-size:12px; color:rgba(255,255,255,0.3); }

/* ====== Responsive ====== */
@media (max-width: 1024px) {
  .design-box-wrapper { gap:24px; }
  .design-box .design-image { width:150px; height:150px; }
  .design-box .description { width:200px; }
}
@media (max-width: 900px) {
  .technology-list { grid-template-columns:1fr 1fr; }
  .technology-item:last-child { grid-column:1/-1; max-width:400px; margin:0 auto; }
}
@media (max-width: 768px) {
  .hero-section { min-height:90vh; padding:80px 16px 40px; }
  .section { padding:64px 0; }
  .design-box-wrapper { flex-direction:column; align-items:center; }
  .design-item-link { width:80%; max-width:320px; }
  .technology-list { grid-template-columns:1fr; }
  .technology-item { height:auto; min-height:220px; }
  .contact-grid { grid-template-columns:1fr; max-width:400px; }

  .nav-links {
    position:fixed; top:var(--nav-height); left:0; right:0;
    flex-direction:column; background:rgba(255,255,255,0.98);
    backdrop-filter:blur(20px); border-bottom:1px solid var(--border);
    padding:16px; gap:4px; transform:translateY(-100%); opacity:0;
    pointer-events:none; transition:all 0.3s;
  }
  .nav-links.open { transform:translateY(0); opacity:1; pointer-events:all; }
  .nav-links .nav-link { color:var(--text-secondary) !important; }
  .nav-links .nav-link.active { color:var(--primary) !important; }

  .nav-toggle { display:flex; }
  .nav-toggle.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
  .nav-toggle.active span:nth-child(2) { opacity:0; }
  .nav-toggle.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }
}