/* Extracted CSS for pages/ai-receptionist/voice-ai-integration/index.html */
body {
      background: var(--color-bg-dark);
      color: var(--color-text-primary);
      font-family: 'Inter', sans-serif;
    }

    .sp-hero {
      min-height: 100vh;
      padding: 150px 0 100px;
      background: var(--color-bg-dark);
      display: flex;
      align-items: center;
      overflow: hidden;
    }

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

    .sp-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: .6rem;
      font-size: .75rem;
      font-weight: 700;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: var(--color-accent-purple);
      margin-bottom: 1.75rem;
      opacity: 0;
    }

    .sp-eyebrow::before {
      content: '';
      display: block;
      width: 20px;
      height: 1.5px;
      background: var(--color-accent-purple);
    }

    .sp-h1 {
      font-size: clamp(3.2rem, 7vw, 7rem);
      font-weight: 800;
      line-height: .93;
      letter-spacing: -.04em;
      text-transform: uppercase;
      margin-bottom: 2rem;
    }

    .sp-h1 .wl {
      display: block;
      overflow: hidden;
      padding-bottom: .05em;
    }

    .sp-h1 .wi {
      display: block;
      will-change: transform;
      transform: translateY(100%);
    }

    .sp-h1 .acc {
      color: var(--color-accent-purple);
    }

    .sp-desc {
      max-width: 500px;
      font-size: clamp(.95rem, 1.15vw, 1.1rem);
      line-height: 1.75;
      color: var(--color-text-secondary);
      margin-bottom: 2.5rem;
      opacity: 0;
    }

    .sp-cta-row {
      display: flex;
      align-items: center;
      gap: 1.5rem;
      flex-wrap: wrap;
      margin-bottom: 3rem;
      opacity: 0;
    }

    .sp-btn {
      display: inline-flex;
      align-items: center;
      gap: 1rem;
      background: var(--color-accent-purple);
      color: #fff;
      padding: .9rem 1.9rem;
      border-radius: 3px;
      font-weight: 600;
      font-size: .85rem;
      letter-spacing: .05em;
      text-transform: uppercase;
      text-decoration: none;
      transition: background .3s, box-shadow .3s;
      box-shadow: 0 12px 32px var(--color-accent-purple-glow);
    }

    .sp-btn:hover {
      background: var(--color-accent-purple-hover);
    }

    .sp-btn svg {
      width: 12px;
      height: 12px;
    }

    .sp-btn-ghost {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      font-size: .78rem;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--color-text-muted);
      text-decoration: none;
      transition: color .2s;
    }

    .sp-btn-ghost:hover {
      color: var(--color-text-primary);
    }

    .sp-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      opacity: 0;
    }

    .sp-stat {
      padding: 1.25rem 0;
      border-top: 1px solid rgba(255, 255, 255, .08);
    }

    .sp-stat-val {
      display: block;
      font-size: 1.5rem;
      font-weight: 800;
      color: var(--color-accent-purple);
      letter-spacing: -.02em;
      margin-bottom: .25rem;
    }

    .sp-stat-label {
      font-size: .75rem;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--color-text-muted);
    }

    .sp-visual {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 480px;
      opacity: 0;
    }

    .sp-glow {
      position: absolute;
      width: 360px;
      height: 360px;
      background: radial-gradient(circle, rgba(94, 14, 215, .25) 0%, transparent 70%);
      pointer-events: none;
    }

    .sp-card {
      position: relative;
      z-index: 2;
      width: 300px;
      background: rgba(18, 18, 23, .92);
      border: 1px solid rgba(94, 14, 215, .4);
      border-radius: 16px;
      padding: 28px;
      box-shadow: 0 40px 80px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .07);
      transform: perspective(900px) rotateY(-10deg) rotateX(3deg);
      transform-style: preserve-3d;
    }

    .sp-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 16px;
      border-bottom: 1px solid rgba(255, 255, 255, .07);
      margin-bottom: 18px;
    }

    .sp-card-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--color-text-muted);
    }

    .sp-card-status {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: #4ade80;
    }

    .sp-card-status::before {
      content: '';
      width: 6px;
      height: 6px;
      background: #4ade80;
      border-radius: 50%;
      box-shadow: 0 0 8px #4ade80;
      animation: plive 1.8s infinite;
    }

    @keyframes plive {

      0%,
      100% {
        transform: scale(1);
        opacity: 1;
      }

      50% {
        transform: scale(1.5);
        opacity: .5;
      }
    }

    .sp-waveform {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 3px;
      height: 44px;
      margin-bottom: 18px;
    }

    .sp-bar {
      width: 3px;
      background: var(--color-accent-purple);
      border-radius: 2px;
      animation: wbar 1.1s ease-in-out infinite alternate;
    }

    .sp-bar:nth-child(1) {
      height: 10px;
      animation-delay: 0s;
    }

    .sp-bar:nth-child(2) {
      height: 22px;
      animation-delay: .1s;
    }

    .sp-bar:nth-child(3) {
      height: 14px;
      animation-delay: .2s;
    }

    .sp-bar:nth-child(4) {
      height: 30px;
      animation-delay: .05s;
    }

    .sp-bar:nth-child(5) {
      height: 18px;
      animation-delay: .15s;
    }

    .sp-bar:nth-child(6) {
      height: 36px;
      animation-delay: .25s;
    }

    .sp-bar:nth-child(7) {
      height: 20px;
      animation-delay: .08s;
    }

    .sp-bar:nth-child(8) {
      height: 28px;
      animation-delay: .18s;
    }

    .sp-bar:nth-child(9) {
      height: 12px;
      animation-delay: .3s;
    }

    .sp-bar:nth-child(10) {
      height: 24px;
      animation-delay: .12s;
    }

    @keyframes wbar {
      to {
        transform: scaleY(.3);
        opacity: .5;
      }
    }

    .sp-integrations {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .sp-int-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 12px;
      background: rgba(255, 255, 255, .03);
      border-radius: 8px;
      font-size: 11px;
      color: var(--color-text-secondary);
    }

    .sp-int-row .tag {
      font-size: 10px;
      font-weight: 700;
      color: #4ade80;
    }

    .sp-visual-label {
      position: absolute;
      bottom: -28px;
      left: 50%;
      transform: translateX(-50%);
      font-size: .65rem;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .25);
      white-space: nowrap;
    }

    .sp-chip {
      position: absolute;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: rgba(18, 18, 23, .95);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 50px;
      padding: 8px 14px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--color-text-primary);
      white-space: nowrap;
      z-index: 5;
      opacity: 0;
      box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
    }

    .sp-chip-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .sp-chip-dot.g {
      background: #4ade80;
      box-shadow: 0 0 8px #4ade80;
    }

    .sp-chip-dot.p {
      background: var(--color-accent-purple);
      box-shadow: 0 0 8px var(--color-accent-purple);
    }

    .sp-chip-1 {
      top: 30px;
      left: -40px;
    }

    .sp-chip-2 {
      bottom: 50px;
      right: -50px;
    }

    .sp-section {
      padding: clamp(6rem, 12vh, 10rem) 0;
      background: var(--color-bg-dark);
    }

    .sp-section.alt {
      background: var(--color-bg-dark-secondary);
    }

    .sp-sec-header {
      margin-bottom: clamp(3.5rem, 7vh, 5.5rem);
    }

    .sp-eyebrow-sm {
      display: inline-flex;
      align-items: center;
      gap: .6rem;
      font-size: .75rem;
      font-weight: 700;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: var(--color-accent-purple);
      margin-bottom: 1.25rem;
    }

    .sp-eyebrow-sm::before {
      content: '';
      width: 20px;
      height: 1.5px;
      background: var(--color-accent-purple);
    }

    .sp-sec-title {
      font-size: clamp(2.25rem, 4.7vw, 4.2rem);
      font-weight: 800;
      line-height: .98;
      letter-spacing: -.04em;
      text-transform: uppercase;
      color: var(--color-text-primary);
    }

    .sp-feature-list {
      display: flex;
      flex-direction: column;
    }

    .sp-feature-item {
      display: grid;
      grid-template-columns: 80px 1fr;
      gap: 3rem;
      padding: 3rem 0;
      border-top: 1px solid rgba(255, 255, 255, .08);
      transition: border-color .35s, padding-left .35s;
    }

    .sp-feature-item:last-child {
      border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    .sp-feature-item:hover {
      border-top-color: var(--color-accent-purple);
      padding-left: 1rem;
    }

    .sp-feat-num {
      font-size: .8rem;
      font-weight: 700;
      color: var(--color-accent-purple);
      letter-spacing: .05em;
      margin-top: .2rem;
    }

    .sp-feat-body h3 {
      font-size: clamp(1.2rem, 2vw, 1.6rem);
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: -.02em;
      color: var(--color-text-primary);
      margin-bottom: .75rem;
    }

    .sp-feat-body p {
      font-size: .95rem;
      line-height: 1.7;
      color: var(--color-text-secondary);
      max-width: 600px;
    }

    .sp-caps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      margin-top: 4rem;
    }

    .sp-cap {
      padding: 2rem 2rem 2rem 0;
      border-top: 1px solid rgba(255, 255, 255, .08);
      transition: border-top-color .3s, transform .3s;
    }

    .sp-cap:hover {
      border-top-color: var(--color-accent-purple);
      transform: translateY(-3px);
    }

    .sp-cap-num {
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--color-accent-purple);
      margin-bottom: 1rem;
    }

    .sp-cap-title {
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: var(--color-text-primary);
      margin-bottom: .5rem;
    }

    .sp-cap-desc {
      font-size: .85rem;
      line-height: 1.6;
      color: var(--color-text-secondary);
    }

    .sp-cta {
      padding: clamp(7rem, 14vh, 12rem) 0;
      background: var(--color-bg-dark-secondary);
      text-align: center;
      position: relative;
      overflow: hidden;
      border-top: 1px solid rgba(255, 255, 255, .06);
    }

    .sp-cta::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 700px;
      height: 350px;
      background: radial-gradient(ellipse, rgba(94, 14, 215, .2) 0%, transparent 70%);
      pointer-events: none;
    }

    .sp-cta-title {
      font-size: clamp(3rem, 7vw, 6rem);
      font-weight: 800;
      line-height: .92;
      letter-spacing: -.04em;
      text-transform: uppercase;
      color: var(--color-text-primary);
      margin-bottom: 1.5rem;
      position: relative;
    }

    .sp-cta-desc {
      font-size: clamp(1rem, 1.3vw, 1.1rem);
      color: var(--color-text-secondary);
      max-width: 480px;
      margin: 0 auto 2.5rem;
      line-height: 1.65;
      position: relative;
    }

    .sp-breadcrumb {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      font-size: .75rem;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--color-text-muted);
      margin-bottom: 2rem;
      opacity: 0;
    }

    .sp-breadcrumb a {
      color: var(--color-text-muted);
      text-decoration: none;
      transition: color .2s;
    }

    .sp-breadcrumb a:hover {
      color: var(--color-accent-purple);
    }

    .sp-breadcrumb span {
      color: var(--color-accent-purple);
    }

    @media(max-width:900px) {
      .sp-hero-grid {
        grid-template-columns: 1fr;
        gap: 60px;
      }

      .sp-visual {
        height: 380px;
      }

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

    @media(max-width:600px) {
      .sp-hero {
        padding-top: 120px;
      }

      .sp-caps {
        grid-template-columns: 1fr;
      }

      .sp-stats {
        grid-template-columns: 1fr;
      }

      .sp-chip-1,
      .sp-chip-2 {
        display: none;
      }

      .sp-feature-item {
        grid-template-columns: 1fr;
        gap: 1rem;
      }
    }

    @media(prefers-reduced-motion:reduce) {

      .sp-bar,
      .sp-card-status::before {
        animation: none;
      }

      .sp-h1 .wi {
        transform: translateY(0);
      }

      .sp-eyebrow,
      .sp-breadcrumb,
      .sp-desc,
      .sp-cta-row,
      .sp-stats,
      .sp-visual,
      .sp-chip {
        opacity: 1;
      }
    }