/* === 1. 全局样式 === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
--bg:      #f4f8ff;
--bg2:     #eaf2ff;
--surface: #ffffff;
--navy:    #0a1f44;
--deep:    #0d2a5e;
--mid:     #1a3a7a;
--teal:    #0072c6;
--teal2:   #00b8d4;
--teal3:   #00d4aa;
--accent:  #e8473f;
--text:    #1a2740;
--muted:   #5a6e8c;
--glass:   rgba(0,114,198,.07);
--border:  rgba(0,114,198,.15);
--white:   #ffffff;
--line-sep: rgba(0, 114, 198, 0.1); 
}

html { scroll-behavior: smooth; }

body {
background: var(--bg);
color: var(--text);
font-family: 'Outfit', 'Noto Sans SC', sans-serif;
overflow-x: hidden;
}

body::before {
content:'';
position:fixed; inset:0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");
pointer-events:none; z-index:0;
}

/* === 2. 导航栏样式 === */
nav {
	position: fixed; top: 0; left: 0; right: 0; z-index: 100;
	display: flex; align-items: center; justify-content: space-between;
	padding: 20px 60px;
	background: rgba(244,248,255,.92);
	backdrop-filter: blur(16px);
	border-bottom: 1px solid rgba(0,114,198,.1);
	box-shadow: 0 2px 20px rgba(0,50,120,.06);
	animation: fadeDown .8s ease both;
}
	@keyframes fadeDown { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:none} }

	.logo { display:flex; flex-direction:column; gap:2px; text-decoration:none; }
	.logo-cn { font-family:'Noto Sans SC'; font-size:16px; font-weight:600; color:var(--teal); letter-spacing:4px; }
	.logo-en {
	font-family:'Outfit'; font-size:20px; font-weight:800;
	letter-spacing:3px;
	background: linear-gradient(90deg, var(--navy) 0%, var(--teal) 100%);
	-webkit-background-clip:text; -webkit-text-fill-color:transparent;
}

	.nav-links { display:flex; gap:36px; list-style:none; align-items:center; }
	.nav-links a {
	font-size:14px; font-weight:400; color:var(--muted);
	text-decoration:none; letter-spacing:.5px;
	position:relative; padding-bottom:4px;
	transition: color .3s;
}
	.nav-links a:hover, .nav-links a.active { color:var(--teal); }
	.nav-links a::after {
	content:''; position:absolute; bottom:0; left:0; right:100%; height:1.5px;
	background: var(--teal); transition: right .3s;
}
	/*.nav-links a:hover { color:var(--teal); }*/
	.nav-links a:hover::after { right:0; }

	.nav-en {
	font-size:16px; font-weight:600; color:var(--white);
	background: var(--teal);
	border-radius:20px; padding:7px 20px; text-decoration:none;
	transition: background .3s, transform .2s;
	box-shadow: 0 4px 14px rgba(0,114,198,.25);
}
	.nav-en:hover { background:var(--deep); transform:translateY(-1px); }

