/* voice-agents.css — new sections only. Hero (agh) and FAQ (agf) come from agent.css.
   Prefixes: vgi intro · vgd call demo · vgp call flow · vgu use cases · vgt handoff/CTA */

/* shared */
.vg-sec{padding:4rem 0}
.vg-wrap{max-width:1440px;margin:0 auto;padding:0 1.25rem}
.vg-eyebrow{display:flex;align-items:center;gap:.75rem;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--signal)}
.vg-eyebrow::before{content:"";width:2rem;height:2px;background:var(--signal)}
.vg-title{margin-top:1rem;font-size:2.25rem;line-height:1.1;max-width:48rem}
.vg-lead{margin-top:1.25rem;max-width:42rem;font-size:1.125rem;line-height:1.8;color:var(--muted-foreground)}
@media (min-width:768px){.vg-sec{padding:6rem 0}.vg-wrap{padding:0 2.5rem}.vg-title{font-size:3.25rem}}

/* scroll reveal (only when JS is running) */
.vg-js .vg-rise{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.vg-js .vg-rise.is-in{opacity:1;transform:none}

/* sound-wave bars (generated by JS) */
@keyframes vg-bar{0%,100%{height:12%}50%{height:var(--h)}}
@keyframes vg-pop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
@keyframes vg-pulse{0%,100%{opacity:.4;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}
.vg-bars{display:flex;align-items:center;justify-content:center}
.vg-bars i{display:block;flex:none;border-radius:99px;background:var(--signal);height:12%;animation:vg-bar 1.3s ease-in-out infinite;animation-delay:calc(var(--i) * -.09s)}
.vg-bars.is-big{height:9rem;gap:5px;margin:2rem 0 1.25rem}
.vg-bars.is-big i{width:6px}
.vg-bars.is-mini{height:1rem;gap:2px}
.vg-bars.is-mini i{width:3px;background:#fff}

/* ═════ 2. INTRO (vgi) ═════ */
.vgi-grid{display:grid;gap:3rem;align-items:center}
.vgi-more{margin-top:1.5rem;max-width:42rem;line-height:1.85;color:var(--muted-foreground)}
.vgi-card{position:relative;overflow:hidden;padding:2rem;border-radius:1rem;background:var(--surface-deep);color:#fff;box-shadow:0 24px 60px rgba(0,0,0,.18)}
.vgi-card::before{content:"";position:absolute;inset:auto -20% -40% -20%;height:70%;background:radial-gradient(closest-side,rgba(231,92,35,.5),transparent);filter:blur(20px)}
.vgi-live{position:relative;display:flex;justify-content:space-between;font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7)}
.vgi-dot{display:inline-block;width:.5rem;height:.5rem;margin-right:.5rem;border-radius:50%;background:#ff4d4d;animation:vg-pulse 1.6s ease-in-out infinite}
.vgi-card .vg-bars{position:relative}
.vgi-cap{position:relative;font-size:1rem;line-height:1.6;color:rgba(255,255,255,.85)}
@media (min-width:960px){.vgi-grid{grid-template-columns:1.1fr .9fr;gap:5rem}}

/* ═════ 3. CALL DEMO (vgd) ═════ */
.vgd{background:var(--secondary)}
.vgd-grid{display:grid;gap:1.5rem;margin-top:3rem}
.vgd-tabs{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.25rem}
.vgd-tab{flex:0 0 auto;min-width:12rem;padding:1rem 1.25rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);font:inherit;font-weight:600;text-align:left;cursor:pointer;color:var(--foreground);transition:border-color .2s,background-color .2s,box-shadow .2s}
.vgd-tab small{display:block;margin-bottom:.15rem;font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--muted-foreground)}
.vgd-tab:hover{border-color:var(--signal)}
.vgd-tab.is-active{border-color:var(--signal);background:color-mix(in oklch,var(--signal) 8%,var(--card));box-shadow:0 10px 28px color-mix(in oklch,var(--signal) 18%,transparent)}
.vgd-tab.is-active small{color:var(--signal)}
.vgd-phone{max-width:34rem;width:100%;overflow:hidden;border:1px solid var(--border);border-radius:1.25rem;background:var(--card);box-shadow:0 20px 50px rgba(0,0,0,.08)}
.vgd-bar{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.25rem;background:var(--surface-deep);color:#fff;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em}
.vgd-body{display:flex;flex-direction:column;gap:.75rem;min-height:21rem;padding:1.25rem}
.vgd-msg{max-width:85%;padding:.7rem 1rem;border-radius:1rem;font-size:.9375rem;line-height:1.5;animation:vg-pop .3s both}
.vgd-msg.is-agent{align-self:flex-start;background:var(--secondary);border-bottom-left-radius:.25rem}
.vgd-msg.is-caller{align-self:flex-end;background:var(--signal);color:#fff;border-bottom-right-radius:.25rem}
.vgd-msg.is-typing{display:flex;gap:4px;padding:.9rem 1rem}
.vgd-msg.is-typing span{width:6px;height:6px;border-radius:50%;background:var(--muted-foreground);animation:vg-pulse 1s ease-in-out infinite}
.vgd-msg.is-typing span:nth-child(2){animation-delay:.15s}
.vgd-msg.is-typing span:nth-child(3){animation-delay:.3s}
.vgd-acts{display:flex;flex-wrap:wrap;gap:.5rem;min-height:4.25rem;padding:1rem 1.25rem;border-top:1px solid var(--border)}
.vgd-chip{padding:.35rem .7rem;border:1px solid color-mix(in oklch,var(--success) 50%,transparent);border-radius:999px;background:color-mix(in oklch,var(--success) 10%,transparent);font-size:.75rem;font-weight:600;color:var(--ink-soft);animation:vg-pop .3s both}
@media (min-width:900px){.vgd-grid{grid-template-columns:18rem 1fr;align-items:start;gap:2.5rem}.vgd-tabs{flex-direction:column;overflow:visible}.vgd-tab{min-width:0}}

/* ═════ 4. CALL FLOW (vgp) ═════ */
.vgp-list{position:relative;display:grid;gap:2.25rem;margin-top:3.5rem;list-style:none;padding:0}
.vgp-list::before,.vgp-list::after{content:"";position:absolute;left:1.5rem;top:1.5rem;width:2px}
.vgp-list::before{bottom:1.5rem;background:var(--border)}
.vgp-list::after{height:0;background:var(--signal);transition:height 1.8s ease .2s}
.vgp-list.is-in::after{height:calc(100% - 3rem)}
.vgp-step{position:relative;padding-left:4.5rem}
.vgp-num{position:absolute;left:0;top:0;display:grid;place-items:center;width:3rem;height:3rem;border:2px solid var(--border);border-radius:50%;background:var(--card);font-weight:700;transition:border-color .4s,color .4s,background-color .4s}
.vgp-list.is-in .vgp-num{border-color:var(--signal);color:var(--signal)}
.vgp-list.is-in .vgp-step:nth-child(2) .vgp-num{transition-delay:.3s}
.vgp-list.is-in .vgp-step:nth-child(3) .vgp-num{transition-delay:.7s}
.vgp-list.is-in .vgp-step:nth-child(4) .vgp-num{transition-delay:1.1s}
.vgp-list.is-in .vgp-step:nth-child(5) .vgp-num{transition-delay:1.5s}
.vgp-step h3{font-size:1.375rem;padding-top:.6rem}
.vgp-step p{margin-top:.5rem;max-width:28rem;line-height:1.7;color:var(--muted-foreground)}
@media (min-width:960px){
  .vgp-list{grid-template-columns:repeat(5,1fr);gap:1.5rem}
  .vgp-list::before,.vgp-list::after{left:1.5rem;top:1.5rem;height:2px}
  .vgp-list::before{right:1.5rem;bottom:auto}
  .vgp-list::after{width:0;transition:width 1.8s ease .2s}
  .vgp-list.is-in::after{height:2px;width:calc(100% - 3rem)}
  .vgp-step{padding:4.5rem 0 0}
  .vgp-step h3{padding-top:0}
}

/* ═════ 5. USE CASES (vgu) ═════ */
.vgu{background:var(--secondary)}
.vgu-grid{display:grid;gap:1.25rem;margin-top:3rem}
.vgu-card{position:relative;overflow:hidden;padding:1.75rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);transition:transform .3s,box-shadow .3s,border-color .3s}
.vgu-card::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:linear-gradient(90deg,var(--signal),#FFA213);transform:scaleX(0);transform-origin:left;transition:transform .4s}
.vgu-card:hover{transform:translateY(-6px);border-color:var(--signal);box-shadow:0 16px 36px rgba(0,0,0,.09)}
.vgu-card:hover::after{transform:scaleX(1)}
.vgu-idx{position:absolute;top:1rem;right:1.25rem;font-size:2.5rem;font-weight:700;line-height:1;color:color-mix(in oklch,var(--foreground) 7%,transparent)}
.vgu-icon{display:grid;place-items:center;width:3rem;height:3rem;border:1px solid var(--border);border-radius:50%;background:var(--background);color:var(--signal);transition:background-color .3s,color .3s}
.vgu-card:hover .vgu-icon{background:var(--signal);color:#fff;border-color:var(--signal)}
.vgu-card h3{margin-top:1.25rem;font-size:1.375rem}
.vgu-card p{margin-top:.6rem;line-height:1.7;color:var(--muted-foreground)}
@media (min-width:640px){.vgu-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.vgu-grid{grid-template-columns:repeat(3,1fr)}}

/* ═════ 6. HANDOFF + CTA (vgt) ═════ */
@keyframes vg-ring{0%{transform:scale(.6);opacity:.7}100%{transform:scale(2.6);opacity:0}}
.vgt{padding:5rem 1.25rem;color:var(--primary-foreground);background:radial-gradient(at 8% 8%,#0a000f,transparent 42%),radial-gradient(at 88% 15%,rgba(72,0,88,.75),transparent 50%),radial-gradient(at 90% 82%,rgba(231,92,35,.5),transparent 48%),linear-gradient(148deg,#0d000f 0%,#1a0025 35%,#2a0830 60%,#12001a)}
.vgt-wrap{max-width:1440px;margin:0 auto;display:grid;gap:3.5rem;align-items:center}
.vgt-eyebrow{margin-bottom:1rem;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:color-mix(in oklch,var(--primary-foreground) 60%,transparent)}
.vgt-title{font-size:2.25rem;line-height:1.08;max-width:36rem}
.vgt-lead{margin-top:1.25rem;max-width:36rem;font-size:1.0625rem;line-height:1.75;color:color-mix(in oklch,var(--primary-foreground) 68%,transparent)}
.vgt-lead a{color:var(--signal);font-weight:600;border-bottom:1px solid currentColor}
.vgt-checks{margin-top:2rem;max-width:36rem;border-top:1px solid var(--pf-20)}
.vgt-checks li{display:flex;align-items:center;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--pf-20);color:color-mix(in oklch,var(--primary-foreground) 80%,transparent)}
.vgt-i{width:1rem;height:1rem;fill:none;stroke:var(--signal);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.vgt-btns{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}
.vgt-btns .agc-btn{margin-top:0}
.vgt-mic{position:relative;display:grid;place-items:center;width:9rem;height:9rem;margin:2rem auto}
.vgt-mic i{position:relative;z-index:2;display:grid;place-items:center;width:5.5rem;height:5.5rem;border-radius:50%;background:var(--signal);font-size:2rem;color:#fff;box-shadow:0 0 40px rgba(231,92,35,.6)}
.vgt-mic span{position:absolute;inset:1.75rem;border:2px solid var(--signal);border-radius:50%;animation:vg-ring 3s ease-out infinite}
.vgt-mic span:nth-child(2){animation-delay:1s}
.vgt-mic span:nth-child(3){animation-delay:2s}
@media (min-width:768px){.vgt{padding:6rem 2.5rem}.vgt-title{font-size:3.25rem}}
@media (min-width:960px){.vgt-wrap{grid-template-columns:1.2fr .8fr;gap:5rem}.vgt-mic{width:14rem;height:14rem}.vgt-mic i{width:8rem;height:8rem;font-size:3rem}.vgt-mic span{inset:3rem}}

@media (prefers-reduced-motion:reduce){
  .vg-bars i,.vgi-dot,.vgt-mic span,.vgd-msg.is-typing span{animation:none}
  .vg-bars i{height:var(--h)}
  .vg-js .vg-rise{opacity:1;transform:none;transition:none}
  .vgp-list::after{transition:none}
}