/* =============================================
   LongFit — Global Stylesheet v4.0
   Mobile-first · Bilingual · Smooth UX
   ============================================= */

/* ---------- CSS Variables ---------- */
:root {
  --primary: #00d4ff;
  --primary-dark: #0099bb;
  --secondary: #7b2dff;
  --accent: #ff6b35;
  --bg-dark: #050b18;
  --bg-card: #0d1a2e;
  --bg-card2: #0a1525;
  --border: rgba(0,212,255,0.15);
  --border-hover: rgba(0,212,255,0.4);
  --text-primary: #e8f4ff;
  --text-secondary: #8bacc8;
  --text-muted: #5a7a9a;
  --gradient-1: linear-gradient(135deg,#00d4ff,#7b2dff);
  --gradient-2: linear-gradient(135deg,#7b2dff,#ff6b35);
  --gradient-hero: linear-gradient(135deg,rgba(0,212,255,.1),rgba(123,45,255,.1));
  --font-en: 'Inter', sans-serif;
  --font-zh: 'Noto Sans SC', sans-serif;
  --radius: 16px;
  --radius-sm: 8px;
  --shadow: 0 8px 40px rgba(0,0,0,.4);
  --shadow-glow: 0 0 30px rgba(0,212,255,.2);
  --transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  --nav-h: 64px;
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  background:var(--bg-dark);
  color:var(--text-primary);
  font-family:var(--font-en);
  line-height:1.7;
  overflow-x:hidden;
  /* GPU layer for smooth scroll */
  -webkit-overflow-scrolling:touch;
}
a { text-decoration:none; color:inherit; -webkit-tap-highlight-color:transparent; }
ul { list-style:none; }
img { max-width:100%; display:block; }
button { font-family:inherit; }
.hidden { display:none !important; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--bg-dark); }
::-webkit-scrollbar-thumb { background:var(--primary-dark); border-radius:3px; }

/* ---------- Container ---------- */
.container {
  max-width:1280px;
  margin:0 auto;
  padding:0 20px;
}
@media(min-width:768px){ .container{padding:0 32px;} }

/* =============================================
   NAVBAR
   ============================================= */
.navbar {
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  height:var(--nav-h);
  display:flex;
  align-items:center;
  transition:var(--transition);
  background:transparent;
  will-change:transform;
}
.navbar.scrolled {
  background:rgba(5,11,24,.96);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  box-shadow:0 4px 30px rgba(0,0,0,.3);
}
.navbar.nav-hidden { transform:translateY(-100%); }
.nav-container {
  max-width:1280px;
  margin:0 auto;
  padding:0 20px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.nav-logo {
  display:flex;
  align-items:center;
  text-decoration:none;
  flex-shrink:0;
}
/* ── Image logo (transparent bg) ── */
.nav-logo-img {
  height:50px;
  width:auto;
  max-width:200px;
  object-fit:contain;
  display:block;
  /* 透明背景，无需 brightness 调整 */
  image-rendering:-webkit-optimize-contrast;
  image-rendering:crisp-edges;
  transition:opacity .25s ease;
}
.nav-logo-img:hover { opacity:.82; }

/* Footer logo image */
.footer-logo-link {
  display:inline-block;
  margin-bottom:10px;
}
.footer-logo-img {
  height:40px;
  width:auto;
  max-width:170px;
  object-fit:contain;
  display:block;
  image-rendering:-webkit-optimize-contrast;
  image-rendering:crisp-edges;
}

/* Legacy text logo (kept for fallback reference) */
.logo-text {
  font-size:1.6rem;
  font-weight:800;
  letter-spacing:-1px;
  color:var(--text-primary);
  font-family:var(--font-en);
  line-height:1;
}
.logo-accent { color:var(--primary); }
.logo-tag {
  font-size:0.6rem;
  color:var(--text-muted);
  letter-spacing:2px;
  text-transform:uppercase;
  font-family:var(--font-zh);
  margin-top:2px;
}
.nav-menu {
  display:flex;
  align-items:center;
  gap:4px;
}
.nav-link {
  padding:7px 12px;
  border-radius:var(--radius-sm);
  font-size:0.88rem;
  font-weight:500;
  color:var(--text-secondary);
  transition:var(--transition);
  position:relative;
  white-space:nowrap;
}
.nav-link::after {
  content:'';
  position:absolute;
  bottom:2px; left:50%; right:50%;
  height:2px;
  background:var(--primary);
  transition:var(--transition);
  border-radius:2px;
}
.nav-link:hover,.nav-link.active { color:var(--text-primary); }
.nav-link:hover::after,.nav-link.active::after { left:12px; right:12px; }
.nav-opc {
  color:var(--accent) !important;
}
.nav-opc::after { background:var(--accent) !important; }
.nav-cta {
  background:var(--gradient-1) !important;
  color:#000 !important;
  font-weight:700 !important;
  padding:7px 18px !important;
  border-radius:50px !important;
}
.nav-cta::after { display:none !important; }
.nav-cta:hover { opacity:.9 !important; transform:translateY(-1px); }

.lang-switcher {
  display:flex;
  align-items:center;
  gap:5px;
  font-size:0.78rem;
  color:var(--text-muted);
  margin-left:8px;
  flex-shrink:0;
}
.lang-btn {
  background:none;
  border:none;
  cursor:pointer;
  color:var(--text-muted);
  font-size:0.78rem;
  font-family:var(--font-en);
  padding:4px 7px;
  border-radius:4px;
  transition:var(--transition);
}
.lang-btn.active,.lang-btn:hover { color:var(--primary); }

/* Hamburger */
.hamburger {
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  padding:8px;
  border:none;
  background:none;
  -webkit-tap-highlight-color:transparent;
}
.hamburger span {
  display:block;
  width:22px;
  height:2px;
  background:var(--text-primary);
  border-radius:2px;
  transition:var(--transition);
}
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* =============================================
   HERO
   ============================================= */
.hero {
  position:relative;
  min-height:100svh;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(ellipse 80% 80% at 50% -20%,rgba(0,212,255,.12) 0%,transparent 60%),
    radial-gradient(ellipse 60% 60% at 80% 80%,rgba(123,45,255,.08) 0%,transparent 50%),
    var(--bg-dark);
}
.hero-canvas {
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(0deg,transparent,transparent 79px,rgba(0,212,255,.03) 80px),
    repeating-linear-gradient(90deg,transparent,transparent 79px,rgba(0,212,255,.03) 80px);
}
.hero-particles {
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}
.particle {
  position:absolute;
  border-radius:50%;
  opacity:0;
  animation:floatParticle linear infinite;
}
@keyframes floatParticle {
  0%{transform:translateY(100vh) scale(0);opacity:0}
  10%{opacity:.6}
  90%{opacity:.3}
  100%{transform:translateY(-100px) scale(1.2);opacity:0}
}
.hero-content {
  position:relative;
  z-index:10;
  text-align:center;
  max-width:900px;
  padding:calc(var(--nav-h) + 60px) 20px 60px;
  width:100%;
}
.hero-badge {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(0,212,255,.08);
  border:1px solid rgba(0,212,255,.25);
  border-radius:50px;
  padding:6px 16px;
  font-size:0.82rem;
  color:var(--primary);
  margin-bottom:24px;
  font-family:var(--font-zh);
  animation:fadeInDown .8s ease forwards;
}
.pulse-dot {
  font-size:.5rem;
  animation:pulseDot 1.5s ease-in-out infinite;
}
@keyframes pulseDot {
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.5;transform:scale(1.3)}
}
@keyframes fadeInDown {
  from{opacity:0;transform:translateY(-20px)}
  to{opacity:1;transform:translateY(0)}
}
.hero-title {
  font-size:clamp(2rem,5.5vw,4rem);
  font-weight:800;
  line-height:1.2;
  margin-bottom:20px;
  font-family:var(--font-zh);
}
.hero-title .line1 { display:block; animation:fadeInUp .8s .2s ease both; }
.hero-title .line2 { display:block; animation:fadeInUp .8s .4s ease both; }
.hero-title .line3 { display:block; animation:fadeInUp .8s .6s ease both; }
@keyframes fadeInUp {
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:translateY(0)}
}
.gradient-text {
  background:var(--gradient-1);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero-subtitle {
  font-size:clamp(1rem,2.5vw,1.15rem);
  color:var(--text-secondary);
  margin-bottom:36px;
  font-family:var(--font-zh);
  animation:fadeInUp .8s .7s ease both;
  padding:0 8px;
}
.hero-actions {
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:50px;
  animation:fadeInUp .8s .8s ease both;
}
/* ---------- Buttons ---------- */
.btn {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 26px;
  border-radius:50px;
  font-weight:600;
  font-size:0.92rem;
  cursor:pointer;
  transition:var(--transition);
  border:2px solid transparent;
  font-family:var(--font-zh);
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.btn-primary { background:var(--gradient-1); color:#fff; border-color:transparent; }
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 10px 40px rgba(0,212,255,.3); }
.btn-outline { background:transparent; border-color:var(--border-hover); color:var(--text-primary); }
.btn-outline:hover { background:rgba(0,212,255,.08); border-color:var(--primary); transform:translateY(-3px); }
.btn-outline-light { background:transparent; border-color:rgba(255,255,255,.3); color:#fff; }
.btn-outline-light:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.6); transform:translateY(-3px); }
.btn-lg { padding:15px 34px; font-size:1rem; }

.hero-stats {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:32px;
  flex-wrap:wrap;
  animation:fadeInUp .8s 1s ease both;
}
.stat-item { text-align:center; }
.stat-num { font-size:2.6rem; font-weight:800; color:var(--primary); font-family:var(--font-en); line-height:1; }
.stat-unit { font-size:1.4rem; font-weight:700; color:var(--primary); }
.stat-label { display:block; font-size:0.78rem; color:var(--text-muted); margin-top:4px; font-family:var(--font-zh); }
.stat-divider { width:1px; height:44px; background:var(--border); }

.hero-scroll-indicator {
  position:absolute;
  bottom:30px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  opacity:.4;
  font-size:0.72rem;
  color:var(--text-muted);
  animation:bounce 2s ease-in-out infinite;
  pointer-events:none;
}
.scroll-mouse { width:20px; height:32px; border:2px solid var(--text-muted); border-radius:10px; display:flex; justify-content:center; padding-top:5px; }
.scroll-wheel { width:3px; height:7px; background:var(--text-muted); border-radius:2px; animation:scrollWheel 1.5s ease-in-out infinite; }
@keyframes scrollWheel { 0%{transform:translateY(0);opacity:1} 100%{transform:translateY(9px);opacity:0} }
@keyframes bounce {
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(-8px)}
}

