/* ============================================================
   LLM Voice Agent — outbound calling platform page (layered on style.css)
   ============================================================ */

/* ---------- Hero ---------- */
.cb-hero::before {
  background:
    radial-gradient(900px 600px at 78% 40%, rgba(47, 107, 255, 0.26), transparent 60%),
    radial-gradient(520px 380px at 64% 88%, rgba(92, 242, 176, 0.08), transparent 70%),
    radial-gradient(600px 400px at 10% 10%, rgba(60, 211, 255, 0.10), transparent 70%),
    linear-gradient(180deg, #050d26 0%, var(--ink) 100%);
}
.cb-hero__inner { display: grid; grid-template-columns: 1fr 0.92fr; gap: 64px; align-items: center; min-height: 640px; padding-bottom: 24px; }
.cb-hero__title { font-size: clamp(34px, 3.8vw, 54px); }
.cb-mark { display: flex; width: fit-content; align-items: center; gap: 12px; margin: 4px 0 18px; font: 600 24px/1 var(--f-display); color: var(--ice); letter-spacing: -0.02em; }
html.is-local .cb-mark { font-family: var(--f-local), sans-serif; font-weight: 700; letter-spacing: .02em; }
.cb-mark__glyph { display: inline-flex; align-items: center; gap: 3px; width: 34px; height: 34px; padding: 0 7px; border-radius: 9px; background: linear-gradient(135deg, var(--blue), #1f8bff 60%, var(--cyan) 140%); box-shadow: 0 8px 24px -8px rgba(47, 107, 255, 0.8); }
.cb-mark__glyph i { flex: 1; height: 40%; border-radius: 2px; background: #fff; animation: cbEq 1.1s ease-in-out infinite; }
.cb-mark__glyph i:nth-child(2) { animation-delay: -.2s; }
.cb-mark__glyph i:nth-child(3) { animation-delay: -.45s; }
.cb-mark__glyph i:nth-child(4) { animation-delay: -.7s; }
.cb-mark__glyph i:nth-child(5) { animation-delay: -.9s; }
@keyframes cbEq { 0%, 100% { height: 30%; } 50% { height: 85%; } }

.cb-lines { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.cb-lines li { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px 10px 14px; border-radius: 12px; border: 1px solid var(--line-strong); border-left: 2px solid var(--cyan); background: rgba(47, 107, 255, 0.07); }
.cb-lines b { color: var(--ice); font-size: 15px; font-weight: 600; }
.cb-lines span { color: var(--mute); font-size: 12.5px; }
.cb-hero .hero__ctas { margin-top: 28px; }
.cb-hero .hero__stats { margin-top: 40px; }

.cb-hero__visual { position: relative; padding: 30px 0 40px; }
.cb-call { border-radius: var(--r-lg); border: 1px solid var(--line-strong); background: rgba(5, 12, 34, 0.88); backdrop-filter: blur(14px); overflow: hidden; box-shadow: 0 50px 90px -40px rgba(47, 107, 255, 0.7), 0 0 0 1px rgba(60, 211, 255, 0.06) inset; transform: perspective(1600px) rotateY(-5deg) rotateX(2deg); transform-origin: left center; }
.cb-call__bar { display: flex; align-items: center; gap: 14px; padding: 11px 16px; border-bottom: 1px solid var(--line); background: rgba(11, 24, 64, 0.6); font-size: 11.5px; color: var(--mute); }
.cb-call__who { display: flex; align-items: center; gap: 12px; padding: 16px 18px 6px; }
.cb-call__who b { display: block; font-size: 14.5px; color: var(--ice); font-weight: 600; }
.cb-call__who small { font-size: 11.5px; color: var(--mute); }
.cb-call__avatar { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--cyan)); color: #fff; font: 600 13px/1 var(--f-display); }
.cb-call__avatar::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid rgba(60, 211, 255, 0.5); animation: cbRing 1.8s ease-out infinite; }
@keyframes cbRing { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.cb-call__state { margin-left: auto; padding: 4px 9px; border-radius: 6px; font-size: 10.5px; letter-spacing: .08em; color: var(--ok); background: rgba(92, 242, 176, 0.1); border: 1px solid rgba(92, 242, 176, 0.35); }
.cb-wave { display: flex; align-items: center; gap: 3px; height: 54px; padding: 0 18px; }
.cb-wave i { flex: 1; height: 20%; border-radius: 2px; background: linear-gradient(180deg, var(--cyan), var(--blue)); animation: cbEq 1.2s ease-in-out infinite; }
.cb-wave i:nth-child(3n) { animation-duration: .9s; }
.cb-wave i:nth-child(3n+1) { animation-duration: 1.4s; animation-delay: -.3s; }
.cb-wave i:nth-child(4n) { animation-delay: -.6s; }
.cb-wave i:nth-child(5n) { animation-delay: -.85s; }
.cb-call__turns { display: grid; gap: 10px; padding: 8px 18px 16px; }
.cb-turn { display: flex; gap: 10px; align-items: flex-start; max-width: 92%; padding: 11px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; }
.cb-turn small { flex: none; margin-top: 2px; font-size: 9.5px; letter-spacing: .08em; padding: 2px 5px; border-radius: 4px; }
.cb-turn--user { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); color: var(--text); }
.cb-turn--user small { color: var(--mute); border: 1px solid var(--line-strong); }
.cb-turn--bot { justify-self: end; background: linear-gradient(110deg, rgba(47, 107, 255, 0.45), rgba(47, 107, 255, 0.18)); border: 1px solid rgba(77, 134, 255, 0.55); color: #fff; }
.cb-turn--bot small { color: var(--cyan); border: 1px solid rgba(60, 211, 255, 0.45); }
.cb-turn b { color: var(--cyan); font-weight: 600; }
.cb-sig { display: grid; grid-template-columns: 1.4fr 1fr 1fr; border-top: 1px solid var(--line); }
.cb-sig div { display: grid; gap: 3px; padding: 12px 16px; }
.cb-sig div + div { border-left: 1px solid var(--line); }
.cb-sig small { font-size: 10.5px; color: var(--mute); }
.cb-sig b { font-size: 13px; font-weight: 500; color: var(--ice); }
.cb-sig em { font: normal 500 11px/1 var(--f-mono); color: var(--ok); }
.is-warn { color: var(--warn) !important; }

.cb-float { position: absolute; display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line-strong); background: rgba(12, 18, 44, 0.94); backdrop-filter: blur(14px); box-shadow: 0 24px 50px -16px rgba(0, 0, 0, 0.8); }
.cb-float--a { right: -14px; top: 0; flex-direction: column; align-items: flex-start; gap: 2px; }
.cb-float--a b { font-size: 20px; color: var(--ice); font-weight: 500; }
.cb-float--a span { font-size: 11.5px; color: var(--mute); }
.cb-float--b { left: -36px; bottom: 0; max-width: 330px; border-color: rgba(92, 242, 176, 0.45); animation: cbToast 7s var(--ease) 1.6s infinite both; }
.cb-float__ok { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--ok); color: #03200f; }
.cb-float__ok svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cb-float--b b { display: block; font-size: 13px; font-weight: 600; color: var(--ice); }
.cb-float--b div > span { display: block; margin-top: 2px; font-size: 12px; color: var(--mute); }
@keyframes cbToast { 0% { opacity: 0; transform: translateY(14px); } 8%, 82% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(6px); } }

.pa__chips i, .ly__chips i, .ta__chips i, .dm__robots i { font-style: normal; }

/* ---------- 1 · Sequence diagram ---------- */
.seq { --n: 8; position: relative; border-radius: var(--r-lg); border: 1px solid var(--line); background: rgba(4, 10, 28, 0.6); overflow-x: auto; }
.seq__grid { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(96px, 1fr)); grid-auto-rows: minmax(34px, auto); min-width: 820px; padding: 0 8px 18px; }
.seq__grid::before { content: ""; position: absolute; inset: 70px 8px 10px; background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 16 - .5px), rgba(120, 160, 255, 0.22) calc(100% / 16 - .5px) calc(100% / 16 + .5px), transparent calc(100% / 16 + .5px) calc(100% / 8)); pointer-events: none; }
.seq__who { position: relative; z-index: 3; grid-row: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; margin: 14px 4px 8px; padding: 9px 6px; min-height: 48px; border-radius: 10px; border: 1px solid var(--line-strong); background: #081236; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--ice); line-height: 1.25; }
.seq__who small { font: 500 10px/1.2 var(--f-mono); letter-spacing: .04em; color: var(--mute); }
.seq__who.is-core { border-color: rgba(60, 211, 255, 0.6); background: linear-gradient(135deg, rgba(47, 107, 255, 0.55), rgba(47, 107, 255, 0.2)); }
.seq__who.is-core small { color: #b9ccff; }
.seq__who.is-user { border-color: rgba(92, 242, 176, 0.45); }

.seq__msg { position: relative; z-index: 2; opacity: .28; transition: opacity .35s; }
.seq__msg.is-on { opacity: 1; }
.seq__msg.is-cur .seq__lbl { color: #fff; }
.seq__line { position: absolute; left: calc(100% / (2 * var(--k))); right: calc(100% / (2 * var(--k))); bottom: 7px; height: 2px; background: var(--blue-hi); }
.seq__line::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; border-block: 5px solid transparent; transform: translateY(-50%); }
.seq__msg.is-r .seq__line::after { right: -2px; border-left: 8px solid var(--blue-hi); }
.seq__msg.is-l .seq__line::after { left: -2px; border-right: 8px solid var(--blue-hi); }
.seq__msg.is-ret .seq__line { background: repeating-linear-gradient(90deg, #8aa3dc 0 5px, transparent 5px 9px); }
.seq__msg.is-ret.is-r .seq__line::after { border-left-color: #8aa3dc; }
.seq__msg.is-ret.is-l .seq__line::after { border-right-color: #8aa3dc; }
.seq__msg.is-media .seq__line { height: 3px; background: repeating-linear-gradient(90deg, var(--ok) 0 6px, rgba(92, 242, 176, 0.25) 6px 12px); background-size: 24px 3px; }
.seq__msg.is-media.is-r .seq__line { animation: flowRight .8s linear infinite; }
.seq__msg.is-media.is-l .seq__line { animation: cbFlowLeft .8s linear infinite; }
.seq__msg.is-media.is-r .seq__line::after { border-left-color: var(--ok); }
.seq__msg.is-media.is-l .seq__line::after { border-right-color: var(--ok); }
@keyframes cbFlowLeft { from { background-position: 0 0; } to { background-position: -24px 0; } }
.seq__lbl { position: absolute; left: calc(100% / (2 * var(--k))); right: calc(100% / (2 * var(--k))); bottom: 13px; display: flex; justify-content: center; align-items: baseline; gap: 6px; font-size: 11.5px; line-height: 1.3; color: var(--text); text-align: center; white-space: nowrap; }
.seq__lbl em { font: normal 500 10px/1 var(--f-mono); color: var(--cyan); }
.seq__msg.is-cur .seq__line { box-shadow: 0 0 12px rgba(60, 211, 255, 0.8); }

.seq__note { position: relative; z-index: 2; align-self: center; justify-self: center; display: flex; align-items: center; gap: 6px; max-width: 100%; margin: 4px 0; padding: 5px 10px; border-radius: 8px; border: 1px solid rgba(255, 198, 92, 0.5); background: #1a1730; color: #ffdca0; font-size: 11px; line-height: 1.3; text-align: center; opacity: .28; transition: opacity .35s; }
.seq__note em { font: normal 500 10px/1 var(--f-mono); color: var(--warn); }
.seq__note.is-on { opacity: 1; }
.seq__loop { position: relative; z-index: 1; margin: 2px 2px 0; border: 1px dashed rgba(60, 211, 255, 0.5); border-radius: 12px; background: rgba(47, 107, 255, 0.05); pointer-events: none; }
.seq__loop span { position: absolute; left: 0; top: 0; padding: 3px 10px; border-radius: 11px 0 10px 0; background: rgba(60, 211, 255, 0.16); color: var(--cyan); font: 500 10.5px/1.4 var(--f-mono); letter-spacing: .04em; }
.seq__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; }
.seq__cap { flex: 1; min-height: 3em; padding: 12px 16px; border-radius: 12px; border-left: 2px solid var(--cyan); background: rgba(60, 211, 255, 0.06); font-size: 14px; color: var(--text); }
.seq__cap b { margin-right: 8px; font: 500 12px/1 var(--f-mono); color: var(--cyan); }

/* ---------- 2 · Product architecture ---------- */
.pa {
  display: grid;
  grid-template-columns: 76px 64px 1fr 64px 1fr 64px 1.2fr 74px 1.1fr;
  grid-template-areas:
    ".  .  hub  hub  hub  hub  hub  hub  hub"
    ".  .  .    .    .    .    v1   .    .  "
    "ph l1 vos  l2   paas l3   vcm  l4   dm "
    ".  .  .    .    .    .    v2   .    .  "
    ".  .  asr  asr  asr  asr  asr  asr  asr";
  align-items: stretch;
}
.pa__mod { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--r); border: 1px solid var(--line-strong); background: linear-gradient(180deg, rgba(16, 32, 78, 0.6), rgba(4, 10, 28, 0.4)); color: var(--text); text-align: left; transition: border-color .25s, box-shadow .25s, transform .25s var(--ease); }
.pa__mod:hover { border-color: rgba(60, 211, 255, 0.5); transform: translateY(-2px); }
.pa__mod[aria-pressed="true"] { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan), 0 20px 50px -20px rgba(60, 211, 255, 0.6); }
.pa__mod > b { font-size: 14.5px; line-height: 1.3; color: var(--ice); font-weight: 600; }
.pa__no { font-size: 10.5px; letter-spacing: .1em; color: var(--cyan); }
.pa__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.pa__chips i { font-size: 11px; line-height: 1.3; padding: 3px 8px; border-radius: 99px; border: 1px solid var(--line); background: rgba(47, 107, 255, 0.1); color: #c4d2f5; }
.pa__mod--hub { grid-area: hub; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.pa__mod--hub > b { margin-right: 6px; }
.pa__mod--core { border-color: rgba(60, 211, 255, 0.55); background: linear-gradient(160deg, rgba(47, 107, 255, 0.45), rgba(47, 107, 255, 0.12)); }
.pa__mod--dm { border-color: rgba(156, 140, 255, 0.55); background: linear-gradient(160deg, rgba(120, 100, 255, 0.32), rgba(47, 107, 255, 0.08)); }
.pa__mod--dm .pa__no { color: #b8acff; }
.pa__mod--asr { grid-area: asr; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.pa__mod--asr > b { margin-right: 6px; }
.pa__mod[data-mod="vos"] { grid-area: vos; }
.pa__mod[data-mod="paas"] { grid-area: paas; }
.pa__mod[data-mod="vcm"] { grid-area: vcm; }
.pa__mod[data-mod="dm"] { grid-area: dm; }
.pa__phone { grid-area: ph; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-radius: var(--r); border: 1px dashed rgba(92, 242, 176, 0.45); font-size: 11.5px; color: var(--mute); text-align: center; padding: 10px 4px; }
.pa__phone svg { width: 26px; height: 26px; fill: none; stroke: var(--ok); stroke-width: 1.6; }

.pa__link { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 22px; padding: 0 4px; font-size: 10.5px; line-height: 1.25; color: var(--mute); text-align: center; }
.pa__link--h::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: repeating-linear-gradient(90deg, var(--cyan) 0 4px, transparent 4px 8px); background-size: 16px 2px; animation: flowRight .8s linear infinite; }
.pa__link--h { padding-bottom: 26px; }
.pa__link--duo { padding-bottom: 0; }
.pa__link--duo::before { display: none; }
.pa__link--duo em { position: relative; font-style: normal; padding-bottom: 8px; }
.pa__link--duo em::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: 0; height: 2px; background: repeating-linear-gradient(90deg, #b8acff 0 4px, transparent 4px 8px); background-size: 16px 2px; animation: flowRight .8s linear infinite; }
.pa__link--duo em + em::after { animation-name: cbFlowLeft; background-image: repeating-linear-gradient(90deg, var(--cyan) 0 4px, transparent 4px 8px); }
.pa__link--v { flex-direction: row; justify-content: flex-start; min-height: 48px; padding: 0 0 0 calc(50% + 12px); text-align: left; }
.pa__link--v::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: repeating-linear-gradient(180deg, var(--cyan) 0 4px, transparent 4px 8px); background-size: 2px 16px; animation: flowDown .8s linear infinite; }
.pa__link--v1 { grid-area: v1; }
.pa__link--v2 { grid-area: v2; }
.pa__link[data-i18n="cb.lnk1"] { grid-area: l1; }
.pa__link[data-i18n="cb.lnk2"] { grid-area: l2; }
.pa__link[data-i18n="cb.lnk3"] { grid-area: l3; }
.pa__link--duo { grid-area: l4; }

.pa__detail { display: grid; grid-template-columns: 260px 1fr; gap: 28px; margin-top: 24px; padding: 24px 26px; border-radius: var(--r-lg); border: 1px solid rgba(60, 211, 255, 0.35); background: linear-gradient(110deg, rgba(47, 107, 255, 0.16), rgba(4, 10, 28, 0.4)); }
.pa__detail .tag { margin-bottom: 10px; }
.pa__detail h3 { font-size: 20px; line-height: 1.3; }
.pa__detail p { font-size: 15px; color: var(--text); }
.pa__detail .ticks { margin-top: 14px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 24px; }
.pa__detail .ticks li { font-size: 14px; }

/* ---------- 3 · LLM dialogue design ---------- */
.dm { display: grid; grid-template-columns: 170px minmax(0, 1.35fr) minmax(0, 1fr) 180px; gap: 18px; align-items: stretch; }
.dm__h { margin-bottom: 12px; font-size: 10.5px; letter-spacing: .14em; color: var(--cyan); }
html.is-local .dm__h { font-family: var(--f-body); letter-spacing: .06em; font-size: 12px; }
.dm__col { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--r-lg); border: 1px solid var(--line); background: rgba(4, 10, 28, 0.55); }
.dm__col--vcm { justify-content: center; }
.dm__io { position: relative; display: grid; gap: 4px; padding: 14px; border-radius: 12px; border: 1px solid var(--line-strong); background: rgba(16, 32, 78, 0.6); }
.dm__io b { font: 600 15px/1 var(--f-display); color: var(--ice); }
.dm__io span { font-size: 12px; color: var(--mute); line-height: 1.4; }
.dm__io::after { content: "→"; position: absolute; right: -31px; top: 50%; transform: translateY(-50%); color: var(--cyan); font: 500 16px/1 var(--f-mono); }
.dm__io--out::after { content: "←"; }

.dm__pipe { position: relative; display: grid; gap: 8px; counter-reset: none; padding: 16px; border-radius: var(--r-lg); border: 1px solid rgba(156, 140, 255, 0.4); background: linear-gradient(180deg, rgba(120, 100, 255, 0.12), rgba(4, 10, 28, 0.4)); }
.dm__pipe li { position: relative; display: grid; grid-template-columns: 26px 1fr; column-gap: 12px; align-items: baseline; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(8, 18, 54, 0.8); transition: border-color .3s, background .3s, box-shadow .3s; }
.dm__pipe li + li::before { content: ""; position: absolute; left: 24px; top: -9px; width: 2px; height: 9px; background: var(--line-strong); }
.dm__pipe li b { font-size: 14px; color: var(--ice); font-weight: 600; }
.dm__pipe li small { grid-column: 2; font-size: 12px; color: var(--mute); line-height: 1.4; }
.dm__n { grid-row: span 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line-strong); color: var(--cyan); font-size: 12px; }
.dm__pipe li.dm__llm { border-color: rgba(156, 140, 255, 0.7); background: linear-gradient(110deg, rgba(120, 100, 255, 0.45), rgba(47, 107, 255, 0.2)); }
.dm__pipe li.dm__llm b { font: 600 16px/1.1 var(--f-display); }
.dm__pipe li.is-on { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan), 0 10px 30px -10px rgba(60, 211, 255, 0.7); }
.dm__pipe li.is-on .dm__n { background: var(--cyan); color: #04122e; border-color: var(--cyan); }
.dm__robots { grid-column: 2; display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.dm__robots i { font-size: 11px; padding: 3px 8px; border-radius: 99px; border: 1px solid rgba(156, 140, 255, 0.45); background: rgba(120, 100, 255, 0.12); color: #d8d1ff; }

.dm__col--ctx { justify-content: center; border: 0; background: none; padding: 0; gap: 0; }
.dm__card { padding: 16px; border-radius: var(--r-lg); border: 1px solid var(--line-strong); background: rgba(16, 32, 78, 0.5); }
.dm__card ul { display: grid; gap: 6px; }
.dm__card li { position: relative; padding-left: 14px; font-size: 13.5px; color: var(--text); }
.dm__card li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 2px; background: var(--cyan); }
.dm__card--kb { border-color: rgba(60, 211, 255, 0.45); }
.dm__rel { align-self: center; position: relative; padding: 18px 0 18px 22px; font-size: 11px; color: var(--mute); }
.dm__rel::before { content: ""; position: absolute; left: 10px; top: 0; bottom: 0; width: 2px; background: repeating-linear-gradient(180deg, var(--cyan) 0 4px, transparent 4px 8px); }
.dm__vec { margin-top: 14px; padding: 8px 10px; border-radius: 8px; border: 1px dashed rgba(60, 211, 255, 0.45); text-align: center; font-size: 11px; color: var(--cyan); }
.dm__col--admin { gap: 8px; }
.dm__adm { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(16, 32, 78, 0.45); }
.dm__adm b { font-size: 13px; color: var(--ice); font-weight: 600; }
.dm__adm small { font-size: 11.5px; color: var(--mute); line-height: 1.4; }

.dm__deploy { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 20px; padding: 18px 22px; border-radius: var(--r-lg); border: 1px solid var(--line); background: rgba(4, 10, 28, 0.55); }
.dm__deploy .tag { margin: 0 6px 0 0; }
.dm__dbox { padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line-strong); background: rgba(16, 32, 78, 0.6); font-size: 13.5px; color: var(--ice); }
.dm__dbox--hl { border-color: rgba(60, 211, 255, 0.55); background: linear-gradient(110deg, rgba(47, 107, 255, 0.45), rgba(47, 107, 255, 0.15)); }
.dm__op { font: 500 16px/1 var(--f-mono); color: var(--cyan); }
.dm__deploy p { flex: 1 1 320px; margin-left: 8px; font-size: 13.5px; color: var(--mute); }

/* ---------- 4 · Business layers ---------- */
.ly { display: grid; grid-template-columns: 1fr 230px; gap: 14px; }
.ly__main, .ly__side { display: grid; gap: 14px; align-content: start; }
.ly__side { grid-template-rows: auto 1fr; }
.ly__band { position: relative; padding: 18px 18px 16px; border-radius: var(--r-lg); border: 1px solid var(--line); background: rgba(4, 10, 28, 0.55); }
.ly__tag { display: inline-block; margin-bottom: 12px; padding: 3px 9px; border-radius: 6px; font-size: 10.5px; letter-spacing: .12em; color: var(--cyan); border: 1px solid rgba(60, 211, 255, 0.35); background: rgba(60, 211, 255, 0.06); }
html.is-local .ly__tag, html.is-local .ta__lbl { font-family: var(--f-body); letter-spacing: .04em; font-size: 12px; }
.ly__band--app { border-color: rgba(60, 211, 255, 0.4); background: linear-gradient(180deg, rgba(47, 107, 255, 0.18), rgba(4, 10, 28, 0.4)); }
.ly__band--vcm { border-color: rgba(60, 211, 255, 0.55); background: linear-gradient(110deg, rgba(47, 107, 255, 0.4), rgba(47, 107, 255, 0.1)); }
.ly__groups { display: grid; grid-template-columns: 1.15fr 1.15fr .8fr; gap: 12px; }
.ly__groups > div { padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(4, 10, 28, 0.45); }
.ly__groups h5 { margin-bottom: 10px; font-size: 13.5px; color: var(--ice); }
.ly__chips, .ta__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ly__chips i, .ta__chips i { font-size: 12px; line-height: 1.3; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--line-strong); background: rgba(16, 32, 78, 0.6); color: var(--text); }
.ly__band--vcm .ly__chips i { background: rgba(4, 10, 28, 0.5); color: var(--ice); }
.ly__base { display: grid; grid-template-columns: 1fr 1.25fr; gap: 14px; }
.ly__band--ai { border-color: rgba(156, 140, 255, 0.45); background: linear-gradient(180deg, rgba(120, 100, 255, 0.14), rgba(4, 10, 28, 0.4)); }
.ly__band--ai .ly__tag { color: #c8beff; border-color: rgba(156, 140, 255, 0.45); background: rgba(120, 100, 255, 0.08); }
.ly__llm { margin-top: 12px; padding: 10px; border-radius: 10px; text-align: center; font-size: 13px; font-weight: 600; color: #fff; background: linear-gradient(110deg, rgba(120, 100, 255, 0.55), rgba(47, 107, 255, 0.35)); border: 1px solid rgba(156, 140, 255, 0.6); }
.ly__stack { display: grid; gap: 8px; }
.ly__stack i { font-style: normal; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: rgba(16, 32, 78, 0.6); font-size: 13px; color: var(--text); text-align: center; }

/* ---------- 5 · Technical architecture ---------- */
.ta { display: grid; grid-template-columns: 1fr 170px; gap: 14px; }
.ta__main { display: grid; gap: 12px; }
.ta__layer { display: grid; grid-template-columns: 116px 1fr; gap: 14px; align-items: stretch; padding: 14px; border-radius: var(--r-lg); border: 1px solid var(--line); background: rgba(4, 10, 28, 0.55); }
.ta__lbl { display: grid; place-items: center; padding: 8px; border-radius: 10px; background: rgba(60, 211, 255, 0.07); border: 1px solid rgba(60, 211, 255, 0.3); color: var(--cyan); font: 500 11.5px/1.3 var(--f-mono); letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.ta__row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; }
.ta__sys { display: grid; place-items: center; padding: 14px; border-radius: 10px; border: 1px solid var(--line-strong); background: rgba(16, 32, 78, 0.6); font-size: 14px; font-weight: 600; color: var(--ice); text-align: center; }
.ta__grp, .ta__eng { padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(16, 32, 78, 0.35); }
.ta__grp h5, .ta__eng h5, .ta__vcm h5 { margin-bottom: 10px; font-size: 13.5px; color: var(--ice); }
.ta__layer--voice { border-color: rgba(60, 211, 255, 0.4); background: linear-gradient(180deg, rgba(47, 107, 255, 0.16), rgba(4, 10, 28, 0.4)); }
.ta__voice { display: grid; grid-template-columns: 1.35fr 1fr; gap: 12px; }
.ta__vcm { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; padding: 12px; border-radius: 12px; border: 1px solid rgba(60, 211, 255, 0.5); background: linear-gradient(110deg, rgba(47, 107, 255, 0.35), rgba(47, 107, 255, 0.08)); }
.ta__vcm h5 { grid-column: 1 / -1; margin-bottom: 2px; }
.ta__svc { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: rgba(4, 10, 28, 0.55); }
.ta__svc b { display: block; font-size: 12.5px; color: var(--ice); font-weight: 600; }
.ta__svc--wide { grid-column: 1 / -1; }
.ta__svc--wide b { margin-bottom: 8px; }
.ta__svc--cfg { grid-column: 1 / -1; text-align: center; }
.ta__svc .ta__chips i { font-size: 11px; padding: 3px 8px; }
.ta__engines { display: grid; gap: 8px; }
.ta__eng--llm { border-color: rgba(156, 140, 255, 0.5); background: linear-gradient(110deg, rgba(120, 100, 255, 0.28), rgba(47, 107, 255, 0.06)); }
.ta__db { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(16, 32, 78, 0.35); }
.ta__db b { font-size: 13px; color: var(--ice); font-weight: 600; line-height: 1.3; }
.ta__cyl { flex: none; position: relative; display: grid; gap: 2px; width: 26px; }
.ta__cyl i { height: 8px; border-radius: 50% / 4px; background: linear-gradient(180deg, var(--cyan), var(--blue)); opacity: .85; }
.ta__cyl i:nth-child(2) { opacity: .65; }
.ta__cyl i:nth-child(3) { opacity: .45; }
.ta__cyl--file i { border-radius: 3px; }
.ta__side { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--r-lg); border: 1px solid var(--line); background: rgba(4, 10, 28, 0.55); }
.ta__side h5 { font-size: 13.5px; color: var(--ice); text-align: center; margin-bottom: 4px; }
.ta__side span { flex: 1; display: grid; place-items: center; padding: 12px 8px; border-radius: 10px; border: 1px solid var(--line-strong); background: rgba(16, 32, 78, 0.6); font-size: 13px; color: var(--text); text-align: center; }

/* ---------- Live call demo ---------- */
.cbd .seg { margin: 0 0 18px; flex-wrap: wrap; }
.cbd__panel { display: grid; grid-template-columns: 1fr 320px; gap: 18px; }
.cbd__talk { display: flex; flex-direction: column; min-height: 520px; border-radius: var(--r-lg); border: 1px solid var(--line-strong); background: #050b22; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(47, 107, 255, 0.45); }
.cbd__timer { margin-left: auto; color: var(--ok); }
.cbd__body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 22px; }
.cbd__body .cb-turn { animation: lineIn .4s var(--ease) both; }
.cbd__body .cb-turn--bot { align-self: flex-end; }
.cbd__body .cb-turn--user { align-self: flex-start; }
.cbd__sys { align-self: center; padding: 5px 12px; border-radius: 99px; border: 1px solid var(--line); font: 11.5px/1.4 var(--f-mono); color: var(--mute); animation: lineIn .4s var(--ease) both; text-align: center; }
.cbd__sys.is-act { border-color: rgba(92, 242, 176, 0.45); color: var(--ok); }
.cbd__sys.is-warn { border-color: rgba(255, 198, 92, 0.5); color: var(--warn); }
.cbd__body .typing { padding: 10px 0 0; }
.cbd__body .typing.is-bot { align-self: flex-end; }
.cbd__sig { display: grid; gap: 12px; align-content: start; padding: 20px; border-radius: var(--r-lg); border: 1px solid var(--line); background: rgba(4, 10, 28, 0.6); }
.cbd__sig h4 { font-size: 10.5px; letter-spacing: .14em; color: var(--cyan); }
.cbd__k { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(16, 32, 78, 0.4); }
.cbd__k small { font-size: 11px; color: var(--mute); }
.cbd__k > b { font-size: 14px; color: var(--ice); font-weight: 500; word-break: break-word; transition: color .3s; }
.cbd__k > b.is-ok { color: var(--ok); }
.cbd__conf { display: block; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.cbd__conf i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--blue), var(--cyan)); transition: width .6s var(--ease); }
.cbd__lat { display: grid; gap: 6px; }
.cbd__lat div { display: grid; grid-template-columns: 38px 1fr 54px; align-items: center; gap: 8px; font: 11px/1 var(--f-mono); color: var(--mute); }
.cbd__lat div i { height: 6px; width: var(--v); border-radius: 3px; background: linear-gradient(90deg, var(--blue), var(--cyan)); transform-origin: left; animation: biGrowXcb .6s var(--ease) both; }
.cbd__lat div:nth-child(2) i { background: linear-gradient(90deg, #7a64ff, #b8acff); }
.cbd__lat div:nth-child(3) i { background: linear-gradient(90deg, #2bbf85, var(--ok)); }
.cbd__lat div b { text-align: right; color: var(--ice); font-weight: 500; }
.cbd__lat div.is-sum { padding-top: 6px; border-top: 1px solid var(--line); }
.cbd__lat div.is-sum b { color: var(--ok); }
@keyframes biGrowXcb { from { transform: scaleX(0); } to { transform: none; } }
.cbd__acts { display: grid; gap: 5px; font-size: 11.5px; color: var(--text); min-height: 1.4em; }
.cbd__acts li { padding-left: 14px; position: relative; animation: lineIn .35s var(--ease) both; }
.cbd__acts li::before { content: "›"; position: absolute; left: 0; color: var(--cyan); }

/* ---------- Capabilities ---------- */
.cb-feats { margin-top: 20px; }

/* ---------- Business lines ---------- */
.cb-lines3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cb-lines3 article { display: flex; flex-direction: column; padding: 28px 26px; border-radius: var(--r-lg); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(16, 32, 78, 0.55), rgba(4, 10, 28, 0.25)); transition: border-color .3s, transform .3s var(--ease); }
.cb-lines3 article:hover { border-color: rgba(60, 211, 255, 0.45); transform: translateY(-4px); }
.cb-lines3 h3 { margin: 12px 0 14px; font-size: 20px; }
.cb-lines3 ul { flex: 1; }
.cb-lines3 li { position: relative; padding: 9px 0 9px 18px; border-top: 1px solid var(--line); font-size: 14px; color: var(--text); }
.cb-lines3 li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 7px; height: 7px; border-radius: 2px; background: var(--cyan); }
.cb-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.cb-kpis div { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: rgba(47, 107, 255, 0.12); border: 1px solid var(--line-strong); }
.cb-kpis b { font: 500 22px/1 var(--f-display); color: var(--ice); letter-spacing: -0.02em; }
.cb-kpis span { font-size: 12px; color: var(--mute); line-height: 1.35; }

/* ---------- Compare ---------- */
.cb-cmp { border-radius: var(--r-lg); border: 1px solid var(--line); overflow: hidden; background: rgba(4, 10, 28, 0.5); }
.cb-cmp__row { display: grid; grid-template-columns: 220px 1fr 1.3fr; }
.cb-cmp__row + .cb-cmp__row { border-top: 1px solid var(--line); }
.cb-cmp__row > * { padding: 18px 24px; font-size: 14.5px; }
.cb-cmp__row > b { color: var(--ice); font-weight: 600; }
.cb-cmp__row > span { color: var(--mute); }
.cb-cmp__row > .is-hl { position: relative; color: var(--ice); background: rgba(47, 107, 255, 0.1); border-left: 1px solid rgba(60, 211, 255, 0.3); padding-left: 48px; }
.cb-cmp__row > .is-hl::before { content: ""; position: absolute; left: 22px; top: 1.45em; width: 12px; height: 7px; border-left: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan); transform: rotate(-45deg) translateY(-3px); }
.cb-cmp__row--head > * { padding-block: 16px; font-size: 13px; }
.cb-cmp__row--head > .is-hl { font: 600 17px/1.2 var(--f-display); letter-spacing: -0.01em; background: linear-gradient(110deg, rgba(47, 107, 255, 0.5), rgba(47, 107, 255, 0.18)); padding-left: 24px; }
html.is-local .cb-cmp__row--head > .is-hl { font-family: var(--f-local), sans-serif; }
.cb-cmp__row--head > .is-hl::before { display: none; }

/* ---------- CTA ---------- */
.cb-cta__card { display: grid; gap: 14px; padding: 30px; border-radius: var(--r-lg); background: rgba(4, 10, 28, 0.88); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6); }
.cb-cta__card h3 { font-size: 18px; }
.cb-cta__card ol { display: grid; gap: 10px; margin: 4px 0 10px; counter-reset: s; }
.cb-cta__card li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--text); counter-increment: s; }
.cb-cta__card li::before { content: counter(s); flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: rgba(47, 107, 255, 0.25); border: 1px solid var(--line-strong); color: var(--cyan); font: 500 12px/1 var(--f-mono); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .pa { grid-template-columns: 64px 52px 1fr 52px 1fr 52px 1.2fr 64px 1.1fr; }
  .dm { grid-template-columns: 150px minmax(0, 1.3fr) minmax(0, 1fr); }
  .dm__col--admin { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: stretch; }
  .dm__col--admin .dm__h { flex-basis: 100%; margin-bottom: 0; }
  .dm__col--admin .dm__adm { flex: 1 1 160px; }
}
@media (max-width: 1024px) {
  .cb-hero__inner { grid-template-columns: 1fr; min-height: 0; gap: 48px; }
  .cb-hero__visual { max-width: 600px; width: 100%; justify-self: center; }
  .cb-call { transform: none; }
  .cb-float--b { left: 12px; }
  .cb-float--a { right: 8px; }
  .pa {
    grid-template-columns: 1fr;
    grid-template-areas: "hub" "v1" "vcm" "l4" "dm" "v2" "asr" "l3" "paas" "l2" "vos" "l1" "ph";
  }
  .pa__link--h { min-height: 46px; padding: 0 0 0 calc(50% + 12px); flex-direction: row; justify-content: flex-start; text-align: left; }
  .pa__link--h::before { left: 50%; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--cyan) 0 4px, transparent 4px 8px); background-size: 2px 16px; animation-name: flowDown; }
  .pa__link--duo { flex-direction: row; justify-content: center; gap: 24px; padding: 10px 0; }
  .pa__link--duo em { padding: 0; }
  .pa__link--duo em::after { display: none; }
  .pa__link--duo em { font-size: 11px; }
  .pa__link--duo em:first-child { color: #c8beff; }
  .pa__link--duo em + em { color: var(--cyan); }
  .pa__phone { flex-direction: row; padding: 12px; }
  .pa__detail { grid-template-columns: 1fr; gap: 10px; }
  .dm { grid-template-columns: 1fr 1fr; }
  .dm__pipe { grid-column: 1 / -1; grid-row: 2; }
  .dm__col--vcm { grid-row: 1; grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .dm__col--vcm .dm__h { flex-basis: 100%; margin-bottom: 0; }
  .dm__col--vcm .dm__io { flex: 1 1 200px; }
  .dm__io::after { display: none; }
  .dm__col--ctx { grid-column: 1 / -1; }
  .ly, .ta { grid-template-columns: 1fr; }
  .ly__side { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .ta__side { flex-direction: row; flex-wrap: wrap; }
  .ta__side h5 { flex-basis: 100%; }
  .ta__side span { flex: 1 1 120px; }
  .cbd__panel { grid-template-columns: 1fr; }
  .cbd__sig { grid-template-columns: 1fr 1fr; }
  .cbd__sig h4 { grid-column: 1 / -1; }
  .cb-lines3 { grid-template-columns: 1fr; }
  .cb-cmp__row { grid-template-columns: 170px 1fr 1.2fr; }
}
@media (max-width: 720px) {
  .cb-mark { font-size: 20px; }
  .cb-float--a { position: relative; right: 0; margin: 0 0 -16px auto; width: fit-content; }
  .cb-float--b { position: relative; left: 0; margin-top: -16px; max-width: none; animation: none; }
  .cb-hero__visual { padding: 0; }
  .cb-sig { grid-template-columns: 1fr 1fr; }
  .cb-sig div:first-child { grid-column: 1 / -1; }
  .cb-sig div:nth-child(2) { border-left: 0; border-top: 1px solid var(--line); }
  .cb-sig div:nth-child(3) { border-top: 1px solid var(--line); }
  .seq__foot { flex-direction: column; align-items: stretch; }
  .pa__detail .ticks { grid-template-columns: 1fr; }
  .dm { grid-template-columns: 1fr; }
  .ly__groups, .ly__base, .ly__side { grid-template-columns: 1fr; }
  .ta__layer { grid-template-columns: 1fr; }
  .ta__row { grid-auto-flow: row; }
  .ta__voice { grid-template-columns: 1fr; }
  .ta__row:has(.ta__db) { grid-template-columns: 1fr 1fr; }
  .cbd__talk { min-height: 0; }
  .cbd__sig { grid-template-columns: 1fr; }
  .cbd__body { padding: 14px; }
  .cb-turn { max-width: 100%; }
  .cb-cmp__row { grid-template-columns: 1fr; }
  .cb-cmp__row > * { padding: 12px 18px; }
  .cb-cmp__row > b { padding-bottom: 0; }
  .cb-cmp__row > span:not(.is-hl) { padding-top: 6px; }
  .cb-cmp__row > span:not(.is-hl)::before { content: "— "; }
  .cb-cmp__row > .is-hl { border-left: 0; }
  .cb-cmp__row--head { display: none; }
}