/* RIDKK homepage journey — alternating rows, each scene auto-plays in place (extends landing.css + products.css) */
.journey { padding: 96px 0 40px; background: linear-gradient(180deg, #fff 0%, #f6f7fb 30%, #f6f7fb 80%, #fff 100%); }
.journey-rows { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 72px; }
.jrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.jrow:nth-child(even) .jcopy { order: 2; } .jrow:nth-child(even) .jstage { order: 1; }

.jstage {
  position: relative; width: 100%; max-width: 520px; margin-inline: auto; border-radius: 24px; overflow: hidden;
  background: #0f1222; box-shadow: 0 30px 80px rgba(17,24,39,.22), inset 0 0 0 1px rgba(255,255,255,.08);
}
.jbar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; background: #161a30; color: #aab0c6; font-size: .76rem; }
.jdot { width: 9px; height: 9px; border-radius: 50%; background: #2c3150; }
.jdot:nth-child(1) { background: #ff5f57; } .jdot:nth-child(2) { background: #febc2e; } .jdot:nth-child(3) { background: #28c840; }
.jbar-title { margin-inline-start: auto; font-weight: 600; color: #e5e7eb; }

.jscene {
  position: relative; padding: 22px; display: flex; flex-direction: column; justify-content: center; gap: 12px; min-height: 420px;
  background: radial-gradient(600px 300px at 80% -10%, rgba(99,102,241,.35), transparent 60%), #0f1222;
}
/* Shared card look */
.jpost, .jchat, .jlead, .jinv, .jflow, .jdoc, .jkpis, .jbars { background: #fff; border-radius: 18px; padding: 16px; color: #111827; }
.jstamp {
  align-self: flex-start; margin-top: 4px; padding: 8px 12px; border-radius: 999px; background: #ecfdf5; color: #047857;
  font-size: .78rem; font-weight: 700; opacity: 0; transform: translateY(6px); transition: all .4s ease .9s;
}
.jstamp-hot { background: #fff7ed; color: #c2410c; }
.jscene.is-on .jstamp { opacity: 1; transform: none; }

/* ---------- Instagram-style post (shared by hero, journey, marketing page) ---------- */
.igpost { background: #fff; border-radius: 16px; border: 1px solid #e5e7eb; overflow: hidden; color: #111827; font-size: .84rem; }
.ig-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.ig-avatar {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; font-size: .8rem; flex: none;
  background: linear-gradient(135deg, #4f46e5, #7c3aed); box-shadow: 0 0 0 2px #fff, 0 0 0 4px #e1306c;
}
.ig-who { min-width: 0; }
.ig-who strong { display: block; font-size: .82rem; letter-spacing: -.01em; line-height: 1.2; }
.ig-who small { display: block; font-size: .7rem; color: #6b7280; }
.ig-more { margin-inline-start: auto; color: #6b7280; letter-spacing: 1px; font-weight: 700; }
.ig-media { position: relative; aspect-ratio: 4 / 3; background: #e5e7eb; overflow: hidden; }
.ig-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-tag {
  position: absolute; inset-inline-start: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 8px 12px; border-radius: 12px;
  background: rgba(15, 18, 34, .74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; display: flex; flex-direction: column; gap: 2px;
}
.ig-tag small { font-size: .6rem; font-weight: 800; letter-spacing: .08em; opacity: .85; }
.ig-tag span { font-weight: 800; font-size: .9rem; line-height: 1.25; letter-spacing: -.01em; }
.ig-tag em { font-style: normal; font-weight: 700; font-size: .8rem; opacity: .95; }
.ig-actions { display: flex; align-items: center; gap: 14px; padding: 10px 12px 4px; }
.ig-actions svg { width: 22px; height: 22px; stroke: #111827; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }
.ig-heart { position: relative; display: inline-grid; }
.ig-liked { position: absolute; inset: 0; opacity: 0; transform: scale(.4); }
.ig-liked svg { fill: #ed4956; stroke: #ed4956; }
.ig-save { margin-inline-start: auto; }
.ig-likes { margin: 0; padding: 0 12px; font-weight: 700; font-size: .8rem; }
.ig-cap { margin: 4px 0 0; padding: 0 12px; font-size: .8rem; line-height: 1.45; color: #111827; }
.ig-cap b { font-weight: 700; }
.ig-tags { color: #00376b; }
.ig-comments { margin: 4px 0 0; padding: 0 12px 10px; color: #6b7280; font-size: .76rem; }
@keyframes iglike { 0% { opacity: 0; transform: scale(.4); } 60% { opacity: 1; transform: scale(1.35); } 100% { opacity: 1; transform: none; } }

.igpost-mini { font-size: .74rem; border-radius: 12px; border: 0; }
.igpost-mini .ig-head { padding: 7px 9px; gap: 7px; }
.igpost-mini .ig-avatar { width: 22px; height: 22px; font-size: .62rem; box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px #e1306c; }
.igpost-mini .ig-who strong { font-size: .7rem; }
.igpost-mini .ig-who small { font-size: .6rem; }
.igpost-mini .ig-more { font-size: .7rem; }
.igpost-mini .ig-media { aspect-ratio: 16 / 10; }
.igpost-mini .ig-tag { inset-inline-start: 8px; bottom: 8px; padding: 5px 8px; border-radius: 8px; gap: 0; }
.igpost-mini .ig-tag small { display: none; }
.igpost-mini .ig-tag span { font-size: .68rem; }
.igpost-mini .ig-tag em { font-size: .64rem; }
.igpost-mini .ig-actions { padding: 6px 9px 2px; gap: 9px; }
.igpost-mini .ig-actions svg { width: 15px; height: 15px; }
.igpost-mini .ig-likes { padding: 0 9px 6px; font-size: .66rem; }

/* products.js (data-step) driven variants */
.js [data-scene] .ig-liked.on { animation: iglike .5s cubic-bezier(.2, 1.4, .5, 1) both; }
.js [data-scene] .jslots.on .is-pick { background: #4f46e5; color: #fff; border-color: #4f46e5; transform: scale(1.06); }
.js [data-scene] .jdoc-photo.on .jscan { animation: jscan 1.4s ease .2s both; }
.js [data-scene] .jitem[data-step].on { opacity: 1; transform: none; }
.msg-file { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: rgba(0, 0, 0, .06); font-weight: 600; font-size: .78rem; margin-bottom: 4px; }
.msg-file svg { width: 14px; height: 14px; }

/* 01 attract */
.javatar { width: 34px; height: 34px; border-radius: 50%; background: #4f46e5; color: #fff; display: grid; place-items: center; font-weight: 800; flex: none; }
.jdraft { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #fff; color: #111827; font-size: .8rem; }
.jdraft p { margin: 0; flex: 1; min-width: 0; line-height: 1.3; }
.jdraft small { display: block; color: #6b7280; font-size: .7rem; }
.jdraft .javatar { width: 30px; height: 30px; font-size: .8rem; }
.jscene-attract .igpost { transform: scale(.94) translateY(8px); opacity: 0; transition: all .6s cubic-bezier(.16, 1, .3, 1) .15s; }
.jscene-attract.is-on .igpost { transform: none; opacity: 1; }
.jscene-attract .ig-media { aspect-ratio: 16 / 11; }
.jscene-attract .ig-comments { display: none; }
.jscene-attract.is-on .ig-liked { animation: iglike .5s cubic-bezier(.2, 1.4, .5, 1) 2.2s both; }
.jscene-attract .jstamp { transition-delay: 2.6s; }
.jchip { padding: 6px 12px; border-radius: 999px; background: #f3f4f6; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.jchip-ok { background: #4f46e5; color: #fff; position: relative; }
.jscene.is-on .jchip-ok { animation: jpress .5s ease 1.1s both; }
.jchip-done { background: #dcfce7; color: #166534; }
@keyframes jpress { 50% { transform: scale(.92); background: #16a34a; } 100% { background: #16a34a; } }

/* 02 engage */
.jchat { display: flex; flex-direction: column; gap: 8px; background: #e9ebf3; }
.jsrc { display: flex; gap: 6px; margin-bottom: 4px; }
.jsrc span { font-size: .7rem; font-weight: 700; padding: 4px 9px; border-radius: 999px; color: #fff; }
.jsrc-wa { background: #25d366; } .jsrc-ig { background: #d62976; } .jsrc-web { background: #4f46e5; }
.jmsg { max-width: 86%; padding: 10px 13px; border-radius: 14px; font-size: .85rem; line-height: 1.4; opacity: 0; transform: translateY(8px); transition: all .4s ease; }
.jmsg-in { align-self: flex-start; background: #fff; border-bottom-left-radius: 4px; }
.jmsg-out { align-self: flex-end; background: #d9fdd3; border-bottom-right-radius: 4px; }
[dir="rtl"] .jmsg-in { align-self: flex-end; } [dir="rtl"] .jmsg-out { align-self: flex-start; }
.jtyping { align-self: flex-end; display: flex; gap: 4px; padding: 10px 14px; background: #fff; border-radius: 14px; opacity: 0; transition: opacity .3s; }
[dir="rtl"] .jtyping { align-self: flex-start; }
.jtyping i { width: 6px; height: 6px; border-radius: 50%; background: #9aa1b1; animation: jb 1s infinite; }
.jtyping i:nth-child(2) { animation-delay: .15s; } .jtyping i:nth-child(3) { animation-delay: .3s; }
@keyframes jb { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.jscene.is-on .jmsg-in { opacity: 1; transform: none; transition-delay: .1s; }
.jscene.is-on .jtyping { animation: jtyp 1.4s ease .5s both; }
@keyframes jtyp { 0% { opacity: 0; } 20%, 80% { opacity: 1; } 100% { opacity: 0; height: 0; padding: 0; margin: 0; } }
.jscene.is-on .jmsg-out { opacity: 1; transform: none; transition-delay: 1.8s; }
.jmeta { font-size: .72rem; color: #6b7280; text-align: center; opacity: 0; transition: opacity .4s ease 2.4s; }
.jscene.is-on .jmeta { opacity: 1; }

/* 03 qualify */
.jlead-title { margin: 0 0 10px; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #4f46e5; }
.jfield { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 10px; background: #f6f7fb; font-size: .85rem; margin-bottom: 6px; opacity: 0; transform: translateX(-10px); transition: all .4s ease; }
[dir="rtl"] .jfield { transform: translateX(10px); }
.jfield span { color: #6b7280; }
.jscene.is-on .jfield { opacity: 1; transform: none; }
.jscene.is-on .jfield:nth-of-type(1) { transition-delay: .15s; } .jscene.is-on .jfield:nth-of-type(2) { transition-delay: .35s; }
.jscene.is-on .jfield:nth-of-type(3) { transition-delay: .55s; } .jscene.is-on .jfield:nth-of-type(4) { transition-delay: .75s; }
.jscore { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; font-size: .82rem; margin-top: 6px; }
.jscore-bar { height: 8px; border-radius: 999px; background: #e5e7eb; overflow: hidden; }
.jscore-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #f59e0b, #16a34a); transition: width 1.2s cubic-bezier(.2,.7,.2,1) .9s; }
.jscene.is-on .jscore-bar i { width: var(--score, 86%); }
.jscore b { font-size: 1.1rem; }

/* 04 match & book */
.jitem { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 12px; border: 1px solid #e5e7eb; margin-bottom: 8px; font-size: .84rem; opacity: 0; transform: translateY(8px); transition: all .4s ease; }
.jitem small { display: block; color: #6b7280; }
.jitem-ref { font-size: .7rem; font-weight: 800; padding: 4px 8px; border-radius: 8px; background: #eef2ff; color: #4338ca; }
.jscene.is-on .jitem:nth-of-type(1) { opacity: 1; transform: none; transition-delay: .15s; }
.jscene.is-on .jitem:nth-of-type(2) { opacity: 1; transform: none; transition-delay: .35s; }
.jcal { margin-top: 8px; padding: 10px; border-radius: 12px; background: #f6f7fb; }
.jcal-head { font-size: .74rem; font-weight: 700; color: #6b7280; margin-bottom: 8px; }
.jslots { display: flex; gap: 6px; }
.jslots span { flex: 1; text-align: center; padding: 8px 0; border-radius: 8px; background: #fff; border: 1px solid #e5e7eb; font-size: .8rem; font-weight: 600; }
.jslots .is-off { opacity: .35; text-decoration: line-through; }
.jslots .is-pick { transition: all .3s ease .9s; }
.jscene.is-on .jslots .is-pick { background: #4f46e5; color: #fff; border-color: #4f46e5; transform: scale(1.06); }

/* 05 act */
.jflow { display: flex; flex-direction: column; gap: 10px; }
.jnode { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; background: #f6f7fb; font-size: .84rem; font-weight: 600; opacity: 0; transform: translateY(8px); transition: all .4s ease; }
.jtick { width: 20px; height: 20px; border-radius: 50%; background: #16a34a; flex: none; position: relative; }
.jtick::after { content: ''; position: absolute; left: 6px; top: 3px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.jtick-wait { background: #f59e0b; } .jtick-wait::after { display: none; }
.jnode-wait { background: #fff7ed; color: #9a3412; }
.jscene.is-on .jnode-a { opacity: 1; transform: none; transition-delay: .1s; }
.jscene.is-on .jnode-b { opacity: 1; transform: none; transition-delay: .5s; }
.jscene.is-on .jnode-c { opacity: 1; transform: none; transition-delay: .9s; }
.jscene.is-on .jnode-d { opacity: 1; transform: none; transition-delay: 1.3s; }

/* 06 record */
.jdoc-photo { position: relative; height: 120px; border-radius: 12px; background: repeating-linear-gradient(0deg, #f3f4f6 0 10px, #fff 10px 20px); border: 1px solid #e5e7eb; display: grid; place-items: center; font-size: .75rem; color: #6b7280; overflow: hidden; margin-bottom: 10px; }
.jscan { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: #4f46e5; box-shadow: 0 0 18px #4f46e5; opacity: 0; }
.jscene.is-on .jscan { animation: jscan 1.4s ease .2s both; }
@keyframes jscan { 0% { top: 0; opacity: 1; } 90% { top: 100%; opacity: 1; } 100% { opacity: 0; } }
.jdoc-fields .jfield { transform: translateY(6px); }
.jscene.is-on .jdoc-fields .jfield:nth-of-type(1) { transition-delay: 1.4s; } .jscene.is-on .jdoc-fields .jfield:nth-of-type(2) { transition-delay: 1.6s; }
.jscene.is-on .jdoc-fields .jfield:nth-of-type(3) { transition-delay: 1.8s; } .jscene.is-on .jdoc-fields .jfield:nth-of-type(4) { transition-delay: 2s; }
.jscene-record .jstamp { transition-delay: 2.4s; }

/* 07 learn */
.jkpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.jkpi { padding: 12px; border-radius: 12px; background: #f6f7fb; }
.jkpi span { display: block; font-size: .72rem; color: #6b7280; font-weight: 600; }
.jkpi b { font-size: 1.4rem; letter-spacing: -.02em; }
.jkpi-good b { color: #047857; }
.jbars { display: flex; flex-direction: column; gap: 8px; }
.jbarrow { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 10px; font-size: .78rem; color: #374151; }
.jbarfill { height: 10px; border-radius: 999px; background: linear-gradient(90deg, #4f46e5, #a78bfa); width: 0; transition: width 1.1s cubic-bezier(.2,.7,.2,1) .4s; }
.jscene.is-on .jbarfill { width: var(--w); }

/* progress rail */
/* copy column */
.jcopy { position: relative; padding-inline-start: 64px; }
[dir="rtl"] .jcopy { padding-inline-start: 64px; }
.jstep-n { position: absolute; inset-inline-start: 0; top: 0; font-weight: 800; font-size: 1.05rem; color: #4f46e5; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #eef2ff; }
.jstep-who { margin: 0 0 6px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #6b7280; }
.jcopy h3 { margin: 0 0 10px; font-size: clamp(1.4rem, 2.2vw, 1.9rem); letter-spacing: -.02em; }
.jcopy p { margin: 0; color: #4b5563; font-size: 1.02rem; line-height: 1.6; max-width: 52ch; }
.jtags { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.jtags li { font-size: .78rem; font-weight: 600; padding: 6px 11px; border-radius: 999px; background: #fff; border: 1px solid #e5e7eb; color: #374151; }

.journey-cta { text-align: center; margin-top: 72px; }
.journey-cta p { margin: 12px 0 0; color: #6b7280; font-size: .92rem; }

/* hero full-cycle scene (sales-page style: chat + workflow card) */
.hero-visual-cycle { padding: 0 0 16px; }
.hero-visual-cycle .duo-scene { grid-template-columns: 1.05fr .95fr; gap: 14px; }
.cycle-card { padding: 12px 12px 12px; }
.cycle-post { border: 1px solid #e5e7eb; border-radius: 14px; overflow: hidden; margin-bottom: 10px; background: #fff; }
.cycle-post-meta { margin: 0; padding: 0 9px 8px; font-size: .68rem; color: #6b7280; line-height: 1.35; }
.cycle-post-meta b { color: #111827; }

/* product-page scenes that reuse journey pieces */
.mkt-scene { grid-template-columns: 1.08fr .92fr; }
.mkt-left { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* The hero column is ~220px wide: avatar + text on one row, action chips on the next, or the text ends up one word per line. */
.mkt-left .jdraft { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; column-gap: 10px; row-gap: 8px; border: 1px solid rgba(15, 23, 42, .08); box-shadow: 0 10px 30px -18px rgba(15, 23, 42, .3); }
.mkt-left .jdraft p { grid-column: 2; }
.mkt-left .jdraft .jchips { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.mkt-left .igpost { box-shadow: 0 24px 50px -24px rgba(15, 23, 42, .35); }
.mkt-left .ig-media { aspect-ratio: 16 / 11; }
.mkt-left .ig-comments { display: none; }
.mkt-left .side-row { margin: 0; }
.mkt-plan .lead-field { flex-direction: column; align-items: stretch; gap: 3px; }
.mkt-plan .lead-field dt { flex: none; }
.mkt-plan .lead-field dd { text-align: start; font-size: .8rem; min-width: 0; overflow-wrap: anywhere; }
.booking-card .jcal { margin: 0 0 10px; }
.booking-card .side-row, .acct-card .side-row { margin-top: 8px; }
.acct-card .jdoc-photo { height: 96px; }
.acct-card .lead-fields { margin-top: 4px; }
@media (max-width: 1080px) { .mkt-scene { grid-template-columns: 1fr; } }

/* industry switcher (hero + journey head) */
.industry-switch { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 16px; }
.industry-switch > span { font-size: .78rem; color: #6b7280; margin-inline-end: 4px; }
.industry-switch a {
  font-size: .78rem; font-weight: 600; padding: 6px 11px; border-radius: 999px; border: 1px solid #e5e7eb; background: #fff; color: #374151;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.industry-switch a:hover { border-color: #c7ceda; color: #111827; transform: translateY(-1px); }
.industry-switch a.is-active { background: #111827; color: #fff; border-color: #111827; }
.journey .industry-switch { justify-content: center; margin: 20px auto 0; }
.hero-home .hero-inner { align-items: start; }
.hero-home .hero-visual { padding-top: 0; }
.cycle-title { margin-bottom: 8px; }
.cycle-score .lead-score-head span:first-child { font-size: .76rem; color: #374151; font-weight: 600; }
.cycle-card .side-row { margin-top: 8px; padding: 8px 10px; font-size: .78rem; }
.cycle-kpi { margin: 10px 0 0; font-size: .72rem; color: #6b7280; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cycle-kpi b { background: #eef2ff; color: #4338ca; border-radius: 999px; padding: 3px 8px; font-weight: 700; }

@media (max-width: 980px) {
  .journey { padding-top: 64px; }
  .journey-rows { gap: 56px; }
  .jrow { grid-template-columns: 1fr; gap: 24px; }
  .jrow:nth-child(even) .jcopy { order: 1; } .jrow:nth-child(even) .jstage { order: 2; }
  .jscene { padding: 14px; gap: 8px; min-height: 360px; }
  .hero-visual-cycle .duo-scene { grid-template-columns: 1fr; }
  .hero-home .hero-visual .industry-switch { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .jscene, .jmsg, .jfield, .jitem, .jnode, .jstamp, .igpost, .jscore-bar i, .jbarfill { transition: none !important; animation: none !important; }
  .ig-liked { opacity: 1; transform: none; }
}