/* =============================================
   TICKER BAR
   ============================================= */
.ticker-bar {
  background:rgba(0,212,255,.05);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:10px 0;
  display:flex;
  align-items:center;
  overflow:hidden;
  position:relative;
}
.ticker-label {
  flex-shrink:0;
  background:var(--gradient-1);
  color:#000;
  font-size:0.72rem;
  font-weight:700;
  padding:3px 14px;
  margin-left:20px;
  margin-right:12px;
  border-radius:4px;
  white-space:nowrap;
  font-family:var(--font-zh);
}
.ticker-track {
  flex:1;
  overflow:hidden;
  position:relative;
  mask-image:linear-gradient(to right,transparent,black 4%,black 96%,transparent);
  -webkit-mask-image:linear-gradient(to right,transparent,black 4%,black 96%,transparent);
}
.ticker-content {
  display:inline-flex;
  gap:44px;
  white-space:nowrap;
  animation:tickerScroll 38s linear infinite;
}
.ticker-content:hover { animation-play-state:paused; }
@keyframes tickerScroll {
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
.ticker-item { display:inline-flex; align-items:center; gap:7px; font-size:0.82rem; font-weight:600; }
.ticker-item .t-name { color:var(--text-secondary); }
.ticker-item .t-price { color:var(--text-primary); font-family:var(--font-en); }
.ticker-item .t-change.up { color:#00e676; }
.ticker-item .t-change.down { color:#ff5252; }
.ticker-loading { color:var(--text-muted); font-size:0.82rem; padding:0 20px; font-family:var(--font-zh); }

/* =============================================
   SECTION COMMONS
   ============================================= */
.section { padding:90px 0; position:relative; }
.section-header { text-align:center; margin-bottom:56px; }
.section-header.light .section-title,
.section-header.light .section-subtitle { color:var(--text-primary); }
.section-tag {
  display:inline-block;
  background:rgba(0,212,255,.1);
  border:1px solid rgba(0,212,255,.3);
  color:var(--primary);
  font-size:0.78rem;
  font-weight:600;
  padding:4px 14px;
  border-radius:50px;
  text-transform:uppercase;
  letter-spacing:1.5px;
  margin-bottom:14px;
  font-family:var(--font-zh);
}
.section-title {
  font-size:clamp(1.7rem,3.5vw,2.6rem);
  font-weight:800;
  color:var(--text-primary);
  margin-bottom:14px;
  font-family:var(--font-zh);
  line-height:1.3;
}
.section-subtitle {
  font-size:clamp(0.95rem,2vw,1.05rem);
  color:var(--text-secondary);
  font-family:var(--font-zh);
}

/* Reveal animation */
.reveal {
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.visible { opacity:1; transform:translateY(0); }
.delay-1 { transition-delay:.1s; }
.delay-2 { transition-delay:.2s; }
.delay-3 { transition-delay:.3s; }
.delay-4 { transition-delay:.4s; }

/* =============================================
   ABOUT SECTION
   ============================================= */
.about-section { background:var(--bg-dark); }
.about-grid {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:60px;
  align-items:center;
}
.about-visual { display:flex; justify-content:center; }
.about-globe-wrap {
  position:relative;
  width:320px;
  height:320px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.globe-ring {
  position:absolute;
  border:1px solid rgba(0,212,255,.2);
  border-radius:50%;
  animation:rotateCCW 20s linear infinite;
}
.ring1 { width:100%;height:100%;animation-duration:20s;border-color:rgba(0,212,255,.15); }
.ring2 { width:78%;height:78%;animation-duration:15s;animation-direction:reverse;border-color:rgba(123,45,255,.2); }
.ring3 { width:56%;height:56%;animation-duration:10s;border-color:rgba(0,212,255,.25); }
@keyframes rotateCCW { from{transform:rotate(0deg)}to{transform:rotate(360deg)} }
.globe-core {
  position:absolute;
  width:90px;height:90px;
  background:var(--gradient-1);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2.2rem;
  color:#fff;
  box-shadow:0 0 50px rgba(0,212,255,.3);
  z-index:5;
}
.globe-node {
  position:absolute;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:7px 10px;
  font-size:0.68rem;
  color:var(--primary);
  white-space:nowrap;
  transition:var(--transition);
  z-index:10;
}
.globe-node:hover { background:rgba(0,212,255,.1);border-color:var(--primary);transform:scale(1.1); }
.globe-node i { font-size:.9rem; }
.globe-node span { font-size:0.62rem;color:var(--text-secondary);font-family:var(--font-en); }
.n1 { top:5%;left:50%;transform:translateX(-50%); }
.n2 { top:30%;right:-8%; }
.n3 { bottom:10%;right:5%; }
.n4 { bottom:10%;left:5%; }
.n5 { top:30%;left:-8%; }

.about-text { font-size:1rem;color:var(--text-secondary);line-height:1.9;margin-bottom:28px;font-family:var(--font-zh); }
.about-pillars { display:grid;grid-template-columns:1fr 1fr;gap:16px; }
.pillar {
  display:flex;
  gap:12px;
  align-items:flex-start;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:16px;
  transition:var(--transition);
}
.pillar:hover { border-color:var(--border-hover);transform:translateY(-2px); }
.pillar-icon {
  width:36px;height:36px;
  background:rgba(0,212,255,.1);
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  color:var(--primary);
  flex-shrink:0;
  font-size:.9rem;
}
.pillar-info h4 { font-size:.85rem;font-weight:700;color:var(--text-primary);font-family:var(--font-zh);margin-bottom:3px; }
.pillar-info p { font-size:.78rem;color:var(--text-muted);font-family:var(--font-zh); }

/* =============================================
   BUSINESS SECTION
   ============================================= */
.business-section { background:var(--bg-card2); }
.business-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.biz-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:32px 24px;
  transition:var(--transition);
  cursor:default;
}
.biz-card:hover {
  transform:translateY(-6px);
  border-color:var(--border-hover);
  box-shadow:var(--shadow-glow);
}
.biz-icon {
  width:56px;height:56px;
  background:var(--gradient-1);
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;
  color:#fff;
  margin-bottom:16px;
}
.biz-num { font-size:0.72rem;color:var(--text-muted);font-family:var(--font-en);letter-spacing:2px;margin-bottom:8px; }
.biz-title { font-size:1.05rem;font-weight:700;color:var(--text-primary);font-family:var(--font-zh);margin-bottom:12px; }
.biz-divider { height:1px;background:var(--border);margin-bottom:16px; }
.biz-list { display:flex;flex-direction:column;gap:10px;margin-bottom:20px; }
.biz-list li { display:flex;gap:8px;align-items:flex-start;font-size:.82rem;color:var(--text-secondary);font-family:var(--font-zh);line-height:1.6; }
.biz-list li i { color:var(--primary);font-size:.7rem;margin-top:4px;flex-shrink:0; }
.biz-tag-wrap { display:flex;flex-wrap:wrap;gap:6px; }
.biz-tag { background:rgba(0,212,255,.08);border:1px solid rgba(0,212,255,.2);color:var(--primary);font-size:.68rem;padding:3px 8px;border-radius:4px;font-family:var(--font-en); }

/* =============================================
   ECOSYSTEM SECTION
   ============================================= */
.ecosystem-section {
  background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(123,45,255,.12) 0%,var(--bg-dark) 70%);
  overflow:hidden;
}
.eco-map-wrap { display:flex;justify-content:center;margin-bottom:60px; }
.eco-center {
  position:relative;
  width:460px;height:460px;
  display:flex;align-items:center;justify-content:center;
}
.eco-core {
  position:relative;
  z-index:10;
}
.eco-core-inner {
  width:110px;height:110px;
  background:var(--gradient-1);
  border-radius:50%;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  font-size:.7rem;
  color:#fff;
  text-align:center;
  gap:3px;
  box-shadow:0 0 60px rgba(0,212,255,.3);
}
.eco-core-inner i { font-size:1.8rem; }
.eco-core-inner span { font-weight:700;font-size:.8rem; }
.eco-core-inner small { font-size:.62rem;opacity:.8; }
.eco-orbits { position:absolute;inset:0; }
.eco-orbit {
  position:absolute;
  border:1px solid rgba(0,212,255,.15);
  border-radius:50%;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  animation:rotateOrbit linear infinite;
}
.orbit-1 { width:240px;height:240px;animation-duration:18s; }
.orbit-2 { width:420px;height:420px;animation-duration:32s;animation-direction:reverse; }
@keyframes rotateOrbit { from{transform:translate(-50%,-50%) rotate(0deg)} to{transform:translate(-50%,-50%) rotate(360deg)} }

.eco-planet {
  position:absolute;
  display:flex;flex-direction:column;
  align-items:center;gap:3px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:7px 10px;
  font-size:.68rem;
  color:var(--primary);
  white-space:nowrap;
  font-family:var(--font-zh);
  /* counter-rotate so text stays upright */
  animation:counterRotate1 18s linear infinite;
}
.orbit-2 .eco-planet { animation-duration:32s;animation-name:counterRotate2; }
@keyframes counterRotate1 { from{transform:rotate(0deg)} to{transform:rotate(-360deg)} }
@keyframes counterRotate2 { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.eco-planet i { font-size:.9rem; }
.eco-planet span { font-size:.62rem;color:var(--text-secondary); }
/* planet positions on orbit-1 */
.p1 { top:-18px;left:50%;transform:translateX(-50%); }
.p2 { top:50%;right:-18px;transform:translateY(-50%); }
.p3 { bottom:-18px;left:50%;transform:translateX(-50%); }
.p4 { top:50%;left:-18px;transform:translateY(-50%); }
/* planet positions on orbit-2 */
.p5 { top:-18px;left:50%;transform:translateX(-50%); }
.p6 { top:50%;right:-18px;transform:translateY(-50%); }
.p7 { bottom:-18px;left:50%;transform:translateX(-50%); }
.p8 { top:50%;left:-18px;transform:translateY(-50%); }

.eco-features {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}
.eco-feat {
  text-align:center;
  padding:28px 20px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  transition:var(--transition);
}
.eco-feat:hover { border-color:var(--border-hover);transform:translateY(-4px); }
.eco-feat-icon {
  width:52px;height:52px;
  background:var(--gradient-1);
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;
  color:#fff;
  margin:0 auto 14px;
}
.eco-feat h4 { font-size:.9rem;font-weight:700;color:var(--text-primary);font-family:var(--font-zh);margin-bottom:6px; }
.eco-feat p { font-size:.8rem;color:var(--text-muted);font-family:var(--font-zh);line-height:1.7; }

/* =============================================
   NEWS PREVIEW SECTION
   ============================================= */
.news-preview-section { background:var(--bg-dark); }
.news-preview-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  min-height:300px;
}
.news-loading {
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:var(--text-muted);
  font-family:var(--font-zh);
  font-size:.9rem;
  padding:60px 0;
}
.loading-spinner {
  width:36px;height:36px;
  border:3px solid var(--border);
  border-top-color:var(--primary);
  border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin { to{transform:rotate(360deg)} }

/* News cards */
.news-card {
  display:flex;
  flex-direction:column;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  transition:var(--transition);
  cursor:pointer;
  text-decoration:none;
  color:inherit;
}
.news-card:hover {
  transform:translateY(-4px);
  border-color:var(--border-hover);
  box-shadow:var(--shadow);
}
.news-card-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px 0;
  gap:8px;
}
.news-source-badge {
  font-size:.68rem;
  font-weight:700;
  padding:3px 8px;
  border-radius:4px;
  border:1px solid;
  font-family:var(--font-en);
  white-space:nowrap;
  flex-shrink:0;
}
.news-time { font-size:.68rem;color:var(--text-muted);font-family:var(--font-en);flex-shrink:0; }
.news-card-body { flex:1;padding:12px 16px; }
.news-cat-tag { font-size:.7rem;font-weight:700;margin-bottom:7px;text-transform:uppercase;letter-spacing:.5px;font-family:var(--font-en); }
.news-card-title { font-size:.9rem;font-weight:700;color:var(--text-primary);font-family:var(--font-en);line-height:1.5;margin-bottom:8px; }
.news-card-desc { font-size:.78rem;color:var(--text-muted);line-height:1.65;font-family:var(--font-en); }
.news-card-footer { padding:10px 16px 14px; }
.news-read-link { font-size:.78rem;font-weight:600;color:var(--primary);display:flex;align-items:center;gap:5px;font-family:var(--font-en); }
.news-more-wrap { text-align:center;margin-top:40px; }

/* =============================================
   OPC SECTION (Homepage)
   ============================================= */
.opc-section { background:var(--bg-card2); }
.opc-bg-glow {
  position:absolute;
  top:-200px;left:50%;
  transform:translateX(-50%);
  width:800px;height:800px;
  background:radial-gradient(circle,rgba(255,107,53,.08) 0%,transparent 70%);
  pointer-events:none;
}
.opc-tag { background:rgba(255,107,53,.1)!important;border-color:rgba(255,107,53,.3)!important;color:var(--accent)!important; }
.opc-hero-banner {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:48px;
  align-items:center;
  background:var(--bg-card);
  border:1px solid rgba(255,107,53,.2);
  border-radius:var(--radius);
  padding:40px;
  margin-bottom:48px;
}
.opc-award-badge {
  display:flex;align-items:center;gap:14px;
  background:rgba(255,107,53,.08);
  border:1px solid rgba(255,107,53,.25);
  border-radius:var(--radius-sm);
  padding:12px 18px;
  margin-bottom:20px;
  width:fit-content;
}
.opc-award-icon { width:40px;height:40px;background:var(--gradient-2);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.9rem;flex-shrink:0; }
.opc-award-num { display:block;font-size:1.4rem;font-weight:800;color:var(--accent);font-family:var(--font-en);line-height:1; }
.opc-award-label { font-size:.72rem;color:var(--text-muted);font-family:var(--font-zh); }
.opc-banner-title { font-size:clamp(1.4rem,3vw,2rem);font-weight:800;font-family:var(--font-zh);margin-bottom:14px;line-height:1.3; }
.opc-banner-desc { font-size:.88rem;color:var(--text-secondary);line-height:1.85;font-family:var(--font-zh);margin-bottom:24px; }
.opc-banner-actions { display:flex;gap:14px;flex-wrap:wrap; }

.opc-stats-grid { display:grid;grid-template-columns:1fr 1fr;gap:16px; }
.opc-stat-card {
  background:var(--bg-card2);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:20px 16px;
  text-align:center;
  transition:var(--transition);
}
.opc-stat-card:hover { border-color:var(--border-hover);transform:translateY(-2px); }
.opc-stat-card--highlight { border-color:rgba(255,107,53,.3);background:rgba(255,107,53,.05); }
.opc-stat-icon { font-size:1.2rem;color:var(--accent);margin-bottom:8px; }
.opc-stat-num { font-size:2rem;font-weight:800;color:var(--accent);font-family:var(--font-en);line-height:1; }
.opc-stat-unit { font-size:1rem;font-weight:700;color:var(--accent); }
.opc-stat-label { font-size:.72rem;color:var(--text-muted);font-family:var(--font-zh);margin-top:4px; }

.opc-services-title { text-align:center;margin-bottom:32px; }
.opc-services-title h3,.opc-services-title-h { font-size:clamp(1.2rem,2.5vw,1.6rem);font-weight:700;font-family:var(--font-zh);color:var(--text-primary); }
.opc-services-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:48px; }
.opc-service-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px 20px;
  transition:var(--transition);
}
.opc-service-card:hover { border-color:var(--border-hover);transform:translateY(-4px); }
.opc-service-icon {
  width:48px;height:48px;
  background:rgba(var(--c, #00d4ff), .1);
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;
  color:var(--c,var(--primary));
  margin-bottom:12px;
}
.opc-service-card h4 { font-size:.9rem;font-weight:700;font-family:var(--font-zh);color:var(--text-primary);margin-bottom:8px; }
.opc-service-card p { font-size:.78rem;color:var(--text-muted);line-height:1.7;font-family:var(--font-zh);margin-bottom:10px; }
.opc-service-tag { font-size:.65rem;color:var(--text-muted);font-family:var(--font-en); }

.opc-process-wrap { margin-bottom:48px; }
.opc-process-wrap h3,.opc-process-wrap .opc-services-title-h { text-align:center;margin-bottom:32px; }
.opc-process-track {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  position:relative;
}
.opc-process-line {
  position:absolute;
  top:28px;left:12.5%;right:12.5%;
  height:2px;
  background:var(--gradient-1);
  opacity:.3;
  pointer-events:none;
}
.opc-process-step { text-align:center;position:relative; }
.opc-step-circle {
  width:56px;height:56px;
  background:var(--gradient-1);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;
  color:#fff;
  margin:0 auto 12px;
  position:relative;
  z-index:2;
}
.opc-step-num { font-size:.65rem;color:var(--text-muted);font-family:var(--font-en);letter-spacing:2px;margin-bottom:6px; }
.opc-process-step h5 { font-size:.9rem;font-weight:700;font-family:var(--font-zh);color:var(--text-primary);margin-bottom:6px; }
.opc-process-step p { font-size:.78rem;color:var(--text-muted);font-family:var(--font-zh);line-height:1.6; }

.opc-cta-wrap { text-align:center; }
.opc-cta-inner {
  background:var(--gradient-1);
  border-radius:var(--radius);
  padding:40px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.opc-cta-text h3 { font-size:clamp(1.2rem,2.5vw,1.5rem);font-weight:800;font-family:var(--font-zh);color:#fff;margin-bottom:6px; }
.opc-cta-text p { font-size:.88rem;font-family:var(--font-zh);color:rgba(255,255,255,.8); }
.opc-cta-btns { display:flex;gap:14px;flex-wrap:wrap; }
.opc-cta-btns .btn-primary { background:#fff!important;color:var(--primary)!important; }
.opc-cta-btns .btn-outline { border-color:rgba(255,255,255,.5)!important;color:#fff!important; }
.opc-cta-btns .btn-outline:hover { background:rgba(255,255,255,.15)!important; }

/* =============================================
   CTA SECTION
   ============================================= */
.cta-section {
  background:var(--gradient-1);
  position:relative;
  overflow:hidden;
  padding:80px 0;
}
.cta-bg-grid {
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(0deg,transparent,transparent 39px,rgba(255,255,255,.05) 40px),
    repeating-linear-gradient(90deg,transparent,transparent 39px,rgba(255,255,255,.05) 40px);
  pointer-events:none;
}
.cta-content { text-align:center;position:relative; }
.cta-content h2 { font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;color:#fff;font-family:var(--font-zh);margin-bottom:14px; }
.cta-content p { font-size:clamp(.95rem,2vw,1.1rem);color:rgba(255,255,255,.85);font-family:var(--font-zh);margin-bottom:36px; }
.cta-actions { display:flex;gap:16px;justify-content:center;flex-wrap:wrap; }
.cta-actions .btn-primary { background:rgba(255,255,255,.95)!important;color:var(--primary)!important; }
.cta-actions .btn-outline-light:hover { background:rgba(255,255,255,.15)!important; }

/* =============================================
   FOOTER
   ============================================= */
.footer { background:#030810;border-top:1px solid var(--border);padding:64px 0 32px; }
.footer-grid {
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1.2fr;
  gap:48px;
  margin-bottom:48px;
}
.footer-brand .logo-text { font-size:1.6rem; }
.footer-brand p { font-size:.85rem;color:var(--text-muted);font-family:var(--font-zh);line-height:1.7;margin:12px 0 20px; }
.footer-social { display:flex;gap:10px; }
.social-link {
  width:36px;height:36px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);
  font-size:.85rem;
  transition:var(--transition);
}
.social-link:hover { color:var(--primary);border-color:var(--primary);transform:translateY(-2px); }
.footer-col h4 { font-size:.85rem;font-weight:700;color:var(--text-primary);font-family:var(--font-zh);margin-bottom:16px; }
.footer-col ul { display:flex;flex-direction:column;gap:10px; }
.footer-col ul a { font-size:.82rem;color:var(--text-muted);font-family:var(--font-zh);transition:var(--transition); }
.footer-col ul a:hover { color:var(--primary); }
.footer-contact-list li { display:flex;align-items:flex-start;gap:8px;font-size:.82rem;color:var(--text-muted);font-family:var(--font-zh); }
.footer-contact-list li i { color:var(--primary);font-size:.8rem;margin-top:3px;flex-shrink:0; }
.footer-contact-list a:hover { color:var(--primary); }
.footer-bottom {
  border-top:1px solid var(--border);
  padding-top:24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-align:center;
}
.footer-bottom p { font-size:.78rem;color:var(--text-muted);font-family:var(--font-zh); }
.footer-disclaimer { opacity:.6; }

/* =============================================
   PAGE HERO (inner pages)
   ============================================= */
.page-hero {
  padding:calc(var(--nav-h) + 60px) 0 60px;
  text-align:center;
  background:radial-gradient(ellipse 70% 70% at 50% 0%,rgba(0,212,255,.1) 0%,transparent 70%),var(--bg-dark);
}
.page-hero h1 { font-size:clamp(1.9rem,4vw,3rem);font-weight:800;font-family:var(--font-zh);margin:14px 0 12px; }
.page-hero p { font-size:clamp(.9rem,2vw,1.05rem);color:var(--text-secondary);font-family:var(--font-zh);max-width:700px;margin:0 auto; }

/* =============================================
   NEWS PAGE
   ============================================= */
.news-layout {
  display:grid;
  grid-template-columns:1fr 300px;
  gap:32px;
  align-items:start;
}
.news-filter-bar {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-bottom:28px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:14px 16px;
}
.filter-search {
  position:relative;
  flex:1;
  min-width:160px;
}
.filter-search i { position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:.8rem; }
.filter-search input {
  width:100%;
  background:var(--bg-dark);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:8px 12px 8px 30px;
  color:var(--text-primary);
  font-size:.82rem;
  font-family:var(--font-zh);
  outline:none;
  transition:var(--transition);
}
.filter-search input:focus { border-color:var(--primary); }
.filter-btn {
  padding:7px 14px;
  border-radius:20px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text-muted);
  font-size:.78rem;
  font-family:var(--font-zh);
  cursor:pointer;
  transition:var(--transition);
  white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
.filter-btn.active,.filter-btn:hover { background:rgba(0,212,255,.1);border-color:var(--primary);color:var(--primary); }
.news-full-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.load-more-wrap { text-align:center;margin-top:32px; }
.btn-load-more {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 28px;
  background:transparent;
  border:1px solid var(--border-hover);
  border-radius:50px;
  color:var(--text-primary);
  font-size:.88rem;
  font-family:var(--font-zh);
  cursor:pointer;
  transition:var(--transition);
}
.btn-load-more:hover { background:rgba(0,212,255,.08);border-color:var(--primary);color:var(--primary); }

/* Sidebar */
.news-sidebar { display:flex;flex-direction:column;gap:20px; }
.sidebar-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
}
.sidebar-card h4 { font-size:.88rem;font-weight:700;color:var(--text-primary);font-family:var(--font-zh);margin-bottom:14px;display:flex;align-items:center;gap:6px; }
.sidebar-card h4 i { color:var(--primary);font-size:.85rem; }
.sidebar-market-item { display:flex;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);gap:6px; }
.sidebar-market-item:last-child { border-bottom:none; }
.sm-name { font-size:.75rem;font-family:var(--font-en);font-weight:600;color:var(--text-muted);flex:1; }
.sm-price { font-size:.78rem;font-family:var(--font-en);color:var(--text-primary);margin-right:4px; }
.sm-change.up { color:#00e676;font-size:.72rem; }
.sm-change.down { color:#ff5252;font-size:.72rem; }
.trending-list { display:flex;flex-direction:column;gap:8px; }
.trend-item { display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--border);cursor:pointer; }
.trend-item:last-child { border-bottom:none; }
.trend-num { font-size:.65rem;font-family:var(--font-en);font-weight:700;color:var(--primary);width:20px;flex-shrink:0; }
.trend-item span:last-child { font-size:.8rem;font-family:var(--font-zh);color:var(--text-secondary);transition:var(--transition); }
.trend-item:hover span:last-child { color:var(--primary); }

/* =============================================
   CONTACT PAGE
   ============================================= */
.contact-section { background:var(--bg-dark); }
.contact-grid {
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:48px;
  align-items:start;
}
.contact-info h3 { font-size:1.4rem;font-weight:700;font-family:var(--font-zh);color:var(--text-primary);margin-bottom:16px; }
.contact-info p { font-size:.9rem;color:var(--text-secondary);font-family:var(--font-zh);line-height:1.8;margin-bottom:28px; }
.contact-items { display:flex;flex-direction:column;gap:14px; }
.contact-item {
  display:flex;
  align-items:flex-start;
  gap:14px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:14px 16px;
  transition:var(--transition);
}
.contact-item:hover { border-color:var(--border-hover); }
.contact-item-icon {
  width:38px;height:38px;
  background:rgba(0,212,255,.1);
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  color:var(--primary);
  flex-shrink:0;
}
.contact-item-text h5 { font-size:.85rem;font-weight:700;font-family:var(--font-zh);color:var(--text-primary);margin-bottom:3px; }
.contact-item-text p,.contact-item-text a { font-size:.82rem;color:var(--text-muted);font-family:var(--font-zh);transition:var(--transition); }
.contact-item-text a:hover { color:var(--primary); }
.contact-form-wrap {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:32px;
}
.contact-form-wrap h3 { font-size:1.2rem;font-weight:700;font-family:var(--font-zh);margin-bottom:24px; }
.form-grid { display:grid;grid-template-columns:1fr 1fr;gap:16px; }
.form-group { display:flex;flex-direction:column;gap:6px; }
.form-group.full { grid-column:1/-1; }
.form-label { font-size:.82rem;font-weight:600;color:var(--text-secondary);font-family:var(--font-zh); }
.form-input,.form-select,.form-textarea {
  background:var(--bg-dark);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:11px 14px;
  color:var(--text-primary);
  font-size:.88rem;
  font-family:var(--font-zh);
  outline:none;
  transition:var(--transition);
  width:100%;
  -webkit-appearance:none;
}
.form-input:focus,.form-select:focus,.form-textarea:focus {
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(0,212,255,.1);
}
.form-select option { background:var(--bg-card);color:var(--text-primary); }
.form-textarea { resize:vertical;min-height:120px; }
.form-check { display:flex;align-items:flex-start;gap:10px; }
.form-check input { width:16px;height:16px;flex-shrink:0;margin-top:2px;accent-color:var(--primary); }
.form-check label { font-size:.78rem;color:var(--text-muted);font-family:var(--font-zh);line-height:1.6; }
.form-submit {
  width:100%;
  padding:14px;
  background:var(--gradient-1);
  border:none;
  border-radius:50px;
  color:#fff;
  font-size:.95rem;
  font-weight:700;
  font-family:var(--font-zh);
  cursor:pointer;
  transition:var(--transition);
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.form-submit:hover { transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,212,255,.3); }
.form-submit:disabled { opacity:.6;cursor:not-allowed;transform:none; }

/* =============================================
   OPC.HTML PAGE SPECIFIC
   ============================================= */
.opc-page-hero {
  padding:calc(var(--nav-h) + 50px) 0 60px;
  text-align:center;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%,rgba(255,107,53,.12) 0%,transparent 60%),
    radial-gradient(ellipse 50% 50% at 80% 60%,rgba(123,45,255,.1) 0%,transparent 50%),
    var(--bg-dark);
}
.opc-hero-badges { display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:24px; }
.opc-badge-item {
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,107,53,.08);
  border:1px solid rgba(255,107,53,.25);
  color:var(--accent);
  font-size:.75rem;font-weight:600;
  padding:5px 12px;
  border-radius:50px;
  font-family:var(--font-zh);
}
.opc-page-hero .hero-h1-en { font-size:clamp(.72rem,1.5vw,.85rem);letter-spacing:4px;color:var(--text-muted);font-family:var(--font-en);text-transform:uppercase;display:block;margin-bottom:8px; }
.opc-page-hero h1 { font-size:clamp(2rem,5vw,3.5rem);font-weight:800;font-family:var(--font-zh);line-height:1.2;margin-bottom:20px; }
.opc-page-hero .opc-tagline { font-size:clamp(.9rem,2vw,1.05rem);color:var(--text-secondary);font-family:var(--font-zh);line-height:1.9;max-width:800px;margin:0 auto 32px; }
.opc-page-hero .hero-actions { margin-bottom:48px; }
.opc-metrics-card {
  display:inline-flex;
  flex-wrap:wrap;
  gap:0;
  background:var(--bg-card);
  border:1px solid rgba(255,107,53,.2);
  border-radius:var(--radius);
  overflow:hidden;
}
.opc-metric {
  padding:20px 28px;
  text-align:center;
  border-right:1px solid var(--border);
}
.opc-metric:last-child { border-right:none; }
.opc-count { font-size:2rem;font-weight:800;color:var(--accent);font-family:var(--font-en);line-height:1; }
.opc-metric-unit { font-size:1.1rem;font-weight:700;color:var(--accent); }
.opc-metric-label { font-size:.72rem;color:var(--text-muted);font-family:var(--font-zh);margin-top:4px;display:block; }

/* OPC Strategy cards */
.opc-pos-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:24px; }
.opc-pos-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:32px 24px;
  text-align:center;
  transition:var(--transition);
}
.opc-pos-card:hover { border-color:var(--border-hover);transform:translateY(-6px); }
.opc-pos-icon { width:64px;height:64px;background:var(--gradient-1);border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;color:#fff;margin:0 auto 16px; }
.opc-pos-card h3 { font-size:1.1rem;font-weight:700;font-family:var(--font-zh);color:var(--text-primary);margin-bottom:10px; }
.opc-pos-card p { font-size:.82rem;color:var(--text-muted);line-height:1.75;font-family:var(--font-zh); }

/* AI Lab */
.opc-ai-lab { background:var(--bg-card2); }
.opc-ai-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:20px; }
.opc-ai-svc {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px 20px;
  transition:var(--transition);
}
.opc-ai-svc:hover { border-color:var(--border-hover);transform:translateY(-4px); }
.opc-ai-svc-icon { width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin-bottom:12px; }
.opc-ai-svc h4 { font-size:.92rem;font-weight:700;font-family:var(--font-zh);color:var(--text-primary);margin-bottom:8px; }
.opc-ai-svc p { font-size:.78rem;color:var(--text-muted);line-height:1.7;font-family:var(--font-zh); }

/* Phase expansion */
.opc-phase-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:24px; }
.opc-phase-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px;
  transition:var(--transition);
}
.opc-phase-card:hover { border-color:var(--border-hover);transform:translateY(-4px); }
.opc-phase-num { font-size:3rem;font-weight:900;font-family:var(--font-en);opacity:.1;line-height:1;margin-bottom:8px; }
.opc-phase-card h3 { font-size:1.05rem;font-weight:700;font-family:var(--font-zh);color:var(--text-primary);margin-bottom:12px; }
.opc-phase-card ul { display:flex;flex-direction:column;gap:8px; }
.opc-phase-card li { display:flex;gap:8px;align-items:flex-start;font-size:.8rem;color:var(--text-secondary);font-family:var(--font-zh);line-height:1.5; }
.opc-phase-card li i { color:var(--primary);flex-shrink:0;font-size:.7rem;margin-top:4px; }

/* Svc grid */
.opc-svc-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:24px; }
.opc-svc-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px;
  transition:var(--transition);
}
.opc-svc-card:hover { border-color:var(--border-hover);transform:translateY(-5px); }
.opc-svc-icon { width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:#fff;margin-bottom:14px; }
.opc-svc-card h3 { font-size:1rem;font-weight:700;font-family:var(--font-zh);color:var(--text-primary);margin-bottom:12px; }
.opc-svc-card ul { display:flex;flex-direction:column;gap:7px; }
.opc-svc-card li { font-size:.78rem;color:var(--text-muted);font-family:var(--font-zh);display:flex;gap:6px;align-items:flex-start;line-height:1.5; }
.opc-svc-card li::before { content:'·';color:var(--primary);font-size:1rem;line-height:1;flex-shrink:0; }

/* Moat */
.opc-moat-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:20px; }
.opc-moat-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
  transition:var(--transition);
}
.opc-moat-card:hover { border-color:var(--border-hover);transform:translateY(-3px); }
.opc-moat-icon { width:46px;height:46px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:#fff;margin-bottom:12px; }
.opc-moat-card h4 { font-size:.9rem;font-weight:700;font-family:var(--font-zh);color:var(--text-primary);margin-bottom:8px; }
.opc-moat-card p { font-size:.78rem;color:var(--text-muted);font-family:var(--font-zh);line-height:1.7; }

/* Community */
.opc-comm-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:20px; }
.opc-comm-item {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px 20px;
  text-align:center;
  transition:var(--transition);
}
.opc-comm-item:hover { border-color:var(--border-hover);transform:translateY(-4px); }
.opc-comm-icon { width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin:0 auto 12px; }
.opc-comm-item h4 { font-size:.88rem;font-weight:700;font-family:var(--font-zh);color:var(--text-primary);margin-bottom:8px; }
.opc-comm-item p { font-size:.76rem;color:var(--text-muted);font-family:var(--font-zh);line-height:1.7; }

