/* ==========================================================================
   GPT Software - shared ERP case-study page design
   Used by every erp-*.html page (except erp-services.html).
   Sections: hero, stats, video, modules, workflow, access table, screens, CTA
   Animations are driven by js/erp-pages.js and disabled for reduced-motion.
   ========================================================================== */

:root {
  --kk-navy: #0a3d4a;
  --kk-teal: #0a5765;
  --kk-cyan: #37B6C7;
  --kk-blue: #455DA7;
  --kk-ink: #16323a;
  --kk-mut: #4b6670;
  --kk-line: #d8eaee;
  --kk-soft: #f1f8fa;
  --kk-grad: linear-gradient(90deg, #455DA7, #37B6C7);
  --kk-ease: cubic-bezier(.22, .8, .24, 1);
}

.kk-section { background: #fff; padding: 0; overflow: hidden; font-family: 'Nunito Sans', sans-serif; color: var(--kk-ink) }
.kk-section h2, .kk-section h3, .kk-section h4 { font-family: 'Montserrat', sans-serif }
.kk-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px }

/* ---------- scroll progress ---------- */
.kk-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 100001; background: var(--kk-grad); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none }

/* ---------- shared headings ---------- */
.kk-eyebrow { display: inline-block; color: var(--kk-cyan); font-weight: 800; letter-spacing: 2.5px; font-size: 13px; text-transform: uppercase; margin-bottom: 10px; position: relative; padding-left: 34px }
.kk-eyebrow:before { content: ""; position: absolute; left: 0; top: 50%; width: 24px; height: 2px; background: var(--kk-grad); transform: translateY(-50%) }
.kk-head .kk-eyebrow { padding-left: 0; padding-bottom: 12px }
.kk-head .kk-eyebrow:before { left: 50%; top: auto; bottom: 0; width: 36px; transform: translateX(-50%) }
.kk-h2 { color: var(--kk-teal); font-size: 34px; font-weight: 800; line-height: 1.25; margin: 0 0 14px }
.kk-lead { color: var(--kk-mut); font-size: 16.5px; line-height: 1.75; margin: 0 }
.kk-head { text-align: center; max-width: 760px; margin: 0 auto 48px }

