  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

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

    .header {
      background: rgba(255, 255, 255, 0.98);
      position: fixed;
      width: 100%;
      top: 0;
      z-index: 1000;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }

    .header-content {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .logo {
      font-size: 28px;
      font-weight: 900;
      color: var(--primary);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 3px;
      text-decoration: none;
    }

    .logo .apostrophe {
      color: var(--accent);
      font-size: 32px;
    }

    .nav {
      display: flex;
      gap: 40px;
      align-items: center;
    }

    .nav-item {
      color: var(--text-light);
      text-decoration: none;
      font-size: 15px;
      font-weight: 500;
      transition: color 0.3s;
      text-align: center;
    }

    .nav-item:hover, .nav-item.active {
      color: var(--primary);
    }

    /* Mobile Menu */
    .mobile-menu-btn {
      display: none;
      flex-direction: column;
      gap: 6px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px;
    }

    .mobile-menu-btn span {
      width: 24px;
      height: 2px;
      background: var(--primary);
      transition: all 0.3s;
      border-radius: 2px;
    }

    .mobile-menu-btn.active span:nth-child(1) {
      transform: rotate(45deg) translate(7px, 7px);
    }

    .mobile-menu-btn.active span:nth-child(2) {
      opacity: 0;
    }

    .mobile-menu-btn.active span:nth-child(3) {
      transform: rotate(-45deg) translate(7px, -7px);
    }

    .mobile-nav {
      display: none;
      position: fixed;
      top: 70px;
      left: 0;
      width: 100%;
      background: rgba(255, 255, 255, 0.98);
      box-shadow: 0 4px 20px rgba(0,0,0,0.1);
      padding: 20px 0;
      z-index: 999;
    }

    .mobile-nav.active {
      display: block;
    }

    .mobile-nav a {
      display: block;
      padding: 15px 30px;
      color: var(--text-light);
      text-decoration: none;
      font-size: 16px;
      font-weight: 500;
      transition: all 0.3s;
    }

    .mobile-nav a:hover,
    .mobile-nav a.active {
      background: var(--bg-light);
      color: var(--primary);
    }

    .hero {
      background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-dark) 100%);
      padding: 150px 20px 80px;
      text-align: center;
      margin-top: 70px;
    }

    .hero-title {
      font-size: 48px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 20px;
      line-height: 1.3;
    }

    .hero-title .subtitle-text {
      font-size: 28px;
      font-weight: 600;
      display: block;
      margin-top: 10px;
    }

    .hero-subtitle {
      font-size: 18px;
      color: var(--text-light);
      margin-bottom: 40px;
    }

    .hero-buttons {
      display: flex;
      gap: 15px;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
    }

    .btn-cta {
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent) 100%);
      color: white;
      padding: 15px 40px;
      border-radius: 50px;
      font-size: 16px;
      font-weight: 600;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.3s;
      border: none;
      cursor: pointer;
    }

    .btn-cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 30px rgba(201, 162, 39, 0.3);
    }

    .btn-secondary {
      background: white;
      color: var(--primary);
      padding: 15px 40px;
      border-radius: 50px;
      font-size: 16px;
      font-weight: 600;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: transform 0.3s, box-shadow 0.3s;
      border: 2px solid var(--primary);
      cursor: pointer;
    }

    .btn-secondary:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 30px rgba(30, 58, 95, 0.2);
      background: var(--bg-light);
    }

    .btn-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-left: 5px;
    }

    .btn-icon svg {
      width: 20px;
      height: 20px;
      transition: transform 0.3s;
    }

    .btn-cta:hover .btn-icon svg {
      transform: translateX(3px);
    }

    .section {
      padding: 100px 20px;
    }

    .section:nth-child(even) {
      background: var(--bg-light);
    }

    .section-header {
      text-align: center;
      margin-bottom: 60px;
    }

    .section-title {
      font-size: 42px;
      font-weight: 700;
      margin-bottom: 20px;
    }

    .section-subtitle {
      color: var(--primary);
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 15px;
    }

    .section-desc {
      font-size: 18px;
      color: var(--text-light);
      line-height: 1.8;
      max-width: 800px;
      margin: 0 auto;
    }

    .features-list {
      max-width: 900px;
      margin: 0 auto;
    }

    .feature-item {
      display: flex;
      align-items: flex-start;
      gap: 15px;
      margin-bottom: 20px;
      font-size: 16px;
      line-height: 1.8;
    }

    .check-icon {
      color: var(--primary);
      font-size: 20px;
      font-weight: 700;
      flex-shrink: 0;
    }

    .process-steps {
      display: flex;
      justify-content: space-between;
      max-width: 1200px;
      margin: 0 auto;
      gap: 20px;
      flex-wrap: wrap;
    }

    .step {
      flex: 1;
      min-width: 180px;
      text-align: center;
    }

    .step-number {
      width: 70px;
      height: 70px;
      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
      color: white;
      font-size: 28px;
      font-weight: 700;
    }

    .step-label {
      font-weight: 600;
      color: var(--text);
      margin-bottom: 10px;
    }

    .step-desc {
      font-size: 14px;
      color: var(--text-light);
    }

    .warning-box {
      background: #fef3c7;
      border-left: 4px solid var(--warning);
      padding: 20px 30px;
      border-radius: 10px;
      max-width: 900px;
      margin: 40px auto 0;
    }

    .warning-box p {
      color: #92400e;
      font-weight: 600;
      font-size: 15px;
    }

    .footer {
      background: var(--bg);
      border-top: 1px solid var(--border);
      padding: 60px 0 40px;
    }
