/* ================= AI landing (onekey.co.il/ai/) ================= */
.oka-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--green); color: var(--lime); }
.oka-ico.is-lg { width: 52px; height: 52px; }
.oka-ico.is-lime { background: var(--lime); color: var(--black); }
.oka-dot-on { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2fbf71; box-shadow: 0 0 0 3px rgba(47, 191, 113, .2); }

/* hero: the services hero layout, a wider card, the audience switch, chat bubbles over the building */
@media (min-width: 761px) { .oka-hero .okp-hero3d-card { width: min(600px, 100%); } }
.oka-aud { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.oka-aud-l { width: 100%; margin-bottom: 2px; font-size: 13px; color: var(--ink-muted); }
.oka-aud-b { height: 38px; padding: 0 16px; border: 0; border-radius: var(--radius-pill); background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; font: inherit; font-size: 14px; cursor: pointer; transition: background-color .6s var(--okx-ease), color .6s, box-shadow .6s; }
.oka-aud-b:hover { box-shadow: inset 0 0 0 1px var(--lime); }
.oka-aud-b.is-on { background: var(--lime); color: var(--black); box-shadow: none; }
.oka-card .oka-aud { margin-top: 24px; }
.okt .oka-card .oka-aud-l { color: rgba(255,255,255,.72); }
.oka-lead { min-height: 3.4em; animation: okp-in 1s var(--okx-ease) both; }
.oka-pains .okp-head-row .oka-aud { justify-content: flex-end; }

.oka-bubbles { position: absolute; z-index: 2; top: calc(clamp(640px, 58vw, 820px) - 330px); inset-inline-end: max(var(--okx-pad), calc((100% - 1440px) / 2 + var(--okx-pad))); display: flex; flex-direction: column; gap: 8px; width: 300px; pointer-events: none; opacity: 0; transform: translateY(14px); transition: opacity 1.4s var(--okx-ease) .8s, transform 1.6s var(--okx-ease) .8s; }
.oka-bubbles.is-on { opacity: 1; transform: none; }
.oka-bub-head { display: inline-flex; align-items: center; gap: 8px; align-self: flex-end; height: 34px; padding: 0 12px 0 6px; border-radius: var(--radius-pill); background: var(--black); color: var(--white); font-size: 13px; }
.oka-bub-ava { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--lime); color: var(--black); }
.oka-bub-ava.is-lg { width: 40px; height: 40px; }
.oka-bub { max-width: 88%; margin: 0; padding: 10px 14px; border-radius: 18px; font-size: 14px; line-height: 1.45; box-shadow: 0 10px 30px -18px rgba(0,0,0,.45); opacity: 0; transform: translateY(8px) scale(.97); transition: opacity .7s var(--okx-ease), transform .8s var(--okx-ease); }
.oka-bub.is-on { opacity: 1; transform: none; }
.oka-bub.is-user { align-self: flex-start; background: var(--lime); color: var(--black); border-start-start-radius: 4px; }
.oka-bub.is-ai { align-self: flex-end; background: var(--white); color: var(--black); border-start-end-radius: 4px; box-shadow: 0 10px 30px -18px rgba(0,0,0,.45), inset 0 0 0 1px var(--line); }
.oka-bub:not(.is-on) { position: absolute; visibility: hidden; }
.oka-typing { display: inline-flex; gap: 4px; padding: 14px 16px; }
.oka-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--green-700); animation: oka-dot 1.1s var(--okx-ease) infinite; }
.oka-typing i:nth-child(2) { animation-delay: .15s; }
.oka-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes oka-dot { 0%, 60%, 100% { opacity: .25; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

/* pains */
.oka-pain-grid { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; box-shadow: inset 0 1px 0 var(--line); }
.oka-pain { display: flex; flex-direction: column; gap: 12px; padding: 30px 28px 34px; box-shadow: inset -1px 0 0 var(--line); animation: okp-in 1.1s var(--okx-ease) both; animation-delay: calc(var(--i) * 90ms); }
.oka-pain:first-child { padding-inline-start: 0; }
.oka-pain:last-child { box-shadow: none; }
.oka-pain-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.oka-pain-n { font-size: 12px; color: var(--ink-muted); }
.oka-pain h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.25; }
.oka-pain p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink-muted); }
.oka-fact { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "v q" "v s"; align-items: center; gap: 4px 32px; margin: clamp(40px, 5vw, 64px) 0 0; padding: 28px 34px; background: var(--lime-100); }
.oka-fact-v { grid-area: v; padding: 0 .12em; background: var(--lime); font-family: var(--font-display); font-size: clamp(56px, 6vw, 88px); line-height: 1.05; }
.oka-fact blockquote { grid-area: q; margin: 0; }
.oka-fact blockquote p { margin: 0; font-family: var(--font-display); font-size: clamp(20px, 1.9vw, 28px); line-height: 1.4; }
.oka-fact figcaption { grid-area: s; font-size: 13px; color: var(--ink-muted); }
.oka-fact figcaption a { color: inherit; }

