/* "Bringing Technology to Life" voice-platform section — replaces the "Best brands win with Hi & Hello" logo strip.
   Built by hi-hello-voice.js. Uses the site's own tokens: automatGrotesk (inherited), --foreground #101010,
   --muted #6b7280, --border #e5e7eb, --background #f9fafb, accent blue #4189f5, navy gradient (as the "Log in" button). */
html:not(.hhv-failed) section[data-track-view="logo_strip"]{display:none !important}

.hhv{--ink:#101010;--muted:#6b7280;--border:#e5e7eb;--blue:#4189f5;--blue-line:#d6e3f8;
  position:relative;width:100%;padding:72px 24px 72px;background:#f9fafb;font-family:inherit;color:var(--ink);overflow:hidden}
.hhv *{box-sizing:border-box;font-family:inherit}
.hhv svg{display:block}
.hhv-wrap{position:relative;z-index:1;max-width:1240px;margin:0 auto}
.hhv-btn,.hhv-arrow,.hhv-play,.hhv-dot{cursor:pointer;-webkit-tap-highlight-color:transparent}

/* ---------- top: headline (left) | divider | paragraph + buttons (right) ---------- */
.hhv-top{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);align-items:center;gap:32px 0}
/* Preserve the removed waveform's 44px height and 26px top margin. */
.hhv-copy{padding-bottom:70px}
.hhv-badge{display:inline-flex;align-items:center;gap:8px;margin:0 0 20px;padding:7px 14px;border-radius:999px;border:1px solid var(--blue-line);background:#fff;font-size:14px;font-weight:500;color:var(--ink);box-shadow:0 2px 8px rgba(65,137,245,.1)}
/* A small, swirling voice orb; transforms keep the pill's dimensions steady. */
.hhv-badge-orb{position:relative;isolation:isolate;display:block;flex:0 0 16px;width:16px;height:16px;border-radius:50%;overflow:hidden;background:#7c94ff;box-shadow:0 0 7px rgba(65,137,245,.35);animation:hhv-orb-pulse 3s ease-in-out infinite}
.hhv-badge-orb::before{content:"";position:absolute;inset:-35%;background:conic-gradient(from 0deg,#36d9ef,#6171ff,#ed91d6,#678bff,#36d9ef);filter:blur(2px);animation:hhv-orb-swirl 4s linear infinite}
.hhv-badge-orb::after{content:"";position:absolute;inset:1px;border-radius:50%;background:radial-gradient(circle at 32% 25%,rgba(255,255,255,.95),transparent 46%),radial-gradient(circle at 70% 75%,rgba(157,244,255,.85),transparent 60%);box-shadow:inset 0 0 3px rgba(255,255,255,.6)}
@keyframes hhv-orb-swirl{to{transform:rotate(360deg)}}
@keyframes hhv-orb-pulse{0%,100%{transform:scale(.94);box-shadow:0 0 5px rgba(65,137,245,.25)}50%{transform:scale(1.06);box-shadow:0 0 9px rgba(111,101,245,.45)}}
/* same heading style as the site's own sections: normal weight, tight tracking, 48px on desktop */
.hhv-h{margin:0;font-size:30px;line-height:1.1;font-weight:400;letter-spacing:-.025em;color:var(--ink)}
.hhv-accent{position:relative;display:inline-block;color:var(--blue);font-weight:600}
.hhv-accent svg{position:absolute;left:2%;bottom:-10px;width:96%;height:12px;overflow:visible}
.hhv-side{padding-left:56px;border-left:1px solid var(--blue-line);max-width:680px}
.hhv-p{margin:0;max-width:680px;font-size:20px;line-height:1.5;color:#4b5563}
.hhv-br{display:none}
@media (min-width:1025px){.hhv-br{display:inline}}
.hhv-p b{font-weight:600;color:var(--ink)}
.hhv-p b.hhv-blue{color:var(--blue);font-weight:600}
.hhv-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hhv-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 22px;border-radius:999px;font-size:16px;font-weight:600;text-decoration:none;border:1px solid transparent;
  transition:filter .2s ease,box-shadow .2s ease,background-color .2s ease}
.hhv-btn svg{width:16px;height:16px}
.hhv-primary{background:linear-gradient(135deg,#10408f 0%,#0a2557 100%);color:#fff;box-shadow:0 4px 12px rgba(10,37,87,.25)}
.hhv-primary:hover{filter:brightness(1.15);box-shadow:0 6px 16px rgba(10,37,87,.3)}
.hhv-ghost{background:#fff;color:var(--ink);border-color:var(--border);box-shadow:0 2px 8px rgba(16,16,16,.04)}
.hhv-ghost:hover{background:#f3f4f6}
/* "Talk to an Expert": the site's blue */
.hhv-blue-btn{background:linear-gradient(135deg,#4189f5 0%,#2563eb 100%);color:#fff;box-shadow:0 4px 12px rgba(37,99,235,.3)}
.hhv-blue-btn:hover{filter:brightness(1.08);box-shadow:0 6px 16px rgba(37,99,235,.38)}

/* ---------- carousel: three frosted cards, the middle one slightly larger ---------- */
.hhv-agents-intro{display:flex;align-items:center;justify-content:center;gap:24px;margin:36px 0 0;font-size:clamp(16px,1.7vw,24px);line-height:1.4;font-weight:500;text-align:center;color:#0a2557}
.hhv-agents-intro span{min-width:0;text-wrap:balance}
.hhv-agents-intro strong{font-weight:600;color:#2563eb}
.hhv-intro-wave{flex:0 0 clamp(44px,6.5vw,100px);width:clamp(44px,6.5vw,100px);height:40px;color:#2454ff}
.hhv-intro-wave rect{transform-box:fill-box;transform-origin:center;animation:hhv-wave-pulse 1.5s ease-in-out infinite}
.hhv-intro-wave rect:nth-child(2){animation-delay:-.2s}
.hhv-intro-wave rect:nth-child(3){animation-delay:-.65s}
.hhv-intro-wave rect:nth-child(4){animation-delay:-.35s}
.hhv-intro-wave rect:nth-child(5){animation-delay:-1s}
.hhv-intro-wave rect:nth-child(6){animation-delay:-.5s}
.hhv-intro-wave rect:nth-child(7){animation-delay:-1.2s}
.hhv-intro-wave rect:nth-child(8){animation-delay:-.8s}
.hhv-intro-wave rect:nth-child(9){animation-delay:-.1s}
.hhv-intro-wave:last-child rect{animation-duration:1.7s}
@keyframes hhv-wave-pulse{0%,100%{transform:scaleY(.45)}35%{transform:scaleY(1)}65%{transform:scaleY(.65)}}
.hhv-stage{position:relative;height:440px;margin-top:20px;overflow-x:clip;overflow-y:visible;outline:none}
.hhv-card{--sg:0;--x:0;--sc:1;--tx:var(--ink);--glow:rgba(120,120,255,.4);--b0:#cdb8ff;--b1:#ff9bd8;--b2:#8fb2ff;--b3:#d6a8ff;--b4:#a6e0ff;
  position:absolute;left:50%;top:50%;width:31%;min-width:300px;height:360px;padding:34px 36px 0;border-radius:32px;text-align:left;overflow:hidden;isolation:isolate;
  background:var(--b0);border:1.5px solid rgba(255,255,255,.9);
  box-shadow:0 18px 40px -22px var(--glow),inset 0 1px 0 rgba(255,255,255,.6);
  transform:translate(-50%,-50%) translateX(calc(var(--sg) * var(--x) * 100%)) scale(var(--sc));
  transition:transform .55s cubic-bezier(.22,.8,.24,1),opacity .4s ease,box-shadow .4s ease;cursor:pointer}
/* ElevenLabs-style colour: soft blurred blobs that drift slowly, with a fine film grain on top */
.hhv-card::before{content:"";position:absolute;inset:-30%;z-index:0;pointer-events:none;
  background:
    radial-gradient(42% 46% at 24% 28%,var(--b1),transparent 72%),
    radial-gradient(46% 42% at 76% 24%,var(--b2),transparent 72%),
    radial-gradient(52% 46% at 70% 78%,var(--b3),transparent 72%),
    radial-gradient(42% 42% at 22% 80%,var(--b4),transparent 72%);
  filter:blur(22px) saturate(1.1);animation:hhv-drift 16s ease-in-out infinite alternate;animation-delay:var(--dl,0s)}
.hhv-card::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.34;mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes hhv-drift{
  0%{transform:translate(-5%,-4%) rotate(0deg) scale(1.04)}
  50%{transform:translate(6%,4%) rotate(28deg) scale(1.16)}
  100%{transform:translate(-3%,6%) rotate(-22deg) scale(1.08)}}
.hhv-card.p2::before,.hhv-card.pn::before{animation-play-state:paused}
/* with WebGL, the shader canvas replaces the CSS blobs */
.hhv-gl{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block;pointer-events:none}
.hhv-card.hhv-glon::before{display:none}
/* palettes, one per agent: violet-pink / orange-red / dark brown / pale mint / cream */
.hhv-card.t1{--b0:#b9a2ff;--b1:#ff9bdc;--b2:#86adff;--b3:#d9a6ff;--b4:#a8e2ff;--glow:rgba(160,120,255,.5);--dl:-3s}
.hhv-card.t2{--tx:#fff;--b0:#e4501a;--b1:#ff9a4a;--b2:#ffb978;--b3:#b3300f;--b4:#ff6b2c;--glow:rgba(255,100,40,.55);--dl:-8s}
.hhv-card.t3{--tx:#fff;--b0:#4a342e;--b1:#c4664a;--b2:#2a1f1c;--b3:#8c5848;--b4:#a99bff;--glow:rgba(120,70,55,.5);--dl:-5s}
.hhv-card.t4{--b0:#e8efe9;--b1:#c9e6d6;--b2:#f5eee0;--b3:#d9dee3;--b4:#bfe0f2;--glow:rgba(140,190,170,.45);--dl:-11s}
.hhv-card.t5{--b0:#f6ead9;--b1:#ffd5aa;--b2:#d6ecd8;--b3:#f4d9c9;--b4:#cde2f5;--glow:rgba(240,190,140,.5);--dl:-1s}
.hhv-card.t6{--tx:#fff;--b0:#c2185b;--b1:#ff6fa5;--b2:#6a1b4d;--b3:#e8467c;--b4:#ffb3d1;--glow:rgba(225,60,120,.5);--dl:-6s}
.hhv-card.p0{--x:0;--sc:1.04;z-index:3;cursor:default;border-color:rgba(255,255,255,.95);
  box-shadow:0 0 0 5px rgba(255,255,255,.55),0 0 0 6px var(--glow),0 28px 54px -20px var(--glow)}
.hhv-card.p1{--x:1.06;--sc:.94;z-index:2}
.hhv-card.p2,.hhv-card.pn{--x:1.06;--sc:.8;opacity:0;pointer-events:none}
.hhv-card:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
/* the old flowing waves stay as a faint light overlay */
.hhv-cw{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hhv-cw .w1{fill:rgba(255,255,255,.14)}.hhv-cw .w2{fill:rgba(255,255,255,.2)}
.hhv-card h3{position:relative;z-index:1;margin:0;max-width:230px;font-size:30px;line-height:1.15;font-weight:400;letter-spacing:-.02em;color:var(--tx)}
.hhv-info{position:absolute;z-index:1;left:22px;right:22px;bottom:24px;min-height:98px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 16px 16px 20px;
  border-radius:26px;background:rgba(255,255,255,.68);border:1px solid rgba(255,255,255,.9);box-shadow:0 8px 22px -12px rgba(16,16,16,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hhv-info p{margin:0;font-size:16px;line-height:1.35;color:var(--ink)}
.hhv-play{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:56px;height:56px;padding:0;border-radius:50%;border:0;background:#fff;color:#0a2557;box-shadow:0 6px 16px rgba(10,37,87,.18)}
.hhv-play:hover{box-shadow:0 8px 20px rgba(65,137,245,.4)}
.hhv-play svg{display:block;flex-shrink:0;width:20px;height:20px;margin:0}

/* side arrows */
.hhv-arrow{position:absolute;top:50%;z-index:6;width:52px;height:52px;margin-top:-26px;border-radius:50%;border:1px solid #e5e7eb;background:#fff;color:#0a2557;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(16,16,16,.12);transition:transform .2s ease,box-shadow .2s ease}
.hhv-arrow:hover{transform:scale(1.07);box-shadow:0 8px 20px rgba(65,137,245,.3)}
.hhv-arrow:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.hhv-arrow svg{width:22px;height:22px}
.hhv-prev{left:10px}.hhv-next{right:10px}

/* pagination dots */
.hhv-foot{display:flex;justify-content:center;margin-top:20px}
.hhv-dots{display:flex;justify-content:center;align-items:center;gap:14px}
.hhv-dot{width:14px;height:14px;padding:0;border:0;border-radius:50%;background:#cfdcf7;transition:background-color .25s ease,transform .25s ease}
.hhv-dot:hover{background:#b3c9f2}
.hhv-dot.is-on{background:#2563eb;transform:scale(1.2)}

/* ---------- larger / smaller screens ---------- */
@media (min-width:768px){.hhv-h{font-size:clamp(40px,4.4vw,56px);line-height:1}}
@media (max-width:1024px){
  .hhv-top{grid-template-columns:1fr}
  .hhv-side{padding-left:0;border-left:0;max-width:none}
  .hhv-card{width:44%;min-width:280px}
}
@media (max-width:720px){
  .hhv{padding:48px 16px 48px}
  .hhv-agents-intro{gap:12px;margin-top:28px}
  .hhv-card{width:84%;min-width:0;height:340px;padding:28px 26px 0}
  .hhv-card.p1{opacity:0;pointer-events:none}
  .hhv-card h3{font-size:26px}
  .hhv-stage{height:380px}
  .hhv-arrow{width:44px;height:44px;margin-top:-22px}.hhv-prev{left:2px}.hhv-next{right:2px}
  .hhv-p{font-size:17px}.hhv-btn{height:44px;padding:0 20px}
}
@media (prefers-reduced-motion:reduce){.hhv-card{transition:none}.hhv-card::before,.hhv-badge-orb,.hhv-badge-orb::before,.hhv-intro-wave rect{animation:none}}