.footer-section h3 {
      font-size: 18px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 20px;
    }

    .footer-info {
      font-size: 14px;
      color: var(--text-light);
      line-height: 1.8;
    }

    .footer-links {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }

    .footer-link {
      color: var(--text-light);
      text-decoration: none;
      font-size: 14px;
      transition: color 0.3s;
    }

    .footer-link:hover {
      color: var(--primary);
    }

    .contact-info {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .contact-item {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 14px;
      color: var(--text-light);
    }

    .contact-label {
      font-weight: 600;
      color: var(--text-light);
      min-width: 40px;
    }

    .footer-bottom {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px 30px 0;
      border-top: 1px solid var(--border);
      margin-top: 40px;
    }
.legal-link {
      color: var(--text-light);
      text-decoration: none;
      font-size: 13px;
      transition: color 0.3s;
    }

    .legal-link:hover {
      color: var(--primary);
    }

    .divider {
      color: var(--border-dark);
      font-size: 13px;
    }

    .copyright {
      text-align: center;
      color: var(--text-muted);
      font-size: 12px;
      margin-top: 15px;
    }

    @media (max-width: 1024px) {
      .header-content {
        padding: 15px 20px;
      }

      .hero {
        padding: 120px 20px 60px;
      }

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

      .hero-title .subtitle-text {
        font-size: 24px;
      }

      .section-title {
        font-size: 36px;
      }
    }

    @media (max-width: 768px) {
      .mobile-menu-btn {
        display: flex;
      }

      .nav {
        display: none;
      }

      .hero {
        padding: 100px 20px 50px;
      }

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

      .hero-title .subtitle-text {
        font-size: 18px;
      }

      .hero-subtitle {
        font-size: 16px;
      }

      .section-title {
        font-size: 24px;
      }

      .section-subtitle {
        font-size: 14px;
      }

      .process-steps {
        flex-direction: column;
        gap: 30px;
      }
}

    @media (max-width: 480px) {
      .logo img {
        height: 32px;
      }

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

      .hero-title .subtitle-text {
        font-size: 16px;
      }

      .hero-subtitle {
        font-size: 14px;
      }

      .section-title {
        font-size: 20px;
      }
    }
  </style>

  <!-- Footer Styles -->
  <link rel="stylesheet" href="css/footer-styles.css">
</head>
<body>
  <!-- Header -->
  <header class="header">
    <div class="header-content">
      <a href="index.html" class="logo">
        <img src="assets/logo.png" alt="D'LIVE" height="40">
      </a>
      <nav class="nav">
        <a href="vbiz.html" class="nav-item">V컬러링</a>
        <a href="ai.html" class="nav-item">선거홍보명함</a>
        <a href="callback.html" class="nav-item">콜백서비스</a>
        <a href="ars.html" class="nav-item active">ARS음성홍보<br>(투표독려)</a>
        <a href="https://letter.dlive.kr/" class="nav-item" target="_blank" rel="noopener noreferrer">스마트레터</a>
        <a href="application.html" class="nav-item">신청서 등록</a>
      </nav>
      <button class="mobile-menu-btn" aria-label="메뉴">
        <span></span>
        <span></span>
        <span></span>
      </button>
    </div>
  </header>

  <!-- Mobile Navigation -->
  <nav class="mobile-nav">
    <a href="vbiz.html">V컬러링</a>
    <a href="ai.html">선거홍보명함</a>
    <a href="callback.html">콜백서비스</a>
    <a href="ars.html" class="active">ARS음성홍보<br>(투표독려)</a>
    <a href="https://letter.dlive.kr/" target="_blank" rel="noopener noreferrer">스마트레터</a>
    <a href="application.html">신청서 등록</a>
  </nav>

  <section class="hero">
    <h1 class="hero-title">
      ARS음성홍보
      <span class="subtitle-text">(투표독려)</span>
    </h1>
    <p class="hero-subtitle">
      성우 및 제3자의 목소리로 음성 홍보 멘트를 녹음하여<br>
      유권자에게 자동으로 전화를 걸어 인사 및 선거 홍보하는 서비스입니다.
    </p>
    <div class="hero-buttons">
      <button onclick="openConsultationModal()" class="btn-cta">
        상담 신청
        <span class="btn-icon">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
            <path d="M12 8L16 12L12 16M8 12H16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </span>
      </button>
      <a href="ars-samples.html" class="btn-secondary">
        샘플 보기
        <span class="btn-icon">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10 6H6C4.89543 6 4 6.89543 4 8V18C4 19.1046 4.89543 20 6 20H16C17.1046 20 18 19.1046 18 18V14M14 4H20M20 4V10M20 4L10 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </span>
      </a>
    </div>
  </section>

  <section class="section">
    <div class="section-header">
      <p class="section-subtitle">활용 목적</p>
      <h2 class="section-title">이런 목적으로 사용할 수 있어요!</h2>
    </div>

    <div class="features-list">
      <div class="feature-item">
        <span class="check-icon">✓</span>
        <div>성우 혹은 제3자의 육성으로 녹음된 음성 멘트를 신속히 유권자에게 전송 가능</div>
      </div>
      <div class="feature-item">
        <span class="check-icon">✓</span>
        <div>읽기 어려운 문자보다 매우 효과적임</div>
      </div>
      <div class="feature-item">
        <span class="check-icon">✓</span>
        <div>선거 전날 지지하는 조합원에게 투표 참여 유도 가능</div>
      </div>
      <div class="feature-item">
        <span class="check-icon">✓</span>
        <div>후보자 이름을 음성 멘트에 넣을 수 있음 (단, 기호/지지호소/공약 등 선거 정보는 사용 불가)</div>
      </div>
      <div class="feature-item">
        <span class="check-icon">✓</span>
        <div>기타 다른 선거 솔루션 대비 경제적으로 선거운동이 가능</div>
      </div>
      <div class="feature-item">
        <span class="check-icon">✓</span>
        <div>선거 기간 뿐 아니라 명절 및 24절기, 감사인사 등 사용 가능</div>
      </div>
    </div>
  </section>

  <section class="section">
    <div class="section-header">
      <p class="section-subtitle">서비스 프로세스</p>
      <h2 class="section-title">간편한 5단계 프로세스</h2>
    </div>

    <div class="process-steps">
      <div class="step">
        <div class="step-number">1</div>
        <div class="step-label">DB입력</div>
        <div class="step-desc">발송 대상 입력</div>
      </div>
      <div class="step">
        <div class="step-number">2</div>
        <div class="step-label">전화발신</div>
        <div class="step-desc">자동 전화 발신</div>
      </div>
      <div class="step">
        <div class="step-number">3</div>
        <div class="step-label">유권자 전화수신</div>
        <div class="step-desc">유권자 전화 수신</div>
      </div>
      <div class="step">
        <div class="step-number">4</div>
        <div class="step-label">음성홍보 파일재생</div>
        <div class="step-desc">녹음된 멘트 재생</div>
      </div>
      <div class="step">
        <div class="step-number">5</div>
        <div class="step-label">통화종료</div>
        <div class="step-desc">자동 통화 종료</div>
      </div>
    </div>
  </section>