/* directions */
.oka-dir-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.oka-dir { display: flex; flex-direction: column; padding: 32px 34px 34px; box-shadow: inset 0 0 0 1px var(--line); scroll-margin-top: 100px; transition: opacity 1.6s var(--okx-ease), transform 1.9s var(--okx-ease), background-color 1s var(--okx-ease); }
.oka-dir:hover { background: var(--green-100); }
.oka-dir-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.oka-dir h3 { margin: 0 0 10px; font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.2; }
.oka-dir-text { margin: 0; font-size: 17px; line-height: 1.65; color: var(--ink-muted); }
.oka-dir-l { margin: 24px 0 6px; font-size: 13px; color: var(--green); }
.oka-check { list-style: none; margin: 0; padding: 0; }
.oka-check li { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; font-size: 16px; line-height: 1.5; box-shadow: inset 0 -1px 0 var(--line); }
.oka-check li:last-child { box-shadow: none; }
.oka-check-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; margin-top: -1px; border-radius: 50%; background: var(--lime); color: var(--black); }

/* live demo: chat and CRM card */
.oka-demo-text { max-width: 30em; margin: 0; }
.oka-demo-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: stretch; }
.oka-chat { display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; background: var(--white); box-shadow: 0 30px 70px -40px rgba(18, 73, 68, .5); }
.oka-chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: var(--green); color: var(--white); }
.oka-chat-name { display: flex; flex-direction: column; gap: 2px; }
.oka-chat-name b { font-weight: 500; font-size: 16px; }
.oka-chat-name span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255,255,255,.75); }
.oka-chat-body { display: flex; flex-direction: column; gap: 10px; height: 400px; padding: 22px 20px; overflow-y: auto; overscroll-behavior: contain; background: var(--green-100); }
.oka-msg { max-width: 80%; margin: 0; padding: 11px 15px; border-radius: 18px; font-size: 15px; line-height: 1.5; animation: okp-in .7s var(--okx-ease) both; }
.oka-msg.is-ai { align-self: flex-end; background: var(--white); border-start-end-radius: 4px; }
.oka-msg.is-user { align-self: flex-start; background: var(--lime); border-start-start-radius: 4px; }
.oka-chat-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 76px; padding: 16px 20px; box-shadow: inset 0 1px 0 var(--line); }
.oka-chip { height: 42px; padding: 0 18px; border: 0; border-radius: var(--radius-pill); background: var(--white); color: var(--black); box-shadow: inset 0 0 0 1px var(--green); font: inherit; font-size: 15px; cursor: pointer; transition: background-color .6s var(--okx-ease), box-shadow .6s; animation: okp-in .8s var(--okx-ease) both; }
.oka-chip:hover { background: var(--lime); box-shadow: none; }
.oka-chip[disabled] { opacity: .45; cursor: default; }
.oka-restart { display: inline-flex; align-items: center; gap: 6px; height: 42px; margin-inline-start: auto; padding: 0 6px; border: 0; background: none; color: var(--black); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; }
.oka-crm { display: flex; flex-direction: column; gap: 18px; padding: 26px 26px 24px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.oka-crm-head { display: flex; align-items: center; gap: 12px; }
.oka-crm-head span:last-child { display: flex; flex-direction: column; }
.oka-crm-head b { font-weight: 500; font-size: 18px; }
.oka-crm-head small { font-size: 13px; color: var(--ink-muted); }
.oka-crm-rows { margin: 0; box-shadow: inset 0 1px 0 var(--line); }
.oka-crm-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 12px 0; box-shadow: inset 0 -1px 0 var(--line); font-size: 15px; }
.oka-crm-row dt { color: var(--ink-muted); }
.oka-crm-row dd { margin: 0; color: var(--ink-muted); transition: color .6s; }
.oka-crm-row.is-set dd { color: var(--black); font-weight: 500; animation: oka-flash 1.4s var(--okx-ease); }
@keyframes oka-flash { 0% { background: var(--lime); } 100% { background: transparent; } }
.oka-score { display: flex; flex-direction: column; gap: 8px; }
.oka-score-l { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink-muted); }
.oka-score-l b { color: var(--black); font-weight: 500; }
.oka-score-bar { position: relative; height: 10px; overflow: hidden; border-radius: 10px; background: var(--green-100); }
.oka-score-bar i { position: absolute; inset: 0; background: var(--green); transform-origin: right center; transition: transform 1.2s var(--okx-ease); }
.oka-crm-status { display: flex; justify-content: space-between; margin: 0; font-size: 14px; color: var(--ink-muted); }
.oka-crm-status b { padding: 2px 10px; border-radius: var(--radius-pill); background: var(--green-100); color: var(--black); font-weight: 500; }
.oka-crm.is-done .oka-crm-status b { background: var(--lime); }
.oka-crm-done { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: auto 0 0; padding: 0 14px; background: var(--green); color: var(--white); font-size: 14px; opacity: 0; transform: translateY(8px); transition: opacity .8s var(--okx-ease), transform .9s var(--okx-ease); }
.oka-crm-done .ok-icon { color: var(--lime); }
.oka-crm-done.is-on { opacity: 1; transform: none; }

