/* i3 Voice AI landing: "Under the hood" stacked layers + footer */
.stackx { background: linear-gradient(180deg, #fff, var(--bg2)); }
.stackx-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 40px; align-items: center; }
@media (max-width: 960px) { .stackx-grid { grid-template-columns: 1fr; } }
.stackx-h { font-size: clamp(38px, 5.4vw, 66px); line-height: 1; letter-spacing: -.045em; margin: 14px 0 18px; font-weight: 800; }
.stackx-h span { background: linear-gradient(90deg, var(--brand), #ff9a3c 40%, #c4560b 70%, var(--brand)); background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 6s linear infinite; padding-bottom: .08em; }

/* footer contact rows with icons */
.vfoot-contact a, .vfoot-contact > span { display: inline-flex; align-items: center; gap: 10px; }
.vfoot-contact .ci { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; background: rgba(234,106,18,.16); color: var(--accent); transition: background .25s, color .25s, transform .25s; }
.vfoot-contact .ci svg { width: 16px; height: 16px; }
.vfoot-contact a:hover .ci { background: var(--brand); color: #fff; transform: translateY(-2px); }
.vfoot-contact a::after { left: 42px; width: calc(100% - 42px); }
.stackx-tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--line); margin: 26px 0 16px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.stackx-tabs::-webkit-scrollbar { display: none; }
.stackx-tabs button { background: none; border: 0; padding: 10px 0 14px; font: 600 15px var(--font); color: var(--ink-2); cursor: pointer; position: relative; white-space: nowrap; }
.stackx-tabs button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.stackx-tabs button.on { color: var(--brand-2); }
.stackx-tabs button.on::after { transform: scaleX(1); }
.stackx-tabs button.on.auto::after { animation: tabfill 5s linear; }
@keyframes tabfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.stackx-desc { color: var(--ink-2); font-size: 16px; min-height: 52px; transition: opacity .3s; }
.stackx-art { position: relative; height: 470px; perspective: 1400px; border-radius: 22px; overflow: hidden;
  background-color: #f6f3ef;
  background-image: linear-gradient(rgba(60,35,15,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(60,35,15,.05) 1px, transparent 1px);
  background-size: 28px 28px; }
.layer { position: absolute; left: 50%; top: 50%; width: 360px; height: 190px; margin: -95px 0 0 -180px; border-radius: 14px;
  background: #fbf9f6; border: 1px solid #e6ddd3; box-shadow: 0 30px 40px -20px rgba(60,35,15,.35), 6px 8px 0 #ddd3c8;
  transform: rotateX(58deg) rotateZ(-38deg) translateZ(0); padding: 18px 22px; display: flex; flex-direction: column; justify-content: flex-end; color: var(--ink);
  transition: transform 1s cubic-bezier(.2,.8,.2,1), background .45s, box-shadow .45s, color .45s; }
.layer::before { content: attr(data-n); position: absolute; top: 14px; right: 18px; font: 600 11px var(--mono); color: #b3a497; }
.layer b { font-size: 19px; letter-spacing: -.01em; }
.layer small { font: 600 10px var(--mono); letter-spacing: .14em; color: #a09184; margin-top: 3px; }
.stackx-art .l4 { transition-delay: .05s; } .stackx-art .l3 { transition-delay: .15s; } .stackx-art .l2 { transition-delay: .25s; } .stackx-art .l1 { transition-delay: .35s; }
.stackx-art.in .l4 { transform: rotateX(58deg) rotateZ(-38deg) translateZ(150px); }
.stackx-art.in .l3 { transform: rotateX(58deg) rotateZ(-38deg) translateZ(50px); }
.stackx-art.in .l2 { transform: rotateX(58deg) rotateZ(-38deg) translateZ(-50px); }
.stackx-art.in .l1 { transform: rotateX(58deg) rotateZ(-38deg) translateZ(-150px); }
.layer.hot { background: linear-gradient(135deg, #f08a3e, var(--brand)); border-color: var(--brand-2); color: #fff; box-shadow: 0 40px 60px -20px rgba(234,106,18,.55), 6px 8px 0 var(--brand-2); transition-delay: 0s; }
.layer.hot small, .layer.hot::before { color: #ffe1c8; }
.stackx-art.in .layer.hot.l3 { transform: rotateX(58deg) rotateZ(-38deg) translateZ(80px); }
.stackx-art.in .layer.hot.l2 { transform: rotateX(58deg) rotateZ(-38deg) translateZ(-20px); }
.stackx-art.in .layer.hot.l1 { transform: rotateX(58deg) rotateZ(-38deg) translateZ(-120px); }
.pulse-dot { position: absolute; left: 50%; top: 8%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 6px rgba(234,106,18,.18); opacity: 0; z-index: 3; }
.stackx-art.in .pulse-dot { animation: flow 3.2s cubic-bezier(.5,0,.5,1) 1.2s infinite; }
@keyframes flow { 0% { top: 6%; opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { top: 88%; opacity: 0; } }
@media (max-width: 560px) { .stackx-art { height: 380px; } .layer { scale: .78; } }
.stackx-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 70px; }
@media (max-width: 860px) { .stackx-cols { grid-template-columns: 1fr; } }
.stackx-cols > div { border-top: 1px solid #d9cfc5; padding-top: 26px; position: relative; }
.stackx-cols > div::before { content: ""; position: absolute; top: -1px; left: 0; width: 0; height: 2px; background: var(--brand); transition: width 1.1s cubic-bezier(.2,.8,.2,1) .3s; }
.stackx-cols > div.in::before { width: 64px; }
.stackx-cols h3 { font-size: 22px; letter-spacing: -.02em; margin-bottom: 10px; }
.stackx-cols p { color: var(--ink-2); font-size: 15.5px; line-height: 1.65; margin: 0; }

/* footer */
.vl footer.vfoot { background: #160c06; color: #d9c3b2; padding: 70px 0 26px; position: relative; overflow: hidden; font-size: 14px; }
.vfoot::before { content: ""; position: absolute; right: -10%; top: -40%; width: 620px; height: 620px; background: radial-gradient(circle, rgba(234,106,18,.28), transparent 65%); pointer-events: none; }
.vl footer.vfoot .wrap { display: block; position: relative; }
.vfoot-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.3fr; gap: 34px; }
@media (max-width: 900px) { .vfoot-top { grid-template-columns: 1fr 1fr; } .vfoot-brand { grid-column: span 2; } }
.vfoot-brand img { height: 62px; width: auto; background: #fff; border-radius: 14px; padding: 10px 16px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.vfoot-brand p { color: #bca594; margin: 16px 0; max-width: 320px; line-height: 1.6; }
.vfoot-live { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #9ff0c4; background: rgba(19,138,82,.16); padding: 6px 12px; border-radius: 99px; }
.vfoot-col { display: flex; flex-direction: column; gap: 11px; }
.vfoot-col h4 { color: #fff; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 4px; }
.vfoot-col a, .vfoot-col span { color: #bca594; font-size: 14.5px; width: fit-content; position: relative; }
.vfoot-col a::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .35s; }
.vfoot-col a:hover { color: #fff; }
.vfoot-col a:hover::after { transform: scaleX(1); transform-origin: left; }
.vfoot-big { font-size: clamp(64px, 14vw, 210px); font-weight: 800; letter-spacing: -.06em; line-height: .9; margin: 60px 0 26px; white-space: nowrap; user-select: none;
  background: linear-gradient(90deg, #ffb066, #ea6a12 30%, #ffd3ad 55%, #ea6a12 80%, #ffb066); background-size: 200% auto; opacity: .92;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 9s linear infinite; }
.vfoot-bar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; border-top: 1px solid rgba(255,255,255,.1); padding-top: 20px; font-size: 13px; color: #9c8676; }
.vfoot-bar .sp { flex: 1; }
.vfoot-up { color: var(--accent); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .layer, .stackx-tabs button::after { transition: none; } .stackx-art.in .pulse-dot, .vfoot-big { animation: none; } }

/* hero call card language tabs */
.cc-langs { display: flex; gap: 6px; padding: 12px 0 0; }
.cc-langs button { flex: 1; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #e8cbb6; border-radius: 10px; padding: 7px 8px; font: 700 13px var(--font); cursor: pointer; transition: .25s; }
.cc-langs button:hover { background: rgba(255,255,255,.1); }
.cc-langs button.on { background: linear-gradient(135deg, var(--accent), var(--brand)); color: #fff; border-color: transparent; box-shadow: 0 6px 18px rgba(234,106,18,.35); }
.call-card .lines { min-height: 330px; }
.call-card .ln { font-size: 14.5px; }

/* ── "Hear it yourself" voice demo carousel ── */
.vdemo { background: #fff; }
.vdemo-box { border-radius: 28px; background: #f5f3f0; border: 1px solid var(--line); padding: 10px; }
.vdemo-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.vdemo-tabs button { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px; border-radius: 16px; border: 0; background: transparent; font: 600 16px var(--font); color: var(--ink-2); cursor: pointer; transition: .3s; }
.vdemo-tabs button i { width: 11px; height: 11px; border-radius: 50%; }
.vdemo-tabs button.on { background: #fff; color: var(--ink); box-shadow: 0 2px 10px rgba(60,35,15,.08); }
.vdemo-stage { position: relative; height: 520px; overflow: hidden; border-radius: 22px; margin-top: 8px; background: radial-gradient(800px 300px at 50% 40%, #fff, #f5f3f0 70%); }
.vdemo-track { position: absolute; inset: 0; }
.orb-item { position: absolute; left: 50%; top: 47%; width: 300px; text-align: center; transform: translate(-50%, -50%) translateX(calc(var(--pos) * 330px)) scale(calc(1 - min(1, abs(var(--pos))) * .22));
  opacity: calc(1 - min(2, abs(var(--pos))) * .38); transition: transform .8s cubic-bezier(.2,.8,.2,1), opacity .8s; z-index: calc(10 - abs(var(--pos))); cursor: pointer; }
.orb-item.center { cursor: default; }
.orb { position: relative; width: 300px; height: 300px; border-radius: 50%; overflow: hidden; margin: 0 auto; box-shadow: 0 30px 70px -25px var(--glow, rgba(234,106,18,.6)); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.orb::before { content: ""; position: absolute; inset: -30%; background: var(--mesh); filter: blur(28px) saturate(130%); animation: orbspin 14s linear infinite; }
.orb::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.55), transparent 40%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
.orb-item.playing .orb { transform: scale(1.05); }
.orb-item.playing .orb::before { animation-duration: 3.5s; }
@keyframes orbspin { to { transform: rotate(360deg); } }
.orb-play { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; border: 0; background: #fff; display: grid; place-items: center; cursor: pointer; z-index: 2;
  box-shadow: 0 10px 30px rgba(0,0,0,.18); transition: transform .25s, opacity .3s; opacity: 0; transform: scale(.8); }
.orb-item.center .orb-play { opacity: 1; transform: none; }
.orb-play:hover { transform: scale(1.08) !important; }
.orb-play svg { width: 26px; height: 26px; color: #111; }
.orb-ring { position: absolute; inset: -9px; border-radius: 50%; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .3s; }
.orb-item.playing .orb-ring { opacity: 1; }
.orb-ring circle { fill: none; stroke-width: 3; }
.orb-ring .bg { stroke: rgba(0,0,0,.06); } .orb-ring .fg { stroke: var(--brand); stroke-linecap: round; transition: stroke-dashoffset .25s linear; }
.orb-meta { margin-top: 22px; transition: opacity .5s; }
.orb-item:not(.center) .orb-meta { opacity: .55; }
.orb-meta h3 { font-size: 21px; margin: 0 0 6px; display: inline-flex; align-items: center; gap: 8px; }
.orb-meta p { color: var(--ink-2); margin: 0 auto; max-width: 260px; font-size: 15px; line-height: 1.5; }
.orb-meta .chips2 { display: flex; gap: 6px; justify-content: center; margin-top: 10px; }
.orb-meta .chips2 span { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: #fff; border: 1px solid var(--line); color: var(--ink-2); }
.vdemo-nav { position: absolute; top: 80%; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; cursor: pointer; z-index: 20; transition: .2s; }
.vdemo-nav:hover { border-color: var(--brand); color: var(--brand); }
.vdemo-nav.prev { left: calc(50% - 205px); } .vdemo-nav.next { right: calc(50% - 205px); }
.vdemo-nav svg { width: 18px; height: 18px; }
.vdemo-wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 28px; margin-top: 10px; }
.vdemo-wave i { width: 3px; height: 20%; border-radius: 3px; background: var(--brand); opacity: .25; transition: height .12s, opacity .2s; }
.orb-item.playing .vdemo-wave i { opacity: 1; }
.vdemo-note { text-align: center; color: var(--ink-3); font-size: 13px; margin: 14px 0 4px; }
@media (max-width: 760px) {
  .vdemo-stage { height: 440px; } .orb-item, .orb { width: 230px; } .orb { height: 230px; }
  .orb-item { transform: translate(-50%, -50%) translateX(calc(var(--pos) * 260px)) scale(calc(1 - min(1, abs(var(--pos))) * .25)); }
  .vdemo-nav.prev { left: 12px; } .vdemo-nav.next { right: 12px; } .vdemo-tabs button { font-size: 13px; padding: 10px 4px; }
}
@media (prefers-reduced-motion: reduce) { .orb::before { animation: none; } .orb-item { transition: none; } }

.stackx-grid > *, .vl-hero .grid2 > * { min-width: 0; }
@media (max-width: 560px) { .stackx-h { font-size: 34px; } .stackx-tabs { gap: 16px; } .stackx-tabs button { font-size: 14px; } }

/* stacked layers v2: smaller cards on the left, spaced further apart, with an upright legend on the right */
.stackx-art .layer { width: 290px; height: 160px; margin: -80px 0 0 -145px; left: 36%; }
.stackx-art .layer b { font-size: 17px; font-weight: 800; color: #3a2a1f; }
.stackx-art .layer.hot b { color: #fff; }
.stackx-art .layer small { display: none; }
.stackx-art.in .l4 { transform: rotateX(58deg) rotateZ(-38deg) translateZ(180px); }
.stackx-art.in .l3 { transform: rotateX(58deg) rotateZ(-38deg) translateZ(60px); }
.stackx-art.in .l2 { transform: rotateX(58deg) rotateZ(-38deg) translateZ(-60px); }
.stackx-art.in .l1 { transform: rotateX(58deg) rotateZ(-38deg) translateZ(-180px); }
.stackx-art.in .layer.hot.l3 { transform: rotateX(58deg) rotateZ(-38deg) translateZ(85px); }
.stackx-art.in .layer.hot.l2 { transform: rotateX(58deg) rotateZ(-38deg) translateZ(-35px); }
.stackx-art.in .layer.hot.l1 { transform: rotateX(58deg) rotateZ(-38deg) translateZ(-155px); }
.stackx-art .pulse-dot { left: 36%; }
.stackx-legend { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; z-index: 5; width: 230px; }
.stackx-legend li { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.88); border: 1px solid #e6ddd3; box-shadow: 0 6px 18px rgba(60,35,15,.06);
  opacity: 0; transform: translateX(16px); transition: opacity .6s, transform .6s cubic-bezier(.2,.8,.2,1), background .35s, border-color .35s, box-shadow .35s; }
.stackx-art.in .stackx-legend li { opacity: 1; transform: none; }
.stackx-art.in .stackx-legend li:nth-child(2) { transition-delay: .1s; } .stackx-art.in .stackx-legend li:nth-child(3) { transition-delay: .2s; } .stackx-art.in .stackx-legend li:nth-child(4) { transition-delay: .3s; }
.stackx-legend i { font: 700 11px var(--mono); color: #a09184; font-style: normal; width: 22px; flex: none; }
.stackx-legend b { display: block; font-size: 14px; color: var(--ink); line-height: 1.25; }
.stackx-legend small { display: block; font-size: 12px; color: var(--ink-3); }
.stackx-legend li.on { background: linear-gradient(135deg, #f08a3e, var(--brand)); border-color: var(--brand-2); box-shadow: 0 10px 26px rgba(234,106,18,.35); }
.stackx-legend li.on b, .stackx-legend li.on small, .stackx-legend li.on i { color: #fff; }
@media (max-width: 760px) {
  .stackx-art { height: auto; padding: 300px 14px 16px; }
  .stackx-art .layer, .stackx-art .pulse-dot { left: 50%; top: 150px; }
  .stackx-art .layer { scale: .7; }
  .stackx-legend { position: static; transform: none; width: auto; }
}
@media (min-width: 961px) { .stackx-grid { grid-template-columns: .82fr 1.18fr; } }
.stackx-art .layer { left: 33%; scale: .9; }
.stackx-art .pulse-dot { left: 33%; }
.stackx-legend { width: 215px; }
@media (max-width: 760px) { .stackx-art .layer { left: 50%; scale: .7; } .stackx-art .pulse-dot { left: 50%; } .stackx-legend { width: auto; } }