<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>白鲸软件 - 专业软件定制开发 | 物联网 · iOS App · 小程序</title>
  <meta name="description" content="武汉白鲸网络软件技术有限公司，专注物联网系统定制、iOS原生App开发、微信小程序开发及整体技术解决方案，14年+技术积累，值得信赖的软件开发伙伴。" />
  <style>
    /* ============================================================
       系统字体栈 — 无任何外部字体请求，全本地加载
       macOS/iOS: PingFang SC → 苹方
       Windows:   Microsoft YaHei → 微软雅黑
       Android:   Noto Sans CJK SC（系统内置）
       等宽回退:  Helvetica Neue → Arial → sans-serif
    ============================================================ */
    @font-face {
      font-family: 'SysCN';
      src: local('PingFang SC'), local('苹方-简'), local('Microsoft YaHei'),
           local('微软雅黑'), local('Noto Sans CJK SC'), local('Source Han Sans SC');
      font-weight: 100 900;
      font-style: normal;
      font-display: swap;
    }

    /* ============================================================
       CSS Reset & Custom Properties
    ============================================================ */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    :root {
      --primary: #0a5fff;
      --primary-dark: #0040cc;
      --primary-light: #4d8bff;
      --secondary: #00c6ff;
      --accent: #00e5ff;
      --dark: #0b1120;
      --dark-2: #0f1a30;
      --dark-3: #162040;
      --text: #1e2d4a;
      --text-light: #4a5a78;
      --text-muted: #7a8aaa;
      --bg: #f8faff;
      --bg-card: #ffffff;
      --border: #e0e8ff;
      --white: #ffffff;

      --radius-sm: 8px;
      --radius: 16px;
      --radius-lg: 24px;
      --radius-xl: 32px;

      --shadow-sm: 0 2px 8px rgba(10, 95, 255, 0.08);
      --shadow: 0 8px 32px rgba(10, 95, 255, 0.12);
      --shadow-lg: 0 20px 60px rgba(10, 95, 255, 0.18);
      --shadow-card: 0 4px 24px rgba(10, 40, 100, 0.08);

      --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      --transition-slow: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'SysCN', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB',
                   'Microsoft YaHei', 'WenQuanYi Micro Hei', 'Helvetica Neue', Arial, sans-serif;
      color: var(--text);
      background: var(--bg);
      line-height: 1.6;
      overflow-x: hidden;
    }

    /* ============================================================
       Typography
    ============================================================ */
    h1, h2, h3, h4 {
      line-height: 1.2;
      font-weight: 700;
    }

    p { line-height: 1.8; }

    /* ============================================================
       Utilities
    ============================================================ */
    .container {
      max-width: 1180px;
      margin: 0 auto;
      padding: 0 24px;
    }

    .section-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: linear-gradient(135deg, rgba(10,95,255,0.08), rgba(0,198,255,0.08));
      border: 1px solid rgba(10,95,255,0.15);
      color: var(--primary);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 6px 16px;
      border-radius: 100px;
      margin-bottom: 16px;
    }

    .section-tag::before {
      content: '';
      width: 6px;
      height: 6px;
      background: var(--primary);
      border-radius: 50%;
      flex-shrink: 0;
    }

    .section-title {
      font-size: clamp(28px, 4vw, 44px);
      font-weight: 800;
      color: var(--dark);
      margin-bottom: 16px;
      letter-spacing: -0.02em;
    }

    .section-title span {
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .section-desc {
      font-size: 16px;
      color: var(--text-light);
      max-width: 560px;
      line-height: 1.8;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 14px 32px;
      border-radius: 100px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      border: none;
      transition: var(--transition);
      text-decoration: none;
      white-space: nowrap;
    }

    .btn-primary {
      background: linear-gradient(135deg, var(--primary), var(--primary-light));
      color: var(--white);
      box-shadow: 0 8px 24px rgba(10,95,255,0.35);
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 32px rgba(10,95,255,0.45);
    }

    .btn-outline {
      background: transparent;
      color: var(--primary);
      border: 2px solid var(--primary);
    }

    .btn-outline:hover {
      background: var(--primary);
      color: var(--white);
      transform: translateY(-2px);
    }

    .btn-white {
      background: var(--white);
      color: var(--primary);
      box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    }

    .btn-white:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 32px rgba(0,0,0,0.2);
    }

    /* ============================================================
       Navigation
    ============================================================ */
    #navbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      padding: 16px 0;
      transition: var(--transition);
    }

    #navbar.scrolled {
      background: rgba(255,255,255,0.95);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      box-shadow: 0 2px 24px rgba(10,40,100,0.08);
      padding: 12px 0;
    }

    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .nav-logo {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
    }

    .nav-logo-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      overflow: hidden;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .nav-logo-icon img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .nav-logo-text {
      font-size: 20px;
      font-weight: 800;
      color: var(--white);
      letter-spacing: -0.01em;
      transition: var(--transition);
    }

    #navbar.scrolled .nav-logo-text {
      color: var(--dark);
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 8px;
      list-style: none;
    }

    .nav-links a {
      text-decoration: none;
      color: rgba(255,255,255,0.85);
      font-size: 14px;
      font-weight: 500;
      padding: 8px 16px;
      border-radius: 100px;
      transition: var(--transition);
    }

    #navbar.scrolled .nav-links a {
      color: var(--text-light);
    }

    .nav-links a:hover {
      background: rgba(255,255,255,0.15);
      color: var(--white);
    }

    #navbar.scrolled .nav-links a:hover {
      background: rgba(10,95,255,0.08);
      color: var(--primary);
    }

    .nav-cta {
      background: var(--white) !important;
      color: var(--primary) !important;
      font-weight: 700 !important;
      box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    }

    #navbar.scrolled .nav-cta {
      background: var(--primary) !important;
      color: var(--white) !important;
    }

    .nav-cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0,0,0,0.2) !important;
      background: var(--white) !important;
      color: var(--primary) !important;
    }

    #navbar.scrolled .nav-cta:hover {
      background: var(--primary-dark) !important;
      color: var(--white) !important;
    }

    /* Mobile Nav */
    .nav-hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: 8px;
      border: none;
      background: none;
    }

    .nav-hamburger span {
      display: block;
      width: 24px;
      height: 2px;
      background: var(--white);
      border-radius: 2px;
      transition: var(--transition);
    }

    #navbar.scrolled .nav-hamburger span {
      background: var(--dark);
    }

    /* ============================================================
       Hero Section
    ============================================================ */
    #hero {
      min-height: 100vh;
      background: linear-gradient(135deg, #0b1120 0%, #0f1e3a 40%, #0a3070 100%);
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
    }

    .hero-bg-grid {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(10,95,255,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(10,95,255,0.06) 1px, transparent 1px);
      background-size: 60px 60px;
    }

    .hero-bg-glow {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      pointer-events: none;
    }

    .hero-glow-1 {
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(10,95,255,0.25) 0%, transparent 70%);
      top: -100px;
      right: -100px;
    }

    .hero-glow-2 {
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, rgba(0,198,255,0.18) 0%, transparent 70%);
      bottom: 50px;
      left: 10%;
    }

    .hero-content {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
      padding: 120px 0 80px;
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.15);
      color: rgba(255,255,255,0.9);
      font-size: 13px;
      font-weight: 500;
      padding: 7px 16px;
      border-radius: 100px;
      margin-bottom: 24px;
    }

    .hero-badge-dot {
      width: 6px;
      height: 6px;
      background: var(--accent);
      border-radius: 50%;
      animation: pulse 2s infinite;
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.6; transform: scale(1.3); }
    }

    .hero-title {
      font-size: clamp(36px, 5vw, 60px);
      font-weight: 900;
      color: var(--white);
      letter-spacing: -0.03em;
      margin-bottom: 24px;
      line-height: 1.1;
    }

    .hero-title .highlight {
      background: linear-gradient(135deg, #4d8bff, #00e5ff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .hero-subtitle {
      font-size: 17px;
      color: rgba(255,255,255,0.65);
      margin-bottom: 40px;
      line-height: 1.8;
      max-width: 480px;
    }

    .hero-actions {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 56px;
    }

    .hero-stats {
      display: flex;
      gap: 40px;
    }

    .hero-stat {
      text-align: left;
    }

    .hero-stat-number {
      font-size: 32px;
      font-weight: 900;
      color: var(--white);
      letter-spacing: -0.02em;
      line-height: 1;
    }

    .hero-stat-number span {
      font-size: 18px;
      color: var(--accent);
    }

    .hero-stat-label {
      font-size: 13px;
      color: rgba(255,255,255,0.5);
      margin-top: 4px;
    }

    /* Hero Visual */
    .hero-visual {
      position: relative;
    }

    .hero-cards-stack {
      position: relative;
      height: 480px;
    }

    .hero-card {
      position: absolute;
      background: rgba(255,255,255,0.06);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: var(--radius-lg);
      padding: 24px;
      transition: var(--transition-slow);
    }

    .hero-card-main {
      width: 340px;
      top: 60px;
      right: 0;
      background: linear-gradient(135deg, rgba(10,95,255,0.25), rgba(0,198,255,0.15));
      border-color: rgba(10,95,255,0.3);
    }

    .hero-card-mini {
      width: 220px;
    }

    .hero-card-mini-1 {
      top: 0;
      left: 0;
      animation: float1 4s ease-in-out infinite;
    }

    .hero-card-mini-2 {
      bottom: 60px;
      right: 20px;
      animation: float2 5s ease-in-out infinite;
    }

    .hero-card-mini-3 {
      bottom: 0;
      left: 60px;
      animation: float3 4.5s ease-in-out infinite;
    }

    @keyframes float1 {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-12px); }
    }
    @keyframes float2 {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-8px); }
    }
    @keyframes float3 {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-16px); }
    }

    .hcard-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      margin-bottom: 12px;
    }

    .hcard-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--white);
      margin-bottom: 6px;
    }

    .hcard-desc {
      font-size: 12px;
      color: rgba(255,255,255,0.55);
      line-height: 1.6;
    }

    .hcard-metric {
      font-size: 28px;
      font-weight: 900;
      color: var(--white);
      margin-top: 16px;
    }

    .hcard-metric-label {
      font-size: 11px;
      color: rgba(255,255,255,0.5);
      margin-top: 2px;
    }

    /* ============================================================
       Services Section
    ============================================================ */
    #services {
      padding: 120px 0;
      background: var(--bg);
    }

    .services-header {
      text-align: center;
      margin-bottom: 72px;
    }

    .services-header .section-desc {
      margin: 0 auto;
    }

    .services-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 28px;
    }

    .service-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 40px;
      transition: var(--transition);
      position: relative;
      overflow: hidden;
    }

    .service-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--primary), var(--secondary));
      opacity: 0;
      transition: var(--transition);
    }

    .service-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-lg);
      border-color: rgba(10,95,255,0.2);
    }

    .service-card:hover::before {
      opacity: 1;
    }

    .service-card-featured {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      align-items: center;
      background: linear-gradient(135deg, var(--dark) 0%, var(--dark-3) 100%);
      color: var(--white);
      border-color: transparent;
    }

    .service-card-featured::before {
      opacity: 1;
      height: 4px;
    }

    .service-icon {
      width: 64px;
      height: 64px;
      border-radius: var(--radius);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
      margin-bottom: 20px;
      flex-shrink: 0;
    }

    .icon-iot { background: linear-gradient(135deg, #e8f0ff, #d0e2ff); }
    .icon-ios { background: linear-gradient(135deg, #e8fff0, #d0ffe4); }
    .icon-mini { background: linear-gradient(135deg, #fff8e8, #ffedd0); }
    .icon-mcu { background: linear-gradient(135deg, #f0e8ff, #ddd0ff); }
    .icon-solution { background: linear-gradient(135deg, #3a5fff, #00a8ff); font-size: 28px; }

    .service-title {
      font-size: 22px;
      font-weight: 700;
      color: var(--dark);
      margin-bottom: 12px;
    }

    .service-card-featured .service-title {
      color: var(--white);
      font-size: 28px;
      margin-bottom: 16px;
    }

    .service-desc {
      font-size: 15px;
      color: var(--text-light);
      line-height: 1.8;
      margin-bottom: 24px;
    }

    .service-card-featured .service-desc {
      color: rgba(255,255,255,0.65);
      font-size: 16px;
    }

    .service-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .service-tag {
      background: rgba(10,95,255,0.07);
      color: var(--primary);
      font-size: 12px;
      font-weight: 600;
      padding: 5px 12px;
      border-radius: 100px;
      border: 1px solid rgba(10,95,255,0.12);
    }

    .service-card-featured .service-tag {
      background: rgba(255,255,255,0.1);
      color: rgba(255,255,255,0.85);
      border-color: rgba(255,255,255,0.15);
    }

    .service-visual {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .service-feature-item {
      display: flex;
      align-items: center;
      gap: 14px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: var(--radius);
      padding: 16px 20px;
    }

    .sfi-icon {
      font-size: 22px;
      flex-shrink: 0;
    }

    .sfi-text {
      font-size: 14px;
      color: rgba(255,255,255,0.8);
      font-weight: 500;
    }

    /* ============================================================
       Process Section
    ============================================================ */
    #process {
      padding: 120px 0;
      background: linear-gradient(180deg, var(--bg) 0%, #eef3ff 100%);
    }

    .process-header {
      text-align: center;
      margin-bottom: 80px;
    }

    .process-steps {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 0;
      position: relative;
    }

    .process-steps::before {
      content: '';
      position: absolute;
      top: 44px;
      left: 10%;
      right: 10%;
      height: 2px;
      background: linear-gradient(90deg, var(--primary), var(--secondary));
      z-index: 0;
    }

    .process-step {
      text-align: center;
      position: relative;
      z-index: 1;
      padding: 0 12px;
    }

    .process-step-num {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      color: var(--white);
      font-size: 20px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
      box-shadow: 0 8px 24px rgba(10,95,255,0.35);
    }

    .process-step-icon {
      font-size: 24px;
      margin-bottom: 12px;
    }

    .process-step-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--dark);
      margin-bottom: 8px;
    }

    .process-step-desc {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.6;
    }

    /* ============================================================
       About Section
    ============================================================ */
    #about {
      padding: 120px 0;
      background: var(--bg-card);
    }

    .about-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }

    .about-visual {
      position: relative;
    }

    .about-main-card {
      background: linear-gradient(135deg, var(--dark), var(--dark-3));
      border-radius: var(--radius-xl);
      padding: 48px;
      color: var(--white);
      position: relative;
      overflow: hidden;
    }

    .about-main-card::before {
      content: '';
      position: absolute;
      top: -60px;
      right: -60px;
      width: 200px;
      height: 200px;
      background: radial-gradient(circle, rgba(10,95,255,0.3), transparent 70%);
      border-radius: 50%;
    }

    .about-main-card::after {
      content: '';
      position: absolute;
      bottom: -40px;
      left: -40px;
      width: 160px;
      height: 160px;
      background: radial-gradient(circle, rgba(0,198,255,0.2), transparent 70%);
      border-radius: 50%;
    }

    .about-years {
      font-size: 80px;
      font-weight: 900;
      color: transparent;
      -webkit-text-stroke: 2px rgba(255,255,255,0.15);
      line-height: 1;
      margin-bottom: -10px;
    }

    .about-years-label {
      font-size: 16px;
      color: var(--accent);
      font-weight: 600;
      margin-bottom: 24px;
    }

    .about-main-title {
      font-size: 24px;
      font-weight: 800;
      color: var(--white);
      margin-bottom: 12px;
      position: relative;
      z-index: 1;
    }

    .about-main-desc {
      font-size: 14px;
      color: rgba(255,255,255,0.6);
      line-height: 1.8;
      position: relative;
      z-index: 1;
    }

    .about-floating-badges {
      position: absolute;
      top: -20px;
      right: -24px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .about-badge {
      background: var(--white);
      border-radius: var(--radius);
      padding: 14px 18px;
      box-shadow: var(--shadow);
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 180px;
    }

    .about-badge-icon {
      font-size: 24px;
      flex-shrink: 0;
    }

    .about-badge-num {
      font-size: 22px;
      font-weight: 800;
      color: var(--dark);
      line-height: 1;
    }

    .about-badge-label {
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 2px;
    }

    .about-content {
      padding-left: 20px;
    }

    .about-content .section-title {
      margin-bottom: 20px;
    }

    .about-content .section-desc {
      margin-bottom: 32px;
      max-width: 100%;
    }

    .about-features {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-bottom: 40px;
    }

    .about-feature {
      display: flex;
      align-items: flex-start;
      gap: 16px;
    }

    .about-feature-icon {
      width: 44px;
      height: 44px;
      border-radius: var(--radius-sm);
      background: linear-gradient(135deg, rgba(10,95,255,0.1), rgba(0,198,255,0.1));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      flex-shrink: 0;
      margin-top: 2px;
    }

    .about-feature-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--dark);
      margin-bottom: 4px;
    }

    .about-feature-desc {
      font-size: 14px;
      color: var(--text-light);
      line-height: 1.7;
    }

    /* ============================================================
       Solutions / Cases Section
    ============================================================ */
    #solutions {
      padding: 120px 0;
      background: var(--bg);
    }

    .solutions-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 56px;
    }

    .cases-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    .case-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
      transition: var(--transition);
    }

    .case-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-lg);
      border-color: rgba(10,95,255,0.15);
    }

    .case-img {
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 64px;
      position: relative;
      overflow: hidden;
    }

    .case-img-1 { background: linear-gradient(135deg, #e8f0ff, #c8d8ff); }
    .case-img-2 { background: linear-gradient(135deg, #e8fff0, #c8ffe4); }
    .case-img-3 { background: linear-gradient(135deg, #fff8e8, #ffe4c8); }
    .case-img-4 { background: linear-gradient(135deg, #ffe8f0, #ffc8d8); }
    .case-img-5 { background: linear-gradient(135deg, #f0e8ff, #d8c8ff); }
    .case-img-6 { background: linear-gradient(135deg, #e8fff8, #c8ffe8); }

    .case-body {
      padding: 24px;
    }

    .case-type {
      font-size: 12px;
      font-weight: 600;
      color: var(--primary);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 8px;
    }

    .case-title {
      font-size: 18px;
      font-weight: 700;
      color: var(--dark);
      margin-bottom: 10px;
    }

    .case-desc {
      font-size: 14px;
      color: var(--text-light);
      line-height: 1.7;
    }

    /* ============================================================
       Tech Stack Section
    ============================================================ */
    #tech {
      padding: 80px 0;
      background: var(--bg-card);
      overflow: hidden;
    }

    .tech-header {
      text-align: center;
      margin-bottom: 56px;
    }

    .tech-marquee-wrapper {
      overflow: hidden;
      position: relative;
    }

    .tech-marquee-wrapper::before,
    .tech-marquee-wrapper::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100px;
      z-index: 1;
    }

    .tech-marquee-wrapper::before {
      left: 0;
      background: linear-gradient(90deg, var(--bg-card), transparent);
    }

    .tech-marquee-wrapper::after {
      right: 0;
      background: linear-gradient(-90deg, var(--bg-card), transparent);
    }

    .tech-marquee {
      display: flex;
      gap: 24px;
      animation: marquee 30s linear infinite;
      width: max-content;
    }

    @keyframes marquee {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }

    .tech-item {
      display: flex;
      align-items: center;
      gap: 12px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 14px 24px;
      white-space: nowrap;
      font-size: 14px;
      font-weight: 600;
      color: var(--text-light);
      flex-shrink: 0;
    }

    .tech-item-icon {
      font-size: 22px;
    }

    /* ============================================================
       CTA Section
    ============================================================ */
    #cta {
      padding: 120px 0;
      background: linear-gradient(135deg, #0b1120 0%, #0a3070 100%);
      position: relative;
      overflow: hidden;
    }

    .cta-bg-glow {
      position: absolute;
      width: 600px;
      height: 600px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(10,95,255,0.2), transparent 60%);
      top: -200px;
      left: 50%;
      transform: translateX(-50%);
      pointer-events: none;
    }

    .cta-content {
      text-align: center;
      position: relative;
      z-index: 1;
    }

    .cta-title {
      font-size: clamp(32px, 5vw, 56px);
      font-weight: 900;
      color: var(--white);
      letter-spacing: -0.03em;
      margin-bottom: 20px;
    }

    .cta-title span {
      background: linear-gradient(135deg, #4d8bff, #00e5ff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .cta-desc {
      font-size: 17px;
      color: rgba(255,255,255,0.55);
      margin-bottom: 48px;
      line-height: 1.8;
    }

    .cta-actions {
      display: flex;
      gap: 16px;
      justify-content: center;
      flex-wrap: wrap;
      margin-bottom: 56px;
    }

    .cta-contact-grid {
      display: flex;
      justify-content: center;
      gap: 48px;
      flex-wrap: wrap;
    }

    .cta-contact-item {
      display: flex;
      align-items: center;
      gap: 12px;
      color: rgba(255,255,255,0.7);
      font-size: 15px;
    }

    .cta-contact-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.12);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
    }

    /* ============================================================
       Footer
    ============================================================ */
    #footer {
      background: #080e1c;
      padding: 60px 0 32px;
    }

    .footer-top {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 48px;
      padding-bottom: 48px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      margin-bottom: 32px;
    }

    .footer-brand-name {
      font-size: 20px;
      font-weight: 800;
      color: var(--white);
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .footer-brand-logo {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      overflow: hidden;
      flex-shrink: 0;
    }

    .footer-brand-logo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .footer-brand-desc {
      font-size: 14px;
      color: rgba(255,255,255,0.4);
      line-height: 1.8;
      margin-bottom: 24px;
    }

    .footer-social {
      display: flex;
      gap: 10px;
    }

    .footer-social-btn {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      cursor: pointer;
      transition: var(--transition);
      text-decoration: none;
    }

    .footer-social-btn:hover {
      background: rgba(10,95,255,0.2);
      border-color: rgba(10,95,255,0.3);
    }

    .footer-col-title {
      font-size: 13px;
      font-weight: 700;
      color: rgba(255,255,255,0.5);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 20px;
    }

    .footer-links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .footer-links a {
      text-decoration: none;
      font-size: 14px;
      color: rgba(255,255,255,0.45);
      transition: var(--transition);
    }

    .footer-links a:hover {
      color: var(--white);
    }

    .footer-contact-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 14px;
      color: rgba(255,255,255,0.45);
      margin-bottom: 12px;
      line-height: 1.6;
    }

    .footer-contact-icon {
      font-size: 16px;
      flex-shrink: 0;
      margin-top: 1px;
    }

    .footer-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
    }

    .footer-copyright {
      font-size: 13px;
      color: rgba(255,255,255,0.3);
    }

    .footer-icp {
      font-size: 13px;
      color: rgba(255,255,255,0.3);
    }

    /* ============================================================
       Scroll Animations
    ============================================================ */
    .fade-up {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }

    .fade-up.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .fade-up-delay-1 { transition-delay: 0.1s; }
    .fade-up-delay-2 { transition-delay: 0.2s; }
    .fade-up-delay-3 { transition-delay: 0.3s; }
    .fade-up-delay-4 { transition-delay: 0.4s; }

    /* ============================================================
       Responsive
    ============================================================ */
    @media (max-width: 1024px) {
      .hero-content {
        grid-template-columns: 1fr;
        gap: 60px;
        text-align: center;
      }

      .services-grid {
        grid-template-columns: 1fr;
      }

      .hero-subtitle { margin-left: auto; margin-right: auto; }
      .hero-actions { justify-content: center; }
      .hero-stats { justify-content: center; }
      .hero-visual { display: none; }

      .services-grid {
        grid-template-columns: 1fr;
      }

      .service-card-featured {
        grid-template-columns: 1fr;
      }

      .about-grid {
        grid-template-columns: 1fr;
        gap: 48px;
      }

      .about-content { padding-left: 0; }

      .cases-grid { grid-template-columns: repeat(2, 1fr); }

      .process-steps {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
      }

      .process-steps::before { display: none; }

      .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
      }
    }

    @media (max-width: 768px) {
      .nav-links { display: none; }
      .nav-hamburger { display: flex; }

      .cases-grid { grid-template-columns: 1fr; }

      .process-steps {
        grid-template-columns: 1fr;
        gap: 24px;
      }

      .solutions-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
      }

      .cta-contact-grid { gap: 24px; }

      .footer-top {
        grid-template-columns: 1fr;
      }

      .footer-bottom {
        flex-direction: column;
        text-align: center;
      }

      .hero-stats { gap: 24px; flex-wrap: wrap; }
      .hero-badge { font-size: 12px; }
    }

    @media (max-width: 480px) {
      .container { padding: 0 16px; }
      .btn { padding: 12px 24px; font-size: 14px; }
    }

    /* Mobile Nav Menu */
    .nav-mobile-menu {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(11,17,32,0.98);
      z-index: 999;
      padding: 80px 24px 40px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .nav-mobile-menu.open {
      display: flex;
    }

    .nav-mobile-menu a {
      text-decoration: none;
      font-size: 22px;
      font-weight: 700;
      color: rgba(255,255,255,0.8);
      padding: 12px 32px;
      border-radius: 100px;
      transition: var(--transition);
    }

    .nav-mobile-menu a:hover {
      background: rgba(10,95,255,0.15);
      color: var(--white);
    }

    .nav-close {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 44px;
      height: 44px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 20px;
      color: var(--white);
    }
  </style>
</head>
<body>

  <!-- ============================================================
       Navigation
  ============================================================ -->
  <nav id="navbar" role="navigation" aria-label="主导航">
    <div class="container">
      <div class="nav-inner">
        <a href="#" class="nav-logo" aria-label="白鲸软件首页">
          <div class="nav-logo-icon">
            <img src="logo.jpg" alt="白鲸软件Logo" />
          </div>
          <span class="nav-logo-text">白鲸软件</span>
        </a>

        <ul class="nav-links" role="list">
          <li><a href="#services">服务</a></li>
          <li><a href="#process">流程</a></li>
          <li><a href="#about">关于</a></li>
          <li><a href="#solutions">案例</a></li>
          <li><a href="#cta" class="nav-cta">立即咨询</a></li>
        </ul>

        <button class="nav-hamburger" id="menuBtn" aria-label="打开菜单" aria-expanded="false">
          <span></span><span></span><span></span>
        </button>
      </div>
    </div>
  </nav>

  <!-- Mobile Menu -->
  <div class="nav-mobile-menu" id="mobileMenu" role="dialog" aria-label="移动端导航菜单">
    <button class="nav-close" id="menuClose" aria-label="关闭菜单">✕</button>
    <a href="#services" class="mobile-link">服务</a>
    <a href="#process" class="mobile-link">流程</a>
    <a href="#about" class="mobile-link">关于</a>
    <a href="#solutions" class="mobile-link">案例</a>
    <a href="#cta" class="mobile-link">立即咨询</a>
  </div>

  <!-- ============================================================
       Hero Section
  ============================================================ -->
  <section id="hero" aria-label="首页主横幅">
    <div class="hero-bg-grid" aria-hidden="true"></div>
    <div class="hero-bg-glow hero-glow-1" aria-hidden="true"></div>
    <div class="hero-bg-glow hero-glow-2" aria-hidden="true"></div>

    <div class="container">
      <div class="hero-content">
        <!-- Left Content -->
        <div class="hero-left">
          <div class="hero-badge" aria-label="14年专业软件开发服务">
            <span class="hero-badge-dot" aria-hidden="true"></span>
            14年专业技术积累 · 值得信赖的合作伙伴
          </div>

          <h1 class="hero-title">
            把您的创意<br>
            变成<span class="highlight">数字产品</span>
          </h1>

          <p class="hero-subtitle">
            专注物联网系统定制、单片机嵌入式开发、iOS 原生 App、微信小程序及整体技术解决方案。从芯片固件到云端平台，从需求到上线，全程专业护航。
          </p>

          <div class="hero-actions">
            <a href="#cta" class="btn btn-primary" aria-label="立即开始您的项目">
              🚀 开始您的项目
            </a>
            <a href="#services" class="btn btn-outline" style="color:rgba(255,255,255,0.8); border-color:rgba(255,255,255,0.3);" aria-label="了解我们的服务">
              了解服务 →
            </a>
          </div>

          <div class="hero-stats" role="list" aria-label="公司数据统计">
            <div class="hero-stat" role="listitem">
              <div class="hero-stat-number">14<span>年</span></div>
              <div class="hero-stat-label">专业开发经验</div>
            </div>
            <div class="hero-stat" role="listitem">
              <div class="hero-stat-number">200<span>+</span></div>
              <div class="hero-stat-label">成功交付项目</div>
            </div>
            <div class="hero-stat" role="listitem">
              <div class="hero-stat-number">98<span>%</span></div>
              <div class="hero-stat-label">客户满意度</div>
            </div>
          </div>
        </div>

        <!-- Right Visual -->
        <div class="hero-visual" aria-hidden="true">
          <div class="hero-cards-stack">
            <!-- Main Card -->
            <div class="hero-card hero-card-main">
              <div class="hcard-icon" style="background: rgba(10,95,255,0.3);">🌐</div>
              <div class="hcard-title">整体技术解决方案</div>
              <div class="hcard-desc">从架构设计到部署运维，提供端到端的技术支持</div>
              <div class="hcard-metric">99.9%<div class="hcard-metric-label">系统稳定运行率</div></div>
            </div>
            <!-- Mini Card 1 -->
            <div class="hero-card hero-card-mini hero-card-mini-1">
              <div class="hcard-icon" style="background: rgba(255,165,0,0.15);">📱</div>
              <div class="hcard-title">iOS 原生开发</div>
              <div class="hcard-desc">Swift 原生技术，流畅体验</div>
            </div>
            <!-- Mini Card 2 -->
            <div class="hero-card hero-card-mini hero-card-mini-2">
              <div class="hcard-icon" style="background: rgba(0,198,255,0.15);">🔌</div>
              <div class="hcard-title">物联网系统</div>
              <div class="hcard-desc">设备互联，智能管控</div>
            </div>
            <!-- Mini Card 3 -->
            <div class="hero-card hero-card-mini hero-card-mini-3">
              <div class="hcard-icon" style="background: rgba(160,80,255,0.18);">🖥️</div>
              <div class="hcard-title">单片机开发</div>
              <div class="hcard-desc">底层固件，精准控制</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ============================================================
       Services Section
  ============================================================ -->
  <section id="services" aria-labelledby="services-title">
    <div style="padding: 120px 0; background: var(--bg);">
      <div class="container">
        <div class="services-header fade-up">
          <div class="section-tag">我们的服务</div>
          <h2 class="section-title" id="services-title">五大核心业务<span>，覆盖您的需求</span></h2>
          <p class="section-desc">从底层单片机固件到云端平台，从 iOS 原生 App 到微信小程序，我们有成熟的技术方案和丰富的落地经验。</p>
        </div>

        <div class="services-grid">
          <!-- IoT Card -->
          <div class="service-card fade-up fade-up-delay-1" role="article" aria-label="物联网系统定制服务">
            <div class="service-icon icon-iot" aria-hidden="true">🔌</div>
            <h3 class="service-title">物联网系统定制</h3>
            <p class="service-desc">
              从传感器接入到云端平台，为工业、农业、楼宇、智慧园区等场景打造专属的 IoT 管理系统。支持多协议接入（MQTT、HTTP、Modbus），实时数据可视化，远程设备管控。
            </p>
            <div class="service-tags" role="list" aria-label="相关技术标签">
              <span class="service-tag" role="listitem">MQTT 协议</span>
              <span class="service-tag" role="listitem">实时监控</span>
              <span class="service-tag" role="listitem">数据可视化</span>
              <span class="service-tag" role="listitem">边缘计算</span>
              <span class="service-tag" role="listitem">告警推送</span>
            </div>
          </div>

          <!-- iOS Card -->
          <div class="service-card fade-up fade-up-delay-2" role="article" aria-label="iOS原生App开发服务">
            <div class="service-icon icon-ios" aria-hidden="true">📱</div>
            <h3 class="service-title">iOS 原生 App 开发</h3>
            <p class="service-desc">
              基于 Swift / Objective-C 的 iOS 原生开发，遵循 Apple HIG 设计规范。流畅的动画交互、高性能渲染、完整的 TestFlight 测试与 App Store 上架服务，确保高质量交付。
            </p>
            <div class="service-tags" role="list" aria-label="相关技术标签">
              <span class="service-tag" role="listitem">Swift</span>
              <span class="service-tag" role="listitem">SwiftUI</span>
              <span class="service-tag" role="listitem">Core Data</span>
              <span class="service-tag" role="listitem">Push 推送</span>
              <span class="service-tag" role="listitem">App Store 上架</span>
            </div>
          </div>

          <!-- Mini Program Card -->
          <div class="service-card fade-up fade-up-delay-3" role="article" aria-label="小程序开发服务">
            <div class="service-icon icon-mini" aria-hidden="true">🧩</div>
            <h3 class="service-title">小程序开发</h3>
            <p class="service-desc">
              微信、支付宝、抖音等主流平台小程序开发，无需下载即可使用。电商、预约、社交、工具类小程序均有落地案例，可对接公众号、企业微信、支付系统。
            </p>
            <div class="service-tags" role="list" aria-label="相关技术标签">
              <span class="service-tag" role="listitem">微信小程序</span>
              <span class="service-tag" role="listitem">Taro 跨端</span>
              <span class="service-tag" role="listitem">微信支付</span>
              <span class="service-tag" role="listitem">云开发</span>
              <span class="service-tag" role="listitem">公众号对接</span>
            </div>
          </div>

          <!-- MCU Card -->
          <div class="service-card fade-up fade-up-delay-4" role="article" aria-label="单片机系统开发服务">
            <div class="service-icon icon-mcu" aria-hidden="true">🖥️</div>
            <h3 class="service-title">单片机系统开发</h3>
            <p class="service-desc">
              深耕嵌入式底层开发，基于 STM32、ESP32、Arduino 等主流平台，提供固件开发、通信协议栈、传感器驱动、低功耗设计及与上位机/云端联调的完整交付。
            </p>
            <div class="service-tags" role="list" aria-label="相关技术标签">
              <span class="service-tag" role="listitem">STM32 / ESP32</span>
              <span class="service-tag" role="listitem">C / C++ 固件</span>
              <span class="service-tag" role="listitem">UART / SPI / I²C</span>
              <span class="service-tag" role="listitem">低功耗设计</span>
              <span class="service-tag" role="listitem">OTA 升级</span>
            </div>
          </div>

          <!-- Solutions Featured Card -->
          <div class="service-card service-card-featured fade-up fade-up-delay-4" role="article" aria-label="整体解决方案服务">
            <div>
              <div class="service-icon icon-solution" aria-hidden="true">🌐</div>
              <h3 class="service-title" style="color:var(--white);">整体技术解决方案</h3>
              <p class="service-desc" style="color:rgba(255,255,255,0.65);">
                不止于写代码——我们提供从需求分析、系统架构设计、前后端开发到部署运维、持续迭代的完整技术服务。一站式解决您从 0 到 1 再到规模化的所有技术挑战。
              </p>
              <div class="service-tags">
                <span class="service-tag">架构设计</span>
                <span class="service-tag">后端开发</span>
                <span class="service-tag">云服务器运维</span>
                <span class="service-tag">数据库优化</span>
                <span class="service-tag">持续交付</span>
              </div>
            </div>
            <div class="service-visual" aria-hidden="true">
              <div class="service-feature-item">
                <span class="sfi-icon">📐</span>
                <span class="sfi-text">系统架构设计与技术选型</span>
              </div>
              <div class="service-feature-item">
                <span class="sfi-icon">⚙️</span>
                <span class="sfi-text">前后端分离开发，高效并行</span>
              </div>
              <div class="service-feature-item">
                <span class="sfi-icon">☁️</span>
                <span class="sfi-text">云服务器部署与弹性运维</span>
              </div>
              <div class="service-feature-item">
                <span class="sfi-icon">🔄</span>
                <span class="sfi-text">需求迭代，快速响应变化</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ============================================================
       Process Section
  ============================================================ -->
  <section id="process" aria-labelledby="process-title">
    <div style="padding: 120px 0; background: linear-gradient(180deg, #f8faff 0%, #eef3ff 100%);">
      <div class="container">
        <div class="process-header fade-up">
          <div class="section-tag">合作流程</div>
          <h2 class="section-title" id="process-title">简单清晰的<span>合作步骤</span></h2>
          <p class="section-desc" style="margin: 0 auto;">我们让每个阶段都透明可控，确保您始终了解项目进展，放心把创意交给我们。</p>
        </div>

        <div class="process-steps" role="list" aria-label="项目合作流程步骤">
          <div class="process-step fade-up fade-up-delay-1" role="listitem">
            <div class="process-step-num" aria-label="步骤1">1</div>
            <div class="process-step-icon" aria-hidden="true">💬</div>
            <div class="process-step-title">需求沟通</div>
            <p class="process-step-desc">深入了解业务目标，整理功能需求，明确项目边界</p>
          </div>
          <div class="process-step fade-up fade-up-delay-2" role="listitem">
            <div class="process-step-num" aria-label="步骤2">2</div>
            <div class="process-step-icon" aria-hidden="true">📋</div>
            <div class="process-step-title">方案设计</div>
            <p class="process-step-desc">技术选型、架构设计、UI 原型，提供详细技术方案</p>
          </div>
          <div class="process-step fade-up fade-up-delay-3" role="listitem">
            <div class="process-step-num" aria-label="步骤3">3</div>
            <div class="process-step-icon" aria-hidden="true">💻</div>
            <div class="process-step-title">敏捷开发</div>
            <p class="process-step-desc">迭代式开发，定期演示，持续反馈调整，全程透明</p>
          </div>
          <div class="process-step fade-up fade-up-delay-4" role="listitem">
            <div class="process-step-num" aria-label="步骤4">4</div>
            <div class="process-step-icon" aria-hidden="true">✅</div>
            <div class="process-step-title">测试上线</div>
            <p class="process-step-desc">全面测试、性能优化、正式部署上线，稳定交付</p>
          </div>
          <div class="process-step fade-up" role="listitem" style="transition-delay:0.5s;">
            <div class="process-step-num" aria-label="步骤5">5</div>
            <div class="process-step-icon" aria-hidden="true">🛡️</div>
            <div class="process-step-title">持续维护</div>
            <p class="process-step-desc">提供售后保障、功能迭代、运维监控，长期陪跑</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ============================================================
       About Section
  ============================================================ -->
  <section id="about" aria-labelledby="about-title">
    <div style="padding: 120px 0; background: var(--bg-card);">
      <div class="container">
        <div class="about-grid">
          <!-- Visual Side -->
          <div class="about-visual fade-up">
            <div class="about-main-card">
              <div class="about-years" aria-hidden="true">12</div>
              <div class="about-years-label">年技术积累</div>
              <div class="about-main-title">武汉白鲸网络软件技术有限公司</div>
              <p class="about-main-desc">
                成立于 2012 年，我们深耕软件定制开发领域超过十二年，服务过众多行业客户，从初创团队到上市企业，始终以专业和诚信赢得信赖。
              </p>
            </div>
            <!-- Floating Badges -->
            <div class="about-floating-badges" aria-hidden="true">
              <div class="about-badge">
                <div class="about-badge-icon">🏆</div>
                <div>
                  <div class="about-badge-num">200+</div>
                  <div class="about-badge-label">交付项目</div>
                </div>
              </div>
              <div class="about-badge">
                <div class="about-badge-icon">👥</div>
                <div>
                  <div class="about-badge-num">50+</div>
                  <div class="about-badge-label">合作企业</div>
                </div>
              </div>
            </div>
          </div>

          <!-- Content Side -->
          <div class="about-content fade-up fade-up-delay-2">
            <div class="section-tag">关于我们</div>
            <h2 class="section-title" id="about-title">技术实力 + <span>行业洞察</span></h2>
            <p class="section-desc" style="max-width:100%;">
              白鲸软件深耕软件定制开发领域多年，团队成员均来自一线互联网公司，具备深厚的技术功底与丰富的项目管理经验。我们相信好软件不仅仅是功能的堆砌，更是对用户体验和业务目标的深刻理解。
            </p>

            <div class="about-features">
              <div class="about-feature">
                <div class="about-feature-icon" aria-hidden="true">🎯</div>
                <div>
                  <div class="about-feature-title">以结果为导向</div>
                  <p class="about-feature-desc">我们关注的不是代码行数，而是软件真正为您的业务带来多少价值。项目立项前先对齐目标，确保每一分投入都有回报。</p>
                </div>
              </div>
              <div class="about-feature">
                <div class="about-feature-icon" aria-hidden="true">🔬</div>
                <div>
                  <div class="about-feature-title">技术驱动创新</div>
                  <p class="about-feature-desc">持续跟进行业最新技术动态，Swift 6、鸿蒙原生、AIGC 集成……我们帮助您的产品始终保持技术领先优势。</p>
                </div>
              </div>
              <div class="about-feature">
                <div class="about-feature-icon" aria-hidden="true">🤝</div>
                <div>
                  <div class="about-feature-title">透明诚信合作</div>
                  <p class="about-feature-desc">项目进度实时可见，问题及时沟通，不拖延不甩锅。我们视每一个客户为长期合作伙伴，而不是一次性交易。</p>
                </div>
              </div>
            </div>

            <a href="#cta" class="btn btn-primary" aria-label="联系我们了解更多">与我们合作 →</a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ============================================================
       Solutions / Cases Section
  ============================================================ -->
  <section id="solutions" aria-labelledby="solutions-title">
    <div style="padding: 120px 0; background: var(--bg);">
      <div class="container">
        <div class="solutions-header fade-up">
          <div>
            <div class="section-tag">典型案例</div>
            <h2 class="section-title" id="solutions-title">我们做过的<span>好产品</span></h2>
          </div>
          <a href="#cta" class="btn btn-outline" aria-label="查看更多案例">查看更多案例 →</a>
        </div>

        <div class="cases-grid">
          <article class="case-card fade-up fade-up-delay-1">
            <div class="case-img case-img-1" aria-hidden="true">🏭</div>
            <div class="case-body">
              <div class="case-type">物联网系统</div>
              <h3 class="case-title">智慧工厂设备监控平台</h3>
              <p class="case-desc">接入 500+ 台工业设备，实时采集温度、压力、电流等多维数据，支持异常告警和远程控制。</p>
            </div>
          </article>

          <article class="case-card fade-up fade-up-delay-2">
            <div class="case-img case-img-2" aria-hidden="true">🛒</div>
            <div class="case-body">
              <div class="case-type">iOS App</div>
              <h3 class="case-title">跨境电商买手 App</h3>
              <p class="case-desc">原生 iOS 应用，支持多国货币、实时汇率换算、商品溯源扫码，App Store 4.8 分好评。</p>
            </div>
          </article>

          <article class="case-card fade-up fade-up-delay-3">
            <div class="case-img case-img-3" aria-hidden="true">🏥</div>
            <div class="case-body">
              <div class="case-type">小程序</div>
              <h3 class="case-title">医院在线预约挂号小程序</h3>
              <p class="case-desc">微信小程序，支持科室预约、在线缴费、报告查询，接入医院 HIS 系统，月活超 5 万用户。</p>
            </div>
          </article>

          <article class="case-card fade-up fade-up-delay-1">
            <div class="case-img case-img-4" aria-hidden="true">🌾</div>
            <div class="case-body">
              <div class="case-type">物联网系统</div>
              <h3 class="case-title">智慧农业大棚管理系统</h3>
              <p class="case-desc">土壤温湿度、光照、CO₂ 浓度实时监测，联动水肥灌溉系统自动化控制，降低人工成本 60%。</p>
            </div>
          </article>

          <article class="case-card fade-up fade-up-delay-2">
            <div class="case-img case-img-5" aria-hidden="true">📚</div>
            <div class="case-body">
              <div class="case-type">整体解决方案</div>
              <h3 class="case-title">在线教育 SaaS 平台</h3>
              <p class="case-desc">包含机构管理后台、教师端 iPad App、学生端 iPhone App 和家长小程序的一体化教育解决方案。</p>
            </div>
          </article>

          <article class="case-card fade-up fade-up-delay-3">
            <div class="case-img case-img-6" aria-hidden="true">🏘️</div>
            <div class="case-body">
              <div class="case-type">整体解决方案</div>
              <h3 class="case-title">智慧社区物业管理系统</h3>
              <p class="case-desc">涵盖门禁、停车、报修、通知等场景，业主微信小程序 + 物业管理 App + Web 后台全套解决方案。</p>
            </div>
          </article>
        </div>
      </div>
    </div>
  </section>

  <!-- ============================================================
       Tech Stack Section
  ============================================================ -->
  <section id="tech" aria-labelledby="tech-title">
    <div style="padding: 80px 0; background: var(--bg-card); overflow: hidden;">
      <div class="container">
        <div class="tech-header fade-up">
          <div class="section-tag">技术栈</div>
          <h2 class="section-title" id="tech-title">使用<span>主流技术</span>，保障长期可维护性</h2>
        </div>
      </div>

      <div class="tech-marquee-wrapper" aria-label="技术栈列表" role="list">
        <div class="tech-marquee" aria-hidden="true">
          <!-- First set -->
          <div class="tech-item" role="listitem"><span class="tech-item-icon">🍎</span>Swift / SwiftUI</div>
          <div class="tech-item" role="listitem"><span class="tech-item-icon">🟢</span>Node.js</div>
          <div class="tech-item" role="listitem"><span class="tech-item-icon">🟡</span>JavaScript / TypeScript</div>
          <div class="tech-item" role="listitem"><span class="tech-item-icon">⚛️</span>React / Vue</div>
          <div class="tech-item" role="listitem"><span class="tech-item-icon">🐍</span>Python</div>
          <div class="tech-item" role="listitem"><span class="tech-item-icon">🐘</span>PostgreSQL / MySQL</div>
          <div class="tech-item" role="listitem"><span class="tech-item-icon">🔴</span>Redis</div>
          <div class="tech-item" role="listitem"><span class="tech-item-icon">🐳</span>Docker / K8s</div>
          <div class="tech-item" role="listitem"><span class="tech-item-icon">☁️</span>腾讯云 / 阿里云</div>
          <div class="tech-item" role="listitem"><span class="tech-item-icon">📡</span>MQTT / WebSocket</div>
          <div class="tech-item" role="listitem"><span class="tech-item-icon">🧩</span>微信小程序</div>
          <div class="tech-item" role="listitem"><span class="tech-item-icon">🔧</span>Taro 跨端框架</div>
          <div class="tech-item" role="listitem"><span class="tech-item-icon">🖥️</span>STM32 / ESP32</div>
          <div class="tech-item" role="listitem"><span class="tech-item-icon">⚡</span>C / C++ 嵌入式</div>
          <div class="tech-item" role="listitem"><span class="tech-item-icon">🔌</span>Modbus / CAN Bus</div>
          <!-- Duplicate for seamless loop -->
          <div class="tech-item" role="listitem"><span class="tech-item-icon">🍎</span>Swift / SwiftUI</div>
          <div class="tech-item" role="listitem"><span class="tech-item-icon">🟢</span>Node.js</div>
          <div class="tech-item" role="listitem"><span class="tech-item-icon">🟡</span>JavaScript / TypeScript</div>
          <div class="tech-item" role="listitem"><span class="tech-item-icon">⚛️</span>React / Vue</div>
          <div class="tech-item" role="listitem"><span class="tech-item-icon">🐍</span>Python</div>
          <div class="tech-item" role="listitem"><span class="tech-item-icon">🐘</span>PostgreSQL / MySQL</div>
          <div class="tech-item" role="listitem"><span class="tech-item-icon">🔴</span>Redis</div>
          <div class="tech-item" role="listitem"><span class="tech-item-icon">🐳</span>Docker / K8s</div>
          <div class="tech-item" role="listitem"><span class="tech-item-icon">☁️</span>腾讯云 / 阿里云</div>
          <div class="tech-item" role="listitem"><span class="tech-item-icon">📡</span>MQTT / WebSocket</div>
          <div class="tech-item" role="listitem"><span class="tech-item-icon">🧩</span>微信小程序</div>
          <div class="tech-item" role="listitem"><span class="tech-item-icon">🔧</span>Taro 跨端框架</div>
          <div class="tech-item" role="listitem"><span class="tech-item-icon">🖥️</span>STM32 / ESP32</div>
          <div class="tech-item" role="listitem"><span class="tech-item-icon">⚡</span>C / C++ 嵌入式</div>
          <div class="tech-item" role="listitem"><span class="tech-item-icon">🔌</span>Modbus / CAN Bus</div>
        </div>
      </div>
    </div>
  </section>

  <!-- ============================================================
       CTA Section
  ============================================================ -->
  <section id="cta" aria-labelledby="cta-title">
    <div style="padding: 120px 0; background: linear-gradient(135deg, #0b1120 0%, #0a3070 100%); position: relative; overflow: hidden;">
      <div class="cta-bg-glow" aria-hidden="true"></div>
      <div class="container">
        <div class="cta-content fade-up">
          <div class="section-tag" style="color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.15); background: rgba(255,255,255,0.06); margin: 0 auto 20px;">开始合作</div>
          <h2 class="cta-title" id="cta-title">
            有想法了？<br>
            <span>我们来帮您实现</span>
          </h2>
          <p class="cta-desc">
            无论您是想定制一套物联网系统，还是开发一个让用户爱不释手的 App，<br>
            白鲸软件都期待与您深入交流，免费为您评估技术可行性。
          </p>

          <div class="cta-actions">
            <a href="tel:027-12345678" class="btn btn-primary" aria-label="拨打电话咨询">
              📞 电话咨询
            </a>
            <a href="mailto:info@whale-soft.com" class="btn btn-white" aria-label="发送邮件咨询">
              ✉️ 发送邮件
            </a>
          </div>

          <div class="cta-contact-grid" role="list" aria-label="联系方式列表">
            <div class="cta-contact-item" role="listitem">
              <div class="cta-contact-icon" aria-hidden="true">📍</div>
              <span>武汉市 · 湖北省</span>
            </div>
            <div class="cta-contact-item" role="listitem">
              <div class="cta-contact-icon" aria-hidden="true">📞</div>
              <span>工作日 9:00 - 18:00</span>
            </div>
            <div class="cta-contact-item" role="listitem">
              <div class="cta-contact-icon" aria-hidden="true">⏱️</div>
              <span>24 小时内回复</span>
            </div>
            <div class="cta-contact-item" role="listitem">
              <div class="cta-contact-icon" aria-hidden="true">💬</div>
              <span>微信扫码咨询</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ============================================================
       Footer
  ============================================================ -->
  <footer id="footer" role="contentinfo">
    <div class="container">
      <div class="footer-top">
        <!-- Brand Column -->
        <div>
          <div class="footer-brand-name">
            <div class="footer-brand-logo" aria-hidden="true">
              <img src="logo.jpg" alt="白鲸软件Logo" />
            </div>
            白鲸软件
          </div>
          <p class="footer-brand-desc">
            武汉白鲸网络软件技术有限公司<br>
            专注软件定制开发 · 物联网 · 移动应用 · 小程序<br>
            用技术驱动您的业务增长
          </p>
          <div class="footer-social" role="list" aria-label="社交媒体链接">
            <a href="#" class="footer-social-btn" role="listitem" aria-label="微信公众号">💬</a>
            <a href="#" class="footer-social-btn" role="listitem" aria-label="微博">🐦</a>
            <a href="#" class="footer-social-btn" role="listitem" aria-label="GitHub">💻</a>
          </div>
        </div>

        <!-- Services Column -->
        <div>
          <div class="footer-col-title">服务</div>
          <ul class="footer-links" role="list">
            <li><a href="#services" role="listitem">物联网系统定制</a></li>
            <li><a href="#services" role="listitem">单片机系统开发</a></li>
            <li><a href="#services" role="listitem">iOS 原生 App 开发</a></li>
            <li><a href="#services" role="listitem">微信小程序开发</a></li>
            <li><a href="#services" role="listitem">整体技术解决方案</a></li>
            <li><a href="#services" role="listitem">云服务器运维</a></li>
          </ul>
        </div>

        <!-- About Column -->
        <div>
          <div class="footer-col-title">关于</div>
          <ul class="footer-links" role="list">
            <li><a href="#about" role="listitem">公司介绍</a></li>
            <li><a href="#process" role="listitem">合作流程</a></li>
            <li><a href="#solutions" role="listitem">典型案例</a></li>
            <li><a href="#tech" role="listitem">技术栈</a></li>
          </ul>
        </div>

        <!-- Contact Column -->
        <div>
          <div class="footer-col-title">联系我们</div>
          <div class="footer-contact-item">
            <span class="footer-contact-icon" aria-hidden="true">📍</span>
            <span>武汉市，湖北省</span>
          </div>
          <div class="footer-contact-item">
            <span class="footer-contact-icon" aria-hidden="true">✉️</span>
            <span>info@whale-soft.com</span>
          </div>
          <div class="footer-contact-item">
            <span class="footer-contact-icon" aria-hidden="true">⏰</span>
            <span>周一至周五<br>09:00 - 18:00</span>
          </div>
        </div>
      </div>

      <div class="footer-bottom">
        <div class="footer-copyright">
          © 2012 – 2026 武汉白鲸网络软件技术有限公司. All Rights Reserved.
        </div>
        <div class="footer-icp">
          <a href="http://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer" style="color:rgba(255,255,255,0.3); text-decoration:none;">鄂ICP备12004959号</a>
        </div>
      </div>
    </div>
  </footer>

  <!-- ============================================================
       JavaScript
  ============================================================ -->
  <script>
    // ---------- Navbar scroll effect ----------
    const navbar = document.getElementById('navbar');
    window.addEventListener('scroll', () => {
      if (window.scrollY > 60) {
        navbar.classList.add('scrolled');
      } else {
        navbar.classList.remove('scrolled');
      }
    }, { passive: true });

    // ---------- Mobile menu ----------
    const menuBtn = document.getElementById('menuBtn');
    const menuClose = document.getElementById('menuClose');
    const mobileMenu = document.getElementById('mobileMenu');
    const mobileLinks = document.querySelectorAll('.mobile-link');

    function openMenu() {
      mobileMenu.classList.add('open');
      menuBtn.setAttribute('aria-expanded', 'true');
      document.body.style.overflow = 'hidden';
    }

    function closeMenu() {
      mobileMenu.classList.remove('open');
      menuBtn.setAttribute('aria-expanded', 'false');
      document.body.style.overflow = '';
    }

    menuBtn.addEventListener('click', openMenu);
    menuClose.addEventListener('click', closeMenu);
    mobileLinks.forEach(link => link.addEventListener('click', closeMenu));

    // ---------- Intersection Observer for fade-up animations ----------
    const fadeEls = document.querySelectorAll('.fade-up');
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('visible');
          observer.unobserve(entry.target);
        }
      });
    }, {
      threshold: 0.12,
      rootMargin: '0px 0px -40px 0px'
    });

    fadeEls.forEach(el => observer.observe(el));

    // ---------- Smooth active nav highlight ----------
    const sections = document.querySelectorAll('section[id], div[id]');
    const navLinksAll = document.querySelectorAll('.nav-links a:not(.nav-cta)');

    const sectionObserver = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const id = entry.target.id;
          navLinksAll.forEach(link => {
            link.style.fontWeight = link.getAttribute('href') === '#' + id ? '700' : '500';
          });
        }
      });
    }, { threshold: 0.4 });

    document.querySelectorAll('#hero, #services, #process, #about, #solutions, #tech, #cta').forEach(s => {
      if (s) sectionObserver.observe(s);
    });
  </script>
</body>
</html>