/* readiness test */
.oka-quiz-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
.oka-quiz-head .okx-body { max-width: 26em; }
.oka-quiz-card { padding: 30px 34px 34px; box-shadow: inset 0 0 0 1px var(--line); }
.oka-quiz-card .okp-lead-steps { margin: 0 0 26px; }
.oka-quiz-l { margin: 0 0 8px; font-size: 13px; color: var(--ink-muted); }
.oka-quiz-q h3, .oka-quiz-res h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.2; animation: okp-in 1s var(--okx-ease) both; }
.oka-quiz-q .okp-lead-opts { margin-top: 24px; }
.oka-quiz-q .okp-lead-back { margin-top: 16px; }
.oka-quiz-res { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 32px; align-items: start; }
.oka-ring { position: relative; width: 150px; height: 150px; }
.oka-ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg) scaleX(-1); }
.oka-ring-bg { fill: none; stroke: var(--lime-100); stroke-width: 10; }
.oka-ring-fg { fill: none; stroke: var(--green); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 1.6s var(--okx-ease); }
.oka-ring-v { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 2px; font-size: 18px; color: var(--ink-muted); }
.oka-ring-v b { font-family: var(--font-display); font-weight: 400; font-size: 52px; color: var(--black); }
.oka-quiz-res-text p { margin: 12px 0 0; font-size: 17px; line-height: 1.65; color: var(--ink-muted); }
.oka-quiz-res-text .oka-quiz-l { margin: 0 0 8px; font-size: 13px; }
.oka-quiz-pack { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--lime-100); color: var(--black) !important; font-size: 15px !important; }
.oka-quiz-pack b { font-weight: 500; }

/* packages */
.oka-pack-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.oka-pack { position: relative; display: flex; flex-direction: column; padding: 34px 32px 32px; box-shadow: inset 0 0 0 1px var(--line); }
.oka-pack h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 34px; }
.oka-pack-for { margin: 8px 0 0; font-size: 15px; color: var(--ink-muted); }
.oka-pack-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin: 26px 0 0; }
.oka-pack-price small { font-size: 14px; color: var(--ink-muted); }
.oka-pack-price b { font-family: var(--font-display); font-weight: 400; font-size: 44px; line-height: 1; }
.oka-pack-setup { margin: 6px 0 20px; font-size: 13px; color: var(--ink-muted); }
.oka-pack .oka-check { margin-bottom: 28px; }
.oka-pack .okx-btn { margin-top: auto; align-self: flex-start; }
.oka-pack.is-featured { background: var(--green); color: var(--white); box-shadow: none; }
.oka-pack.is-featured .oka-pack-for, .oka-pack.is-featured .oka-pack-price small, .oka-pack.is-featured .oka-pack-setup { color: rgba(255,255,255,.74); }
.oka-pack.is-featured .oka-check li { box-shadow: inset 0 -1px 0 rgba(255,255,255,.16); }
.oka-pack.is-featured .oka-check li:last-child { box-shadow: none; }
.oka-pack-badge { position: absolute; top: 0; inset-inline-end: 32px; padding: 6px 14px; background: var(--lime); color: var(--black); font-size: 13px; transform: translateY(-50%); }

/* trust */
.oka-trust-grid { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin: 0; padding: 0; }
.oka-trust-grid h3 { margin: 18px 0 8px; font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1.25; }
.oka-trust-grid p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--gray-600); }

