/* AI assistant page (2026-10-12). Loaded after styles.css + home.css. */

.asst section { padding: 0; }
.asst .wrap { padding: clamp(80px, 9vw, 120px) var(--pad); }

/* ---------------- Hero ---------------- */
.a-hero { position: relative; overflow: hidden; background: radial-gradient(900px 500px at 85% 10%, rgba(139,123,232,.18), transparent 60%), radial-gradient(900px 600px at 10% 0, #e7eefc, rgba(231,238,252,0) 65%), #fff; }
.a-hero-in { max-width: 1180px; margin: 0 auto; padding: clamp(48px, 6vw, 88px) var(--pad) clamp(56px, 6vw, 88px); display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.a-hero h1 { font-size: clamp(40px, 5.4vw, 68px); line-height: 1.02; letter-spacing: -.045em; margin: 0; }
.a-hero h1 em { font-style: italic; background: linear-gradient(90deg, #2f63b5, #1f9e86 50%, #7a5fd6); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.a-lede { margin: 20px 0 0; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; color: var(--muted); max-width: 52ch; }
.a-ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.a-ctas .btn { padding: 12px 20px; font-size: 15px; }
.a-mini { list-style: none; margin: 36px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.a-mini b { display: block; font-size: 18px; letter-spacing: -.02em; color: var(--ink); }
.a-mini span { font-size: 13px; line-height: 1.4; color: var(--muted); }

.a-demo { display: grid; gap: 14px; }
.a-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: #eef1f6; width: fit-content; justify-self: center; }
.a-tabs button { border: 0; background: none; padding: 8px 14px; border-radius: 9px; font: 600 13.5px var(--font); color: var(--muted); }
.a-tabs button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(16,19,26,.08), 0 4px 12px -6px rgba(16,19,26,.2); }
.a-stage { position: relative; border-radius: 22px; padding: 34px 34px 0; background: url(img/bg/soft-sky.jpg) center / 130% auto; animation: skydrift 18s ease-in-out infinite alternate; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 40px 80px -40px rgba(29,60,130,.6); overflow: hidden; }
.a-phone { max-width: 400px; margin: 0 auto; height: 470px; display: flex; flex-direction: column; border-radius: 22px 22px 0 0; background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); border: 1px solid rgba(255,255,255,.8); border-bottom: 0; box-shadow: 0 -16px 50px rgba(20,40,100,.2); overflow: hidden; }
.a-chat-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid rgba(16,19,26,.06); background: rgba(255,255,255,.7); }
.a-av { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--sky); color: #fff; font-weight: 700; }
.a-chat-head b { display: block; font-size: 14.5px; }
.a-chat-head small { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.a-chat-head small i { width: 7px; height: 7px; border-radius: 50%; background: #3ccf7a; }
.a-time { margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.a-chat { flex: 1; overflow: hidden; padding: 16px; display: flex; flex-direction: column; gap: 9px; justify-content: flex-end; }
.a-chat .m { display: flex; animation: krise .3s ease both; }
.a-chat .m span { max-width: 84%; padding: 9px 13px; font-size: 14px; line-height: 1.45; border-radius: 16px; }
.a-chat .m.v { justify-content: flex-end; }
.a-chat .m.v span { background: var(--sky); color: #fff; border-bottom-right-radius: 5px; }
.a-chat .m.a span { background: #fff; color: var(--ink); border: 1px solid rgba(16,19,26,.07); border-bottom-left-radius: 5px; box-shadow: 0 4px 12px -8px rgba(16,19,26,.3); }
.a-chat .m.t { justify-content: center; }
.a-chat .m.t span { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; font-size: 12px; font-weight: 600; color: #2f6b34; background: #e8f2e3; border-radius: 8px; }
.a-chat .m.t i.ok { width: 7px; height: 7px; border-radius: 50%; background: #3ccf7a; animation: kpulse 1.4s infinite; }
.a-chat .typing span { display: inline-flex; gap: 4px; padding: 12px 14px; }
.a-chat .typing i { width: 6px; height: 6px; border-radius: 50%; background: #b7bfcf; animation: kbounce 1s infinite; }
.a-chat .typing i:nth-child(2) { animation-delay: .15s; } .a-chat .typing i:nth-child(3) { animation-delay: .3s; }
.a-notify { position: absolute; right: 18px; top: 18px; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 14px; background: rgba(16,19,26,.86); color: #fff; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 16px 40px -14px rgba(10,15,40,.7); transform: translateY(-12px); opacity: 0; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .35s; max-width: 280px; }
.a-notify.in { transform: none; opacity: 1; }
.a-notify .kovi-wrap { width: 30px; height: 30px; flex: none; }
.a-notify b { display: block; font-size: 13px; }
.a-notify small { font-size: 12px; color: #c3c8d4; }
.a-demo-note { margin: 0; text-align: center; font-size: 12.5px; color: var(--muted); }

/* ---------------- Proof strip ---------------- */
.a-proof { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 28px; padding: 22px var(--pad); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fafbfd; font-size: 15px; }
.a-proof span { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.a-proof a { font-weight: 600; color: var(--ink2); }
.a-proof a:hover { color: var(--sky); }

/* ---------------- What it does ---------------- */
.a-caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.a-caps article { background: #fff; padding: 30px 28px; display: grid; gap: 8px; align-content: start; transition: background .2s; }
.a-caps article:hover { background: #fafbfd; }
.a-caps h3 { font-size: 19px; letter-spacing: -.015em; margin-top: 8px; }
.a-caps p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
.a-ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-weight: 700; font-size: 17px; color: #fff; }
.a-ico.i1 { background: linear-gradient(135deg, #5aa9e6, #2f63b5); } .a-ico.i2 { background: linear-gradient(135deg, #8b7be8, #5a3fc0); } .a-ico.i3 { background: linear-gradient(135deg, #4cc38a, #2f6b34); }
.a-ico.i4 { background: linear-gradient(135deg, #f0a92c, #e8613c); } .a-ico.i5 { background: linear-gradient(135deg, #e48bd6, #a2339e); } .a-ico.i6 { background: linear-gradient(135deg, #2f63b5, #7a5fd6); }

/* ---------------- Before / after ---------------- */
.a-vs { background: var(--soft); }
.vs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 980px; margin: 0 auto; }
.vs-card { border-radius: 18px; padding: 30px; display: grid; gap: 14px; align-content: start; }
.vs-card.old { background: #fff; border: 1px solid var(--line); }
.vs-card.new { position: relative; overflow: hidden; color: #dfe5f2; background: #10131a; box-shadow: 0 30px 60px -36px rgba(29,60,130,.7); }
.vs-card.new::before { content: ""; position: absolute; inset: 0; background: url(img/bg/dusk.jpg) center / cover; opacity: .35; }
.vs-card > * { position: relative; }
.vs-label { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.vs-card.new .vs-label { color: #b9c8ff; }
.vs-card ol { margin: 0; padding-left: 20px; display: grid; gap: 10px; font-size: 16px; line-height: 1.5; }
.vs-card.old ol { color: var(--ink2); }
.vs-out { margin: 6px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-weight: 600; font-size: 16px; }
.vs-card.old .vs-out { color: #b8401f; }
.vs-card.new .vs-out { border-color: rgba(255,255,255,.15); color: #8fe3b0; }

/* ---------------- Knows your business ---------------- */
.a-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.a-knows h2 { margin: 0 0 14px; }
.a-steps { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 0; counter-reset: s; }
.a-steps li { counter-increment: s; display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.a-steps li::before { content: counter(s); grid-row: span 2; width: 28px; height: 28px; border-radius: 8px; background: #e7eefc; color: var(--sky); font-weight: 700; font-size: 13px; display: grid; place-items: center; }
.a-steps b { font-size: 16px; }
.a-steps span { font-size: 14.5px; color: var(--muted); }
.a-rules { border-radius: 22px; padding: 40px; background: url(img/bg/soft-peri.jpg) center / 130% auto; animation: skydrift 20s ease-in-out infinite alternate; box-shadow: 0 40px 80px -44px rgba(70,50,160,.6); }
.rules-card { border-radius: 16px; background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.85); padding: 20px; box-shadow: 0 20px 50px -24px rgba(40,30,110,.45); }
.rules-head { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid rgba(16,19,26,.07); }
.rules-head .kovi-wrap { width: 30px; height: 30px; }
.rules-head b { font-size: 15px; }
.rules-head small { margin-left: auto; font-size: 12px; color: var(--muted); }
.rules-card ul { list-style: none; margin: 0; padding: 8px 0; display: grid; }
.rules-card li { padding: 11px 0 11px 26px; position: relative; font-size: 14.5px; line-height: 1.45; color: var(--ink2); border-bottom: 1px dashed rgba(16,19,26,.08); }
.rules-card li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 14px; height: 14px; border-radius: 5px; background: #e7eefc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%231d4c9c' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat; }
.rules-add { margin-top: 12px; padding: 11px 12px; border-radius: 10px; border: 1px dashed var(--line2); font-size: 13.5px; color: var(--muted); }

/* ---------------- Control ---------------- */
.a-control { background: #fff; border-top: 1px solid var(--line); }
.ctl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 40px; max-width: 1080px; margin: 0 auto; }
.ctl-grid > div { padding-top: 18px; border-top: 2px solid var(--ink); }
.ctl-grid b { display: block; font-size: 17px; letter-spacing: -.01em; margin-bottom: 6px; }
.ctl-grid p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
.ctl-grid a { color: var(--sky); text-decoration: underline; text-underline-offset: 2px; }

/* ---------------- Industries ---------------- */
.a-ind { background: var(--soft); }
.ind-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ind-grid > div { padding: 22px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.ind-grid b { display: block; font-size: 16px; margin-bottom: 6px; }
.ind-grid p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); }

/* FAQ spacing on this page */
.asst .faq .wrap { padding-top: clamp(80px, 9vw, 120px); }

/* ---------------- Responsive ---------------- */
@media (max-width: 960px) {
  .a-hero-in, .a-split, .vs-grid { grid-template-columns: 1fr; }
  .a-caps, .ctl-grid, .ind-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .a-caps, .ctl-grid, .ind-grid { grid-template-columns: 1fr; }
  .a-mini { grid-template-columns: 1fr; gap: 10px; }
  .a-stage { padding: 22px 14px 0; }
  .a-phone { height: 430px; }
  .a-notify { right: 10px; top: 10px; max-width: 230px; }
  .a-rules { padding: 22px; }
  .a-tabs button { padding: 8px 10px; font-size: 13px; }
  .a-hero h1 br, .a-what h2 br, .a-knows h2 br { display: none; }
}
@media (prefers-reduced-motion: reduce) { .a-stage, .a-rules { animation: none; } }
.asst section.finale { padding: clamp(96px, 12vw, 160px) var(--pad) clamp(80px, 9vw, 120px); }
.a-stage { padding-top: 78px; }
.a-notify { left: 50%; right: auto; top: 16px; transform: translate(-50%, -12px); }
.a-notify.in { transform: translate(-50%, 0); }
@media (max-width: 600px) { .a-stage { padding-top: 72px; } .a-notify { right: auto; top: 12px; max-width: 280px; width: max-content; } }

/* ---------------- Human hero (2026-10-12) ---------------- */
.a-hero2 { padding: 16px clamp(12px, 2vw, 28px) 0 !important; background: #fff; }
.h2-card { position: relative; max-width: 1400px; margin: 0 auto; min-height: clamp(560px, 72vh, 720px); border-radius: 28px; overflow: hidden; display: flex; align-items: center; isolation: isolate; }
.h2-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; z-index: -2; animation: kenburns 24s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.09) translate(-1%, -1%); } }
.h2-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(22,16,48,.86) 0%, rgba(22,16,48,.66) 38%, rgba(22,16,48,.12) 70%, transparent 100%), linear-gradient(0deg, rgba(22,16,48,.35), transparent 40%); }
.h2-copy { max-width: 620px; padding: clamp(36px, 6vw, 88px); color: #e8e4f7; }
.h2-kicker { margin: 0 0 16px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #cfc4ff; }
.h2-copy h1 { margin: 0; color: #fff; font-size: clamp(38px, 5vw, 64px); line-height: 1.04; letter-spacing: -.04em; }
.h2-copy h1 em { display: block; font-style: italic; background: linear-gradient(90deg, #c7d8ff, #a8ecd6 50%, #d6c9ff); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.h2-lede { margin: 20px 0 0; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; color: #ddd8ee; max-width: 46ch; }
.h2-ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.h2-ctas .btn { padding: 13px 22px; font-size: 15px; }
.h2-trust { margin: 18px 0 0; font-size: 14px; color: #c9c2e3; }
.h2-trust b { color: #fff; }
.h2-feed { position: absolute; right: clamp(16px, 3vw, 44px); bottom: clamp(16px, 3vw, 44px); width: min(340px, 42%); border-radius: 18px; padding: 4px; background: linear-gradient(135deg, rgba(201,216,255,.9), rgba(227,200,255,.9)); box-shadow: 0 30px 60px -20px rgba(10,6,30,.7); }
.h2-feed-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px 14px 0 0; background: #17132c; color: #fff; font-size: 14.5px; }
.h2-feed-head .kovi-wrap { width: 26px; height: 26px; flex: none; }
.h2-feed ul { list-style: none; margin: 0; padding: 6px 14px 12px; border-radius: 0 0 14px 14px; background: #17132c; display: grid; }
.h2-feed li { display: flex; align-items: center; gap: 12px; padding: 10px 0; font-size: 14.5px; color: #8e88a8; transition: color .4s; }
.h2-feed li + li { border-top: 1px solid rgba(255,255,255,.06); }
.h2-feed li i { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #4a4466; transition: background .35s, border-color .35s, transform .35s; }
.h2-feed li.done { color: #fff; }
.h2-feed li.done i { border-color: #5fd38f; background: #5fd38f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%2317132c' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; transform: scale(1.08); }

/* ---------------- Power story ---------------- */
.asst em.grad, .home em.grad { font-style: italic; background: linear-gradient(90deg, #2f63b5, #1f9e86 50%, #7a5fd6); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.a-power { background: #fff; }
.chapter { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 5vw, 72px); align-items: center; padding: clamp(40px, 5vw, 64px) 0; border-top: 1px solid var(--line); }
.chapter:first-of-type { border-top: 0; }
.chapter.flip { grid-template-columns: 1.15fr .85fr; }
.chapter.flip .ch-copy { order: 2; }
.ch-n { display: inline-block; font-size: 13px; font-weight: 700; color: var(--sky2); margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.ch-copy h3 { font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -.03em; line-height: 1.1; margin: 0 0 14px; }
.ch-copy p { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--muted); }
.ch-points { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.ch-points li { position: relative; padding-left: 28px; font-size: 15px; color: var(--ink2); }
.ch-points li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 6px; background: #e7eefc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%231d4c9c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.ch-asks { display: grid; gap: 8px; margin-top: 22px; justify-items: start; }
.ch-asks span { padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: #f3f0fd; color: #3a2f80; font-size: 14.5px; font-weight: 500; opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s; }
.ch-asks.in span { opacity: 1; transform: none; }
.ch-asks.in span:nth-child(2) { transition-delay: .35s; } .ch-asks.in span:nth-child(3) { transition-delay: .7s; }
.ch-shot { position: relative; margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: 0 40px 80px -44px rgba(30,30,90,.55); }
.ch-shot img { display: block; width: 100%; }
.ch-shot figcaption { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: rgba(16,19,26,.8); color: #fff; font-size: 12px; font-weight: 600; backdrop-filter: blur(6px); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #5fd38f; animation: kpulse 1.6s infinite; }
.ch-gains { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ch-gains div { padding: 22px; border-radius: 16px; background: var(--soft); border: 1px solid var(--line); }
.ch-gains b { display: block; font-size: 18px; letter-spacing: -.015em; margin-bottom: 6px; }
.ch-gains span { font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.chapter .a-demo { margin: 0; }

@media (max-width: 960px) {
  .chapter, .chapter.flip { grid-template-columns: 1fr; }
  .chapter.flip .ch-copy { order: 0; }
  .h2-card { flex-direction: column; align-items: stretch; min-height: 0; }
  .h2-card::before { background: linear-gradient(180deg, rgba(22,16,48,.25) 0%, rgba(22,16,48,.85) 45%, rgba(22,16,48,.95) 100%); }
  .h2-copy { padding: 220px 24px 24px; }
  .h2-feed { position: relative; right: auto; bottom: auto; width: auto; margin: 0 16px 20px; }
}
@media (max-width: 560px) { .ch-gains { grid-template-columns: 1fr; } .h2-copy { padding-top: 180px; } }
@media (prefers-reduced-motion: reduce) { .h2-photo { animation: none; } .ch-asks span { opacity: 1; transform: none; } }
@media (max-width: 960px) { .h2-photo { object-position: 38% 22%; } .h2-copy { padding-top: 300px; } .h2-card::before { background: linear-gradient(180deg, rgba(22,16,48,0) 0%, rgba(22,16,48,.2) 25%, rgba(22,16,48,.88) 52%, rgba(22,16,48,.96) 100%); } }
@media (max-width: 560px) { .h2-copy { padding-top: 260px; } }

/* ---------------- Visual pass: fewer words ---------------- */
/* phones before/after */
.a-vs2 { background: var(--soft); }
.vs2 { display: grid; grid-template-columns: 1fr auto 1fr; gap: 28px; align-items: center; max-width: 920px; margin: 0 auto; }
.vs2-side { margin: 0; display: grid; gap: 18px; justify-items: center; text-align: center; }
.vs2-side figcaption b { display: block; font-size: 18px; letter-spacing: -.01em; }
.vs2-side figcaption span { font-size: 15px; color: var(--muted); }
.vs2-side.new figcaption span { color: #2f6b34; font-weight: 600; }
.vs2-side.old figcaption span { color: #b8401f; font-weight: 600; }
.vs2-vs { font-size: 13px; font-weight: 700; color: var(--muted); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); }
.ph { width: 260px; height: 380px; border-radius: 34px; border: 8px solid #10131a; background: #fff; padding: 18px 14px; display: flex; flex-direction: column; box-shadow: 0 30px 60px -30px rgba(16,19,26,.5); position: relative; overflow: hidden; }
.old .ph { background: linear-gradient(180deg, #2a2d36, #15171d); color: #fff; justify-content: center; align-items: center; gap: 14px; filter: saturate(.6); }
.ph-call { display: grid; justify-items: center; gap: 6px; }
.ph-av { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: #3a3e4a; font-size: 26px; font-weight: 700; }
.ph-call small { color: #9aa1b2; }
.ph-vm { margin-top: 18px; padding: 8px 12px; border-radius: 10px; background: rgba(232,97,60,.18); color: #ffb39b; font-size: 13px; font-weight: 600; }
.ph-vm i { font-style: normal; color: #ff6b4a; animation: kpulse 1.2s infinite; }
.ph-lost { position: absolute; bottom: 22px; left: 14px; right: 14px; font-size: 12.5px; color: #9aa1b2; }
.new .ph { background: url(img/bg/soft-sky.jpg) center / cover; justify-content: flex-end; }
.ph-chat { display: grid; gap: 8px; }
.ph-chat .b { max-width: 85%; padding: 9px 12px; border-radius: 14px; font-size: 13px; line-height: 1.35; }
.ph-chat .v { justify-self: end; background: var(--sky); color: #fff; border-bottom-right-radius: 4px; }
.ph-chat .a { background: #fff; color: var(--ink); border-bottom-left-radius: 4px; }
.ph-chat .ok { justify-self: center; background: #e8f2e3; color: #2f6b34; font-weight: 600; font-size: 12px; border-radius: 9px; }
/* control chips */
.a-control2 { background: #fff; border-top: 1px solid var(--line); }
.ctl-chips { list-style: none; margin: 0 auto; padding: 0; max-width: 860px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.ctl-chips li { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px 12px 12px; border-radius: 14px; border: 1px solid var(--line); background: #fff; font-size: 15px; font-weight: 600; color: var(--ink); box-shadow: 0 1px 2px rgba(16,19,26,.04); }
.ctl-chips span { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: #e7eefc; color: var(--sky); font-size: 14px; }
/* industry photo tiles */
.a-ind2 { background: var(--soft); }
.ind2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ind2 figure { position: relative; margin: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 4/5; }
.ind2 img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.ind2 figure:hover img { transform: scale(1.05); }
.ind2 figcaption { position: absolute; inset: auto 0 0; padding: 60px 20px 20px; background: linear-gradient(0deg, rgba(10,12,20,.85), transparent); color: #fff; }
.ind2 b { display: block; font-size: 20px; letter-spacing: -.015em; }
.ind2 span { font-size: 14px; color: #d6dae4; }
/* chapter 3 icon tiles */
.ch-gains.g2 div { display: grid; gap: 10px; justify-items: start; padding: 24px; }
.ch-gains.g2 span { font-size: 26px; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); }
.ch-gains.g2 b { font-size: 19px; margin: 0; }
@media (max-width: 760px) {
  .vs2 { grid-template-columns: 1fr; } .vs2-vs { justify-self: center; }
  .ind2 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) { .ind2 { grid-template-columns: 1fr; } .ind2 figure { aspect-ratio: 4/3; } }

/* ---------------- Chapter 3: four living scenes ---------------- */
.ch-gains.g3 { gap: 16px; }
.gx { display: grid; gap: 4px; padding: 0 0 18px; border-radius: 18px; background: #fff; border: 1px solid var(--line); overflow: hidden; transition: transform .3s, box-shadow .3s; }
.gx:hover { transform: translateY(-3px); box-shadow: 0 24px 44px -30px rgba(30,30,90,.5); }
.gx > b { font-size: 17px; letter-spacing: -.015em; padding: 0 18px; margin-top: 12px; }
.gx > span { font-size: 13.5px; line-height: 1.45; color: var(--muted); padding: 0 18px; }
.gx-art { position: relative; height: 128px; overflow: hidden; display: grid; place-items: center; }
/* evenings: sunset → night */
.g-night .gx-art { background: linear-gradient(180deg, #f6b38f, #e98ab7 55%, #7c6be0); }
.g-night .gx-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0f1a45, #2b2a78 60%, #5a3fc0); opacity: 0; }
.play .g-night .gx-art::after { animation: nightfall 7s ease-in-out infinite alternate; }
@keyframes nightfall { 0%, 15% { opacity: 0; } 55%, 100% { opacity: 1; } }
.moon { position: absolute; z-index: 1; right: 26px; top: 120px; width: 28px; height: 28px; border-radius: 50%; box-shadow: -8px 4px 0 0 #ffe9a8; transform: rotate(-20deg); }
.play .moon { animation: moonrise 7s ease-in-out infinite alternate; }
@keyframes moonrise { 0%, 20% { top: 120px; } 60%, 100% { top: 22px; } }
.stars { position: absolute; inset: 0; z-index: 1; opacity: 0; background-image: radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 40% 18%, #fff, transparent), radial-gradient(1.5px 1.5px at 65% 40%, #fff, transparent), radial-gradient(1px 1px at 30% 55%, #fff, transparent), radial-gradient(1px 1px at 55% 12%, #fff, transparent); }
.play .stars { animation: nightfall 7s ease-in-out infinite alternate; }
.gx-pill { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 10px; background: rgba(255,255,255,.92); font-size: 12.5px; font-weight: 600; color: var(--ink); box-shadow: 0 8px 20px -10px rgba(10,10,40,.6); }
.gx-pill i { width: 7px; height: 7px; border-radius: 50%; background: #3ccf7a; animation: kpulse 1.6s infinite; }
/* leads: notifications slide in */
.g-leads .gx-art { background: url(img/bg/soft-sky.jpg) center / cover; align-content: center; gap: 6px; padding: 12px; }
.nt { width: 86%; padding: 8px 11px; border-radius: 10px; background: rgba(255,255,255,.95); font-size: 12.5px; font-weight: 600; color: var(--ink); box-shadow: 0 8px 18px -12px rgba(10,20,60,.6); opacity: 0; transform: translateY(14px) scale(.96); }
.nt em { font-style: normal; color: #3ccf7a; margin-right: 6px; }
.n2 em { color: var(--sky2); } .n3 em { color: #f0a92c; }
.play .nt { animation: ntin 6s cubic-bezier(.2,.8,.2,1) infinite; }
.play .n2 { animation-delay: .6s; } .play .n3 { animation-delay: 1.2s; }
@keyframes ntin { 0% { opacity: 0; transform: translateY(14px) scale(.96); } 10%, 80% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(-6px); } }
/* deposit: pay → paid */
.g-dep .gx-art { background: url(img/bg/soft-peri.jpg) center / cover; }
.dep { width: 78%; padding: 12px; border-radius: 12px; background: #fff; box-shadow: 0 12px 24px -14px rgba(40,20,110,.6); display: grid; gap: 6px; }
.dep small { font-size: 11.5px; color: var(--muted); }
.dep-row { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; }
.dep-btn { position: relative; height: 30px; border-radius: 8px; overflow: hidden; font-size: 12.5px; font-weight: 700; }
.dep-btn span { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 8px; }
.pay { background: #6b4fd6; color: #fff; }
.paid { background: #e8f2e3; color: #2f6b34; opacity: 0; transform: scale(.9); }
.play .paid { animation: paid 5s ease-in-out infinite; }
.play .pay { animation: payout 5s ease-in-out infinite; }
@keyframes paid { 0%, 40% { opacity: 0; transform: scale(.9); } 50%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes payout { 0%, 35% { opacity: 1; transform: none; } 40% { transform: scale(.94); } 50%, 95% { opacity: 0; } 100% { opacity: 1; } }
/* up to date: hours retyped */
.g-up .gx-art { background: url(img/bg/soft-sage.jpg) center / cover; }
.mini { width: 80%; padding: 12px; border-radius: 12px; background: #fff; display: grid; gap: 8px; box-shadow: 0 12px 24px -14px rgba(10,20,60,.6); }
.mini small { font-size: 11px; color: var(--muted); }
.hrs { display: flex; gap: 10px; font-size: 13px; font-weight: 600; }
.sun { position: relative; display: inline-grid; }
.sun s, .sun ins { grid-area: 1 / 1; text-decoration-thickness: 2px; }
.sun s { text-decoration-color: #e8613c; }
.sun ins { text-decoration: none; color: var(--sky); opacity: 0; }
.play .sun s { animation: strike 6s ease-in-out infinite; }
.play .sun ins { animation: retype 6s ease-in-out infinite; }
@keyframes strike { 0%, 20% { opacity: 1; text-decoration-line: none; } 30%, 45% { opacity: 1; text-decoration-line: line-through; } 55%, 92% { opacity: 0; } 100% { opacity: 1; text-decoration-line: none; } }
@keyframes retype { 0%, 50% { opacity: 0; clip-path: inset(0 100% 0 0); } 65%, 92% { opacity: 1; clip-path: inset(0 0 0 0); } 100% { opacity: 0; } }
.kv-tag { justify-self: start; font-size: 11px; font-weight: 700; color: #6b4fd6; background: #f1ecfc; padding: 4px 8px; border-radius: 7px; opacity: 0; }
.play .kv-tag { animation: retype 6s ease-in-out infinite; animation-delay: .2s; }
@media (prefers-reduced-motion: reduce) {
  .play .gx-art *, .play .gx-art::after { animation: none !important; }
  .nt, .paid, .sun ins, .kv-tag { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .pay, .sun s { opacity: 0 !important; }
}
.g3 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gx-art { height: 150px; }
.gx-pill b { font-weight: 700; }
.gx-pill { white-space: nowrap; }
.dep-row span, .dep-row b, .hrs span { font-size: 13px; }
@media (max-width: 560px) { .g3 { grid-template-columns: 1fr; } }

/* ---------------- Rotating hero (premium) ---------------- */
.hx { padding: 14px clamp(10px, 1.6vw, 22px) 0 !important; background: #fff; }
.hx-card { position: relative; max-width: 1440px; margin: 0 auto; height: clamp(600px, 78vh, 760px); border-radius: 28px; overflow: hidden; isolation: isolate; background: #15122a; box-shadow: 0 40px 80px -50px rgba(20,10,60,.7); }
.hx-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 65% 35%; opacity: 0; transform: scale(1.06); transition: opacity 1.2s ease, transform 8s ease-out; z-index: -2; }
.hx-photo.on { opacity: 1; transform: scale(1); }
.hx-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(14,10,34,.92) 0%, rgba(14,10,34,.72) 34%, rgba(14,10,34,.18) 66%, rgba(14,10,34,.05) 100%), linear-gradient(0deg, rgba(14,10,34,.7) 0%, transparent 32%); }
.hx-copy { position: absolute; left: clamp(28px, 5.5vw, 84px); top: 50%; transform: translateY(-58%); max-width: 600px; color: #dcd7ee; }
.hx-kicker { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 22px; padding: 6px 12px 6px 10px; border-radius: 9px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px); font-size: 13px; font-weight: 500; color: #e4defa; }
.hx-kicker b { color: #fff; font-weight: 600; }
.hx-dot { width: 7px; height: 7px; border-radius: 50%; background: #7ce3a8; box-shadow: 0 0 0 4px rgba(124,227,168,.18); }
.hx-copy h1 { margin: 0; color: #fff; font-size: clamp(36px, 4.4vw, 58px); line-height: 1.04; letter-spacing: -.04em; font-weight: 600; }
.hx-copy h1 em { display: block; margin-top: .08em; font-style: italic; font-weight: 500; background: linear-gradient(90deg, #c7d8ff, #a8ecd6 50%, #d6c9ff); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.hx-lede { margin: 20px 0 0; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.55; color: #cbc5e0; max-width: 46ch; }
.hx-ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.hx-ctas .btn { padding: 13px 22px; font-size: 15px; }
.hx-feed { position: absolute; right: clamp(20px, 3vw, 44px); top: 50%; transform: translateY(-62%); width: min(340px, 34%); border-radius: 18px; overflow: hidden; background: rgba(18,14,40,.62); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); box-shadow: 0 30px 60px -24px rgba(5,3,20,.8); }
.hx-feed-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.08); color: #fff; font-size: 14px; }
.hx-feed-head .kovi-wrap { width: 26px; height: 26px; flex: none; }
.hx-feed ul { list-style: none; margin: 0; padding: 6px 16px 12px; display: grid; min-height: 196px; align-content: start; }
.hx-feed li { display: flex; align-items: center; gap: 12px; padding: 10px 0; font-size: 14px; color: rgba(255,255,255,.4); transition: color .4s; animation: krise .4s ease both; }
.hx-feed li + li { border-top: 1px solid rgba(255,255,255,.06); }
.hx-feed li i { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.25); transition: all .35s; }
.hx-feed li.done { color: #fff; }
.hx-feed li.done i { border-color: #7ce3a8; background: #7ce3a8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%2315122a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.hx-tabs { position: absolute; left: clamp(28px, 5.5vw, 84px); right: clamp(20px, 3vw, 44px); bottom: 28px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.hx-tabs button { display: grid; gap: 10px; padding: 0; border: 0; background: none; text-align: left; color: rgba(255,255,255,.5); font: 600 13px var(--font); cursor: pointer; transition: color .3s; }
.hx-tabs button:hover, .hx-tabs button.on { color: #fff; }
.hx-tabs i { display: block; height: 2px; border-radius: 2px; background: rgba(255,255,255,.2); overflow: hidden; }
.hx-tabs i b { display: block; height: 100%; width: 0; background: #fff; }
.hx-tabs button.on i b { width: 100%; }
.hx-tabs button.run i b { width: 0; animation: hxbar 7s linear forwards; }
@keyframes hxbar { to { width: 100%; } }

/* chapter 03 screenshot with a floating rules card */
.ch-shot.set { overflow: visible; border: 0; background: none; box-shadow: none; }
.ch-shot.set img { border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 40px 80px -44px rgba(30,30,90,.55); max-width: 520px; margin-left: auto; }
.rules-float { position: absolute; left: 0; bottom: 40px; display: grid; gap: 6px; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 50px -24px rgba(30,30,90,.5); font-size: 13px; color: var(--ink2); }
.rules-float b { font-size: 13.5px; color: var(--ink); }
.ch-shot.set figcaption { left: auto; right: 14px; }

/* ---------------- Chat looks ---------------- */
.a-looks { background: #fff; border-top: 1px solid var(--line); }
.looks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.lk { margin: 0; display: grid; gap: 14px; }
.lk-art { position: relative; height: 340px; border-radius: 18px; overflow: hidden; display: grid; place-items: center; }
.lk figcaption b { display: block; font-size: 17px; letter-spacing: -.01em; }
.lk figcaption span { font-size: 14px; color: var(--muted); }
.lk-art.real { background: url(img/bg/soft-sky.jpg) center / cover; }
.lk-art.real img { width: 62%; border-radius: 18px; border: 5px solid #10131a; box-shadow: 0 20px 40px -18px rgba(10,20,60,.6); transform: translateY(18px); }
.lk-art.concierge { background: linear-gradient(160deg, #1d3f8a, #1f8a7a 55%, #6b55d0); }
.cg { display: grid; justify-items: center; gap: 8px; text-align: center; color: #fff; padding: 20px; }
.cg-av { width: 64px; height: 64px; border-radius: 50%; background: url(img/bg/lilac.jpg) center / cover; box-shadow: 0 0 0 6px rgba(255,255,255,.15), 0 0 40px rgba(255,200,255,.5); animation: kfloat 4s ease-in-out infinite; }
.cg b { font-size: 20px; letter-spacing: -.02em; }
.cg small { color: #d8d0f5; font-size: 13px; }
.cg-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 8px; }
.cg-chips i { font-style: normal; font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 9px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2); }
.lk-art.bar { background: #f4f2fb; align-content: end; padding: 18px; }
.fb-page { position: absolute; inset: 22px 22px 90px; display: grid; gap: 10px; align-content: start; }
.fb-page i { height: 14px; border-radius: 6px; background: #e3def4; }
.fb-page i:first-child { width: 70%; height: 26px; background: #d5cdf0; } .fb-page i:nth-child(2) { width: 90%; } .fb-page i:nth-child(3) { width: 60%; }
.fb { position: relative; width: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 8px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1.5px #b9a8f3, 0 14px 30px -12px rgba(90,63,192,.6); }
.fb-av { width: 28px; height: 28px; border-radius: 50%; background: url(img/bg/lilac.jpg) center / cover; flex: none; }
.fb em { flex: 1; font-style: normal; font-size: 13px; color: var(--muted); }
.fb b { padding: 7px 12px; border-radius: 9px; background: #5a3fc0; color: #fff; font-size: 12.5px; }
.lk-art.voice { background: #0f0d1f; align-content: center; gap: 22px; }
.orb { width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #c9b8ff 30%, #6b4fd6 60%, #2a1c70); box-shadow: 0 0 60px rgba(150,120,255,.6); animation: orbpulse 2.4s ease-in-out infinite; }
@keyframes orbpulse { 50% { transform: scale(1.08); box-shadow: 0 0 90px rgba(150,120,255,.85); } }
.lk-art.voice small { color: #c9c2e3; font-size: 13px; font-style: italic; }

@media (max-width: 1080px) { .looks { grid-template-columns: 1fr 1fr; } }
@media (max-width: 960px) {
  .hx-card { height: auto; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; }
  .hx-photo { object-position: 45% 25%; }
  .hx-shade { background: linear-gradient(180deg, rgba(14,10,34,.05) 0%, rgba(14,10,34,.35) 28%, rgba(14,10,34,.9) 55%, rgba(14,10,34,.97) 100%); }
  .hx-copy { position: relative; left: auto; top: auto; transform: none; padding: 300px 22px 20px; }
  .hx-feed { position: relative; right: auto; top: auto; transform: none; width: auto; margin: 0 16px 16px; }
  .hx-tabs { position: relative; left: auto; right: auto; bottom: auto; padding: 0 16px 20px; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .hx-tabs button { font-size: 11px; }
  .rules-float { position: relative; bottom: auto; margin-top: -40px; margin-left: 16px; width: fit-content; }
}
@media (max-width: 560px) { .looks { grid-template-columns: 1fr; } .hx-copy { padding-top: 240px; } .hx-tabs span { display: none; } }
@media (prefers-reduced-motion: reduce) { .hx-photo { transition: opacity .3s; transform: none; } .cg-av, .orb { animation: none; } }
.hx .hx-ctas { justify-content: flex-start; margin-left: 0; padding: 0; }

/* ---------------- Showcase (Intercom-style stage + tabs) ---------------- */
.showcase { margin: 24px 0 8px; }
.sc-stage { position: relative; height: clamp(420px, 46vw, 620px); border-radius: 20px; overflow: hidden; background: #ece8f6; }
.sc-slide { position: absolute; inset: 0; background: var(--bg) center / cover; opacity: 0; transition: opacity .7s ease; display: grid; place-items: center; }
.sc-slide.on { opacity: 1; }
.sc-win { position: absolute; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 40px 80px -30px rgba(20,15,60,.55); transform: translateY(18px); opacity: 0; transition: transform .8s cubic-bezier(.2,.8,.2,1), opacity .6s; }
.sc-slide.on .sc-win { transform: none; opacity: 1; }
.sc-win img { display: block; width: 100%; }
.sc-win.wide { width: 72%; right: 4%; top: 7%; }
.sc-win.tall { width: 38%; right: 12%; top: 7%; }
.sc-float { position: absolute; z-index: 2; opacity: 0; transform: translateY(24px) scale(.97); transition: transform .8s cubic-bezier(.2,.8,.2,1) .25s, opacity .6s .25s; }
.sc-slide.on .sc-float { opacity: 1; transform: none; }
.card-update { left: 6%; bottom: 12%; display: flex; gap: 14px; align-items: center; padding: 18px 20px; border-radius: 16px; background: #fff; box-shadow: 0 30px 60px -24px rgba(20,15,60,.55); }
.cu-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #e8f2e3; color: #2f6b34; font-weight: 800; font-size: 18px; }
.card-update b { display: block; font-size: 16px; margin-bottom: 4px; }
.card-update small { display: block; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.sc-float.phone { left: 12%; top: 8%; width: 25%; }
.sc-float.phone img { width: 100%; border-radius: 26px; border: 7px solid #10131a; box-shadow: 0 40px 70px -26px rgba(20,15,60,.65); }
.notes { left: 5%; bottom: 10%; width: min(340px, 34%); display: grid; gap: 10px; }
.nt2 { display: grid; grid-template-columns: 10px 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.96); box-shadow: 0 20px 40px -20px rgba(20,15,60,.5); opacity: 0; transform: translateX(-16px); transition: all .5s cubic-bezier(.2,.8,.2,1); }
.sc-slide.on .nt2 { opacity: 1; transform: none; }
.sc-slide.on .nt2:nth-child(2) { transition-delay: .45s; } .sc-slide.on .nt2:nth-child(3) { transition-delay: .9s; } .sc-slide.on .nt2:nth-child(1) { transition-delay: .2s; }
.nt2 .d { width: 9px; height: 9px; border-radius: 50%; } .d.g { background: #3ccf7a; } .d.b { background: var(--sky2); } .d.p { background: #8b7be8; }
.nt2 b { display: block; font-size: 14px; } .nt2 small { font-size: 12.5px; color: var(--muted); } .nt2 time { font-size: 12px; color: var(--muted); }
.sc-tabs { display: grid; grid-template-columns: repeat(3, 1fr); }
.sc-tabs button { position: relative; text-align: left; border: 0; background: none; padding: 28px 28px 30px 54px; font: inherit; color: var(--muted); cursor: pointer; transition: background .3s, color .3s; }
.sc-tabs button[aria-selected="true"] { background: #f4f2f8; color: var(--ink2); }
.sc-tabs i { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: transparent; }
.sc-tabs i b { display: block; height: 100%; width: 0; background: #2f63b5; }
.sc-tabs button[aria-selected="true"] i b { width: 100%; }
.sc-tabs button.run i b { width: 0; animation: hxbar 7s linear forwards; }
.sc-tabs .sq { position: absolute; left: 26px; top: 36px; width: 10px; height: 10px; background: #b9b3e6; }
.sc-tabs button[aria-selected="true"] .sq { background: #2f63b5; }
.sc-tabs h3 { margin: 0 0 8px; font-size: 21px; letter-spacing: -.02em; font-weight: 500; color: inherit; }
.sc-tabs button[aria-selected="true"] h3 { color: var(--ink); }
.sc-tabs p { margin: 0; font-size: 15px; line-height: 1.55; }
@media (max-width: 860px) {
  .sc-stage { height: 440px; }
  .sc-win.wide { width: 92%; right: 4%; } .sc-win.tall { width: 62%; right: 4%; }
  .card-update { left: 4%; right: 4%; bottom: 6%; } .sc-float.phone { left: 4%; width: 38%; top: auto; bottom: 4%; }
  .notes { left: 4%; right: 4%; width: auto; bottom: 5%; }
  .sc-tabs { grid-template-columns: 1fr; } .sc-tabs button { padding: 20px 20px 20px 48px; } .sc-tabs .sq { left: 22px; top: 28px; }
}

/* Showcase: soft, rounded, like the rest of the site */
.sc-stage { border-radius: 24px; }
.sc-tabs { gap: 12px; margin-top: 14px; }
.sc-tabs button { border-radius: 18px; padding: 22px 24px 24px; border: 1px solid transparent; }
.sc-tabs button:hover { background: #f7f8fb; }
.sc-tabs button[aria-selected="true"] { background: #fff; border-color: var(--line); box-shadow: 0 18px 40px -28px rgba(29,60,130,.45); }
.sc-tabs i { position: static; display: block; height: 4px; border-radius: 99px; background: #eceff5; overflow: hidden; margin-bottom: 18px; }
.sc-tabs i b { border-radius: 99px; background: linear-gradient(90deg, #2f63b5, #1f9e86 50%, #7a5fd6); }
.sc-tabs button:not([aria-selected="true"]) i b { width: 0 !important; }
.sc-tabs .sq { display: none; }
.sc-tabs h3 { font-weight: 600; font-size: 19px; }
.sc-win { border-radius: 16px; }
.card-update, .nt2 { border-radius: 18px; }
@media (max-width: 860px) { .sc-tabs button { padding: 18px 20px 20px; } }
/* looks: Kovi blue → green → purple */
.lk-art.bar { background: #eef5f6; }
.fb-page i { background: #d9e8ec; } .fb-page i:first-child { background: #c6dde4; }
.fb { box-shadow: 0 0 0 1.5px #8fd0c2, 0 14px 30px -12px rgba(31,140,122,.45); }
.fb-av, .cg-av { background: url(img/bg/meadow.jpg) center / cover; }
.fb b { background: var(--sky); }
.lk-art.voice { background: #0d1626; }
.orb { background: radial-gradient(circle at 35% 30%, #fff, #b9e8dc 28%, #3d8fd0 58%, #5a3fc0 90%); box-shadow: 0 0 60px rgba(80,170,200,.55); }
@keyframes orbpulse { 50% { transform: scale(1.08); box-shadow: 0 0 90px rgba(80,190,170,.8); } }

/* ---------------- Hero v3: DFY-grade dark studio + tilted business stage ---------------- */
.hx2 { position: relative; overflow: hidden; background: #0b0f17 !important; color: #c9d0dc; padding: 0 !important; isolation: isolate; }
.hx2::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(700px 420px at 20% 10%, rgba(47,99,181,.45), transparent 65%), radial-gradient(600px 400px at 85% 20%, rgba(31,158,134,.3), transparent 65%), radial-gradient(500px 360px at 60% 0, rgba(122,95,214,.28), transparent 65%); }
.hx2-in { max-width: 1000px; margin: 0 auto; padding: clamp(64px, 8vw, 104px) var(--pad) 44px; text-align: center; display: grid; justify-items: center; gap: 22px; }
.hx2-in .d-badge b { color: #fff; font-weight: 600; }
.hx2 h1 { margin: 0; color: #fff; font-size: clamp(38px, 5.4vw, 70px); line-height: 1.03; letter-spacing: -.045em; font-weight: 600; }
.hx2 h1 em { font-style: italic; background: linear-gradient(90deg, #a9c4ff, #8ee6c8 50%, #c8b8ff); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .05em; }
.hx2-stage { max-width: 1240px; margin: 0 auto; padding: 0 var(--pad); perspective: 1600px; margin-bottom: -40px; }
.hx2-stage .hx-card { height: clamp(460px, 52vw, 640px); border-radius: 22px 22px 0 0; transform: rotateX(10deg); transform-origin: bottom center; border: 1px solid rgba(255,255,255,.12); border-bottom: 0; box-shadow: 0 -30px 80px -30px rgba(80,140,255,.35); }
.hx2-stage .hx-shade { background: linear-gradient(0deg, rgba(11,15,23,.85) 0%, rgba(11,15,23,.1) 40%, transparent 70%), linear-gradient(90deg, rgba(11,15,23,.35), transparent 40%); }
.hx2-stage .hx-feed { top: auto; bottom: 96px; right: 32px; transform: none; }
.hx2-stage .hx-tabs { left: 32px; right: 32px; bottom: 30px; }
.hx2 + .a-proof { position: relative; z-index: 2; }
/* control band: six glass tiles */
.a-guard .wrap { padding-top: clamp(64px, 8vw, 104px); }
.guard-grid.six { grid-template-columns: repeat(3, 1fr); }
.gi { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.1); color: #9fe0c8; font-size: 15px; margin-bottom: 4px; }
@media (max-width: 960px) {
  .hx2-stage .hx-card { transform: none; height: 520px; border-radius: 22px; }
  .hx2-stage { margin-bottom: 0; padding-bottom: 20px; }
  .hx2-stage .hx-feed { position: absolute; left: 16px; right: 16px; width: auto; margin: 0; bottom: 70px; }
  .hx2-stage .hx-tabs { position: absolute; left: 16px; right: 16px; bottom: 20px; padding: 0; }
  .guard-grid.six { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) { .guard-grid.six { grid-template-columns: 1fr; } .hx2-stage .hx-card { height: 480px; } }
.hx2 h1 em { padding: 0 .1em .04em 0; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hx2-stage { margin-bottom: 0; }
.hx2-stage .hx-card { transform: rotateX(7deg); }