/* ---------- hero ---------- */
.kk-hero { background: linear-gradient(135deg, #f1f8fa 0%, #e4f2f6 55%, #eef0fa 100%); padding: 84px 0 104px; position: relative; overflow: hidden }
.kk-hero:after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(10, 87, 101, .09) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%); mask-image: linear-gradient(180deg, #000, transparent 80%); pointer-events: none }
.kk-blob { position: absolute; border-radius: 50%; filter: blur(8px); pointer-events: none; z-index: 0 }
.kk-blob.b1 { width: 420px; height: 420px; right: -120px; top: -120px; background: radial-gradient(circle, rgba(55, 182, 199, .30), transparent 70%); animation: kkDrift 14s ease-in-out infinite }
.kk-blob.b2 { width: 360px; height: 360px; left: -140px; bottom: -160px; background: radial-gradient(circle, rgba(69, 93, 167, .24), transparent 70%); animation: kkDrift 18s ease-in-out infinite reverse }
@keyframes kkDrift { 0%, 100% { transform: translate(0, 0) scale(1) } 50% { transform: translate(-40px, 30px) scale(1.12) } }
.kk-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; position: relative; z-index: 1 }
.kk-hero h2 { font-size: 40px; font-weight: 800; line-height: 1.18; color: var(--kk-navy); margin: 0 0 18px }
.kk-hero h2 span { background: linear-gradient(90deg, var(--kk-blue), var(--kk-cyan), var(--kk-blue)); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: kkShine 6s linear infinite }
@keyframes kkShine { to { background-position: 200% center } }
.kk-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 30px }
.kk-chips span { background: #fff; border: 1px solid var(--kk-line); color: var(--kk-teal); font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: 30px; box-shadow: 0 4px 12px rgba(10, 87, 101, .06); transition: transform .25s, box-shadow .25s, border-color .25s }
.kk-chips span:hover { transform: translateY(-3px); border-color: var(--kk-cyan); box-shadow: 0 10px 20px rgba(55, 182, 199, .22) }
.kk-chips i { color: var(--kk-cyan); margin-right: 6px }
.kk-btns { display: flex; flex-wrap: wrap; gap: 14px }

/* ---------- buttons ---------- */
.kk-btn { display: inline-flex; align-items: center; gap: 9px; padding: 14px 26px; border-radius: 40px; font-weight: 800; font-size: 15px; text-decoration: none !important; transition: transform .25s, box-shadow .25s, background .25s, color .25s; cursor: pointer; border: 0; position: relative; overflow: hidden }
.kk-btn:hover { transform: translateY(-3px) }
.kk-btn.pri { background: var(--kk-grad); color: #fff; box-shadow: 0 10px 24px rgba(69, 93, 167, .35) }
.kk-btn.pri:hover { box-shadow: 0 16px 30px rgba(69, 93, 167, .45); color: #fff }
.kk-btn.pri:after { content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-20deg); transition: left .6s }
.kk-btn.pri:hover:after { left: 130% }
.kk-btn.sec { background: #fff; color: var(--kk-teal); border: 2px solid var(--kk-teal) }
.kk-btn.sec:hover { background: var(--kk-teal); color: #fff }

/* ---------- browser frame ---------- */
.kk-frame { background: #fff; border-radius: 16px; box-shadow: 0 30px 60px rgba(10, 61, 74, .28); overflow: hidden; border: 1px solid rgba(10, 87, 101, .15) }
.kk-bar { display: flex; align-items: center; gap: 7px; background: #e9f1f4; padding: 11px 14px }
.kk-bar b { width: 11px; height: 11px; border-radius: 50%; display: block }
.kk-bar b:nth-child(1) { background: #ff6058 }
.kk-bar b:nth-child(2) { background: #ffbd2e }
.kk-bar b:nth-child(3) { background: #28c941 }
.kk-bar em { margin-left: 10px; flex: 1; background: #fff; border-radius: 20px; font-style: normal; font-size: 12px; color: #7a959c; padding: 4px 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.kk-frame img, .kk-frame video { display: block; width: 100%; height: auto; background: #0b1c24 }
.kk-hero-shot { position: relative; animation: kkFloat 7s ease-in-out infinite; transform-style: preserve-3d }
@keyframes kkFloat { 0%, 100% { translate: 0 0 } 50% { translate: 0 -12px } }
.kk-hero .kk-frame { transform: perspective(1400px) rotateY(calc(-6deg + var(--kk-ry, 0deg))) rotateX(calc(2deg + var(--kk-rx, 0deg))); transition: transform .35s var(--kk-ease) }
.kk-hero .kk-frame:hover { --kk-ry: 0deg }

/* ---------- stats ---------- */
.kk-stats { margin-top: -50px; position: relative; z-index: 2 }
.kk-stats-in { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border-radius: 18px; box-shadow: 0 18px 44px rgba(10, 87, 101, .15); border: 1px solid var(--kk-line); overflow: hidden }
.kk-stat { padding: 28px 16px; text-align: center; border-right: 1px solid var(--kk-line); position: relative; transition: background .3s }
.kk-stat:last-child { border-right: 0 }
.kk-stat:before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--kk-grad); transform: scaleX(0); transition: transform .4s var(--kk-ease) }
.kk-stat:hover { background: var(--kk-soft) }
.kk-stat:hover:before { transform: scaleX(1) }
.kk-stat i { font-size: 26px; color: var(--kk-cyan); margin-bottom: 8px; display: block; transition: transform .4s var(--kk-ease) }
.kk-stat:hover i { transform: scale(1.2) rotate(-6deg) }
.kk-stat b { display: block; color: var(--kk-teal); font-size: 20px; font-weight: 800 }
.kk-stat span { color: var(--kk-mut); font-size: 12px; letter-spacing: 1px; font-weight: 700 }

/* ---------- video ---------- */
.kk-video { background: linear-gradient(160deg, #07303a 0%, #0a4856 55%, #233a78 100%); padding: 100px 0 96px; margin-top: 80px; position: relative; color: #fff; overflow: hidden }
.kk-video:before { content: ""; position: absolute; width: 520px; height: 520px; right: -160px; top: -200px; border-radius: 50%; background: radial-gradient(circle, rgba(55, 182, 199, .22), transparent 70%); animation: kkDrift 16s ease-in-out infinite }
.kk-video .kk-wrap { position: relative }
.kk-video .kk-h2 { color: #fff }
.kk-video .kk-lead { color: #bfe3ea }
.kk-video .kk-eyebrow { color: #7fd8e8 }
.kk-v-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 44px; align-items: center }
.kk-vplayer { position: relative; border-radius: 16px; box-shadow: 0 34px 70px rgba(0, 0, 0, .45) }
.kk-vplayer .kk-frame { border: 1px solid rgba(255, 255, 255, .18) }
.kk-vplay { position: absolute; left: 50%; top: calc(50% + 18px); transform: translate(-50%, -50%); width: 92px; height: 92px; border-radius: 50%; border: 0; cursor: pointer; background: var(--kk-grad); color: #fff; font-size: 34px; display: flex; align-items: center; justify-content: center; animation: kkPulse 2.2s infinite; transition: transform .25s }
.kk-vplay:hover { transform: translate(-50%, -50%) scale(1.1) }
.kk-vplay i { margin-left: 6px }
.kk-vplayer.playing .kk-vplay { display: none }
.kk-vplayer.novideo .kk-vplay { display: none }
.kk-vsoon { display: none; position: absolute; left: 0; right: 0; bottom: 0; padding: 14px; text-align: center; font-weight: 800; font-size: 14px; color: #fff; background: linear-gradient(0deg, rgba(7, 48, 58, .92), rgba(7, 48, 58, 0)) }
.kk-vplayer.novideo .kk-vsoon { display: block }
.kk-vplayer.novideo video { pointer-events: none }
@keyframes kkPulse { 0% { box-shadow: 0 0 0 0 rgba(55, 182, 199, .55) } 70% { box-shadow: 0 0 0 26px rgba(55, 182, 199, 0) } 100% { box-shadow: 0 0 0 0 rgba(55, 182, 199, 0) } }
.kk-vbadge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); padding: 7px 16px; border-radius: 30px; font-size: 13px; font-weight: 700; margin-bottom: 18px }
.kk-vbadge i { color: #7fd8e8 }
.kk-vlist { list-style: none; margin: 24px 0 0; padding: 0 }
.kk-vlist li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; color: #e4f4f8; font-size: 15px; line-height: 1.5 }
.kk-vlist i { flex: 0 0 28px; height: 28px; border-radius: 50%; background: rgba(127, 216, 232, .18); color: #7fd8e8; display: flex; align-items: center; justify-content: center; font-size: 13px; margin-top: 1px }

/* ---------- blocks ---------- */
.kk-block { padding: 90px 0 20px }
.kk-block.alt { background: var(--kk-soft); padding: 90px 0; margin-top: 70px }

/* ---------- overview cards ---------- */
.kk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px }
.kk-card2 { background: #fff; border: 1px solid var(--kk-line); border-radius: 16px; padding: 26px 22px; box-shadow: 0 8px 24px rgba(10, 87, 101, .06); transition: transform .3s var(--kk-ease), box-shadow .3s, border-color .3s; position: relative; overflow: hidden }
.kk-card2:before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--kk-grad); transform: scaleY(0); transform-origin: top; transition: transform .35s var(--kk-ease) }
.kk-card2:hover { transform: translateY(-6px); box-shadow: 0 16px 34px rgba(10, 87, 101, .14); border-color: var(--kk-cyan) }
.kk-card2:hover:before { transform: scaleY(1) }
.kk-card2 .kk-mic { display: flex; width: 48px; margin-bottom: 14px }
.kk-card2:hover .kk-mic { transform: rotate(-8deg) scale(1.08) }
.kk-card2 h4 { color: var(--kk-teal); font-size: 18px; font-weight: 800; margin: 0 0 8px }
.kk-card2 p { color: var(--kk-mut); font-size: 14.5px; line-height: 1.7; margin: 0 }
.kk-mic { flex: 0 0 48px; height: 48px; border-radius: 12px; background: var(--kk-grad); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; transition: transform .35s var(--kk-ease) }

/* ---------- module accordion ---------- */
.kk-subhead { text-align: center; margin: 60px 0 26px }
.kk-subhead h3 { color: var(--kk-teal); font-size: 26px; font-weight: 800; margin: 0 0 8px }
.kk-subhead p { color: var(--kk-mut); margin: 0; font-size: 15.5px }
.kk-mods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; align-items: start }
.kk-mod { background: #fff; border: 1px solid var(--kk-line); border-radius: 14px; box-shadow: 0 6px 20px rgba(10, 87, 101, .06); transition: box-shadow .3s, border-color .3s, transform .3s }
.kk-mod:hover { transform: translateY(-3px) }
.kk-mod:hover, .kk-mod[open] { border-color: var(--kk-cyan); box-shadow: 0 14px 30px rgba(55, 182, 199, .2) }
.kk-mod summary { list-style: none; cursor: pointer; display: flex; gap: 14px; padding: 16px 18px; align-items: flex-start }
.kk-mod summary::-webkit-details-marker { display: none }
.kk-mod summary:focus-visible { outline: 2px solid var(--kk-cyan); outline-offset: -2px; border-radius: 14px }
.kk-mod:hover .kk-mic { transform: scale(1.08) rotate(-6deg) }
.kk-mt { flex: 1 }
.kk-mt b { display: block; color: var(--kk-teal); font-size: 17px }
.kk-mt em { display: inline-block; font-style: normal; font-size: 11px; font-weight: 800; color: var(--kk-cyan); letter-spacing: .6px; text-transform: uppercase; margin: 2px 0 4px }
.kk-mt small { display: block; color: #5a6b70; font-size: 13.5px; line-height: 1.5 }
.kk-mod summary:after { content: "+"; color: var(--kk-cyan); font-size: 26px; font-weight: 700; line-height: 1; transition: transform .3s var(--kk-ease) }
.kk-mod[open] summary:after { content: "\2212"; transform: rotate(180deg) }
.kk-mod > ol, .kk-mod > .kk-mimg { animation: kkOpen .45s var(--kk-ease) both }
@keyframes kkOpen { from { opacity: 0; transform: translateY(-8px) } to { opacity: 1; transform: none } }
.kk-mod ol { list-style: decimal; margin: 0; padding: 4px 20px 18px 56px; color: #44585e; font-size: 14px; line-height: 1.6; border-top: 1px dashed var(--kk-line) }
.kk-mod li { margin-top: 8px; list-style: decimal; display: list-item }
.kk-mod .kk-mimg { margin: 0 18px 12px; border: 0; padding: 0; box-shadow: none; cursor: zoom-in; background: none; display: block; width: auto }
.kk-mod .kk-mimg:hover { transform: none; box-shadow: none }
.kk-mod .kk-mimg img { width: 100%; height: auto; display: block; border-radius: 10px; border: 1px solid var(--kk-line); transition: transform .4s var(--kk-ease), box-shadow .4s }
.kk-mod .kk-mimg:hover img { transform: scale(1.02); box-shadow: 0 10px 24px rgba(10, 87, 101, .18) }
.kk-mod .kk-mimg figcaption { font-size: 12px; color: #7a959c; text-align: center; padding: 6px 0 0 }

/* ---------- workflow ---------- */
.kk-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 22px; counter-reset: s; position: relative }
.kk-step { background: #fff; border: 1px solid var(--kk-line); border-radius: 16px; padding: 34px 18px 22px; text-align: center; position: relative; transition: transform .3s var(--kk-ease), box-shadow .3s, border-color .3s }
.kk-step:hover { transform: translateY(-6px); border-color: var(--kk-cyan); box-shadow: 0 14px 30px rgba(55, 182, 199, .22) }
.kk-step span { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); width: 42px; height: 42px; border-radius: 50%; background: var(--kk-grad); color: #fff; font-weight: 800; font-size: 18px; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px rgba(69, 93, 167, .35); transition: transform .35s var(--kk-ease) }
.kk-step:hover span { transform: translateX(-50%) scale(1.15) }
.kk-step p { margin: 0; color: var(--kk-teal); font-weight: 800; font-size: 15px; line-height: 1.4 }
.kk-step:after { content: "\f105"; font-family: FontAwesome; position: absolute; right: -17px; top: 50%; margin-top: -10px; color: var(--kk-cyan); font-size: 22px; line-height: 1; z-index: 1 }
.kk-step:nth-child(4n):after, .kk-step:last-child:after { display: none }

@media (min-width: 992px) {
  .kk-steps[data-n="3"] { grid-template-columns: repeat(3, 1fr) }
  .kk-steps[data-n="5"] { grid-template-columns: repeat(5, 1fr) }
  .kk-steps[data-n="6"] { grid-template-columns: repeat(6, 1fr); gap: 34px 18px }
  .kk-steps[data-n="3"] .kk-step:nth-child(4n):after, .kk-steps[data-n="5"] .kk-step:nth-child(4n):after, .kk-steps[data-n="6"] .kk-step:nth-child(4n):after { display: block }
  .kk-steps[data-n="3"] .kk-step:last-child:after, .kk-steps[data-n="5"] .kk-step:last-child:after, .kk-steps[data-n="6"] .kk-step:last-child:after { display: none }
  .kk-steps[data-n="6"] .kk-step { padding-left: 12px; padding-right: 12px }
  .kk-steps[data-n="6"] .kk-step p { font-size: 14px }
}

/* ---------- access table ---------- */
.kk-tw { overflow-x: auto; border-radius: 14px; border: 1px solid var(--kk-line); box-shadow: 0 8px 24px rgba(10, 87, 101, .07); background: #fff }
.kk-acc { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 0 }
.kk-acc th { background: linear-gradient(90deg, var(--kk-teal), #12768a); color: #fff; text-align: left; padding: 14px 16px; font-weight: 700 }
.kk-acc td { padding: 14px 16px; border-top: 1px solid #e6eff2; color: #44585e; vertical-align: top; transition: background .2s }
.kk-acc tr:nth-child(even) td { background: #f7fbfc }
.kk-acc tr:hover td { background: #eaf6f9 }
.kk-acc td b { color: var(--kk-teal) }

/* ---------- screens ---------- */
.kk-shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px }
.kk-shot { margin: 0; background: #fff; border: 1px solid var(--kk-line); border-radius: 14px; overflow: hidden; cursor: zoom-in; transition: transform .3s var(--kk-ease), box-shadow .3s, border-color .3s; position: relative }
.kk-shot:hover { transform: translateY(-6px); border-color: var(--kk-cyan); box-shadow: 0 14px 30px rgba(55, 182, 199, .22) }
.kk-shots .kk-shot:after { content: "\f00e"; font-family: FontAwesome; position: absolute; right: 14px; top: 14px; width: 38px; height: 38px; border-radius: 50%; background: rgba(10, 61, 74, .78); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; opacity: 0; transform: scale(.7); transition: opacity .3s, transform .3s }
.kk-shots .kk-shot:hover:after { opacity: 1; transform: none }
.kk-shot img { display: block; width: 100%; height: auto; border-bottom: 1px solid #e3edf0; transition: transform .5s var(--kk-ease) }
.kk-shots .kk-shot { overflow: hidden }
.kk-shots .kk-shot:hover img { transform: scale(1.03) }
.kk-shot figcaption { padding: 14px 18px; background: #fff; position: relative; z-index: 1 }
.kk-shot figcaption b { display: block; color: var(--kk-teal); font-size: 17px }
.kk-shot figcaption span { color: var(--kk-mut); font-size: 14px }

/* ---------- CTA ---------- */
.kk-cta { margin: 90px 0 0; background: linear-gradient(120deg, #455DA7, #37B6C7, #455DA7); background-size: 220% 100%; animation: kkGrad 12s ease-in-out infinite; padding: 74px 20px; text-align: center; color: #fff; position: relative; overflow: hidden }
@keyframes kkGrad { 0%, 100% { background-position: 0 50% } 50% { background-position: 100% 50% } }
.kk-cta:before, .kk-cta:after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .08); pointer-events: none }
.kk-cta:before { width: 320px; height: 320px; left: -90px; top: -150px }
.kk-cta:after { width: 240px; height: 240px; right: -60px; bottom: -120px }
.kk-cta > * { position: relative; z-index: 1 }
.kk-cta h3 { color: #fff; font-size: 32px; font-weight: 800; margin: 0 0 10px }
.kk-cta p { color: #e9f7fa; font-size: 17px; margin: 0 0 28px }
.kk-cta .kk-btns { justify-content: center; align-items: center }
.kk-cta .kk-btn.pri { background: #fff; color: var(--kk-teal); box-shadow: 0 10px 24px rgba(0, 0, 0, .2) }
.kk-cta .kk-btn.pri:after { display: none }
.kk-cta .back { color: #fff; font-weight: 700; text-decoration: underline }

/* ---------- lightbox ---------- */
.kk-lb { position: fixed; inset: 0; background: rgba(5, 25, 30, .9); z-index: 100000; display: none; align-items: center; justify-content: center; padding: 56px 20px 70px; cursor: zoom-out }
.kk-lb.on { display: flex; animation: kkFade .25s ease both }
@keyframes kkFade { from { opacity: 0 } to { opacity: 1 } }
.kk-lb img { max-width: 100%; max-height: 100%; border-radius: 10px; background: #fff; animation: kkZoom .35s var(--kk-ease) both; box-shadow: 0 30px 80px rgba(0, 0, 0, .5) }
@keyframes kkZoom { from { opacity: 0; transform: scale(.94) } to { opacity: 1; transform: none } }
.kk-lb button { position: absolute; background: rgba(255, 255, 255, .12); border: none; color: #fff; cursor: pointer; width: 46px; height: 46px; border-radius: 50%; font-size: 26px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background .2s }
.kk-lb button:hover { background: rgba(255, 255, 255, .28) }
.kk-lb .x { top: 14px; right: 18px }
.kk-lb .pv, .kk-lb .nx { top: 50%; margin-top: -23px }
.kk-lb .pv { left: 14px }
.kk-lb .nx { right: 14px }
.kk-lb .ct { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; color: #cfe8ee; font-size: 14px; font-weight: 700 }

/* ---------- scroll reveal (only when JS is running) ---------- */
.kk-js .kk-rv { opacity: 0; transform: translateY(34px); transition: opacity .8s var(--kk-ease), transform .8s var(--kk-ease); transition-delay: calc(var(--kk-i, 0) * 90ms) }
.kk-js .kk-rv.kk-l { transform: translateX(-40px) }
.kk-js .kk-rv.kk-r { transform: translateX(40px) }
.kk-js .kk-rv.kk-z { transform: scale(.94) }
.kk-js .kk-rv.kk-in { opacity: 1; transform: none }
/* hover transitions must win over reveal transition once shown */
.kk-js .kk-rv.kk-in.kk-done { transition-delay: 0s; transition: transform .3s var(--kk-ease), box-shadow .3s, border-color .3s, background .3s, opacity .3s }
.kk-js .kk-step.kk-rv span { transform: translateX(-50%) scale(.3); transition: transform .6s var(--kk-ease) .25s }
.kk-js .kk-step.kk-rv.kk-in span { transform: translateX(-50%) scale(1) }
.kk-js .kk-step.kk-rv.kk-in.kk-done:hover span { transform: translateX(-50%) scale(1.15) }
/* hero entrance */
.kk-js .kk-hero .kk-pop { opacity: 0; transform: translateY(24px); animation: kkPop .8s var(--kk-ease) forwards; animation-delay: calc(var(--kk-i, 0) * 110ms + 120ms) }
@keyframes kkPop { to { opacity: 1; transform: none } }

/* ---------- responsive ---------- */
@media (max-width: 991px) {
  .kk-hero-grid, .kk-v-grid { grid-template-columns: 1fr }
  .kk-hero .kk-frame { transform: none }
  .kk-hero h2 { font-size: 32px }
  .kk-h2 { font-size: 28px }
  .kk-stats-in { grid-template-columns: repeat(2, 1fr) }
  .kk-stat:nth-child(2) { border-right: 0 }
  .kk-stat:nth-child(-n+2) { border-bottom: 1px solid var(--kk-line) }
  .kk-steps { grid-template-columns: repeat(2, 1fr); row-gap: 34px }
  .kk-step:after { display: none }
}
@media (max-width: 767px) {
  .kk-mods, .kk-shots { grid-template-columns: 1fr }
  .kk-hero { padding: 60px 0 84px }
  .kk-hero h2 { font-size: 28px }
  .kk-video { padding: 70px 0 }
  .kk-block { padding-top: 60px }
  .kk-block.alt { padding: 60px 0 }
  .kk-vplay { width: 70px; height: 70px; font-size: 26px }
  .kk-cta h3 { font-size: 26px }
  .kk-lb .pv, .kk-lb .nx { top: auto; bottom: 12px; margin-top: 0 }
}
@media (max-width: 480px) {
  .kk-steps, .kk-stats-in { grid-template-columns: 1fr }
  .kk-stat { border-right: 0; border-bottom: 1px solid var(--kk-line) }
  .kk-stat:last-child { border-bottom: 0 }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .kk-section *, .kk-section *:before, .kk-section *:after, .kk-lb, .kk-lb * { animation: none !important; transition: none !important }
  .kk-js .kk-rv, .kk-js .kk-hero .kk-pop { opacity: 1 !important; transform: none !important }
  .kk-progress { display: none }
}