/* free materials */
.oka-magnet-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 110px); align-items: center; }
.oka-cover { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; aspect-ratio: 4 / 5; padding: 34px; overflow: hidden; background: var(--lime); color: var(--black); transition: background-color 1s var(--okx-ease), color 1s; }
.oka-cover.is-webinar { background: var(--green); color: var(--white); }
.oka-cover-pat { position: absolute; top: 0; inset-inline: 0; width: 100%; }
.oka-cover .okp-pattern.is-on path { fill: rgba(18, 73, 68, .14); stroke: rgba(18, 73, 68, .14); }
.oka-cover .okp-pattern.is-on path.is-ink { fill: var(--green); stroke: var(--green); }
.oka-cover.is-webinar .okp-pattern.is-on path { fill: rgba(255,255,255,.08); stroke: rgba(255,255,255,.08); }
.oka-cover.is-webinar .okp-pattern.is-on path.is-ink { fill: var(--lime); stroke: var(--lime); }
.oka-cover > :not(.oka-cover-pat) { position: relative; }
.oka-cover-tag { align-self: flex-start; padding: 4px 12px; background: var(--black); color: var(--lime); font-size: 13px; letter-spacing: .08em; }
.oka-cover-t { font-family: var(--font-display); font-size: clamp(34px, 3.4vw, 52px); line-height: 1.05; }
.oka-cover-s { margin-bottom: 18px; font-size: 16px; opacity: .8; }
.oka-cover.is-webinar .ok-logo img { filter: invert(1); }
.oka-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.oka-magnet-main .okp-h2 { animation: okp-in 1s var(--okx-ease) both; }
.oka-magnet-main .okx-body { max-width: 32em; margin: 18px 0 0; }
.oka-date { display: inline-flex; align-items: center; gap: 8px; margin: 16px 0 0; font-size: 16px; }
.oka-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; margin-top: 28px; }
.oka-form .okx-field:nth-of-type(3), .oka-form .okx-check, .oka-form > .okp-lead-err, .oka-form .okx-btn { grid-column: 1 / -1; }
.oka-form .okx-btn { justify-self: start; margin-top: 8px; }
.oka-form .okx-field input { color: var(--black); border-bottom-color: var(--black); }
.oka-form .okx-field span { color: var(--ink-muted); }
.oka-form .okx-field input:focus + span, .oka-form .okx-field input:not(:placeholder-shown) + span { color: var(--green); }
.oka-form .okx-field input:focus { border-bottom-color: var(--green); }
.oka-form .okx-field.is-err input { border-bottom-color: #b42318; }
.oka-form .okx-check-box { box-shadow: inset 0 0 0 1px var(--black); }
.oka-form .okx-check.is-err .okx-check-box { box-shadow: inset 0 0 0 1.5px #b42318; }
.oka-sent { display: flex; align-items: center; gap: 10px; margin: 28px 0 0; padding: 18px 22px; background: var(--lime-100); font-size: 17px; animation: okp-in .9s var(--okx-ease) both; }

@media (max-width: 1080px) {
  .oka-pain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oka-pain:nth-child(2n) { box-shadow: none; }
  .oka-pain:nth-child(2n+1) { padding-inline-start: 0; }
  .oka-pain:nth-child(n+3) { border-top: 1px solid var(--line); }
  .oka-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oka-pack { padding: 30px 24px 26px; }
  .oka-bubbles { width: 250px; }
}
@media (max-width: 760px) {
  .oka-bubbles { top: 14px; inset-inline-end: 14px; width: 210px; gap: 6px; }
  .oka-bub-head { display: none; }
  .oka-bub { padding: 7px 11px; font-size: 12.5px; border-radius: 14px; }
  .oka-typing { padding: 10px 12px; }
  .oka-pains .okp-head-row .oka-aud { justify-content: flex-start; }
  .oka-pain-grid, .oka-dir-grid, .oka-demo-grid, .oka-quiz-grid, .oka-pack-grid, .oka-trust-grid, .oka-magnet-grid { grid-template-columns: 1fr; }
  .oka-pain, .oka-pain:first-child, .oka-pain:nth-child(2n+1) { padding: 22px 0 26px; box-shadow: inset 0 -1px 0 var(--line); border-top: 0; }
  .oka-fact { grid-template-columns: 1fr; grid-template-areas: "v" "q" "s"; gap: 12px; padding: 24px 22px; }
  .oka-fact-v { justify-self: start; }
  .oka-dir { padding: 26px 22px 26px; }
  .oka-chat-body { height: 360px; }
  .oka-msg { max-width: 88%; font-size: 14.5px; }
  .oka-quiz-card { padding: 24px 20px 26px; }
  .oka-quiz-res { grid-template-columns: 1fr; gap: 20px; }
  .oka-ring { width: 120px; height: 120px; }
  .oka-ring-v b { font-size: 42px; }
  .oka-pack-grid { gap: 36px; }
  .oka-trust-grid { gap: 28px; }
  .oka-cover { aspect-ratio: 5 / 4; padding: 26px; }
  .oka-form { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .oka-bubbles, .oka-bub, .oka-score-bar i, .oka-ring-fg, .oka-crm-done, .oka-cover { transition: none; }
  .oka-typing i, .oka-lead, .oka-pain, .oka-msg, .oka-chip, .oka-crm-row.is-set dd, .oka-quiz-q h3, .oka-quiz-res h3, .oka-sent, .oka-magnet-main .okp-h2 { animation: none !important; }
}