// 国科诚泰 · 官网 终极集大成版 — 三合一自适应风格自由切换（高雅绿金 | SaaS 科技蓝 | 先锋极智黑）
// 完美的排版、卓越的响应式设计、令人叹为观止的交互动效
// 读取 localStorage GOKE_SITE_DATA_v1，与后台管理联动
const Component = function () {
  var useState = React.useState;
  var useEffect = React.useEffect;
  var useMemo = React.useMemo;
  var useRef = React.useRef;

  var STORAGE_KEY = 'GOKE_SITE_DATA_v1';
  var COMPANY = '北京国科诚泰农牧设备有限公司';
  var HOTLINE = '010-56299299';
  var ICP = '京ICP备11025087号-3';
  var COPYRIGHT = 'Copyright © 2008-2026 北京国科诚泰农牧设备有限公司 All Rights Reserved';

  var NAV = [
    { id: 'top', label: '首页' },
    { id: 'portal', label: '业务领域' },
    { id: 'products', label: '核心装备' },
    { id: 'solutions', label: '智慧方案' },
    { id: 'about', label: '关于国科' },
    { id: 'news', label: '新闻资讯' },
    { id: 'contact', label: '联系我们' }
  ];

  var HERO_SLIDES = [
    { title: '国科诚泰 · 智慧畜牧', sub: '装备与服务引领者', img: 'https://images.weserv.nl/?url=images.unsplash.com/photo-1560493676-04071c5f467d?w=1400&q=85' },
    { title: '智慧牧场数字化平台', sub: '全混合日粮TMR中央厨房成套产品系统', img: 'https://images.weserv.nl/?url=images.unsplash.com/photo-1500595046743-cd271d694d60?w=1400&q=85' },
    { title: '国家级专精特新「小巨人」', sub: '国科农牧以科技创新服务现代草牧业', img: 'https://images.weserv.nl/?url=images.unsplash.com/photo-1464226184884-fa280b87eda0?w=1400&q=85' },
  ];

  var PORTAL_ITEMS = [
    { id: 'cow', title: '智慧牛场设备', desc: 'TMR饲喂 · 挤奶装备 · 犊牛饲喂 · 粪水处理', span: 'wide', img: 'https://images.weserv.nl/?url=images.unsplash.com/photo-1560493676-04071c5f467d?w=800&q=85' },
    { id: 'sheep', title: '智慧羊场设备', desc: '羊相关设备 · 分群饲喂 · 环境工程', span: 'normal', img: 'https://images.weserv.nl/?url=images.unsplash.com/photo-1464226184884-fa280b87eda0?w=800&q=85' },
    { id: 'pig', title: '智慧猪场设备', desc: '智慧猪场整体解决方案与配套装备', span: 'normal', img: 'https://images.weserv.nl/?url=images.unsplash.com/photo-1516467508483-a7212febe31a?w=800&q=85' },
    { id: 'waste', title: '环境工程粪水处理系统', desc: '集装箱式污水处理 · 模块化组合 · 智能运维', span: 'tall', img: 'https://images.weserv.nl/?url=images.unsplash.com/photo-1416879595882-3373a048050b?w=800&q=85' },
    { id: 'yimu', title: '易牧网', desc: '一站式服务平台 · 牧业电商 · 配件采购', span: 'normal', img: 'https://images.weserv.nl/?url=images.unsplash.com/photo-1500595046743-cd271d694d60?w=800&q=85' },
    { id: 'blue', title: '国科蓝海', desc: '智慧畜牧创新生态与产业协同', span: 'normal', img: 'https://images.weserv.nl/?url=images.unsplash.com/photo-1546445317-29f4545e9d53?w=800&q=85' },
  ];

  var SOLUTIONS = [
    { id: 'pig', title: '智慧猪场', desc: '猪场环控、饲喂与生物安全一体化数智方案', img: 'https://images.weserv.nl/?url=images.unsplash.com/photo-1516467508483-a7212febe31a?w=900&q=85' },
    { id: 'livestock', title: '智慧畜牧', desc: '奶牛、肉牛、羊场全链路智慧牧场装备与平台', img: 'https://images.weserv.nl/?url=images.unsplash.com/photo-1560493676-04071c5f467d?w=900&q=85' },
    { id: 'safety', title: '安全平台', desc: '石油化工安全生产平台，助力企业安全生产管理', img: 'https://images.weserv.nl/?url=images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=900&q=85' },
  ];

  var PRODUCT_CATS = [
    { id: 'all', label: '全部' },
    { id: 'tmr', label: 'TMR饲喂' },
    { id: 'calf', label: '犊牛饲喂' },
    { id: 'milk', label: '挤奶设备' },
    { id: 'waste', label: '粪水处理' },
    { id: 'sheep', label: '羊相关设备' },
    { id: 'env', label: '环境工程' },
    { id: 'plan', label: '牧场规划设计' },
    { id: 'shop', label: '易牧电商' },
    { id: 'smart', label: '智慧牧场' },
    { id: 'parts', label: '配件产品' },
  ];

  var DEFAULT_DATA = {
    products: [
      { id: 'p1', name: '集装箱式污水处理系统', cat: 'waste', cover: 'https://images.weserv.nl/?url=images.unsplash.com/photo-1416879595882-3373a048050b?w=1200&q=85', intro: '工程设备化，占地面积小，模块化组合，运行成本低，管理智能化，操作更安全。奶牛场500头以上，单个系统日处理水量50吨、100吨、200吨、250吨、300吨。', photos: ['https://images.weserv.nl/?url=images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=800&q=80'], sort: 1 },
      { id: 'p2', name: '全智能牛场挤奶装备', cat: 'milk', cover: 'https://images.weserv.nl/?url=images.unsplash.com/photo-1560493676-04071c5f467d?w=1200&q=85', intro: '高效智能化挤奶作业装备，配备先进生理监测模块，全面记录每头牛的数据。适配现代化、规模化奶牛场生产与信息化需求。', photos: [], sort: 2 },
      { id: 'p3', name: '犊牛自动饲喂设备', cat: 'calf', cover: 'https://images.weserv.nl/?url=images.unsplash.com/photo-1546445317-29f4545e9d53?w=1200&q=85', intro: '为单头单栏饲喂或分群饲喂的犊牛提供牛奶，快速精确。搅拌器迅速搅拌，防粘结；智能定时加热，确保牛犊饮用合适温度。', photos: [], sort: 3 },
    ],
    news: [
      { id: 'n1', cat: 'company', pinned: true, title: '国科农牧获评国家级专精特新「小巨人」', intro: '第五批国家级专精特新「小巨人」企业公示名单正式发布，国科农牧成功入选，标志着公司在智慧牧场领域的科技实力得到国家级认可。', publishDate: '2025-08-10', contentBlocks: [{ id: 'b1', type: 'text', value: '继入选北京市「专精特新」中小企业之后，国科农牧再度揽获重要荣誉。公司推出了智慧牧场数字化平台，研发设计了「全混合日粮TMR中央厨房」成套产品系统，持续解决现代草牧业的卡脖子难题。' }] },
      { id: 'n2', cat: 'company', pinned: true, title: '国科农牧闪耀德国汉诺威 EuroTier 全球畜牧展', intro: '全球畜牧业顶级盛会 EuroTier 在德国汉诺威举行，国科农牧携创新实践与智能硬件产品精彩亮相，向世界展示中国农牧装备的智能化水平。', publishDate: '2024-11-20', contentBlocks: [{ id: 'b1', type: 'text', value: '作为中国代表企业，国科农牧展示了高精度智能化饲喂站及数据采集控制网。智领畜牧新未来，赢得了欧洲和中东多国客户的高度赞誉。' }, { id: 'b2', type: 'image', value: 'https://images.weserv.nl/?url=images.unsplash.com/photo-1592982537447-7440770cbfc9?w=900&q=80' }] },
      { id: 'n3', cat: 'industry', pinned: true, title: '解码 AI+VI 智能识别：聚焦智慧畜牧未来趋势', intro: '哈尔滨行业顶会盛大开幕，70余家科研院所及行业菁英齐聚。国科农牧现场分享 AI 视觉识别如何让牧场决策「有数可依」。', publishDate: '2025-08-17', contentBlocks: [{ id: 'b1', type: 'text', value: '通过在牛体舍安装 AI 智能摄像头，国科农牧实现了对牛只运动行为、发情特征和健康评分的24小时不间断视频识别，大幅降低了大型牧场的人工巡检成本。' }] },
      { id: 'n4', cat: 'expo', pinned: false, title: '国科农牧亮相武汉国际农机展 现场订单火爆', intro: '全国各省区农牧专业买家团齐聚江城。国科农牧携旗下新一代自动化粪水资源化处理器及TMR饲喂设备，精彩亮相武汉农机展。', publishDate: '2025-10-28', contentBlocks: [{ id: 'b1', type: 'text', value: '在展会现场，国科农牧的一体化解决方案吸引了包括内蒙古、黑龙江等地众多中大型牧业采购团的驻足洽谈，并在当场签下了多套大型设备意向订单。' }] },
      { id: 'n5', cat: 'expo', pinned: false, title: '聚焦高品质草牧：国科农牧出席粤港澳大湾区牧业发展论坛', intro: '广州高规格论坛，探讨现代牧业的大湾区协同。国科农牧受邀出席，并就品质驱动和绿色生态链重塑发表了深度演讲。', publishDate: '2025-11-01', contentBlocks: [{ id: 'b1', type: 'text', value: '国科诚泰董事长提出，通过全混合日粮的数字化精准控制，可以为草食动物提供最科学、最洁净的日粮配比，这是保障高品质奶肉产品源头的核心底座。' }] },
    ],
  };

  var loadData = function () {
    try {
      var raw = localStorage.getItem(STORAGE_KEY);
      if (!raw) return JSON.parse(JSON.stringify(DEFAULT_DATA));
      var parsed = JSON.parse(raw);
      return {
        products: Array.isArray(parsed.products) ? parsed.products : DEFAULT_DATA.products,
        news: Array.isArray(parsed.news) ? parsed.news : DEFAULT_DATA.news
      };
    } catch (e) {
      return JSON.parse(JSON.stringify(DEFAULT_DATA));
    }
  };

  // 1. 三合一风格状态（'green' 代表生机科技绿，'blue' 代表 SaaS 科技蓝，'dark' 代表先锋黑极智版）
  var _theme = useState('green'); var theme = _theme[0]; var setTheme = _theme[1];

  var _menu = useState(false); var menuOpen = _menu[0]; var setMenuOpen = _menu[1];
  var _scrolled = useState(false); var scrolled = _scrolled[0]; var setScrolled = _scrolled[1];
  var _slide = useState(0); var slideIdx = _slide[0]; var setSlideIdx = _slide[1];
  var _data = useState(loadData); var siteData = _data[0]; var setSiteData = _data[1];
  var _product = useState(null); var activeProduct = _product[0]; var setActiveProduct = _product[1];
  var _news = useState(null); var activeNews = _news[0]; var setActiveNews = _news[1];
  var _form = useState({ name: '', phone: '', message: '' }); var contactForm = _form[0]; var setContactForm = _form[1];
  var _submitting = useState(false); var submitting = _submitting[0]; var setSubmitting = _submitting[1];
  var _prodCat = useState('all'); var prodCat = _prodCat[0]; var setProdCat = _prodCat[1];
  var _newsCat = useState('all'); var newsCat = _newsCat[0]; var setNewsCat = _newsCat[1];
  var _activeNav = useState('top'); var activeNav = _activeNav[0]; var setActiveNav = _activeNav[1];

  var revealRef = useRef(null);
  var reducedMotion = useRef(false);

  useEffect(function () {
    reducedMotion.current = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    var refresh = function () { setSiteData(loadData()); };
    window.addEventListener('storage', refresh);
    var timer = setInterval(refresh, 2000);
    return function () {
      window.removeEventListener('storage', refresh);
      clearInterval(timer);
    };
  }, []);

  useEffect(function () {
    if (reducedMotion.current) return undefined;
    var timer = setInterval(function () {
      setSlideIdx(function (i) { return (i + 1) % HERO_SLIDES.length; });
    }, 5000);
    return function () { clearInterval(timer); };
  }, []);

  useEffect(function () {
    var onScroll = function () {
      setScrolled(window.scrollY > 30);
      // 动态更新 activeNav 对应滚动的 id
      var sections = ['top', 'portal', 'products', 'solutions', 'about', 'news', 'contact'];
      for (var i = sections.length - 1; i >= 0; i--) {
        var el = document.getElementById(sections[i]);
        if (el && window.scrollY >= el.offsetTop - 120) {
          setActiveNav(sections[i]);
          break;
        }
      }
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return function () { window.removeEventListener('scroll', onScroll); };
  }, []);

  useEffect(function () {
    var root = revealRef.current;
    if (!root || !window.IntersectionObserver) return undefined;
    var els = root.querySelectorAll('.goke-reveal');
    var io = new IntersectionObserver(function (entries) {
      entries.forEach(function (entry) {
        if (entry.isIntersecting) {
          entry.target.classList.add('is-visible');
          io.unobserve(entry.target);
        }
      });
    }, { threshold: 0.05 });
    els.forEach(function (el) { io.observe(el); });
    return function () { io.disconnect(); };
  }, [siteData, prodCat, newsCat, theme]);

  var products = useMemo(function () {
    var list = siteData.products.slice().sort(function (a, b) { return (a.sort || 99) - (b.sort || 99); });
    return prodCat === 'all' ? list : list.filter(function (p) { return p.cat === prodCat; });
  }, [siteData.products, prodCat]);

  var newsList = useMemo(function () {
    var list = siteData.news.slice();
    if (newsCat !== 'all') list = list.filter(function (n) { return n.cat === newsCat; });
    return list.sort(function (a, b) {
      if (a.pinned && !b.pinned) return -1;
      if (!a.pinned && b.pinned) return 1;
      return String(b.publishDate).localeCompare(String(a.publishDate));
    });
  }, [siteData.news, newsCat]);

  var scrollTo = function (id) {
    setMenuOpen(false);
    setActiveProduct(null);
    setActiveNews(null);
    setActiveNav(id);
    var el = document.getElementById(id);
    if (el) {
      el.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  };

  var handleContactSubmit = function (e) {
    e.preventDefault();
    if (!contactForm.name.trim() || !contactForm.phone.trim()) {
      alert('请填写姓名和有效的联系电话');
      return;
    }
    setSubmitting(true);
    setTimeout(function () {
      setSubmitting(false);
      alert('您的留言已提交成功！我们将指派专属牧业项目顾问与您对接，谢谢您的信任。');
      setContactForm({ name: '', phone: '', message: '' });
    }, 600);
  };

  var renderNewsContent = function (blocks) {
    return (blocks || []).map(function (block) {
      if (block.type === 'image') {
        return block.value ? <figure key={block.id} className="goke-news-figure"><img src={block.value} alt="" loading="lazy" /></figure> : null;
      }
      return block.value ? <p key={block.id}>{block.value}</p> : null;
    });
  };

  var getNewsCover = function (item) {
    var img = (item.contentBlocks || []).find(function (b) { return b.type === 'image' && b.value; });
    return img ? img.value : 'https://images.weserv.nl/?url=images.unsplash.com/photo-1500595046743-cd271d694d60?w=800&q=80';
  };

  var catLabel = function (cat) {
    var found = PRODUCT_CATS.find(function (c) { return c.id === cat; });
    return found ? found.label : '智能装备';
  };

  var newsCatLabel = function (cat) {
    var map = { company: '国科新闻', industry: '行业资讯', expo: '展会活动' };
    return map[cat] || '公司资讯';
  };

  return (
    <div className={'goke-site theme-' + theme} ref={revealRef}>
      <style>{`
        /* 全局字体导入 */
        @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;500;600;700&family=Outfit:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:wght@400;500;700&family=Syne:wght@500;700;800&family=Inter:wght@400;500;600;700&display=swap');

        /* 统一基础与过度属性 */
        .goke-site {
          --ease: cubic-bezier(.22, 1, .36, 1);
          transition: background-color 0.5s ease, color 0.5s ease, font-family 0.3s ease;
          -webkit-font-smoothing: antialiased;
          position: relative;
          min-height: 100vh;
        }
        .goke-site *, .goke-site *::before, .goke-site *::after {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
          transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s var(--ease);
        }

        /* 2.1 风格一：生机科技绿 (Theme Green) */
        .goke-site.theme-green {
          --bg-base: #F3FAF5;       /* 极淡的春意草绿底色，带来舒适高雅的视觉呼吸感 */
          --bg-card: #FFFFFF;
          --text-primary: #0E291B;   /* 深沉苍翠的松针黛绿，保证无懈可击的对比度 */
          --text-secondary: #4E6555; /* 沉静温婉的草本灰绿，用于高品质副标及描述 */
          --accent: #15803D;         /* 苍翠的主题绿洲原野绿 */
          --accent-light: #DCFCE7;   /* 极淡的植物嫩芽莹绿，用于微动浮标及高亮 Wash */
          --border: rgba(14, 41, 27, 0.08);
          --border-hover: rgba(21, 128, 61, 0.4);
          --font-family-sans: 'Outfit', sans-serif;
          --font-family-display: 'Fraunces', serif;
          --glass-scrolled: rgba(243, 250, 245, 0.88);
          --shadow-sm: 0 4px 12px rgba(14, 41, 27, 0.03);
          --shadow-lg: 0 16px 36px rgba(14, 41, 27, 0.06);
          background-color: var(--bg-base);
          color: var(--text-primary);
          font-family: var(--font-family-sans);
        }

        /* 2.2 风格二：SaaS 智能科技蓝 (Theme Blue) */
        .goke-site.theme-blue {
          --bg-base: #F8FAFC;
          --bg-card: #FFFFFF;
          --text-primary: #0F172A;
          --text-secondary: #475569;
          --accent: #2563EB;
          --accent-light: #EFF6FF;
          --border: #E2E8F0;
          --border-hover: #93C5FD;
          --font-family-sans: 'DM Sans', sans-serif;
          --font-family-display: 'Space Grotesk', sans-serif;
          --glass-scrolled: rgba(248, 250, 252, 0.9);
          --shadow-sm: 0 4px 12px rgba(37, 99, 235, 0.04);
          --shadow-lg: 0 16px 32px rgba(37, 99, 235, 0.08);
          background-color: var(--bg-base);
          color: var(--text-primary);
          font-family: var(--font-family-sans);
        }

        /* 2.3 风格三：先锋荧光黑科技 (Theme Dark) */
        .goke-site.theme-dark {
          --bg-base: #090D16;
          --bg-card: rgba(15, 23, 42, 0.6);
          --text-primary: #F1F5F9;
          --text-secondary: #94A3B8;
          --accent: #10B981;
          --accent-light: rgba(16, 185, 129, 0.12);
          --border: rgba(255, 255, 255, 0.08);
          --border-hover: rgba(16, 185, 129, 0.4);
          --font-family-sans: 'Inter', sans-serif;
          --font-family-display: 'Syne', sans-serif;
          --glass-scrolled: rgba(9, 13, 22, 0.9);
          --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.3);
          --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
          background-color: var(--bg-base);
          color: var(--text-primary);
          font-family: var(--font-family-sans);
        }

        /* 容器定义 */
        .goke-container {
          width: min(1200px, 100% - 40px);
          margin: 0 auto;
        }

        /* 导航跳跃 */
        .goke-skip {
          position: absolute;
          left: -9999px;
          z-index: 9999;
          padding: 12px 20px;
          background: var(--accent);
          color: #fff;
          font-weight: 700;
          text-decoration: none;
        }
        .goke-skip:focus {
          left: 16px;
          top: 16px;
          border-radius: 8px;
        }

        /* Header 头部区 */
        .goke-header {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          z-index: 200;
          transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease);
          background-color: transparent;
          border-bottom: 1px solid transparent;
        }
        .goke-header.is-scrolled {
          background-color: var(--glass-scrolled);
          backdrop-filter: blur(20px);
          -webkit-backdrop-filter: blur(20px);
          border-bottom: 1px solid var(--border);
          box-shadow: var(--shadow-sm);
        }
        .goke-header-inner {
          display: flex;
          align-items: center;
          justify-content: space-between;
          min-height: 72px;
          gap: 16px;
        }
        .goke-logo {
          display: flex;
          align-items: center;
          gap: 12px;
          border: none;
          background: transparent;
          cursor: pointer;
          color: var(--text-primary);
          text-decoration: none;
          text-align: left;
        }
        .goke-logo-icon {
          width: 44px;
          height: 44px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 800;
          font-family: var(--font-family-display);
          font-size: 16px;
          transition: all 0.5s var(--ease);
        }
        /* 主题自定义标志 */
        .theme-green .goke-logo-icon { background: var(--text-primary); color: #fff; border: 2px solid var(--accent); border-radius: 50%; }
        .theme-blue .goke-logo-icon { background: linear-gradient(135deg, var(--accent), #1D40AF); color: #fff; border-radius: 12px; }
        .theme-dark .goke-logo-icon { background: transparent; color: var(--accent); border: 2px solid var(--accent); box-shadow: 0 0 10px rgba(16, 185, 129, 0.4); border-radius: 0; }

        .goke-logo-text strong {
          display: block;
          font-family: var(--font-family-display);
          font-size: 19px;
          font-weight: 700;
          letter-spacing: -0.01em;
          color: var(--text-primary);
        }
        .goke-logo-text span {
          display: block;
          font-size: 11px;
          opacity: 0.75;
          letter-spacing: 0.05em;
          color: var(--text-secondary);
        }

        .goke-nav {
          display: flex;
          gap: 4px;
        }
        .goke-nav button {
          border: none;
          background: transparent;
          padding: 8px 14px;
          font-size: 14px;
          font-weight: 500;
          color: var(--text-secondary);
          cursor: pointer;
          border-radius: 99px;
          transition: all 0.3s ease;
        }
        .goke-nav button:hover, .goke-nav button.is-active {
          color: var(--accent);
          background-color: var(--accent-light);
        }
        .theme-dark .goke-nav button:hover, .theme-dark .goke-nav button.is-active {
          color: #fff;
          background-color: rgba(255, 255, 255, 0.05);
          box-shadow: inset 0 0 1px var(--accent);
        }

        .goke-header-actions {
          display: flex;
          align-items: center;
          gap: 16px;
        }
        .goke-btn-phone {
          color: var(--text-primary);
          text-decoration: none;
          font-weight: 600;
          font-size: 14px;
          font-family: var(--font-family-display);
          display: none;
          align-items: center;
          gap: 6px;
        }
        .goke-btn-phone:hover {
          color: var(--accent);
        }

        /* 统一样式按钮 */
        .goke-btn {
          min-height: 44px;
          padding: 0 24px;
          border: none;
          font-size: 14px;
          font-weight: 600;
          cursor: pointer;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          position: relative;
          z-index: 1;
          overflow: hidden;
          transition: all 0.3s var(--ease);
          text-decoration: none;
        }
        /* 主题自定义按钮圆角和背景 */
        .theme-green .goke-btn-primary {
          border-radius: 99px;
          background: var(--accent);
          color: #FFF;
        }
        .theme-green .goke-btn-primary:hover {
          background: var(--text-primary);
          transform: translateY(-2px);
          box-shadow: 0 6px 18px rgba(21, 128, 61, 0.3);
        }
        .theme-green .goke-btn-outline {
          border-radius: 99px;
          background: transparent;
          border: 1.5px solid var(--accent);
          color: var(--accent);
        }
        .theme-green .goke-btn-outline:hover {
          background: rgba(21, 128, 61, 0.05);
          transform: translateY(-2px);
        }

        .theme-blue .goke-btn-primary {
          border-radius: 10px;
          background: var(--accent);
          color: #FFF;
        }
        .theme-blue .goke-btn-primary:hover {
          background: #1D40AF;
          transform: translateY(-2px);
          box-shadow: 0 6px 18px rgba(37, 99, 235, 0.25);
        }
        .theme-blue .goke-btn-outline {
          border-radius: 10px;
          background: transparent;
          border: 1px solid var(--border);
          color: var(--text-primary);
        }
        .theme-blue .goke-btn-outline:hover {
          border-color: var(--accent);
          color: var(--accent);
          transform: translateY(-2px);
        }

        .theme-dark .goke-btn-primary {
          border-radius: 0;
          background: transparent;
          border: 1.5px solid var(--accent);
          color: #FFF;
          box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
        }
        .theme-dark .goke-btn-primary:hover {
          background: var(--accent);
          color: #090D16;
          box-shadow: 0 0 20px rgba(16, 185, 129, 0.6);
          transform: translateY(-2px);
        }
        .theme-dark .goke-btn-outline {
          border-radius: 0;
          background: transparent;
          border: 1px solid var(--border);
          color: var(--text-primary);
        }
        .theme-dark .goke-btn-outline:hover {
          border-color: #fff;
          color: #fff;
          transform: translateY(-2px);
        }

        .goke-menu-btn {
          display: none;
          width: 44px;
          height: 44px;
          border: 1px solid var(--border);
          border-radius: 10px;
          background: transparent;
          cursor: pointer;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 5px;
        }
        .goke-menu-btn span {
          width: 18px;
          height: 2px;
          background: var(--text-primary);
          border-radius: 2px;
          transition: all 0.25s;
        }
        .goke-menu-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
        .goke-menu-btn.open span:nth-child(2) { opacity: 0; }
        .goke-menu-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

        /* 首屏 Hero 展示区 */
        .goke-hero {
          position: relative;
          min-height: 94vh;
          display: flex;
          align-items: center;
          overflow: hidden;
        }
        .goke-hero-slide {
          position: absolute;
          inset: 0;
          opacity: 0;
          transition: opacity 1.2s var(--ease);
          z-index: 1;
        }
        .goke-hero-slide.is-active {
          opacity: 1;
          z-index: 2;
        }
        .goke-hero-slide img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transform: scale(1.03);
          transition: transform 1.2s var(--ease);
        }
        .goke-hero-slide.is-active img {
          transform: scale(1);
        }

        /* 遮罩及网格背景，根据主题改变 */
        .goke-hero-overlay {
          position: absolute;
          inset: 0;
          z-index: 3;
        }
        .theme-green .goke-hero-overlay {
          background: linear-gradient(135deg, rgba(14, 41, 27, 0.94) 0%, rgba(14, 41, 27, 0.6) 60%, rgba(243, 250, 245, 0.4) 100%);
        }
        .theme-blue .goke-hero-overlay {
          background: linear-gradient(135deg, rgba(15, 23, 42, 0.92) 0%, rgba(37, 99, 235, 0.35) 60%, rgba(248, 250, 252, 0.6) 100%);
        }
        .theme-dark .goke-hero-overlay {
          background: linear-gradient(135deg, rgba(9, 13, 22, 0.96) 0%, rgba(15, 23, 42, 0.8) 70%, rgba(0, 0, 0, 0.4) 100%);
        }

        .goke-hero-inner {
          position: relative;
          z-index: 10;
          width: min(1200px, 100% - 40px);
          margin: 0 auto;
          padding: 140px 0 80px;
        }
        .goke-hero-tag {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          padding: 6px 16px;
          font-size: 12px;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.1em;
          margin-bottom: 24px;
          transition: all 0.3s;
        }
        .theme-green .goke-hero-tag {
          background: rgba(21, 128, 61, 0.12);
          color: var(--accent);
          border-radius: 99px;
        }
        .theme-blue .goke-hero-tag {
          background: rgba(37, 99, 235, 0.1);
          color: var(--accent);
          border-radius: 8px;
        }
        .theme-dark .goke-hero-tag {
          border: 1px solid var(--accent);
          color: var(--accent);
          box-shadow: 0 0 8px rgba(16, 185, 129, 0.15);
        }

        .goke-hero h1 {
          margin: 0 0 20px;
          font-family: var(--font-family-display);
          font-size: clamp(34px, 5.8vw, 58px);
          font-weight: 700;
          line-height: 1.15;
          color: #FFF;
        }
        .theme-dark .goke-hero h1 {
          font-weight: 800;
          letter-spacing: -0.02em;
        }
        .goke-hero h1 em {
          font-style: normal;
          color: var(--accent);
        }
        .goke-hero-lead {
          margin: 0 0 36px;
          font-size: clamp(15px, 2vw, 17px);
          line-height: 1.75;
          max-width: 600px;
          color: rgba(255, 255, 255, 0.8);
        }
        .goke-hero-btns {
          display: flex;
          gap: 12px;
          flex-wrap: wrap;
        }

        .goke-hero-dots {
          position: absolute;
          bottom: 40px;
          left: 50%;
          transform: translateX(-50%);
          z-index: 10;
          display: flex;
          gap: 8px;
        }
        .goke-hero-dot {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          border: 1.5px solid rgba(255, 255, 255, 0.4);
          background: transparent;
          cursor: pointer;
          padding: 0;
          transition: all 0.3s ease;
        }
        .goke-hero-dot.is-active {
          background: var(--accent);
          border-color: var(--accent);
          transform: scale(1.15);
        }

        /* Section 通用结构 */
        .goke-section {
          padding: clamp(64px, 8vw, 100px) 0;
        }
        .goke-section-head {
          text-align: center;
          max-width: 640px;
          margin: 0 auto 52px;
        }
        .goke-section-head h2 {
          margin: 0 0 14px;
          font-family: var(--font-family-display);
          font-size: clamp(28px, 4vw, 38px);
          font-weight: 700;
          color: var(--text-primary);
        }
        .goke-section-head p {
          margin: 0;
          font-size: 15px;
          color: var(--text-secondary);
          line-height: 1.7;
        }
        .goke-eyebrow {
          display: inline-block;
          font-size: 12px;
          font-weight: 700;
          letter-spacing: 0.15em;
          text-transform: uppercase;
          color: var(--accent);
          margin-bottom: 12px;
        }

        /* Bento Grid 业务入口 */
        .goke-bento {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          grid-auto-rows: minmax(180px, auto);
          gap: 20px;
        }
        .goke-bento-item {
          position: relative;
          border-radius: 20px;
          overflow: hidden;
          border: 1px solid var(--border);
          background: var(--bg-card);
          box-shadow: var(--shadow-sm);
          cursor: pointer;
          text-align: left;
          padding: 28px;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          transition: all 0.4s var(--ease);
          color: var(--text-primary);
        }
        .theme-dark .goke-bento-item {
          border-radius: 0;
          backdrop-filter: blur(8px);
        }
        .goke-bento-item:hover {
          border-color: var(--border-hover);
          transform: translateY(-4px);
          box-shadow: var(--shadow-lg);
        }
        .goke-bento-item.wide { grid-column: span 2; }
        .goke-bento-item.tall { grid-row: span 2; justify-content: space-between; }

        .goke-bento-bg {
          position: absolute;
          inset: 0;
          opacity: 0.08;
          z-index: 1;
          transition: transform 0.6s var(--ease), opacity 0.4s ease;
        }
        .theme-dark .goke-bento-bg { opacity: 0.15; }
        .goke-bento-bg img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        .goke-bento-item:hover .goke-bento-bg {
          transform: scale(1.05);
          opacity: 0.16;
        }
        .goke-bento-body {
          position: relative;
          z-index: 2;
        }
        .goke-bento-body h3 {
          margin: 0 0 10px;
          font-family: var(--font-family-display);
          font-size: 19px;
          font-weight: 700;
          color: var(--text-primary);
        }
        .goke-bento-body p {
          margin: 0;
          font-size: 13.5px;
          color: var(--text-secondary);
          line-height: 1.6;
        }

        /* 核心装备 Products 展示区 */
        .goke-tabs {
          display: flex;
          justify-content: center;
          gap: 8px;
          flex-wrap: wrap;
          margin-bottom: 36px;
        }
        .goke-tab {
          min-height: 40px;
          padding: 0 18px;
          border: 1px solid var(--border);
          background-color: var(--bg-card);
          font-size: 13.5px;
          font-weight: 500;
          color: var(--text-secondary);
          cursor: pointer;
          transition: all 0.3s;
          box-shadow: var(--shadow-sm);
        }
        .theme-green .goke-tab { border-radius: 99px; }
        .theme-blue .goke-tab { border-radius: 8px; }
        .theme-dark .goke-tab { border-radius: 0; }

        .goke-tab:hover {
          border-color: var(--accent);
          color: var(--accent);
        }
        .goke-tab.is-active {
          background-color: var(--accent);
          border-color: var(--accent);
          color: var(--bg-base);
          font-weight: 600;
        }
        .theme-dark .goke-tab.is-active {
          color: #090D16;
        }

        .goke-prod-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 24px;
        }
        .goke-prod-card {
          background-color: var(--bg-card);
          border: 1px solid var(--border);
          box-shadow: var(--shadow-sm);
          cursor: pointer;
          overflow: hidden;
          transition: all 0.4s var(--ease);
          display: flex;
          flex-direction: column;
        }
        .theme-green .goke-prod-card { border-radius: 20px; }
        .theme-blue .goke-prod-card { border-radius: 12px; }
        .theme-dark .goke-prod-card { border-radius: 0; }

        .goke-prod-card:hover {
          border-color: var(--border-hover);
          transform: translateY(-5px);
          box-shadow: var(--shadow-lg);
        }
        .goke-prod-cover {
          aspect-ratio: 16/10;
          overflow: hidden;
          background-color: var(--border);
          position: relative;
        }
        .goke-prod-cover img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.6s var(--ease);
        }
        .goke-prod-card:hover .goke-prod-cover img {
          transform: scale(1.05);
        }
        .goke-prod-body {
          padding: 24px;
          text-align: left;
          flex: 1;
          display: flex;
          flex-direction: column;
        }
        .goke-prod-tag {
          display: inline-block;
          padding: 4px 10px;
          font-size: 11px;
          font-weight: 700;
          text-transform: uppercase;
          margin-bottom: 12px;
          align-self: flex-start;
        }
        .theme-green .goke-prod-tag { background: var(--accent-light); color: var(--text-primary); border-radius: 4px; }
        .theme-blue .goke-prod-tag { background: var(--accent-light); color: var(--accent); border-radius: 4px; }
        .theme-dark .goke-prod-tag { border: 1px solid var(--accent); color: var(--accent); }

        .goke-prod-body h3 {
          margin: 0 0 10px;
          font-family: var(--font-family-display);
          font-size: 18px;
          font-weight: 700;
          color: var(--text-primary);
        }
        .goke-prod-body p {
          margin: 0;
          font-size: 13.5px;
          color: var(--text-secondary);
          line-height: 1.6;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          overflow: hidden;
          flex: 1;
        }

        /* 智慧方案 Solutions 展示区 */
        .goke-sol-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 24px;
        }
        .goke-sol-card {
          position: relative;
          overflow: hidden;
          min-height: 320px;
          border: none;
          cursor: pointer;
          text-align: left;
          background: #000;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          box-shadow: var(--shadow-sm);
        }
        .theme-green .goke-sol-card { border-radius: 20px; }
        .theme-blue .goke-sol-card { border-radius: 12px; }
        .theme-dark .goke-sol-card { border-radius: 0; }

        .goke-sol-card img {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          opacity: 0.55;
          transition: transform 0.6s var(--ease), opacity 0.4s ease;
        }
        .goke-sol-card:hover img {
          transform: scale(1.04);
          opacity: 0.65;
        }
        .goke-sol-body {
          position: relative;
          z-index: 10;
          padding: 32px;
          color: #FFF;
          background: linear-gradient(180deg, transparent 15%, rgba(9, 13, 22, 0.94) 100%);
        }
        .goke-sol-body h3 {
          margin: 0 0 10px;
          font-family: var(--font-family-display);
          font-size: 21px;
          font-weight: 700;
        }
        .goke-sol-body p {
          margin: 0;
          font-size: 13.5px;
          opacity: 0.85;
          line-height: 1.6;
        }

        /* 关于国科 About 展示区 */
        .goke-about-grid {
          display: grid;
          grid-template-columns: 1fr 1.1fr;
          gap: 48px;
          align-items: center;
        }
        .goke-about-img {
          overflow: hidden;
          box-shadow: var(--shadow-lg);
          position: relative;
        }
        .theme-green .goke-about-img { border-radius: 24px; }
        .theme-blue .goke-about-img { border-radius: 12px; }
        .theme-dark .goke-about-img { border-radius: 0; }

        .goke-about-img img {
          width: 100%;
          display: block;
        }
        .goke-about-content {
          text-align: left;
        }
        .goke-about-content h2 {
          margin: 0 0 18px;
          font-family: var(--font-family-display);
          font-size: clamp(26px, 3.5vw, 36px);
          font-weight: 700;
          color: var(--text-primary);
        }
        .goke-about-content p {
          margin: 0 0 16px;
          font-size: 15px;
          color: var(--text-secondary);
          line-height: 1.75;
        }
        .goke-about-links {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;
          margin-top: 24px;
        }
        .goke-about-link {
          padding: 8px 16px;
          font-size: 13px;
          font-weight: 600;
          border: 1px solid var(--border);
          background-color: var(--bg-card);
          color: var(--text-primary);
          cursor: pointer;
          transition: all 0.3s;
        }
        .theme-green .goke-about-link { border-radius: 8px; }
        .theme-blue .goke-about-link { border-radius: 8px; }
        .theme-dark .goke-about-link { border-radius: 0; }

        .goke-about-link:hover {
          border-color: var(--accent);
          color: var(--accent);
          background-color: var(--accent-light);
        }

        /* 资讯与新闻 News 展示区 */
        .goke-news-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 24px;
        }
        .goke-news-card {
          background-color: var(--bg-card);
          border: 1px solid var(--border);
          box-shadow: var(--shadow-sm);
          cursor: pointer;
          overflow: hidden;
          transition: all 0.4s var(--ease);
          display: flex;
          flex-direction: column;
          text-align: left;
          height: 100%;
        }
        .theme-green .goke-news-card { border-radius: 20px; }
        .theme-blue .goke-news-card { border-radius: 12px; }
        .theme-dark .goke-news-card { border-radius: 0; }

        .goke-news-card:hover {
          border-color: var(--border-hover);
          transform: translateY(-4px);
          box-shadow: var(--shadow-lg);
        }
        .goke-news-thumb {
          aspect-ratio: 16/9;
          overflow: hidden;
          background-color: var(--border);
        }
        .goke-news-thumb img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.6s var(--ease);
        }
        .goke-news-card:hover .goke-news-thumb img {
          transform: scale(1.04);
        }
        .goke-news-body {
          padding: 24px;
          flex: 1;
          display: flex;
          flex-direction: column;
        }
        .goke-news-meta {
          font-size: 11.5px;
          font-weight: 600;
          color: var(--accent);
          margin-bottom: 10px;
          display: flex;
          align-items: center;
          gap: 6px;
        }
        .goke-news-body h4 {
          margin: 0 0 10px;
          font-family: var(--font-family-display);
          font-size: 16.5px;
          font-weight: 700;
          line-height: 1.45;
          color: var(--text-primary);
        }
        .goke-news-body p {
          margin: 0;
          font-size: 13.5px;
          color: var(--text-secondary);
          line-height: 1.6;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          overflow: hidden;
          flex: 1;
        }

        /* 在线咨询与留言 Contact 区 */
        .goke-contact-grid {
          display: grid;
          grid-template-columns: 1fr 1.2fr;
          gap: 36px;
        }
        .goke-contact-info {
          padding: 36px;
          border: 1px solid var(--border);
          background-color: var(--bg-card);
          box-shadow: var(--shadow-sm);
          text-align: left;
        }
        .theme-green .goke-contact-info { border-radius: 24px; }
        .theme-blue .goke-contact-info { border-radius: 12px; }
        .theme-dark .goke-contact-info { border-radius: 0; }

        .goke-contact-info h3 {
          margin: 0 0 24px;
          font-family: var(--font-family-display);
          font-size: clamp(20px, 2.5vw, 24px);
          font-weight: 700;
          color: var(--text-primary);
        }
        .goke-contact-row {
          display: flex;
          gap: 16px;
          margin-bottom: 24px;
        }
        .goke-contact-icon {
          width: 44px;
          height: 44px;
          border-radius: 12px;
          background-color: var(--accent-light);
          color: var(--accent);
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          font-size: 18px;
        }
        .theme-dark .goke-contact-icon {
          background-color: rgba(255, 255, 255, 0.05);
          border: 1px solid var(--accent);
          border-radius: 0;
        }
        .goke-contact-row strong {
          display: block;
          font-size: 11px;
          font-weight: 700;
          color: var(--accent);
          text-transform: uppercase;
          letter-spacing: 0.08em;
          margin-bottom: 4px;
        }
        .goke-contact-row p {
          font-size: 15px;
          color: var(--text-primary);
          line-height: 1.45;
        }

        .goke-form {
          background-color: var(--bg-card);
          border: 1px solid var(--border);
          box-shadow: var(--shadow-sm);
          padding: 36px;
        }
        .theme-green .goke-form { border-radius: 24px; }
        .theme-blue .goke-form { border-radius: 12px; }
        .theme-dark .goke-form { border-radius: 0; }

        .goke-form h3 {
          margin: 0 0 8px;
          font-family: var(--font-family-display);
          font-size: clamp(20px, 2.5vw, 24px);
          font-weight: 700;
          text-align: left;
        }
        .goke-form-sub {
          margin: 0 0 24px;
          font-size: 14px;
          color: var(--text-secondary);
          text-align: left;
        }
        .goke-field {
          margin-bottom: 18px;
          text-align: left;
        }
        .goke-field label {
          display: block;
          font-size: 13.5px;
          font-weight: 600;
          margin-bottom: 8px;
          color: var(--text-primary);
        }
        .goke-field input, .goke-field textarea {
          width: 100%;
          border: 1px solid var(--border);
          background-color: var(--bg-base);
          color: var(--text-primary);
          padding: 12px 16px;
          font-size: 14.5px;
          font-family: inherit;
          outline: none;
          transition: all 0.3s;
        }
        .theme-green .goke-field input, .theme-green .goke-field textarea { border-radius: 8px; }
        .theme-blue .goke-field input, .theme-blue .goke-field textarea { border-radius: 8px; }
        .theme-dark .goke-field input, .theme-dark .goke-field textarea { border-radius: 0; }

        .goke-field input:focus, .goke-field textarea:focus {
          border-color: var(--accent);
          background-color: var(--bg-card);
          box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.12);
        }
        .theme-blue .goke-field input:focus, .theme-blue .goke-field textarea:focus {
          box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
        }
        .theme-dark .goke-field input:focus, .theme-dark .goke-field textarea:focus {
          box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
        }
        .goke-field textarea {
          min-height: 100px;
          resize: vertical;
        }

        /* 页脚 Footer */
        .goke-footer {
          border-top: 1px solid var(--border);
          padding: 64px 0 32px;
          background-color: var(--bg-card);
        }
        .theme-dark .goke-footer {
          background-color: rgba(9, 13, 22, 0.6);
        }
        .goke-footer-grid {
          display: grid;
          grid-template-columns: 2fr 1fr 1fr 1fr;
          gap: 36px;
          margin-bottom: 40px;
          text-align: left;
        }
        .goke-footer-brand strong {
          display: block;
          font-family: var(--font-family-display);
          font-size: 20px;
          color: var(--text-primary);
          margin-bottom: 12px;
        }
        .goke-footer-brand p {
          font-size: 13.5px;
          color: var(--text-secondary);
          line-height: 1.7;
          max-width: 280px;
        }
        .goke-footer h4 {
          color: var(--text-primary);
          font-size: 13.5px;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.05em;
          margin-bottom: 16px;
        }
        .goke-footer p, .goke-footer a, .goke-footer button {
          font-size: 13.5px;
          line-height: 1.85;
          color: var(--text-secondary);
          text-decoration: none;
          display: block;
          background: none;
          border: none;
          padding: 0;
          cursor: pointer;
          text-align: left;
          margin-bottom: 8px;
        }
        .goke-footer a:hover, .goke-footer button:hover {
          color: var(--accent);
        }
        .goke-footer-copy {
          border-top: 1px solid var(--border);
          padding-top: 24px;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          gap: 12px;
          font-size: 12.5px;
          color: var(--text-secondary);
        }

        /* 全屏 Modal 弹出层模版 */
        .goke-modal-mask {
          position: fixed;
          inset: 0;
          z-index: 300;
          background: rgba(9, 13, 22, 0.45);
          backdrop-filter: blur(8px);
          -webkit-backdrop-filter: blur(8px);
          display: flex;
          align-items: flex-start;
          justify-content: center;
          padding: 32px 16px;
          overflow: auto;
        }
        .goke-modal {
          width: min(840px, 100%);
          background-color: var(--bg-card);
          border: 1px solid var(--border);
          box-shadow: var(--shadow-lg);
          margin: auto 0;
          overflow: hidden;
        }
        .theme-green .goke-modal { border-radius: 24px; }
        .theme-blue .goke-modal { border-radius: 12px; }
        .theme-dark .goke-modal { border-radius: 0; }

        .goke-modal-head {
          padding: 24px 32px;
          border-bottom: 1px solid var(--border);
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          gap: 16px;
          position: sticky;
          top: 0;
          background-color: var(--bg-card);
          z-index: 10;
        }
        .goke-modal-head h3 {
          margin: 0;
          font-family: var(--font-family-display);
          font-size: clamp(20px, 3.2vw, 25px);
          font-weight: 700;
          color: var(--text-primary);
          line-height: 1.35;
          text-align: left;
        }
        .goke-modal-close {
          width: 44px;
          height: 44px;
          border: 1px solid var(--border);
          background-color: var(--bg-card);
          color: var(--text-secondary);
          cursor: pointer;
          font-size: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
        }
        .theme-green .goke-modal-close { border-radius: 12px; }
        .theme-blue .goke-modal-close { border-radius: 8px; }
        .theme-dark .goke-modal-close { border-radius: 0; }

        .goke-modal-close:hover {
          color: var(--accent);
          border-color: var(--accent);
        }
        .goke-modal-body {
          padding: 32px;
          text-align: left;
        }
        .goke-modal-hero-img {
          width: 100%;
          max-height: 400px;
          object-fit: cover;
          margin-bottom: 24px;
        }
        .theme-green .goke-modal-hero-img { border-radius: 16px; }
        .theme-blue .goke-modal-hero-img { border-radius: 8px; }
        .theme-dark .goke-modal-hero-img { border-radius: 0; }

        .goke-modal-intro {
          font-size: 15.5px;
          line-height: 1.8;
          color: var(--text-secondary);
          margin-bottom: 24px;
        }
        .goke-gallery {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 14px;
        }
        .goke-gallery img {
          width: 100%;
          aspect-ratio: 4/3;
          object-fit: cover;
        }
        .theme-green .goke-gallery img { border-radius: 12px; }
        .theme-blue .goke-gallery img { border-radius: 8px; }
        .theme-dark .goke-gallery img { border-radius: 0; }

        .goke-news-meta-modal {
          font-size: 13px;
          color: var(--accent);
          font-weight: 600;
          margin-bottom: 16px;
        }
        .goke-news-content p {
          font-size: 15.5px;
          line-height: 1.85;
          color: var(--text-secondary);
          margin-bottom: 18px;
        }
        .goke-news-figure {
          margin-bottom: 24px;
        }
        .goke-news-figure img {
          width: 100%;
          display: block;
        }
        .theme-green .goke-news-figure img { border-radius: 16px; }
        .theme-blue .goke-news-figure img { border-radius: 8px; }
        .theme-dark .goke-news-figure img { border-radius: 0; }

        /* Scroll 渐现 Reveal */
        .goke-reveal {
          opacity: 0;
          transform: translateY(24px);
          transition: opacity .8s var(--ease), transform .8s var(--ease);
        }
        .goke-reveal.is-visible {
          opacity: 1;
          transform: none;
        }
        .goke-reveal-d1 { transition-delay: .08s; }
        .goke-reveal-d2 { transition-delay: .16s; }
        .goke-reveal-d3 { transition-delay: .24s; }

        /* 2.4 主题切换漂浮控制器 (Theme Switcher Console) */
        .goke-switcher {
          position: fixed;
          bottom: 32px;
          right: 32px;
          z-index: 250;
          background: rgba(255, 255, 255, 0.75);
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          border: 1px solid rgba(0, 0, 0, 0.08);
          border-radius: 40px;
          padding: 6px;
          display: flex;
          gap: 4px;
          box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
        }
        .theme-dark .goke-switcher {
          background: rgba(15, 23, 42, 0.8);
          border-color: rgba(255, 255, 255, 0.1);
          box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
        }
        .goke-switcher-btn {
          width: 36px;
          height: 36px;
          border-radius: 50%;
          border: none;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 15px;
          position: relative;
          background: transparent;
          transition: all 0.3s var(--ease);
        }
        .goke-switcher-btn::after {
          content: attr(data-tooltip);
          position: absolute;
          bottom: 125%;
          right: 50%;
          transform: translateX(50%) translateY(4px);
          background: #000;
          color: #fff;
          font-size: 11px;
          padding: 4px 8px;
          border-radius: 4px;
          white-space: nowrap;
          opacity: 0;
          pointer-events: none;
          transition: all 0.3s;
        }
        .goke-switcher-btn:hover::after {
          opacity: 1;
          transform: translateX(50%) translateY(0);
        }
        .goke-switcher-btn.active {
          transform: scale(1.15);
        }
        .switcher-green { background: #F3FAF5; border: 1.5px solid #15803D; color: #15803D; }
        .switcher-blue { background: #EFF6FF; border: 1.5px solid #2563EB; color: #2563EB; }
        .switcher-dark { background: #090D16; border: 1.5px solid #10B981; color: #10B981; }

        /* 响应式媒体查询 */
        @media (max-width: 1024px) {
          .goke-bento { grid-template-columns: repeat(2, 1fr); }
          .goke-bento-item.wide { grid-column: span 2; }
          .goke-bento-item.tall { grid-row: span 1; justify-content: flex-end; }
          .goke-prod-grid, .goke-sol-grid, .goke-news-grid { grid-template-columns: repeat(2, 1fr); }
          .goke-about-grid, .goke-contact-grid { grid-template-columns: 1fr; }
          .goke-footer-grid { grid-template-columns: 1fr 1fr; }
        }

        @media (max-width: 768px) {
          .goke-nav {
            display: none;
            position: absolute;
            top: 72px;
            left: 0;
            right: 0;
            flex-direction: column;
            background-color: var(--bg-card);
            padding: 16px;
            border-bottom: 1px solid var(--border);
            align-items: stretch;
            box-shadow: var(--shadow-lg);
          }
          .goke-nav.open {
            display: flex;
          }
          .goke-nav button {
            width: 100%;
            text-align: left;
            padding: 12px 16px;
            border-radius: 8px;
          }
          .goke-header-actions .goke-btn-phone { display: none; }
          .goke-menu-btn { display: flex; }
          .goke-header-inner { position: relative; }
          .goke-bento, .goke-prod-grid, .goke-sol-grid, .goke-news-grid { grid-template-columns: 1fr; }
          .goke-bento-item.wide { grid-column: span 1; }
          .goke-footer-grid { grid-template-columns: 1fr; }
          .goke-gallery { grid-template-columns: 1fr; }
          .goke-switcher { bottom: 16px; right: 16px; }
        }

        @media (min-width: 769px) {
          .goke-btn-phone { display: inline-flex; }
        }

        @media (prefers-reduced-motion: reduce) {
          .goke-reveal {
            opacity: 1;
            transform: none;
            transition: none;
          }
        }
      `}</style>

      {/* 跳过至主要内容链接（可访问性） */}
      <a href="#main" className="goke-skip">跳至主要内容</a>

      {/* 2.4 浮动风格控制器 */}
      <div className="goke-switcher" role="toolbar" aria-label="主题风格切换控制台">
        <button type="button" className={'goke-switcher-btn switcher-green' + (theme === 'green' ? ' active' : '')} data-tooltip="生机科技绿" aria-label="切换至生机科技绿风格" onClick={function () { setTheme('green'); }} aria-pressed={theme === 'green'}>🌿</button>
        <button type="button" className={'goke-switcher-btn switcher-blue' + (theme === 'blue' ? ' active' : '')} data-tooltip="科技蓝智联" aria-label="切换至科技蓝风格" onClick={function () { setTheme('blue'); }} aria-pressed={theme === 'blue'}>⚡</button>
        <button type="button" className={'goke-switcher-btn switcher-dark' + (theme === 'dark' ? ' active' : '')} data-tooltip="先锋极智黑" aria-label="切换至荧光黑风格" onClick={function () { setTheme('dark'); }} aria-pressed={theme === 'dark'}>🌌</button>
      </div>

      {/* 头部导航区域 */}
      <header className={'goke-header' + (scrolled ? ' is-scrolled' : '')}>
        <div className="goke-container goke-header-inner">
          <button type="button" className="goke-logo" onClick={function () { scrollTo('top'); }} aria-label="返回首页">
            <span className="goke-logo-icon">诚</span>
            <span className="goke-logo-text">
              <strong>国科诚泰</strong>
              <span>智慧畜牧装备与服务</span>
            </span>
          </button>

          <nav className={'goke-nav' + (menuOpen ? ' open' : '')} aria-label="主导航">
            {NAV.map(function (item) {
              return (
                <button
                  key={item.id}
                  type="button"
                  className={activeNav === item.id ? 'is-active' : ''}
                  onClick={function () { scrollTo(item.id); }}
                >
                  {item.label}
                </button>
              );
            })}
          </nav>

          <div className="goke-header-actions">
            <a className="goke-btn-phone" href={'tel:' + HOTLINE.replace(/-/g, '')}>
              <span>📞</span> {HOTLINE}
            </a>
            <button type="button" className="goke-btn goke-btn-primary" onClick={function () { scrollTo('contact'); }}>
              在线留言
            </button>
            <button
              type="button"
              className={'goke-menu-btn' + (menuOpen ? ' open' : '')}
              aria-label="导航菜单"
              aria-expanded={menuOpen}
              onClick={function () { setMenuOpen(!menuOpen); }}
            >
              <span />
              <span />
              <span />
            </button>
          </div>
        </div>
      </header>

      <main id="main">
        {/* 首屏巨幕大焦点轮播 */}
        <section id="top" className="goke-hero">
          <div className="goke-hero-overlay" aria-hidden="true" />
          {HERO_SLIDES.map(function (slide, i) {
            return (
              <div key={i} className={'goke-hero-slide' + (slideIdx === i ? ' is-active' : '')}>
                <img src={slide.img} alt={slide.title} loading={i === 0 ? 'eager' : 'lazy'} />
              </div>
            );
          })}
          <div className="goke-container goke-hero-inner goke-reveal">
            <div className="goke-hero-tag">国家级专精特新「小巨人」</div>
            <h1>
              国科诚泰 · <em>智慧畜牧</em>
              <br />
              装备与服务引领者
            </h1>
            <p className="goke-hero-lead">
              北京国科诚泰农牧设备有限公司深耕智慧畜牧装备领域。我们创新研发了「全混合日粮TMR中央厨房」成套装备和智慧牧场数字化决策管理平台，为现代草牧业提供从高精端设备、环保工艺到大数据平台的全链路智造解决方案。
            </p>
            <div className="goke-hero-btns">
              <button type="button" className="goke-btn goke-btn-primary" onClick={function () { scrollTo('portal'); }}>
                探索业务领域
              </button>
              <button type="button" className="goke-btn goke-btn-outline" onClick={function () { scrollTo('contact'); }}>
                预约咨询对接
              </button>
            </div>
          </div>
          <div className="goke-hero-dots" role="tablist" aria-label="幻灯片导航">
            {HERO_SLIDES.map(function (_, i) {
              return (
                <button
                  key={i}
                  type="button"
                  className={'goke-hero-dot' + (slideIdx === i ? ' is-active' : '')}
                  role="tab"
                  aria-selected={slideIdx === i}
                  aria-label={'展示第 ' + (i + 1) + ' 张幻灯片'}
                  onClick={function () { setSlideIdx(i); }}
                />
              );
            })}
          </div>
        </section>

        {/* 业务领域 Bento Grid 排版 */}
        <section id="portal" className="goke-section">
          <div className="goke-container">
            <div className="goke-section-head goke-reveal">
              <span className="goke-eyebrow">Services</span>
              <h2>六大核心业务板块</h2>
              <p>国科农牧围绕智慧牛场、智慧羊场、智慧猪场、环境工程、易牧网与国科蓝海，打造现代化牧场集群体系</p>
            </div>
            <div className="goke-bento">
              {PORTAL_ITEMS.map(function (item, idx) {
                return (
                  <div
                    key={item.id}
                    className={'goke-bento-item ' + item.span + ' goke-reveal goke-reveal-d' + (idx % 3 + 1)}
                    onClick={function () { scrollTo('products'); }}
                  >
                    <div className="goke-bento-bg" aria-hidden="true">
                      <img src={item.img} alt="" loading="lazy" />
                    </div>
                    <div className="goke-bento-body">
                      <h3>{item.title}</h3>
                      <p>{item.desc}</p>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </section>

        {/* 核心装备展示区 */}
        <section id="products" className="goke-section" style={{ backgroundColor: 'rgba(127,127,127,0.02)' }}>
          <div className="goke-container">
            <div className="goke-section-head goke-reveal">
              <span className="goke-eyebrow">Equipment</span>
              <h2>核心智能畜牧装备</h2>
              <p>自主研发的高集成、模块化重型装备，以严苛标准服务规模化养殖环境</p>
            </div>

            <div className="goke-tabs" role="tablist" aria-label="产品分类">
              {PRODUCT_CATS.map(function (cat) {
                return (
                  <button
                    key={cat.id}
                    type="button"
                    className={'goke-tab' + (prodCat === cat.id ? ' is-active' : '')}
                    role="tab"
                    aria-selected={prodCat === cat.id}
                    onClick={function () { setProdCat(cat.id); }}
                  >
                    {cat.label}
                  </button>
                );
              })}
            </div>

            <div className="goke-prod-grid">
              {products.map(function (prod, idx) {
                return (
                  <div
                    key={prod.id}
                    className={'goke-prod-card goke-reveal goke-reveal-d' + (idx % 3 + 1)}
                    onClick={function () { setActiveProduct(prod); }}
                  >
                    <div className="goke-prod-cover">
                      <img src={prod.cover} alt={prod.name} loading="lazy" />
                    </div>
                    <div className="goke-prod-body">
                      <span className="goke-prod-tag">{catLabel(prod.cat)}</span>
                      <h3>{prod.name}</h3>
                      <p>{prod.intro}</p>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </section>

        {/* 智慧方案展示区 */}
        <section id="solutions" className="goke-section">
          <div className="goke-container">
            <div className="goke-section-head goke-reveal">
              <span className="goke-eyebrow">Solutions</span>
              <h2>智慧牧场全套方案</h2>
              <p>应用物联网、AI视觉算法与生物安全控制，打通畜牧业数字化最后一公里</p>
            </div>
            <div className="goke-sol-grid">
              {SOLUTIONS.map(function (sol, idx) {
                return (
                  <div
                    key={sol.id}
                    className={'goke-sol-card goke-reveal goke-reveal-d' + (idx % 3 + 1)}
                    onClick={function () { scrollTo('contact'); }}
                  >
                    <img src={sol.img} alt={sol.title} loading="lazy" />
                    <div className="goke-sol-body">
                      <h3>{sol.title}</h3>
                      <p>{sol.desc}</p>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </section>

        {/* 关于国科企业荣誉介绍 */}
        <section id="about" className="goke-section" style={{ backgroundColor: 'rgba(127,127,127,0.02)' }}>
          <div className="goke-container">
            <div className="goke-about-grid">
              <div className="goke-about-img goke-reveal">
                <img src="https://images.weserv.nl/?url=images.unsplash.com/photo-1546445317-29f4545e9d53?w=1000&q=85" alt="智慧牛场实拍" loading="lazy" />
              </div>
              <div className="goke-about-content goke-reveal goke-reveal-d2">
                <span className="goke-eyebrow">About GOKE</span>
                <h2>科技赋能草牧业<br />服务现代农牧</h2>
                <p>
                  北京国科诚泰农牧设备有限公司成立于2008年。作为深耕智慧畜牧的高新技术型企业，公司于2023年成功荣获国家级专精特新「小巨人」企业称号。
                </p>
                <p>
                  我们致力于将先进传感器、自动化数控机械与大数据决策相结合，设计研发的智能TMR精准饲喂系统、并联/转盘式重型挤奶台、高环保粪污无害化资源利用技术已被上千家现代化大型牧场广泛采用，大幅提升了牧草转化效率和乳肉产量，开创了智能绿色草牧时代。
                </p>
                <div className="goke-about-links">
                  <button type="button" className="goke-about-link" onClick={function () { scrollTo('portal'); }}>业务资质</button>
                  <button type="button" className="goke-about-link" onClick={function () { scrollTo('news'); }}>研发荣誉</button>
                  <button type="button" className="goke-about-link" onClick={function () { scrollTo('contact'); }}>项目业绩</button>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* 动态新闻资讯 */}
        <section id="news" className="goke-section">
          <div className="goke-container">
            <div className="goke-section-head goke-reveal">
              <span className="goke-eyebrow">News & Events</span>
              <h2>国科新闻与媒体聚焦</h2>
              <p>实时跟踪前沿硬核装备动态，展会盛况以及国家专精特新研究成果</p>
            </div>

            <div className="goke-tabs" role="tablist" aria-label="新闻分类">
              <button type="button" className={'goke-tab' + (newsCat === 'all' ? ' is-active' : '')} onClick={function () { setNewsCat('all'); }}>全部咨询</button>
              <button type="button" className={'goke-tab' + (newsCat === 'company' ? ' is-active' : '')} onClick={function () { setNewsCat('company'); }}>国科要闻</button>
              <button type="button" className={'goke-tab' + (newsCat === 'industry' ? ' is-active' : '')} onClick={function () { setNewsCat('industry'); }}>行业趋势</button>
              <button type="button" className={'goke-tab' + (newsCat === 'expo' ? ' is-active' : '')} onClick={function () { setNewsCat('expo'); }}>展会实况</button>
            </div>

            <div className="goke-news-grid">
              {newsList.map(function (item, idx) {
                return (
                  <div
                    key={item.id}
                    className={'goke-news-card goke-reveal goke-reveal-d' + (idx % 3 + 1)}
                    onClick={function () { setActiveNews(item); }}
                  >
                    <div className="goke-news-thumb">
                      <img src={getNewsCover(item)} alt={item.title} loading="lazy" />
                    </div>
                    <div className="goke-news-body">
                      <div className="goke-news-meta">
                        <span>📅 {item.publishDate}</span>
                        <span>•</span>
                        <span>{newsCatLabel(item.cat)}</span>
                        {item.pinned ? <span style={{ color: 'var(--accent)', marginLeft: 'auto', fontWeight: 'bold' }}>[置顶]</span> : null}
                      </div>
                      <h4>{item.title}</h4>
                      <p>{item.intro}</p>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </section>

        {/* 预约咨询留言区 */}
        <section id="contact" className="goke-section" style={{ backgroundColor: 'rgba(127,127,127,0.02)' }}>
          <div className="goke-container">
            <div className="goke-contact-grid">
              <div className="goke-contact-info goke-reveal">
                <h3>联系国科诚泰</h3>
                <p style={{ fontSize: '14.5px', color: 'var(--text-secondary)', marginBottom: '32px', lineHeight: '1.6' }}>
                  如果您需要现代化牧场规划设计、成套TMR中控厨房、粪水环保工程配置或最新的智能机械选型，欢迎来电咨询，我们的专属高级顾问将为您提供一站式专业解答。
                </p>

                <div className="goke-contact-row">
                  <div className="goke-contact-icon">🏢</div>
                  <div>
                    <strong>公司总部</strong>
                    <p>{COMPANY}</p>
                    <p style={{ fontSize: '13px', color: 'var(--text-secondary)', marginTop: '4px' }}>北京市海淀区中关村南大街12号</p>
                  </div>
                </div>

                <div className="goke-contact-row">
                  <div className="goke-contact-icon">📞</div>
                  <div>
                    <strong>项目合作热线</strong>
                    <p style={{ fontSize: '20px', fontWeight: '700', color: 'var(--accent)' }}>{HOTLINE}</p>
                    <p style={{ fontSize: '12px', color: 'var(--text-secondary)', marginTop: '4px' }}>周一至周日 8:30 - 18:30</p>
                  </div>
                </div>

                <div className="goke-contact-row">
                  <div className="goke-contact-icon">🛡️</div>
                  <div>
                    <strong>资质实力认证</strong>
                    <p>国家级专精特新「小巨人」 · 拥有多项发明专利</p>
                  </div>
                </div>
              </div>

              <form className="goke-form goke-reveal goke-reveal-d2" onSubmit={handleContactSubmit}>
                <h3>在线预约方案咨询</h3>
                <p className="goke-form-sub">请在下方留下您的采购或建站需求，项目总监将于1个工作日内联系您</p>

                <div className="goke-field">
                  <label htmlFor="goke-name">您的称呼 *</label>
                  <input
                    id="goke-name"
                    type="text"
                    required
                    placeholder="例如：张经理 / 李场长"
                    value={contactForm.name}
                    onChange={function (e) {
                      setContactForm(Object.assign({}, contactForm, { name: e.target.value }));
                    }}
                    autoComplete="name"
                  />
                </div>

                <div className="goke-field">
                  <label htmlFor="goke-phone">联系电话 *</label>
                  <input
                    id="goke-phone"
                    type="tel"
                    required
                    placeholder="请输入11位手机号码"
                    value={contactForm.phone}
                    onChange={function (e) {
                      setContactForm(Object.assign({}, contactForm, { phone: e.target.value }));
                    }}
                    autoComplete="tel"
                  />
                </div>

                <div className="goke-field">
                  <label htmlFor="goke-msg">咨询详情</label>
                  <textarea
                    id="goke-msg"
                    placeholder="请简要描述您的牧场规模（如 1000头奶牛场）及所需装备类型，方便我们准备针对性配置方案..."
                    value={contactForm.message}
                    onChange={function (e) {
                      setContactForm(Object.assign({}, contactForm, { message: e.target.value }));
                    }}
                  />
                </div>

                <button
                  type="submit"
                  className="goke-btn goke-btn-primary"
                  style={{ width: '100%', minHeight: '48px', marginTop: '8px' }}
                  disabled={submitting}
                >
                  {submitting ? '方案生成并提交中...' : '提交方案申请'}
                </button>
              </form>
            </div>
          </div>
        </section>
      </main>

      {/* 底部版权信息与极简快捷导航 */}
      <footer className="goke-footer">
        <div className="goke-container">
          <div className="goke-footer-grid">
            <div className="goke-footer-brand">
              <strong>国科诚泰</strong>
              <p>国家专精特新「小巨人」企业，以硬核高端智造推动中国现代草牧业实现绿色可持续腾飞。</p>
            </div>
            <div>
              <h4>核心业务</h4>
              <button type="button" onClick={function () { scrollTo('portal'); }}>智慧牧场硬件</button>
              <button type="button" onClick={function () { scrollTo('portal'); }}>粪水生态循环</button>
              <button type="button" onClick={function () { scrollTo('solutions'); }}>中央智能TMR厨房</button>
            </div>
            <div>
              <h4>关于我们</h4>
              <button type="button" onClick={function () { scrollTo('about'); }}>公司简介</button>
              <button type="button" onClick={function () { scrollTo('about'); }}>核心专利</button>
              <button type="button" onClick={function () { scrollTo('news'); }}>最新要闻</button>
            </div>
            <div>
              <h4>服务渠道</h4>
              <p>咨询热线：{HOTLINE}</p>
              <p>总机电话：010-56299299</p>
              <button type="button" onClick={function () { scrollTo('contact'); }} style={{ color: 'var(--accent)', fontWeight: 'bold' }}>立即预约顾问</button>
            </div>
          </div>

          <div className="goke-footer-copy">
            <span>{COPYRIGHT}</span>
            <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">{ICP}</a>
          </div>
        </div>
      </footer>

      {/* 核心装备/产品详情弹出层 (Modal) */}
      {activeProduct && (
        <div
          className="goke-modal-mask"
          onClick={function (e) { if (e.target === e.currentTarget) setActiveProduct(null); }}
          role="presentation"
        >
          <div className="goke-modal" role="dialog" aria-modal="true" aria-label="产品详情弹出窗">
            <div className="goke-modal-head">
              <h3>{activeProduct.name}</h3>
              <button
                type="button"
                className="goke-modal-close"
                onClick={function () { setActiveProduct(null); }}
                aria-label="关闭详情"
              >
                ×
              </button>
            </div>
            <div className="goke-modal-body">
              {activeProduct.cover ? (
                <img className="goke-modal-hero-img" src={activeProduct.cover} alt={activeProduct.name} />
              ) : null}
              <p className="goke-modal-intro">{activeProduct.intro}</p>
              {(activeProduct.photos || []).length > 0 ? (
                <div className="goke-gallery">
                  {(activeProduct.photos || []).map(function (url, i) {
                    return <img key={i} src={url} alt="" loading="lazy" />;
                  })}
                </div>
              ) : null}
            </div>
          </div>
        </div>
      )}

      {/* 媒体聚焦/新闻详情弹出层 (Modal) */}
      {activeNews && (
        <div
          className="goke-modal-mask"
          onClick={function (e) { if (e.target === e.currentTarget) setActiveNews(null); }}
          role="presentation"
        >
          <div className="goke-modal" role="dialog" aria-modal="true" aria-label="新闻要闻弹出窗">
            <div className="goke-modal-head">
              <h3>{activeNews.title}</h3>
              <button
                type="button"
                className="goke-modal-close"
                onClick={function () { setActiveNews(null); }}
                aria-label="关闭详情"
              >
                ×
              </button>
            </div>
            <div className="goke-modal-body">
              <div className="goke-news-meta-modal">
                <span>栏目分类：{newsCatLabel(activeNews.cat)}</span>
                <span style={{ margin: '0 8px' }}>|</span>
                <span>发布日期：{activeNews.publishDate}</span>
              </div>
              <div className="goke-news-content">
                {renderNewsContent(activeNews.contentBlocks)}
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default Component;