/* Risk */
.opc-risk-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:20px; }
.opc-risk-card {
  background:var(--bg-card);
  border:1px solid rgba(255,82,82,.15);
  border-radius:var(--radius);
  padding:24px;
  transition:var(--transition);
}
.opc-risk-card:hover { border-color:rgba(255,82,82,.3); }
.opc-risk-card h4 { font-size:.9rem;font-weight:700;font-family:var(--font-zh);color:#ff8a65;margin-bottom:6px; }
.opc-risk-card p { font-size:.8rem;color:var(--text-muted);font-family:var(--font-zh);line-height:1.7; }

/* Apply form */
.opc-apply-section { background:var(--bg-card2); }
.opc-apply-grid { display:grid;grid-template-columns:1fr 1.4fr;gap:48px;align-items:start; }
.opc-apply-info h3 { font-size:1.4rem;font-weight:700;font-family:var(--font-zh);margin-bottom:16px; }
.opc-apply-info p { font-size:.88rem;color:var(--text-secondary);font-family:var(--font-zh);line-height:1.8;margin-bottom:20px; }
.opc-elig-list { display:flex;flex-direction:column;gap:8px;margin-bottom:24px; }
.opc-elig-item { display:flex;gap:8px;align-items:flex-start;font-size:.82rem;color:var(--text-secondary);font-family:var(--font-zh); }
.opc-elig-item i { color:#00e676;flex-shrink:0;margin-top:3px; }
.opc-urgency {
  background:rgba(255,107,53,.08);
  border:1px solid rgba(255,107,53,.2);
  border-radius:var(--radius-sm);
  padding:12px 16px;
  font-size:.8rem;
  color:var(--accent);
  font-family:var(--font-zh);
  display:flex;align-items:center;gap:8px;
}
.opc-apply-form-wrap {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:32px;
}
.opc-apply-form-wrap h3 { font-size:1.1rem;font-weight:700;font-family:var(--font-zh);margin-bottom:24px; }
.opc-form-grid { display:grid;grid-template-columns:1fr 1fr;gap:16px; }
.opc-form-full { grid-column:1/-1; }
.opc-success-msg {
  display:none;
  background:rgba(0,230,118,.08);
  border:1px solid rgba(0,230,118,.25);
  border-radius:var(--radius-sm);
  padding:16px;
  color:#00e676;
  font-size:.88rem;
  font-family:var(--font-zh);
  margin-bottom:16px;
  align-items:center;
  gap:10px;
}
.opc-success-msg.show { display:flex; }

/* =============================================
   STRATEGY / VERT / PARTNER CARDS (OPC page)
   ============================================= */
.strat-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:24px; }
.strat-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px;
  transition:var(--transition);
}
.strat-card:hover { border-color:var(--border-hover);transform:translateY(-4px); }
.strat-icon { width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:#fff;margin-bottom:14px; }
.strat-card h3 { font-size:1rem;font-weight:700;font-family:var(--font-zh);color:var(--text-primary);margin-bottom:10px; }
.strat-list { display:flex;flex-direction:column;gap:7px; }
.strat-list li { font-size:.8rem;color:var(--text-secondary);font-family:var(--font-zh);display:flex;gap:6px;line-height:1.5; }
.strat-list li i { color:var(--primary);flex-shrink:0;font-size:.7rem;margin-top:3px; }

.vert-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:20px; }
.vert-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px 16px;
  text-align:center;
  transition:var(--transition);
}
.vert-card:hover { border-color:var(--border-hover);transform:translateY(-4px); }
.vert-icon { width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:#fff;margin:0 auto 12px; }
.vert-card h4 { font-size:.88rem;font-weight:700;font-family:var(--font-zh);color:var(--text-primary);margin-bottom:8px; }
.vert-list { display:flex;flex-direction:column;gap:5px;text-align:left; }
.vert-list li { font-size:.74rem;color:var(--text-muted);font-family:var(--font-zh);display:flex;gap:5px;line-height:1.4; }
.vert-list li::before { content:'•';color:var(--primary);flex-shrink:0; }

.partner-layers { display:grid;grid-template-columns:repeat(4,1fr);gap:20px; }
.partner-layer {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
  transition:var(--transition);
}
.partner-layer:hover { border-color:var(--border-hover);transform:translateY(-4px); }
.partner-layer-icon { width:46px;height:46px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:#fff;margin-bottom:12px; }
.partner-layer h4 { font-size:.9rem;font-weight:700;font-family:var(--font-zh);color:var(--text-primary);margin-bottom:10px; }
.partner-layer ul { display:flex;flex-direction:column;gap:6px; }
.partner-layer li { font-size:.76rem;color:var(--text-muted);font-family:var(--font-zh);display:flex;gap:5px;line-height:1.4; }
.partner-layer li::before { content:'·';color:var(--primary);font-size:1.2rem;line-height:1;flex-shrink:0; }

/* =============================================
   FAQ (contact page)
   ============================================= */
.faq-section { padding:80px 0;background:var(--bg-card2); }
.faq-grid { display:grid;grid-template-columns:1fr 1fr;gap:16px; }
.faq-item {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  transition:var(--transition);
}
.faq-item:hover { border-color:var(--border-hover); }
.faq-question {
  padding:18px 22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
  font-size:.92rem;
  font-weight:600;
  color:var(--text-primary);
  font-family:var(--font-zh);
  gap:14px;
  -webkit-tap-highlight-color:transparent;
}
.faq-question i { color:var(--primary);flex-shrink:0;transition:var(--transition); }
.faq-item.open .faq-question i { transform:rotate(45deg); }
.faq-answer { padding:0 22px;max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease; }
.faq-item.open .faq-answer { max-height:260px;padding:0 22px 18px; }
.faq-answer p { font-size:.84rem;color:var(--text-muted);line-height:1.8;font-family:var(--font-zh); }

/* Partners */
.partners-section { padding:56px 0;border-top:1px solid var(--border); }
.partners-title { text-align:center;font-size:.8rem;color:var(--text-muted);letter-spacing:2px;text-transform:uppercase;margin-bottom:28px;font-family:var(--font-zh); }
.partners-row { display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap; }
.partner-logo {
  opacity:.35;
  transition:var(--transition);
  font-size:.85rem;font-weight:700;
  color:var(--text-secondary);
  font-family:var(--font-en);
  padding:7px 14px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
}
.partner-logo:hover { opacity:.8;border-color:var(--border-hover); }

/* =============================================
   RESPONSIVE — 1200px
   ============================================= */
@media(max-width:1200px){
  .business-grid { grid-template-columns:repeat(2,1fr); }
  .eco-features { grid-template-columns:repeat(2,1fr); }
  .opc-svc-grid { grid-template-columns:repeat(2,1fr); }
  .opc-moat-grid { grid-template-columns:repeat(3,1fr); }
  .opc-comm-grid { grid-template-columns:repeat(2,1fr); }
  .vert-grid { grid-template-columns:repeat(2,1fr); }
  .partner-layers { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1.5fr 1fr 1fr;gap:32px; }
  .footer-grid .footer-brand { grid-column:1/-1; }
}

/* =============================================
   RESPONSIVE — 1024px
   ============================================= */
@media(max-width:1024px){
  .news-layout { grid-template-columns:1fr; }
  .news-sidebar { display:grid;grid-template-columns:repeat(3,1fr);gap:20px; }
  .news-full-grid { grid-template-columns:repeat(2,1fr); }
  .opc-hero-banner { grid-template-columns:1fr;gap:32px; }
  .opc-apply-grid { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; }
  .opc-pos-grid { grid-template-columns:repeat(2,1fr); }
  .opc-ai-grid { grid-template-columns:repeat(2,1fr); }
  .opc-phase-grid { grid-template-columns:repeat(2,1fr); }
}

/* =============================================
   RESPONSIVE — 768px (MOBILE)
   ============================================= */
@media(max-width:768px){
  :root { --nav-h:60px; }

  /* Navbar */
  .nav-menu {
    position:fixed;
    top:0;bottom:0;right:0;
    width:82vw;
    max-width:320px;
    background:rgba(5,11,24,.98);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:calc(var(--nav-h) + 20px) 20px 40px;
    transform:translateX(110%);
    transition:transform .35s cubic-bezier(0.4,0,0.2,1);
    overflow-y:auto;
    z-index:999;
    border-left:1px solid var(--border);
    will-change:transform;
  }
  .nav-menu.open { transform:translateX(0); }
  .nav-link { padding:14px 16px;font-size:1rem;border-radius:0;border-bottom:1px solid var(--border); }
  .nav-link::after { display:none; }
  .nav-cta { border-radius:var(--radius-sm)!important;text-align:center;justify-content:center;margin-top:8px; }
  .lang-switcher { margin:16px 0 0;padding:14px 16px;border-bottom:none; }
  .hamburger { display:flex;z-index:1001;position:relative; }

  /* Hero */
  .hero-stats { gap:20px; }
  .stat-divider { display:none; }
  .stat-num { font-size:2rem; }
  .hero-actions .btn { padding:12px 20px;font-size:.88rem; }
  .hero-scroll-indicator { display:none; }

  /* Sections */
  .section { padding:64px 0; }
  .section-header { margin-bottom:40px; }

  /* About */
  .about-grid { grid-template-columns:1fr;gap:36px; }
  .about-visual { display:none; }
  .about-pillars { grid-template-columns:1fr 1fr; }

  /* Business */
  .business-grid { grid-template-columns:1fr; }

  /* Ecosystem */
  .eco-center { width:300px;height:300px; }
  .orbit-2 { width:270px!important;height:270px!important; }
  .orbit-1 { width:160px!important;height:160px!important; }
  .eco-core-inner { width:80px;height:80px;font-size:.62rem; }
  .eco-core-inner i { font-size:1.4rem; }
  .eco-features { grid-template-columns:1fr 1fr; }

  /* News preview */
  .news-preview-grid { grid-template-columns:1fr; }

  /* OPC homepage section */
  .opc-hero-banner { padding:24px;gap:24px; }
  .opc-stats-grid { grid-template-columns:1fr 1fr; }
  .opc-services-grid { grid-template-columns:1fr; }
  .opc-process-track { grid-template-columns:1fr 1fr; }
  .opc-process-line { display:none; }
  .opc-cta-inner { flex-direction:column;text-align:center; }

  /* News page */
  .news-sidebar { grid-template-columns:1fr; }
  .news-filter-bar { gap:8px;padding:12px; }
  .filter-search { min-width:100%;order:-1; }
  .news-full-grid { grid-template-columns:1fr; }

  /* Contact */
  .contact-form-wrap { padding:24px 20px; }
  .form-grid { grid-template-columns:1fr; }
  .faq-grid { grid-template-columns:1fr; }

  /* OPC page */
  .opc-pos-grid { grid-template-columns:1fr; }
  .opc-ai-grid { grid-template-columns:1fr; }
  .opc-phase-grid { grid-template-columns:1fr; }
  .opc-svc-grid { grid-template-columns:1fr; }
  .opc-moat-grid { grid-template-columns:1fr 1fr; }
  .opc-comm-grid { grid-template-columns:1fr 1fr; }
  .opc-risk-grid { grid-template-columns:1fr; }
  .opc-form-grid { grid-template-columns:1fr; }
  .opc-form-full { grid-column:1; }
  .strat-grid { grid-template-columns:1fr; }
  .vert-grid { grid-template-columns:1fr 1fr; }
  .partner-layers { grid-template-columns:1fr 1fr; }
  .opc-metrics-card { flex-direction:column;border-radius:var(--radius); }
  .opc-metric { border-right:none;border-bottom:1px solid var(--border); }
  .opc-metric:last-child { border-bottom:none; }

  /* Footer */
  .footer { padding:48px 0 24px; }
  .footer-grid { grid-template-columns:1fr;gap:28px; }
  .footer-grid .footer-brand { grid-column:1; }

  /* CTA */
  .cta-actions { flex-direction:column;align-items:stretch; }
  .cta-actions .btn { justify-content:center; }
}

/* =============================================
   RESPONSIVE — 480px (SMALL MOBILE)
   ============================================= */
@media(max-width:480px){
  .container { padding:0 16px; }
  .hero-title { font-size:clamp(1.7rem,7vw,2.4rem); }
  .hero-actions { flex-direction:column;align-items:stretch; }
  .hero-actions .btn { justify-content:center; }
  .about-pillars { grid-template-columns:1fr; }
  .opc-stats-grid { grid-template-columns:1fr 1fr; }
  .opc-moat-grid { grid-template-columns:1fr; }
  .opc-comm-grid { grid-template-columns:1fr; }
  .vert-grid { grid-template-columns:1fr; }
  .partner-layers { grid-template-columns:1fr; }
  .eco-features { grid-template-columns:1fr; }
  .opc-cta-btns { flex-direction:column;width:100%; }
  .opc-cta-btns .btn { justify-content:center;width:100%; }
  .news-status-bar { font-size:.74rem; }
  .source-legend { gap:5px; }
  .source-dot { font-size:.65rem; }
  .ticker-label { margin-left:12px;margin-right:8px;font-size:.65rem; }
  .filter-btn { font-size:.72rem;padding:6px 10px; }
  .footer-social { gap:8px; }
}

/* =============================================
   IMAGE ENHANCEMENTS — Site-wide
   ============================================= */

/* Business card image */
.biz-card-img {
  width:100%;
  height:180px;
  border-radius:calc(var(--radius) - 4px);
  overflow:hidden;
  margin-bottom:20px;
  position:relative;
}
.biz-card-img img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s ease;
  filter:brightness(.85) saturate(1.1);
}
.biz-card:hover .biz-card-img img { transform:scale(1.06);filter:brightness(.95) saturate(1.2); }
.biz-card-img::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,transparent 50%,var(--bg-card) 100%);
  pointer-events:none;
}

