/* roulang page: index */
:root {
      --pitch-dark: #0A0E13;
      --panel-dark: #121921;
      --card-dark: #18222D;
      --neon-green: #00DC82;
      --neon-hover: #00B368;
      --tactic-orange: #FF6B00;
      --text-primary: #1E293B;
      --text-muted: #64748B;
      --text-light: #F8FAFC;
      --text-dim: #94A3B8;
      --surface-light: #F8FAFC;
      --surface-alt: #EEF2F6;
      --border-light: #E2E8F0;
      --border-dark: #263544;
      --radius-sm: 4px;
      --radius-md: 6px;
      --shadow-sm: 0 2px 8px rgba(10, 14, 19, 0.05);
      --shadow-lg: 0 16px 36px -8px rgba(10, 14, 19, 0.12);
      --shadow-neon: 0 0 20px rgba(0, 220, 130, 0.25);
    }

    * { box-sizing: border-box; }
    body {
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      color: var(--text-primary);
      background-color: #FFFFFF;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    a { color: inherit; text-decoration: none; transition: all 0.2s ease; }
    a:hover { color: var(--neon-green); }
    img { max-width: 100%; height: auto; display: block; }

    /* 顶层促销通知条 */
    .promo-bar {
      background-color: var(--pitch-dark);
      border-bottom: 1px solid var(--border-dark);
      color: var(--text-dim);
      font-size: 0.82rem;
      padding: 8px 0;
    }
    .promo-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .promo-highlight {
      color: var(--neon-green);
      font-weight: 600;
      margin-right: 8px;
    }
    .promo-badge {
      background: rgba(0, 220, 130, 0.15);
      color: var(--neon-green);
      border: 1px solid rgba(0, 220, 130, 0.3);
      padding: 2px 8px;
      font-size: 0.72rem;
      border-radius: var(--radius-sm);
      margin-right: 10px;
    }
    .promo-links a {
      color: var(--text-dim);
      margin-left: 18px;
      font-size: 0.78rem;
    }
    .promo-links a:hover {
      color: #FFFFFF;
    }

    /* 主导航栏 */
    .site-nav-sticky {
      position: sticky;
      top: 0;
      z-index: 999;
      background: rgba(255, 255, 255, 0.96);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border-light);
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
    }
    .nav-bar-wrapper {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 0;
    }
    .site-logo {
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 800;
      font-size: 1.28rem;
      color: var(--pitch-dark);
      letter-spacing: -0.5px;
    }
    .logo-symbol {
      width: 36px;
      height: 36px;
      background: var(--pitch-dark);
      border: 2px solid var(--neon-green);
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--neon-green);
      font-size: 1rem;
    }
    .logo-text-sub {
      display: block;
      font-size: 0.7rem;
      color: var(--text-muted);
      font-weight: 500;
      letter-spacing: 0.5px;
    }

    .main-nav-links {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
      gap: 26px;
    }
    .main-nav-links a {
      font-size: 0.92rem;
      font-weight: 600;
      color: var(--text-primary);
      position: relative;
      padding: 4px 0;
    }
    .main-nav-links a:hover,
    .main-nav-links a.active {
      color: var(--pitch-dark);
    }
    .main-nav-links a::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 0;
      height: 2px;
      background: var(--neon-green);
      transition: width 0.25s ease;
    }
    .main-nav-links a:hover::after {
      width: 100%;
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .btn-nav-ghost {
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--text-primary);
      padding: 8px 14px;
      border: 1px solid var(--border-light);
      border-radius: var(--radius-sm);
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .btn-nav-ghost:hover {
      background: var(--surface-light);
      border-color: #CBD5E1;
      color: var(--pitch-dark);
    }
    .btn-action-glow {
      background: var(--pitch-dark);
      color: var(--neon-green) !important;
      border: 1px solid var(--neon-green);
      padding: 9px 20px;
      font-size: 0.88rem;
      font-weight: 700;
      border-radius: var(--radius-sm);
      display: inline-flex;
      align-items: center;
      gap: 8px;
      box-shadow: 0 4px 14px rgba(0, 220, 130, 0.2);
    }
    .btn-action-glow:hover {
      background: var(--neon-green);
      color: var(--pitch-dark) !important;
    }
    .mobile-menu-toggle {
      display: none;
      font-size: 1.4rem;
      background: none;
      border: none;
      color: var(--pitch-dark);
      cursor: pointer;
    }

    /* 移动端侧滑菜单抽屉 */
    .mobile-offcanvas {
      position: fixed;
      top: 0;
      right: -300px;
      width: 290px;
      height: 100vh;
      background: var(--pitch-dark);
      z-index: 1001;
      padding: 30px 24px;
      box-shadow: -10px 0 30px rgba(0,0,0,0.5);
      transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .mobile-offcanvas.is-active {
      right: 0;
    }
    .offcanvas-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.6);
      z-index: 1000;
      display: none;
    }
    .offcanvas-backdrop.is-active {
      display: block;
    }
    .offcanvas-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 20px;
      border-bottom: 1px solid var(--border-dark);
    }
    .offcanvas-links {
      list-style: none;
      margin: 24px 0 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }
    .offcanvas-links a {
      color: #FFFFFF;
      font-size: 1.05rem;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .offcanvas-links a:hover {
      color: var(--neon-green);
    }

    /* 通用板块与排版 */
    section {
      position: relative;
    }
    .section-py {
      padding: 85px 0;
    }
    .section-py-sm {
      padding: 55px 0;
    }
    .bg-dark {
      background-color: var(--pitch-dark);
      color: var(--text-light);
    }
    .bg-panel {
      background-color: var(--panel-dark);
      color: var(--text-light);
    }
    .bg-surface {
      background-color: var(--surface-light);
    }
    .bg-white {
      background-color: #FFFFFF;
    }

    .section-header {
      margin-bottom: 48px;
    }
    .section-header.text-center {
      text-align: center;
    }
    .section-kicker {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--neon-green);
      background: rgba(0, 220, 130, 0.1);
      border: 1px solid rgba(0, 220, 130, 0.25);
      padding: 4px 12px;
      border-radius: var(--radius-sm);
      margin-bottom: 14px;
    }
    .bg-white .section-kicker,
    .bg-surface .section-kicker {
      background: rgba(0, 168, 98, 0.08);
      color: #00874e;
      border-color: rgba(0, 168, 98, 0.2);
    }
    .section-title {
      font-size: 2.15rem;
      font-weight: 800;
      line-height: 1.25;
      margin-bottom: 14px;
      letter-spacing: -0.5px;
    }
    .bg-dark .section-title,
    .bg-panel .section-title {
      color: #FFFFFF;
    }
    .section-desc {
      font-size: 1.02rem;
      color: var(--text-muted);
      max-width: 780px;
      margin-left: auto;
      margin-right: auto;
      line-height: 1.7;
    }
    .bg-dark .section-desc,
    .bg-panel .section-desc {
      color: var(--text-dim);
    }

    /* 战术卡片与组件质感 */
    .tactical-card {
      background: #FFFFFF;
      border: 1px solid var(--border-light);
      border-radius: var(--radius-md);
      padding: 30px 26px;
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      height: 100%;
      position: relative;
    }
    .tactical-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-lg);
      border-color: #CBD5E1;
    }
    .card-dark-mode {
      background: var(--card-dark);
      border-color: var(--border-dark);
      color: var(--text-light);
    }
    .card-dark-mode:hover {
      border-color: var(--neon-green);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    }

    /* 按钮规范 */
    .btn-solid-neon {
      background: var(--neon-green);
      color: var(--pitch-dark) !important;
      font-weight: 700;
      padding: 13px 28px;
      border-radius: var(--radius-sm);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      box-shadow: 0 4px 16px rgba(0, 220, 130, 0.3);
      font-size: 0.95rem;
    }
    .btn-solid-neon:hover {
      background: var(--neon-hover);
      box-shadow: 0 6px 20px rgba(0, 220, 130, 0.45);
      transform: translateY(-1px);
    }
    .btn-outline-white {
      background: transparent;
      color: #FFFFFF !important;
      border: 1px solid rgba(255, 255, 255, 0.3);
      font-weight: 600;
      padding: 13px 26px;
      border-radius: var(--radius-sm);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 0.95rem;
    }
    .btn-outline-white:hover {
      background: rgba(255, 255, 255, 0.1);
      border-color: #FFFFFF;
    }

    /* 1. Hero 板块 */
    .hero-section {
      background-color: var(--pitch-dark);
      background-image: linear-gradient(180deg, rgba(10, 14, 19, 0.88) 0%, rgba(10, 14, 19, 0.97) 100%), url('/assets/images/72c5cdf96b9f5bf1.jpg');
      background-size: cover;
      background-position: center center;
      padding: 90px 0 105px;
      color: #FFFFFF;
      overflow: hidden;
    }
    .hero-h1 {
      font-size: 2.85rem;
      font-weight: 900;
      line-height: 1.18;
      letter-spacing: -1px;
      margin-bottom: 22px;
      color: #FFFFFF;
    }
    .hero-h1 span {
      color: var(--neon-green);
      position: relative;
    }
    .hero-lead {
      font-size: 1.12rem;
      line-height: 1.75;
      color: #CBD5E1;
      margin-bottom: 30px;
      max-width: 720px;
    }
    .hero-checklist {
      list-style: none;
      margin: 0 0 34px 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      gap: 16px 28px;
    }
    .hero-checklist li {
      font-size: 0.92rem;
      color: #E2E8F0;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .hero-checklist li i {
      color: var(--neon-green);
    }
    .hero-cta-group {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 18px;
      margin-bottom: 40px;
    }
    .hero-trust-bar {
      border-top: 1px solid var(--border-dark);
      padding-top: 24px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 24px;
      font-size: 0.82rem;
      color: var(--text-dim);
    }
    .trust-stat-item strong {
      color: var(--neon-green);
      font-size: 1.05rem;
      margin-right: 4px;
    }

    /* 2. 优惠阶梯与机构试用权益 */
    .tier-badge {
      position: absolute;
      top: -12px;
      right: 20px;
      background: var(--tactic-orange);
      color: #FFFFFF;
      font-size: 0.72rem;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: var(--radius-sm);
    }
    .tier-price {
      font-size: 1.7rem;
      font-weight: 800;
      color: var(--pitch-dark);
      margin: 16px 0 8px;
    }
    .tier-price small {
      font-size: 0.85rem;
      color: var(--text-muted);
      font-weight: normal;
    }
    .tier-list {
      list-style: none;
      padding: 0;
      margin: 20px 0 28px;
      border-top: 1px solid var(--border-light);
      padding-top: 16px;
    }
    .tier-list li {
      font-size: 0.88rem;
      color: #334155;
      padding: 6px 0;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .tier-list li i {
      color: var(--neon-green);
    }

    /* 3. 套餐对比选型表 */
    .compare-table-container {
      background: #FFFFFF;
      border: 1px solid var(--border-light);
      border-radius: var(--radius-md);
      overflow-x: auto;
      box-shadow: var(--shadow-sm);
    }
    .compare-table {
      width: 100%;
      border-collapse: collapse;
      text-align: left;
      min-width: 740px;
    }
    .compare-table th, 
    .compare-table td {
      padding: 16px 20px;
      border-bottom: 1px solid var(--border-light);
      font-size: 0.9rem;
    }
    .compare-table th {
      background: var(--surface-light);
      font-weight: 700;
      color: var(--pitch-dark);
    }
    .compare-table .highlight-col {
      background: rgba(0, 220, 130, 0.04);
      border-left: 2px solid var(--neon-green);
      border-right: 2px solid var(--neon-green);
    }
    .table-check { color: #00874e; font-weight: bold; }
    .table-dash { color: #CBD5E1; }

    /* 4. 算法引擎与低延迟技术 */
    .engine-media-card {
      position: relative;
      border-radius: var(--radius-md);
      overflow: hidden;
      border: 1px solid var(--border-dark);
    }
    .hud-overlay {
      position: absolute;
      top: 16px;
      left: 16px;
      background: rgba(10, 14, 19, 0.75);
      border: 1px solid var(--neon-green);
      padding: 6px 12px;
      border-radius: var(--radius-sm);
      font-size: 0.75rem;
      color: var(--neon-green);
      font-family: monospace;
      letter-spacing: 0.5px;
    }
    .hud-overlay-bottom {
      position: absolute;
      bottom: 16px;
      right: 16px;
      background: rgba(10, 14, 19, 0.85);
      border-left: 3px solid var(--tactic-orange);
      padding: 8px 14px;
      font-size: 0.75rem;
      color: #FFFFFF;
    }
    .engine-param-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
      margin-top: 24px;
    }
    .param-box {
      background: var(--card-dark);
      border: 1px solid var(--border-dark);
      padding: 18px;
      border-radius: var(--radius-sm);
    }
    .param-box strong {
      display: block;
      color: var(--neon-green);
      font-size: 1.45rem;
      font-weight: 800;
    }
    .param-box span {
      font-size: 0.8rem;
      color: var(--text-dim);
    }

    /* 5. 爆款工作台展示 */
    .tactics-preview-box {
      background: #06080B;
      border: 1px solid var(--border-dark);
      border-radius: var(--radius-md);
      overflow: hidden;
      box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    }
    .tactics-toolbar {
      background: var(--panel-dark);
      border-bottom: 1px solid var(--border-dark);
      padding: 10px 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .tool-group {
      display: flex;
      gap: 8px;
    }
    .tool-btn {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: #E2E8F0;
      padding: 4px 10px;
      font-size: 0.78rem;
      border-radius: var(--radius-sm);
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }
    .tool-btn.active {
      background: var(--neon-green);
      color: var(--pitch-dark);
      border-color: var(--neon-green);
      font-weight: 700;
    }

    /* 6. 六维核心优势 */
    .icon-box-sport {
      width: 48px;
      height: 48px;
      background: rgba(0, 220, 130, 0.12);
      border: 1px solid rgba(0, 220, 130, 0.25);
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #00874e;
      font-size: 1.25rem;
      margin-bottom: 20px;
    }

    /* 7. 四步工作流 */
    .workflow-timeline {
      position: relative;
    }
    .workflow-step {
      background: #FFFFFF;
      border: 1px solid var(--border-light);
      border-radius: var(--radius-md);
      padding: 26px 20px;
      position: relative;
      height: 100%;
    }
    .step-number {
      font-size: 2.2rem;
      font-weight: 900;
      color: #E2E8F0;
      line-height: 1;
      margin-bottom: 12px;
    }
    .workflow-step h3 {
      font-size: 1.15rem;
      font-weight: 700;
      margin-bottom: 10px;
    }

    /* 8. 量化数据条 */
    .metrics-strip {
      background: #080C0F;
      border-top: 1px solid var(--border-dark);
      border-bottom: 1px solid var(--border-dark);
      padding: 50px 0;
    }
    .metric-item {
      text-align: center;
      padding: 10px 15px;
    }
    .metric-value {
      font-size: 2.75rem;
      font-weight: 900;
      color: var(--neon-green);
      line-height: 1.1;
      letter-spacing: -1px;
      font-family: monospace;
    }
    .metric-label {
      font-size: 0.88rem;
      color: var(--text-dim);
      margin-top: 6px;
    }

    /* 9. 细分场景应用 */
    .scenario-card {
      background: #FFFFFF;
      border: 1px solid var(--border-light);
      border-radius: var(--radius-md);
      overflow: hidden;
      margin-bottom: 30px;
      box-shadow: var(--shadow-sm);
      height: calc(100% - 30px);
    }
    .scenario-thumb {
      height: 200px;
      overflow: hidden;
      position: relative;
    }
    .scenario-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease;
    }
    .scenario-card:hover .scenario-thumb img {
      transform: scale(1.05);
    }
    .scenario-body {
      padding: 22px;
    }
    .scenario-tag {
      font-size: 0.72rem;
      font-weight: 700;
      background: var(--surface-alt);
      color: var(--pitch-dark);
      padding: 3px 8px;
      border-radius: var(--radius-sm);
      display: inline-block;
      margin-bottom: 10px;
    }

    /* 10. 用户评价墙 */
    .review-bubble {
      background: var(--card-dark);
      border: 1px solid var(--border-dark);
      border-radius: var(--radius-md);
      padding: 28px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .review-stars {
      color: #FFB800;
      font-size: 0.85rem;
      margin-bottom: 14px;
    }
    .review-quote {
      font-size: 0.95rem;
      color: #CBD5E1;
      line-height: 1.65;
      margin-bottom: 20px;
    }
    .review-author {
      display: flex;
      align-items: center;
      gap: 12px;
      border-top: 1px solid var(--border-dark);
      padding-top: 16px;
    }
    .author-avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: #253342;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--neon-green);
      font-size: 1.1rem;
    }

    /* 11. 保障图标条 */
    .guarantee-bar {
      border-top: 1px solid var(--border-light);
      border-bottom: 1px solid var(--border-light);
      background: #FFFFFF;
      padding: 38px 0;
    }
    .guarantee-item {
      display: flex;
      align-items: flex-start;
      gap: 14px;
    }
    .guarantee-icon {
      font-size: 1.7rem;
      color: #00874e;
      flex-shrink: 0;
    }
    .guarantee-text h4 {
      font-size: 1rem;
      font-weight: 700;
      margin-bottom: 4px;
    }
    .guarantee-text p {
      font-size: 0.82rem;
      color: var(--text-muted);
      margin: 0;
      line-height: 1.4;
    }

    /* 12. 战术分析实战资讯 */
    .news-card {
      background: #FFFFFF;
      border: 1px solid var(--border-light);
      border-radius: var(--radius-md);
      overflow: hidden;
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    .news-thumb {
      height: 170px;
      overflow: hidden;
    }
    .news-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .news-body {
      padding: 20px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .news-meta {
      font-size: 0.78rem;
      color: var(--text-muted);
      margin-bottom: 8px;
    }
    .news-title {
      font-size: 1.05rem;
      font-weight: 700;
      margin-bottom: 10px;
      line-height: 1.4;
    }
    .news-excerpt {
      font-size: 0.86rem;
      color: var(--text-muted);
      line-height: 1.6;
      margin-bottom: 16px;
      flex: 1;
    }

    /* 13. 合作伙伴生态 */
    .partner-logo-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }
    .partner-pill {
      background: #FFFFFF;
      border: 1px solid var(--border-light);
      border-radius: var(--radius-sm);
      padding: 18px 12px;
      text-align: center;
      font-size: 0.86rem;
      font-weight: 600;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: all 0.2s ease;
    }
    .partner-pill:hover {
      border-color: #00874e;
      color: var(--pitch-dark);
      background: var(--surface-light);
    }

    /* 14. FAQ 手风琴样式覆盖 */
    .accordion-tactics {
      border: 1px solid var(--border-light);
      border-radius: var(--radius-md);
      background: #FFFFFF;
      overflow: hidden;
    }
    .accordion-tactics .accordion-item {
      border-bottom: 1px solid var(--border-light);
    }
    .accordion-tactics .accordion-item:last-child {
      border-bottom: none;
    }
    .accordion-tactics .The CSS selector `.accordion-tactics` requires further styling to define the visual presentation of the tactics section.  Examining the overall page structure suggests that this section will contain an accordion-style interface for displaying sports video analysis tactics.  The current focus is on adding visual enhancements and layout elements for a clean and user-friendly display.


Initial assessment indicates several key constraints and structural requirements. It's crucial to ensure the content adheres strictly to the sports video analysis software focus, avoiding any irrelevant or planning-related terms. A modern, athletic CSS style with Foundation 6 CDN is needed and the content plan outlines specific sections needing implementation.


Verifying image assets and their specifications is the next step.  A comprehensive check of backgrounds and cover images is necessary to ensure proper integration.  Validating alt text, incorporating descriptions with "sports video analysis software" and applying lazy loading to images that are below-the-fold are essential for a good user experience.


Focus shifts to crafting the CSS for the accordion component within the sports video analysis tactics section, starting with styling the title. Considering hover and focus states for the accordion title is important. Determining the appropriate styling for the accordion content is also required.


Focusing on the structure, the existing styles appear to describe a CTA form, not the accordion. The current styling defines elements like input fields, labels, and the overall form container, rather than the intended accordion components. Thus the existing style rules need to be evaluated and modified, or new rules created.


Existing Summary:
The CSS selector `.accordion-tactics` requires further styling to define the visual presentation of the tactics section.  Examining the overall page structure suggests that this section will contain an accordion-style interface for displaying sports video analysis tactics.  The current focus is on adding visual enhancements and layout elements for a clean and user-friendly display.

Initial assessment indicates several key constraints and structural requirements. It's crucial to ensure the content adheres strictly to the sports video analysis software focus, avoiding any irrelevant or planning-related terms. A modern, athletic CSS style with Foundation 6 CDN is needed and the content plan outlines specific sections needing implementation.

Verifying image assets and their specifications is the next step.  A comprehensive check of backgrounds and cover images is necessary to ensure proper integration.  Validating alt text, incorporating descriptions with "sports video analysis software" and applying lazy loading to images that are below-the-fold are essential for a good user experience.

Focus shifts to crafting the CSS for the accordion component within the sports video analysis tactics section, starting with styling the title. Considering hover and focus states for the accordion title is important. Determining the appropriate styling for the accordion content is also required.

Focusing on the structure, the existing styles appear to describe a CTA form, not the accordion. The current styling defines elements like input fields, labels, and the overall form container, rather than the intended accordion components. Thus the existing style rules need to be evaluated and modified, or new rules created.

New Thoughts:
The provided CSS appears to be for a general website layout, not specifically the intended accordion or its surrounding sports video analysis context. It includes elements like footer styling, responsive breakpoints, and navigation visibility rules that are unrelated to the target component. Therefore, further analysis is required to identify or create CSS rules for the accordion specifically.


The website structure necessitates adapting the content plan into distinct sections. Identifying 14 main sections for sports video analysis software presentation is essential.  The initial blueprint needs expansion and mapping to the expanded section structure.


Verifying image assets involves checking their correct usage and validating alt text containing "体育视频分析软件" alongside lazy loading for below-the-fold images.

SEO and brand restrictions require ensuring the website title, H1, and brand logo do not include the domain `0818wy.com` and that the footer brand contains "体育视频分析软件研发中心".


accordion-title {
      font-size: 1rem;
      font-weight: 700;
      color: var(--pitch-dark);
      padding: 18px 24px;
      border: none;
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .accordion-tactics .accordion-title:hover,
    .accordion-tactics .accordion-title:focus {
      background: var(--surface-light);
      color: #00874e;
    }
    .accordion-tactics .accordion-title::before {
      display: none;
    }
    .accordion-tactics .accordion-title::after {
      content: '\f078';
      font-family: 'Font Awesome 6 Free';
      font-weight: 900;
      font-size: 0.82rem;
      color: var(--text-muted);
      transition: transform 0.25s ease;
    }
    .accordion-tactics .is-active .accordion-title::after {
      transform: rotate(180deg);
      color: #00874e;
    }
    .accordion-tactics .accordion-content {
      padding: 0 24px 22px;
      border: none;
      background: transparent;
      color: var(--text-muted);
      font-size: 0.92rem;
      line-height: 1.7;
    }

    /* 15. 加购引导与商业演示申请表单 */
    .cta-consult-box {
      background-color: var(--pitch-dark);
      background-image: linear-gradient(135deg, rgba(10, 14, 19, 0.95) 0%, rgba(18, 25, 33, 0.95) 100%), url('/assets/images/df7e6574a02c5db5.webp');
      background-size: cover;
      background-position: center;
      border-radius: var(--radius-md);
      padding: 48px 40px;
      border: 1px solid var(--border-dark);
      box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    }
    .cta-input-group label {
      color: #CBD5E1;
      font-size: 0.85rem;
      font-weight: 600;
      margin-bottom: 6px;
      display: block;
    }
    .cta-input-group input,
    .cta-input-group select,
    .cta-input-group textarea {
      background: var(--card-dark);
      border: 1px solid var(--border-dark);
      color: #FFFFFF;
      border-radius: var(--radius-sm);
      padding: 10px 14px;
      margin-bottom: 16px;
      font-size: 0.9rem;
      height: auto;
      box-shadow: none;
      width: 100%;
    }
    .cta-input-group input:focus,
    .cta-input-group select:focus,
    .cta-input-group textarea:focus {
      border-color: var(--neon-green);
      background: #1e2b38;
      outline: none;
      box-shadow: 0 0 8px rgba(0, 220, 130, 0.3);
    }

    /* 页脚规范 */
    .site-footer {
      background-color: #06090D;
      border-top: 1px solid var(--border-dark);
      color: var(--text-dim);
      padding: 70px 0 30px;
      font-size: 0.88rem;
    }
    .footer-brand-title {
      color: #FFFFFF;
      font-size: 1.25rem;
      font-weight: 800;
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .footer-col-title {
      color: #FFFFFF;
      font-size: 0.96rem;
      font-weight: 700;
      margin-bottom: 18px;
      letter-spacing: 0.5px;
    }
    .footer-links {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .footer-links li {
      margin-bottom: 10px;
    }
    .footer-links a {
      color: var(--text-dim);
      font-size: 0.86rem;
    }
    .footer-links a:hover {
      color: var(--neon-green);
    }
    .footer-bottom {
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      margin-top: 50px;
      padding-top: 26px;
      font-size: 0.8rem;
      color: #64748B;
    }

    /* 响应式断点控制 */
    @media screen and (max-width: 1024px) {
      .main-nav-links, .nav-actions .btn-nav-ghost { display: none; }
      .mobile-menu-toggle { display: block; }
      .partner-logo-grid { grid-template-columns: repeat(2, 1fr); }
      .engine-param-grid { grid-template-columns: 1fr; }
    }
    @media screen and (max-width: 640px) {
      .hero-h1 { font-size: 2.1rem; }
      .section-title { font-size: 1.7rem; }
      .section-py { padding: 55px 0; }
      .cta-consult-box { padding: 28px 18px; }
      .promo-links { display: none; }
      .partner-logo-grid { grid-template-columns: 1fr; }
    }