/* aicallingagents.in v2 page layout (31 Oct 2026): the faq.troikatech.in/ai-agents page structure (4:5 hero beside a
   numbered H1, idea sections, tool, script in the customer's language, checklist, 4:3 infographics, FAQ, related links,
   closing call-back form) in the hub's own colours and fonts. Loaded after style.css on v2 pages only; every class is v2-. */
.v2 { --v2-navy: #0b1f3a; --v2-deep: #071528; --v2-blue: #1565c0; --v2-sky: #2196f3; --v2-teal: #14b8a6;
  --v2-grad: linear-gradient(120deg, #2196f3, #14b8a6); --v2-dark: linear-gradient(160deg, #071528, #0b1f3a 55%, #10264a);
  --v2-r: 22px; --v2-soft: #eef6ff; display: block; }
.v2 h1, .v2 h2, .v2 h3 { font-family: var(--sans); font-weight: 700; letter-spacing: -.02em; }
.v2 h3 { font-size: 1.14rem; line-height: 1.3; margin: 0 0 6px; }
.v2-wrap { width: calc(100% - 2 * var(--gutter)); max-width: 1180px; margin-inline: auto; }
.v2 p { margin: 0 0 14px; }
.v2 .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------------------------------------------------------------- hero */
.v2-hero { position: relative; overflow: hidden; color: #e8f1ff; padding: 36px 0 56px;
  background: radial-gradient(55% 75% at 88% 8%, rgba(33, 150, 243, .34), transparent 62%),
              radial-gradient(45% 65% at 0% 100%, rgba(20, 184, 166, .22), transparent 62%), var(--v2-dark); }
.v2-hero-grid { display: grid; gap: 32px; }
/* desktop: top-aligned, so a late web font re-flowing the text column never moves the 4:5 frame (no layout shift) */
@media (min-width: 960px) { .v2-hero { padding: 48px 0 72px; } .v2-hero-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: start; gap: 48px; }
  .v2-hero-grid > .v2-herofig { margin-top: 28px; } }
.v2-crumbs { font-size: .88rem; color: #9fc4ee; margin-bottom: 14px; }
.v2-crumbs a { color: #7cc4ff; text-decoration: none; } .v2-crumbs a:hover { text-decoration: underline; }
.v2-pill { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border-radius: 999px; font-size: .9rem;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); color: #dbeafe; }
.v2-pill b { background: var(--v2-grad); color: #fff; border-radius: 999px; padding: 3px 10px; font-size: .7rem; letter-spacing: .09em; }
.v2-hero h1 { color: #fff; font-size: clamp(2rem, 5.2vw, 3.3rem); line-height: 1.08; margin: 16px 0 18px; text-wrap: balance; }
.v2-hero h1 .w { display: inline-block; opacity: 0; transform: translateY(.38em); animation: v2-rise .7s cubic-bezier(.2, .7, .2, 1) forwards;
  animation-delay: calc(var(--i) * 50ms); }
.v2-hero h1 .k .w { background: linear-gradient(90deg, #8fd0ff, #5eead4); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes v2-rise { to { opacity: 1; transform: none; } }
.v2-hero .v2-sub { font-size: 1.06rem; line-height: 1.75; color: #cfe0f7; max-width: 62ch; }
.v2-points { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .95rem; color: #dbeafe; }
.v2-points li::before { content: "✓"; color: #5eead4; font-weight: 700; margin-right: 6px; }
.v2-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.v2-btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.v2-btn-ghost:hover { color: #fff; border-color: #fff; }
.v2-byline { font-size: .84rem; color: #8fb3db; margin: 18px 0 0; }
/* phones: the buttons come straight after the H1, so the first screen shows them above the site's floating WhatsApp pill */
.v2-hero-text { display: flex; flex-direction: column; align-items: flex-start; }
.v2-hero-text > * { order: 3; }
.v2-hero-text > .v2-crumbs { order: 0; } .v2-hero-text > .v2-pill { order: 1; } .v2-hero-text > h1 { order: 2; }
@media (max-width: 959px) { .v2-hero-text > .v2-actions { order: 2; margin: 0 0 20px; } .v2-hero-text > h1 { margin-bottom: 18px; } }

/* 4:5 hero frame: the user's image when supplied, otherwise a live-call card (HTML, no picture) */
.v2-herofig { position: relative; width: 100%; max-width: 430px; aspect-ratio: 4 / 5; margin: 0 auto; border-radius: 28px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .55); background: #0d2345; }
.v2-herofig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.v2-herofig .v2-call { height: 100%; border-radius: 0; display: flex; flex-direction: column; box-shadow: none; border: 0; }
.v2-herofig .v2-msgs { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
/* compact so five messages and the outcome chips always fit the 4:5 frame (phone and desktop) */
.v2-herofig .v2-call { padding: 14px 14px 16px; }
.v2-herofig .v2-msg { font-size: .86rem; line-height: 1.42; padding: 7px 11px; margin: 4px 0; }
.v2-herofig .v2-msg small { font-size: .6rem; }
.v2-herofig .v2-outs { gap: 6px; margin-top: 8px; }
.v2-herofig .v2-outs span { font-size: .7rem; padding: 4px 9px; }
@media (max-width: 420px) {
  .v2-herofig .v2-call { padding: 11px 11px 12px; }
  .v2-herofig .v2-call .top { margin-bottom: 4px; font-size: .76rem; }
  .v2-herofig .v2-msg { font-size: .78rem; line-height: 1.36; padding: 5px 9px; margin: 3px 0; }
  .v2-herofig .v2-outs span { font-size: .66rem; padding: 3px 8px; }
  /* like a chat window: newest lines at the bottom; on the smallest phones the oldest line fades out under the header */
  .v2-herofig .v2-msgs { justify-content: flex-end; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22px); mask-image: linear-gradient(to bottom, transparent, #000 22px); }
}
.v2-herofig .v2-msg { opacity: 0; animation: v2-in .5s ease forwards; animation-delay: calc(.5s + var(--i) * .85s); }
@keyframes v2-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.v2-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: #5eead4; }
.v2-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); animation: v2-pulse 1.8s infinite; }
@keyframes v2-pulse { 70% { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }

/* ---------------------------------------------------------------- sections */
.v2-sec { padding: 56px 0; }
.v2-sec.soft { background: var(--v2-soft); }
@media (min-width: 960px) { .v2-sec { padding: 76px 0; } }
.v2-head { max-width: 780px; margin-bottom: 26px; }
.v2-head h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.15; margin: 0 0 10px; text-wrap: balance; }
.v2-head p { color: var(--ink-2); margin: 0; }
.v2-prose { max-width: 76ch; color: var(--ink-2); }
.v2-prose strong { color: var(--ink); }
.v2-split { display: grid; gap: 28px; }
/* side-by-side image + text: 50/50, both vertically centred; stacked on phones and tablets (layout fix 31 Oct 2026) */
@media (min-width: 960px) { .v2-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 44px; } }

/* call transcript */
.v2-call { background: var(--v2-dark); color: #e8f1ff; border-radius: 24px; padding: 18px 18px 20px; box-shadow: 0 24px 50px -24px rgba(7, 21, 40, .6); }
.v2-call .top { display: flex; align-items: center; gap: 10px; font-size: .84rem; color: #9fc4ee; margin-bottom: 10px; }
.v2-call .top .dots { display: inline-flex; gap: 5px; } .v2-call .top .dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
.v2-msg { max-width: 90%; padding: 9px 13px; border-radius: 16px; margin: 7px 0; font-size: .96rem; line-height: 1.5; }
.v2-msg small { display: block; font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; opacity: .7; margin-bottom: 2px; }
.v2-msg.ai { background: rgba(33, 150, 243, .2); border: 1px solid rgba(124, 196, 255, .3); border-bottom-left-radius: 6px; }
.v2-msg.lead { background: #fff; color: var(--ink); margin-left: auto; border-bottom-right-radius: 6px; }
.v2-outs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.v2-outs span { font-size: .78rem; padding: 5px 10px; border-radius: 999px; background: rgba(20, 184, 166, .16); color: #99f6e4; border: 1px solid rgba(94, 234, 212, .3); }

/* cards */
/* card rows: 3 columns on desktop, 2 on tablets, 1 on phones; 6 cards = 2 full rows, a short last row is centred, never a gap */
.v2-cards, .v2-quotes { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.v2-cards > *, .v2-quotes > * { flex: 0 0 100%; min-width: 0; }
@media (min-width: 640px) { .v2-cards > *, .v2-quotes > * { flex-basis: calc((100% - 16px) / 2); } }
@media (min-width: 1000px) { .v2-cards > *, .v2-quotes > * { flex-basis: calc((100% - 32px) / 3); } }
.v2-card { background: #fff; border: 1px solid var(--line); border-radius: var(--v2-r); padding: 22px; box-shadow: var(--shadow); }
.v2-card .ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--v2-grad); color: #fff; font-size: 1.25rem; margin-bottom: 12px; }
.v2-card p { margin: 0; color: var(--ink-2); font-size: .98rem; }
.v2-card .say { display: block; margin-top: 10px; padding-left: 12px; border-left: 3px solid var(--v2-sky); color: var(--v2-blue); font-size: .94rem; font-style: italic; }
.v2-card .more { display: inline-block; margin-top: 12px; font-weight: 600; color: var(--v2-blue); text-decoration: none; }
.v2-card .more:hover { text-decoration: underline; }

/* steps */
.v2-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; counter-reset: v2s; }
@media (min-width: 760px) { .v2-steps.two { grid-template-columns: 1fr 1fr; } }
.v2-steps li { counter-increment: v2s; position: relative; padding: 16px 18px 16px 66px; background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.v2-steps li::before { content: counter(v2s, decimal-leading-zero); position: absolute; left: 16px; top: 16px; width: 36px; height: 36px; border-radius: 11px;
  background: var(--v2-navy); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .86rem; }
.v2-steps b { display: block; color: var(--ink); font-size: 1.04rem; }
.v2-steps span { color: var(--ink-2); font-size: .96rem; }

/* the user's infographics, each in its own shape (4:3, 16:9 or portrait 3:4); width/height attributes reserve the space */
.v2-fig { margin: 0; }
.v2-fig a { display: block; }
.v2-fig img { display: block; width: 100%; height: auto; border-radius: 22px; border: 1px solid var(--line); box-shadow: var(--shadow); background: #dbeafe; }
.v2-fig figcaption { font-size: .88rem; color: var(--muted); margin-top: 8px; text-align: center; }
/* an infographic on its own: the content column's width up to 900px, centred, caption below, the same space above and below; never floated */
.v2-fig.wide-block { max-width: 900px; margin: 40px auto; float: none; }
.v2-fig.wide-block:last-child { margin-bottom: 0; }
.v2-fig.tall { max-width: 520px; margin-inline: auto; }
.v2-split > .v2-fig { width: 100%; margin: 0; }

/* comparison table */
.v2-tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.v2-table { width: 100%; border-collapse: collapse; min-width: 660px; font-size: .95rem; }
.v2-table th, .v2-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.v2-table thead th { background: var(--v2-navy); color: #fff; font-weight: 600; }
.v2-table tbody th { font-weight: 600; color: var(--ink); background: #f8fbff; }
.v2-table td.us { background: #eaf4ff; color: var(--v2-blue); font-weight: 600; }
.v2-table tr:last-child th, .v2-table tr:last-child td { border-bottom: 0; }
.v2-swipe { font-size: .85rem; color: var(--muted); margin: 8px 0 0; }
@media (min-width: 760px) { .v2-swipe { display: none; } }

/* checklist */
.v2-check { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
@media (min-width: 760px) { .v2-check { grid-template-columns: 1fr 1fr; } }
.v2-check li { display: flex; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.v2-check li::before { content: "✓"; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--v2-grad); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .82rem; }
.v2-check b { display: block; color: var(--ink); } .v2-check span { color: var(--ink-2); font-size: .95rem; }

/* calculator */
.v2-calc { display: grid; gap: 22px; background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 22px; box-shadow: var(--shadow); }
@media (min-width: 900px) { .v2-calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 28px; } }
.v2-calc .row { margin-bottom: 18px; }
.v2-calc label { display: flex; justify-content: space-between; gap: 10px; font-weight: 600; margin-bottom: 6px; color: var(--ink); }
.v2-calc output { color: var(--v2-blue); font-variant-numeric: tabular-nums; }
.v2-calc input[type=range] { width: 100%; accent-color: var(--v2-blue); }
.v2-calc .note { font-size: .86rem; color: var(--muted); margin: 0; }
.v2-res { background: var(--v2-dark); color: #fff; border-radius: 20px; padding: 20px; display: grid; gap: 12px; align-content: start; }
.v2-res .r { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px solid rgba(255, 255, 255, .12); padding-bottom: 10px; }
.v2-res .r span { color: #b9d3f3; font-size: .94rem; }
.v2-res .r b { font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.v2-res p { margin: 0; color: #b9d3f3; font-size: .92rem; }

/* call script in the customer's language: Hindi headings and lines fade in (no letter animation) */
.v2-script { list-style: none; margin: 0; padding: 4px 20px; background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); }
.v2-script li { display: grid; grid-template-columns: 72px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px dashed var(--line); }
.v2-script li:last-child { border-bottom: 0; }
.v2-script .who { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--v2-blue); padding-top: 5px; }
.v2-script .why { display: block; font-size: .86rem; color: var(--muted); margin-top: 4px; }
.v2 [lang=hi] { font-family: "Nirmala UI", "Noto Sans Devanagari", Mangal, var(--sans); line-height: 1.8; }
.v2 h2[lang=hi] { line-height: 1.35; }
.js .v2-fadein { opacity: 0; transition: opacity 1.1s ease; }
.js .v2-fadein.in { opacity: 1; }

/* FAQ */
.v2-faq { display: grid; gap: 10px; max-width: 920px; }
.v2-faq details { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 0 18px; }
.v2-faq summary { cursor: pointer; list-style: none; padding: 16px 30px 16px 0; font-weight: 600; color: var(--ink); position: relative; }
.v2-faq summary::-webkit-details-marker { display: none; }
.v2-faq summary::after { content: "+"; position: absolute; right: 0; top: 11px; font-size: 1.4rem; color: var(--v2-blue); }
.v2-faq details[open] summary::after { content: "\2013"; }
.v2-faq .a { padding: 0 0 16px; color: var(--ink-2); }
.v2-faq .a p { margin: 0; }

/* real client testimonials (verbatim; no ratings) */
.v2-quote { margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--v2-r); padding: 40px 22px 20px; box-shadow: var(--shadow); position: relative; }
.v2-quote::before { content: "\201C"; position: absolute; top: 8px; left: 20px; font: 700 2.8rem/1 Georgia, serif; color: #cfe3f7; }
.v2-quote blockquote { margin: 0; }
.v2-quote blockquote p { margin: 0; color: var(--ink-2); font-size: .98rem; line-height: 1.65; }
.v2-quote figcaption { border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 2px; }
.v2-quote figcaption b { color: var(--ink); font-size: .98rem; }
.v2-quote figcaption span { color: var(--muted); font-size: .86rem; }

/* related links on this site */
.v2-rel { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.v2-rel a { display: block; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 15px 18px; text-decoration: none; color: var(--ink); transition: transform .15s, border-color .15s; }
.v2-rel a b { display: block; margin-bottom: 2px; } .v2-rel a span { font-size: .92rem; color: var(--ink-2); }
.v2-rel a:hover { transform: translateY(-2px); border-color: var(--v2-sky); }

/* call-back form sections (the site's own lead form, posting to the same place as on every other page) */
.v2-cta { color: #e8f1ff; padding: 56px 0; background: radial-gradient(50% 80% at 100% 0%, rgba(33, 150, 243, .3), transparent 60%), var(--v2-dark); }
.v2-cta-grid { display: grid; gap: 28px; }
@media (min-width: 960px) { .v2-cta { padding: 72px 0; } .v2-cta-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); align-items: center; gap: 48px; } }
.v2-cta h2 { color: #fff; font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin: 0 0 12px; }
.v2-cta .v2-copy p { color: #cfe0f7; }
.v2-cta .v2-points { margin-top: 6px; }
.v2-cta form.lead p { color: var(--ink-2); }
.v2-cta form.lead .fine { color: var(--muted); }
.v2-cta form.lead .msg.ok { color: var(--ok); }
.v2-cta form.lead .msg.bad, .v2-cta form.lead .err { color: #c0392b; }
.v2-cta .alt { margin-top: 18px; font-size: .95rem; }
.v2-cta .alt a { color: #7cc4ff; font-weight: 600; }
.v2-cta form.lead { color: var(--ink); }
.v2-cta form.lead h3 { font-family: var(--sans); }

@media (prefers-reduced-motion: reduce) {
  .v2-hero h1 .w, .v2-herofig .v2-msg { animation: none; opacity: 1; transform: none; }
  .v2-live::before { animation: none; }
  .js .v2-fadein { opacity: 1; transition: none; }
}

/* hero image (4:5): next to the H1 on desktop, full width above the text on phones and tablets (layout fix 31 Oct 2026) */
@media (max-width: 959px) { .v2-hero-grid > .v2-herofig { order: -1; max-width: none; margin: 0; } }

/* home banner in the style of the faq.troikatech.in home banner (31 Oct 2026, design reference only): light page with soft
   swirls and floating dots, centred pill, calm headline, a gradient-bordered box (live-call strip + demo button + WhatsApp),
   pill chips. Every line in the box has a fixed height, so the cycling text never moves the layout. */
.v2-hb { position: relative; overflow: hidden; background: #fbfcfe; color: var(--ink); padding: 76px 0 60px; min-height: min(84vh, 820px); display: flex; align-items: center; }
.v2-hb-bg { position: absolute; inset: 0; pointer-events: none; }
.v2-hb-bg .sw { position: absolute; border-radius: 50%; }
.v2-hb-bg .s1 { width: 1500px; height: 1500px; left: 50%; top: -700px; transform: translateX(-30%);
  background: radial-gradient(closest-side, transparent 66%, rgba(255, 255, 255, .95) 68%, rgba(226, 232, 240, .6) 71%, transparent 75%); }
.v2-hb-bg .s2 { width: 1150px; height: 1150px; left: -420px; bottom: -660px;
  background: radial-gradient(closest-side, transparent 62%, rgba(255, 255, 255, .9) 65%, rgba(203, 213, 225, .5) 68%, transparent 73%); }
.v2-hb-bg i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: #14b8a6; opacity: .7;
  animation: v2-float 7s ease-in-out infinite; animation-delay: calc(var(--t) * -1); }
@keyframes v2-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.v2-hb-in { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 980px; }
.v2-hb-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 999px; background: #fff; border: 1px solid #e5e7eb;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .06); font-size: .95rem; color: var(--v2-blue); }
.v2-hb h1 { font-size: clamp(1.85rem, 4.2vw, 3rem); line-height: 1.22; color: #334155; font-weight: 600; margin: 22px auto 14px; max-width: 900px; text-wrap: balance; }
.v2-hb h1 .w { display: inline-block; opacity: 0; transform: translateY(.3em); animation: v2-rise .7s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(var(--i) * 45ms); }
.v2-hb h1 .k .w { color: var(--v2-blue); }
.v2-hb-sub { max-width: 760px; color: #64748b; font-size: 1.04rem; line-height: 1.7; margin: 0 auto 26px; }
.v2-hb-box { width: 100%; max-width: 780px; border: 2px solid transparent; border-radius: 22px; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; text-align: left;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(110deg, #0f766e, #2196f3 55%, #6d28d9) border-box; box-shadow: 0 18px 40px -20px rgba(30, 64, 175, .35); }
.v2-hb-live { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 10px; }
.v2-hb-live .v2-live { margin: 0; color: #0f766e; }
.v2-hb-label { font-size: .84rem; color: #94a3b8; }
.v2-hb-lines { grid-column: 1 / -1; position: relative; height: 3.2em; color: #334155; font-size: 1rem; line-height: 1.6; }
.v2-hb-lines span { position: absolute; inset: 0; opacity: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  animation: v2-cycle 15s linear infinite; animation-delay: calc(var(--n) * 3s); }
.v2-hb-lines b { color: var(--v2-blue); font-weight: 600; }
@keyframes v2-cycle { 0% { opacity: 0; transform: translateY(6px); } 3% { opacity: 1; transform: none; } 17% { opacity: 1; transform: none; } 20%, 100% { opacity: 0; transform: none; } }
.v2-hb-acts { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.v2-hb-wa { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #f1f5f9; color: #128c4a; transition: background .15s; }
.v2-hb-wa:hover { background: #dcfce7; }
.v2-hb-wa svg { width: 22px; height: 22px; }
.v2-hb-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; }
.v2-hb-chip { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; background: #fff; border: 1px solid #e2e8f0; color: #475569;
  font-size: .92rem; text-decoration: none; box-shadow: 0 2px 8px rgba(15, 23, 42, .05); transition: transform .15s, border-color .15s, color .15s; }
.v2-hb-chip:hover { transform: translateY(-2px); border-color: #93c5fd; color: var(--v2-blue); }
.v2-hb .v2-points { justify-content: center; color: #475569; margin-top: 22px; }
.v2-hb .v2-points li::before { color: #0f766e; }
.v2-hb .v2-byline { color: #94a3b8; }
@media (max-width: 640px) {
  .v2-hb { padding: 40px 0 44px; min-height: 0; }
  .v2-hb-sub { font-size: .95rem; line-height: 1.65; }
  .v2-hb-bg i { opacity: .45; }
  .v2-hb-acts .btn { flex: 1; justify-content: center; }
  .v2-hb-chip { font-size: .86rem; padding: 8px 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .v2-hb-bg i, .v2-hb-lines span, .v2-hb h1 .w { animation: none; opacity: 1; transform: none; }
  .v2-hb-lines span:not(:first-child) { opacity: 0; }
}

/* home banner in the faq /ai-agents/ style (user correction, 31 Oct 2026; design reference only): night sky with a faint grid
   and glows, the second half of the H1 in a gradient, a glowing demo button and a glass WhatsApp button, glass cards beside the
   text on wide screens, the live-call card as a console window, the six jobs as a word strip. Every box has a fixed size, so
   nothing moves while it loads or animates. */
.v2-nb { --nb-night: #050a18; --nb-soft: rgba(226, 232, 240, .82); --nb-mute: rgba(226, 232, 240, .58);
  --nb-grad: linear-gradient(110deg, #2dd4bf 0%, #38bdf8 40%, #818cf8 72%, #c084fc 100%);
  --nb-btn: linear-gradient(110deg, #0d9488, #2563eb 55%, #7c3aed);
  position: relative; overflow: hidden; isolation: isolate; background: var(--nb-night); color: #f8fafc; padding: 84px 0 0; }
.v2-nb-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.v2-nb-bg .grid { position: absolute; inset: 0; background-size: 64px 64px;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(70% 50% at 50% 26%, #000 30%, transparent 78%); mask-image: radial-gradient(70% 50% at 50% 26%, #000 30%, transparent 78%); }
.v2-nb-bg .glow { position: absolute; border-radius: 50%; }
.v2-nb-bg .g1 { width: 900px; height: 900px; left: -420px; top: -80px; background: radial-gradient(closest-side, rgba(13, 148, 136, .42), transparent); }
.v2-nb-bg .g2 { width: 860px; height: 860px; right: -380px; top: -380px; background: radial-gradient(closest-side, rgba(124, 58, 237, .45), transparent); }
.v2-nb-bg .g3 { width: 760px; height: 560px; left: 50%; top: 140px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(37, 99, 235, .24), transparent); }
.v2-nb-head { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 900px; }
.v2-nb-pill { display: inline-flex; align-items: center; gap: 10px; padding: 5px 16px 5px 5px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05); font-size: .95rem; font-weight: 500; color: #e2e8f0; }
.v2-nb-pill b { padding: 4px 11px; border-radius: 999px; background: var(--nb-grad); color: #06122a; font-size: .72rem; font-weight: 700; letter-spacing: .07em; }
.v2-nb h1 { font-family: var(--sans); font-size: clamp(2.1rem, 4.9vw, 4rem); line-height: 1.1; font-weight: 700; letter-spacing: -.025em; color: #fff;
  margin: 26px auto 22px; max-width: 880px; text-wrap: balance; }
.v2-nb h1 .g { background: var(--nb-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (min-width: 761px) { .v2-nb h1 .g { display: inline-block; } }
.v2-nb-sub { max-width: 780px; margin: 0 auto 30px; font-size: clamp(1rem, 1.35vw, 1.13rem); line-height: 1.75; color: var(--nb-soft); }
.v2-nb-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.v2-nb .btn.v2-nb-glow, .v2-nb .btn.v2-nb-line { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 28px; border-radius: 999px;
  font-size: 1.02rem; font-weight: 600; color: #fff; text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; }
.v2-nb .btn.v2-nb-glow { background: var(--nb-btn); border: 0; box-shadow: 0 12px 32px -8px rgba(79, 70, 229, .6), inset 0 1px 0 rgba(255, 255, 255, .25); }
.v2-nb .btn.v2-nb-glow:hover { transform: translateY(-2px); box-shadow: 0 18px 42px -10px rgba(79, 70, 229, .75); color: #fff; }
.v2-nb .btn.v2-nb-line { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .25); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.v2-nb .btn.v2-nb-line:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .6); color: #fff; }
.v2-nb-ctas svg { width: 20px; height: 20px; flex: none; }
.v2-nb-line svg { color: #4ade80; }
.v2-nb .v2-points { justify-content: center; margin-top: 26px; color: var(--nb-soft); }
.v2-nb .v2-points li::before { color: #2dd4bf; }
.v2-nb .v2-byline { color: var(--nb-mute); margin-top: 12px; }
.v2-nb-floats { display: none; }
@media (min-width: 1440px) {  /* below this the lower cards would touch the intro text (checked at 1340 and 1366) */
  .v2-nb-floats { display: block; position: absolute; inset: 0 0 auto; height: 640px; z-index: 1; pointer-events: none; }
  .v2-nb-card { position: absolute; width: 230px; padding: 14px 16px; border-radius: 18px; text-align: left; font-size: .8rem; line-height: 1.45; color: var(--nb-soft);
    background: linear-gradient(160deg, rgba(30, 41, 82, .75), rgba(8, 12, 30, .82)); border: 1px solid rgba(148, 163, 184, .22);
    box-shadow: 0 24px 50px -14px rgba(0, 0, 0, .65), 0 0 40px -12px rgba(99, 102, 241, .45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    animation: v2-nb-bob 7s ease-in-out infinite; }
  .v2-nb-card b { display: block; color: #fff; font-size: .95rem; font-weight: 600; }
  .v2-nb-card.c1 { left: max(16px, calc(50% - 700px)); top: 70px; display: grid; grid-template-columns: 40px 1fr; gap: 10px 12px; align-items: center; }
  .v2-nb-card.c2 { right: max(16px, calc(50% - 700px)); top: 40px; animation-delay: -2s; }
  .v2-nb-card.c3 { left: max(16px, calc(50% - 690px)); top: 330px; animation-delay: -4s; }
  .v2-nb-card.c4 { right: max(16px, calc(50% - 690px)); top: 300px; display: flex; gap: 12px; align-items: center; animation-delay: -1s; }
  .v2-nb-card .ph { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff;
    background: linear-gradient(135deg, #22c55e, #0d9488); box-shadow: 0 0 18px rgba(34, 197, 94, .5); }
  .v2-nb-card .ph svg { width: 18px; height: 18px; }
  .v2-nb-card .v2-live { margin: 2px 0 0; }
  .v2-nb-card .eq { grid-column: 1 / -1; display: flex; align-items: center; gap: 3px; height: 26px; }
  .v2-nb-card .eq i { flex: 1; height: 100%; border-radius: 3px; background: linear-gradient(#5eead4, #818cf8); transform: scaleY(.3); animation: v2-nb-eq .9s ease-in-out infinite alternate; }
  .v2-nb-card .eq i:nth-child(2n) { animation-delay: -.3s; } .v2-nb-card .eq i:nth-child(3n) { animation-delay: -.6s; } .v2-nb-card .eq i:nth-child(5n) { animation-delay: -.45s; }
  .v2-nb-card .flow { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
  .v2-nb-card .flow i { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-style: normal; font-size: .9rem; background: rgba(255, 255, 255, .07); }
  .v2-nb-card .flow i.hot { background: rgba(56, 189, 248, .25); }
  .v2-nb-card .flow em { flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #38bdf8, #c084fc); }
  .v2-nb-card ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; }
  .v2-nb-card li { font-size: .72rem; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: rgba(16, 185, 129, .14); color: #a7f3d0; }
  .v2-nb-card .cal { flex: none; width: 52px; border-radius: 10px; overflow: hidden; background: #fff; text-align: center; }
  .v2-nb-card .cal small { display: block; font-size: .6rem; font-weight: 800; letter-spacing: .1em; color: #fff; background: var(--nb-btn); padding: 3px 0; }
  .v2-nb-card .cal b { color: #0f172a; font-size: 1.5rem; line-height: 1.5; }
  .v2-nb-card .ok { display: block; margin-top: 2px; color: #6ee7b7; font-weight: 600; }
}
.v2-nb-stage { position: relative; z-index: 2; margin-top: 64px; perspective: 1800px; }
.v2-nb-console { max-width: 1040px; margin: 0 auto; border-radius: 26px; overflow: hidden; text-align: left; color: #e2e8f0;
  background: linear-gradient(165deg, rgba(23, 31, 66, .92), rgba(7, 11, 28, .96)); border: 1px solid rgba(148, 163, 184, .2);
  box-shadow: 0 50px 120px -40px rgba(99, 102, 241, .6), inset 0 1px 0 rgba(255, 255, 255, .08); transform: rotateX(7deg); transform-origin: 50% 100%; }
.v2-nb-console .bar { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid rgba(148, 163, 184, .14); font-size: .9rem; }
.v2-nb-console .bar b { font-weight: 600; color: #fff; }
.v2-nb-console .dots { display: inline-flex; gap: 7px; }
.v2-nb-console .dots i { width: 11px; height: 11px; border-radius: 50%; background: #f87171; }
.v2-nb-console .dots i:nth-child(2) { background: #fbbf24; } .v2-nb-console .dots i:nth-child(3) { background: #34d399; }
.v2-nb-console .tabs { margin-left: auto; display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(148, 163, 184, .16); }
.v2-nb-console .tabs span { padding: 3px 12px; border-radius: 999px; font-size: .8rem; line-height: 1.6; color: rgba(226, 232, 240, .7); }
.v2-nb-console .tabs .on { background: var(--nb-btn); color: #fff; }
.v2-nb-console .body { display: grid; grid-template-columns: 290px minmax(0, 1fr); }
.v2-nb-console .agent { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 34px 20px; text-align: center;
  border-right: 1px solid rgba(148, 163, 184, .14); }
.v2-nb-console .orb { position: relative; width: 132px; height: 132px; border-radius: 50%; margin-bottom: 18px;
  background: radial-gradient(circle at 32% 28%, #a5f3fc, #2dd4bf 22%, #2563eb 58%, #4c1d95 88%);
  box-shadow: 0 0 50px rgba(45, 212, 191, .35), 0 0 90px rgba(124, 58, 237, .35); animation: v2-nb-breathe 3.2s ease-in-out infinite; }
.v2-nb-console .orb i { position: absolute; inset: -14px; border-radius: 50%; border: 1px solid rgba(129, 140, 248, .5); animation: v2-nb-ring 3.2s ease-out infinite; }
.v2-nb-console .agent b { font-size: 1.15rem; color: #fff; font-weight: 600; }
.v2-nb-console .agent small { font-size: .85rem; color: var(--nb-mute); }
.v2-nb-console .state { margin-top: 12px; padding: 5px 14px; border-radius: 999px; background: rgba(124, 58, 237, .18); border: 1px solid rgba(167, 139, 250, .35); }
.v2-nb-console .state .v2-live { margin: 0; }
.v2-nb-console .talk { display: flex; flex-direction: column; min-width: 0; padding: 18px 22px 20px; }
.v2-nb-console .head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.v2-nb-console .head b { color: #fff; font-weight: 600; font-size: .92rem; }
.v2-nb-console .head small { color: var(--nb-mute); font-size: .8rem; }
.v2-nb-console .msgs { display: flex; flex-direction: column; }
.v2-nb-console .v2-msg { max-width: 82%; font-size: .95rem; opacity: 0; animation: v2-in .5s ease forwards; animation-delay: calc(.6s + var(--i) * .9s); }
.v2-nb-console .v2-msg.ai { background: rgba(56, 189, 248, .1); border: 1px solid rgba(125, 211, 252, .28); color: #e2e8f0; }
.v2-nb-console .v2-msg.lead { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); color: #f1f5f9; }
.v2-nb-console .v2-outs { margin-top: 14px; }
.v2-nb-note { text-align: center; font-size: .84rem; color: var(--nb-mute); margin: 26px 0 0; }
.v2-nb-words { margin-top: 56px; padding: 30px 0 34px; border-top: 1px solid rgba(148, 163, 184, .12); overflow: hidden; }
.v2-nb-words .track { display: flex; align-items: center; width: max-content; animation: v2-nb-marq 46s linear infinite; }
.v2-nb-words .track > * { margin-right: 36px; }
.v2-nb-words span { font-family: var(--sans); font-weight: 700; font-size: clamp(2rem, 5vw, 4rem); line-height: 1.15; letter-spacing: -.02em; color: #fff; white-space: nowrap; }
.v2-nb-words span.g { background: var(--nb-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.v2-nb-words i { font-style: normal; font-size: clamp(1.2rem, 2.4vw, 2rem); color: #818cf8; }
@keyframes v2-nb-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes v2-nb-eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
@keyframes v2-nb-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes v2-nb-ring { from { transform: scale(.92); opacity: .9; } to { transform: scale(1.22); opacity: 0; } }
@keyframes v2-nb-marq { to { transform: translateX(-50%); } }
@media (max-width: 1000px) {
  .v2-nb-console .body { grid-template-columns: 220px minmax(0, 1fr); }
  .v2-nb-console .orb { width: 100px; height: 100px; }
}
@media (max-width: 760px) {
  .v2-nb { padding-top: 44px; }
  .v2-nb-pill { font-size: .84rem; gap: 8px; }
  .v2-nb h1 { margin: 20px auto 16px; }
  .v2-nb-sub { font-size: .98rem; line-height: 1.7; margin-bottom: 24px; }
  .v2-nb-ctas { flex-direction: column; align-items: stretch; width: 100%; max-width: 400px; }
  .v2-nb .btn.v2-nb-glow, .v2-nb .btn.v2-nb-line { justify-content: center; }
  .v2-nb .v2-points { flex-direction: column; align-items: center; gap: 6px; }
  .v2-nb-stage { margin-top: 40px; perspective: none; }
  .v2-nb-console { transform: none; border-radius: 20px; }
  .v2-nb-console .bar { padding: 12px 14px; }
  .v2-nb-console .tabs { display: none; }
  .v2-nb-console .body { grid-template-columns: 1fr; }
  .v2-nb-console .agent { display: grid; grid-template-columns: 46px 1fr auto; column-gap: 12px; align-items: center; justify-items: start; text-align: left;
    padding: 14px; border-right: 0; border-bottom: 1px solid rgba(148, 163, 184, .14); }
  .v2-nb-console .orb { grid-row: 1 / 3; width: 46px; height: 46px; margin: 0; }
  .v2-nb-console .orb i { inset: -6px; }
  .v2-nb-console .agent b { font-size: 1rem; }
  .v2-nb-console .state { grid-row: 1 / 3; grid-column: 3; margin: 0; }
  .v2-nb-console .talk { padding: 14px; }
  .v2-nb-console .v2-msg { max-width: 90%; font-size: .88rem; }
  .v2-nb-words { margin-top: 36px; padding: 20px 0 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .v2-nb-card, .v2-nb-card .eq i, .v2-nb-console .orb, .v2-nb-console .orb i, .v2-nb-words .track { animation: none; }
  .v2-nb-console .v2-msg { animation: none; opacity: 1; }
}

/* dark header on the home page (user, 31 Oct 2026), as on the faq /ai-agents/ page: dark over the night banner at the top of
   the page, the usual light header once the page scrolls (site.js adds .scrolled) or the phone menu opens (body.menu-open) */
.hd-night .logo .name, .hd-night .nav > a, .hd-night .nav .dd-top, .hd-night .dd-btn, .hd-night .menu-btn { transition: background .25s, color .25s, border-color .25s, box-shadow .25s; }
body:not(.menu-open) .hd-night:not(.scrolled) { background: #050a18; border-bottom-color: rgba(148, 163, 184, .14); }
body:not(.menu-open) .hd-night:not(.scrolled) .logo .name { color: #fff; }
body:not(.menu-open) .hd-night:not(.scrolled) .logo .name span { background: linear-gradient(90deg, #2dd4bf, #38bdf8 60%, #818cf8); -webkit-background-clip: text; background-clip: text; color: transparent; }
body:not(.menu-open) .hd-night:not(.scrolled) .nav > a:not(.btn-rose), body:not(.menu-open) .hd-night:not(.scrolled) .nav .dd-top,
body:not(.menu-open) .hd-night:not(.scrolled) .dd-btn { color: #e2e8f0; }
body:not(.menu-open) .hd-night:not(.scrolled) .nav > a:not(.btn-rose):hover, body:not(.menu-open) .hd-night:not(.scrolled) .nav .dd-top:hover,
body:not(.menu-open) .hd-night:not(.scrolled) .nav > a[aria-current="page"] { background: rgba(255, 255, 255, .08); color: #fff; }
body:not(.menu-open) .hd-night:not(.scrolled) .nav > a.btn-rose { background: linear-gradient(110deg, #0d9488, #2563eb 55%, #7c3aed); border-color: rgba(167, 139, 250, .45);
  box-shadow: 0 10px 26px -8px rgba(79, 70, 229, .6); }
body:not(.menu-open) .hd-night:not(.scrolled) .menu-btn { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); box-shadow: none; }
body:not(.menu-open) .hd-night:not(.scrolled) .menu-btn span { background: linear-gradient(90deg, #2dd4bf, #818cf8); }

/* home page: cards linking to every inner page, grouped by city (user brief, 1 Nov 2026) */
.v2-pages { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.v2-pg { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; }
.v2-pg h3 { margin: 0 0 8px; color: var(--v2-blue); }
.v2-pg ul { list-style: none; margin: 0; padding: 0; }
.v2-pg li + li { border-top: 1px solid var(--line); }
.v2-pg a { display: block; padding: 9px 0; color: var(--ink); text-decoration: none; font-weight: 500; }
.v2-pg a:hover { color: var(--v2-blue); }
@media (max-width: 1000px) { .v2-pages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .v2-pages { grid-template-columns: 1fr; } }