/* === 3. hero样式 === */
.hero {
    position:relative; height:100vh; min-height:700px;
    display:flex; align-items:center;
    overflow:hidden;
    background: linear-gradient(135deg, #e4effe 0%, #f4f8ff 55%, #e0f7f4 100%);
  }

  .orb {
    position:absolute; border-radius:50%;
    filter: blur(90px); opacity:.6; pointer-events:none;
    animation: drift 12s ease-in-out infinite alternate;
  }
  .orb1 { width:560px;height:560px; background:radial-gradient(circle,rgba(0,114,198,.2),transparent 70%); top:-100px;right:8%; animation-delay:0s; }
  .orb2 { width:400px;height:400px; background:radial-gradient(circle,rgba(0,184,212,.22),transparent 70%); bottom:5%;right:20%; animation-delay:-4s; }
  .orb3 { width:340px;height:340px; background:radial-gradient(circle,rgba(0,212,170,.18),transparent 70%); top:25%;left:3%; animation-delay:-8s; }
  @keyframes drift {
    from { transform: translate(0,0) scale(1); }
    to   { transform: translate(30px,40px) scale(1.12); }
  }

  #dnaCanvas {
    position:absolute; right:0; top:0; width:58%; height:100%;
    opacity:1;
  }

  .grid-bg {
    position:absolute; inset:0; pointer-events:none;
    background-image:
      linear-gradient(rgba(0,114,198,.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,114,198,.05) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 70% 70% at 20% 50%, black 30%, transparent 80%);
  }

  .hero-content {
    position:relative; z-index:10;
    padding-left:clamp(40px,6vw,100px);
    max-width:700px;
    animation: heroIn 1.2s cubic-bezier(.22,1,.36,1) .3s both;
  }
  @keyframes heroIn { from{opacity:0;transform:translateX(-40px)} to{opacity:1;transform:none} }

  .hero-tag {
    display:inline-flex; align-items:center; gap:8px;
    font-size:16px; font-weight:600; letter-spacing:3px; text-transform:uppercase;
    color:var(--teal); border:1px solid rgba(0,114,198,.2);
    padding:7px 16px; border-radius:20px;
    background: rgba(0,114,198,.06);
    margin-bottom:30px;
    backdrop-filter: blur(8px);
  }
  .hero-tag span { width:6px;height:6px;border-radius:50%;background:var(--teal);animation:pulse 2s infinite; }
  @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }

  .hero-title { font-family:'Outfit'; font-size:clamp(42px,5vw,64px); font-weight:800; line-height:1.1; color:var(--navy); margin-bottom:24px; }
  .hero-title em {
    font-style:normal;
    background: linear-gradient(135deg, var(--teal) 0%, var(--teal2) 50%, var(--teal3) 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  }

  .hero-subtitle {
    font-family:'Noto Sans SC'; font-size:clamp(15px,1.8vw,18px);
    font-weight:400; color:var(--muted);
    line-height:1.8; max-width:480px; margin-bottom:44px;
  }

  .hero-ctas { display:flex; gap:16px; flex-wrap:wrap; }

  .btn-primary {
    display:inline-flex; align-items:center; gap:10px;
    background: linear-gradient(135deg, var(--teal) 0%, var(--teal2) 100%);
    color:#fff; font-weight:700; font-size:15px; letter-spacing:.5px;
    padding:14px 32px; border-radius:50px; text-decoration:none;
    box-shadow: 0 8px 28px rgba(0,114,198,.35);
    transition: transform .25s, box-shadow .25s;
  }
  .btn-primary:hover { transform:translateY(-2px); box-shadow:0 12px 36px rgba(0,114,198,.5); }

  .btn-ghost {
    display:inline-flex; align-items:center; gap:10px;
    background: white; color:var(--navy);
    font-weight:600; font-size:15px;
    padding:13px 32px; border-radius:50px; text-decoration:none;
    border:1.5px solid rgba(0,114,198,.2);
    box-shadow: 0 4px 16px rgba(0,50,120,.08);
    transition: border-color .25s, box-shadow .25s;
  }
  .btn-ghost:hover { border-color:var(--teal); box-shadow:0 6px 24px rgba(0,114,198,.15); }

  .arrow { display:inline-block; transition:transform .3s; }
  .btn-primary:hover .arrow, .btn-ghost:hover .arrow { transform:translateX(4px); }

  .hero-stats {
    position:absolute; bottom:50px; left:clamp(40px,6vw,100px);
    z-index:10; display:flex; gap:48px;
    animation: heroIn 1.2s cubic-bezier(.22,1,.36,1) .8s both;
  }
  .stat-item { display:flex; flex-direction:column; gap:4px; }
  .stat-num {
    font-size:clamp(26px,3vw,38px); font-weight:800;
    background:linear-gradient(90deg, var(--navy), var(--teal));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  }
  .stat-label { font-family:'Noto Sans SC'; font-size:12px; color:var(--muted); letter-spacing:2px; }
  .stat-divider { width:1px; background:rgba(0,114,198,.15); align-self:stretch; }

  section { position:relative; z-index:1; }

/* === 4. 页尾 footer === */
footer {
    background: var(--navy); 
    color: var(--white);
    padding: 100px 60px 40px;
    position: relative;
    z-index: 10;
  }
  .footer-container {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 0.8fr 1.6fr 0.8fr;
    gap: 40px;
  }
  .footer-brand .logo {
    margin-bottom: 24px;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-brand p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.8;
    max-width: 280px;
  }
  .footer-col h4 {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--teal2); 
    margin-bottom: 30px;
    text-transform: uppercase;
  }
  .footer-col ul { list-style: none; }
  .footer-col ul li { margin-bottom: 12px; }
  .footer-col ul a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 13px;
    transition: all 0.3s;
  }
  .footer-col ul a:hover { color: var(--white); }
  .contact-info { display: flex; flex-direction: column; gap: 20px; }
  .contact-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
  }
  .contact-icon-placeholder {
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .contact-icon-placeholder img { max-width: 100%; max-height: 100%; object-fit: contain; }
  .footer-qr { display: flex; flex-direction: column; align-items: center; }
  .footer-qr .qr-box {
    width: 100px; height: 100px;
    padding: 8px; background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px; margin-bottom: 12px;
    display: flex; align-items: center; justify-content: center;
  }
  .footer-qr span { font-size: 12px; color: rgba(255,255,255,0.4); }
  .footer-bottom {
    max-width: 1300px; margin: 80px auto 0;
    padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex; justify-content: space-between; align-items: center;
    font-size: 12px; color: rgba(255, 255, 255, 0.25);
  }

  @media (max-width: 1024px) {
    .footer-container { grid-template-columns: 1fr 1fr; }
  }

/* ================== 5. 移动端/平板 适配 ================== */
/* ================== 移动端导航 ================== */
.menu-toggle {
    display: none;
    font-size: 26px;
    cursor: pointer;
}

/* ================== 响应式核心 ================== */

/* ===== 平板 ===== */
@media (max-width: 1024px) {
    nav {
        padding: 16px 30px;
    }
}

/* ===== 手机 ===== */
.menu-toggle {
  display: none;
  font-size: 22px;
  cursor: pointer;
}

@media (max-width: 768px) {

	/* ===== NAV ===== */
	  nav {
	    padding: 14px 20px;
	  }

	  .nav-links {
	    display: none; /* 隐藏原菜单 */
	  }

	  .nav-en {
	    padding: 6px 14px;
	    font-size: 13px;
	  }

	  .logo-cn {
	    font-size: 13px;
	    letter-spacing: 2px;
	  }

	  .logo-en {
	    font-size: 16px;
	  }

	  .menu-toggle {
    display: block;
	  }

	  .nav-links.active {
	    display: flex;
	    position: absolute;
	    top: 60px;
	    left: 0;
	    right: 0;
	    flex-direction: column;
	    background: white;
	    padding: 20px;
	    gap: 16px;
	    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
	  }


    /* ===== Hero ===== */
    .hero {
        height: auto;
        padding: 120px 0 60px;
    }

    .hero-content {
        padding: 0 20px;
    }

    .hero-title {
        font-size: 32px;
    }

    #dnaCanvas {
        display: none;
    }

    .grid-bg {
        display: none;
    }
}