/* About visual override — show images on all devices */
.about-visual { display:block !important; }
.about-city-img img,
.about-team-img img {
  transition:transform .4s ease;
}
.about-city-img:hover img,
.about-team-img:hover img { transform:scale(1.02); }

/* Globe wrap — reduce dominance on mobile */
@media(max-width:768px){
  .about-globe-wrap { transform:scale(.7);transform-origin:center top;margin-bottom:-40px; }
}

/* Ecosystem hero image */
.eco-hero-img {
  position:relative;
}
.eco-hero-img::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,rgba(5,11,24,.2),rgba(5,11,24,.7));
  border-radius:16px;
  pointer-events:none;
}
.eco-hero-img img {
  transition:transform .5s ease;
}
.eco-hero-img:hover img { transform:scale(1.02); }

/* OPC main image */
.opc-main-img {
  position:relative;
}
.opc-main-img::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,transparent 60%,rgba(5,11,24,.85));
  border-radius:20px;
  pointer-events:none;
}
.opc-main-img img {
  transition:transform .6s ease;
}
.opc-main-img:hover img { transform:scale(1.02); }

/* Smooth image load */
img[loading="lazy"] {
  opacity:0;
  transition:opacity .4s ease;
}
img[loading="lazy"].loaded,
img[loading="lazy"][src] {
  opacity:1;
}

/* Image caption overlay utility */
.img-caption-overlay {
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
}
.img-caption-overlay figcaption {
  position:absolute;
  bottom:0;left:0;right:0;
  padding:12px 16px;
  background:linear-gradient(transparent,rgba(5,11,24,.9));
  font-size:.78rem;
  color:var(--text-secondary);
  font-family:var(--font-zh);
}

/* Mobile responsive image adjustments */
@media(max-width:768px){
  .biz-card-img { height:140px; }
  .opc-main-img img { max-height:220px !important; }
  .eco-hero-img img { max-height:220px !important; }
}
@media(max-width:480px){
  .biz-card-img { height:120px; }
}

/* =============================================
   UTILITY
   ============================================= */
.nav-hidden { transform:translateY(-100%) !important; }

/* Fix iOS momentum scroll */
.nav-menu { -webkit-overflow-scrolling:touch; }

/* Prevent content shift when scrollbar appears/disappears */
html { scrollbar-gutter:stable; }

/* Smooth image rendering */
img { image-rendering:-webkit-optimize-contrast; }

/* Accessible focus */
:focus-visible { outline:2px solid var(--primary);outline-offset:2px; }

/* Print */
@media print { .navbar,.ticker-bar,.hero-particles,.hero-canvas { display:none; } }