/* KLICKNETICS 1.4.0 - Service pages: light 3D design system. Scoped to .ksp (service pages only). */

.ksp{
  --bg:#FFFFFF;--soft:#F6F7FC;--blue-surface:#EEF0FB;--text:#0A0A2E;--text-2:#555A7A;
  --blue:#000080;--blue-d:#00005C;--cyan:#3949D6;--cyan-l:#E6E8FA;--border:#D8DBF0;--card:#FFFFFF;
  --shadow-s:0 1px 2px rgba(10,10,46,.05),0 8px 22px -12px rgba(10,10,46,.18);
  --shadow-m:0 2px 4px rgba(10,10,46,.05),0 22px 44px -20px rgba(0,0,128,.32);
  /* re-point the dark inner-page tokens so shared rules resolve to the light palette here */
  --kn-text-primary:#0A0A2E;--kn-text-secondary:#555A7A;--kn-text-muted:#555A7A;--kn-cyan-accent:#0369A1;
  --kn-border-glass:#D8DBF0;--kn-border-subtle:#E4E6F5;
  background:var(--bg);color:var(--text);color-scheme:light;position:relative;overflow-x:clip;
}
.ksp *,.ksp *::before,.ksp *::after{box-sizing:border-box}
.ksp h1,.ksp h2,.ksp h3,.ksp strong{color:var(--text)}
.ksp p{color:var(--text-2)}
.ksp a{color:inherit}
.ksp :focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
.ksp-wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 24px}
.ksp-narrow{max-width:920px}
.ksp-center{text-align:center;margin-top:36px}
.ksp-eyebrow{display:inline-flex;align-items:center;gap:8px;font:600 .78rem/1.2 var(--font-mono,monospace);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-d)}
.ksp-eyebrow::before{content:"";width:26px;height:2px;background:linear-gradient(90deg,var(--blue),var(--cyan));border-radius:2px}
.ksp .button{background:var(--blue);color:#fff;border:1px solid var(--blue);box-shadow:0 10px 24px -12px rgba(0,0,128,.7);border-radius:10px}
.ksp .button:hover{background:var(--blue-d);border-color:var(--blue-d);color:#fff;transform:translateY(-2px)}
.ksp .button-outline{background:#fff;color:var(--blue-d);border:1px solid #C5CAEE;box-shadow:none}
.ksp .button-outline:hover{background:var(--blue-surface);color:var(--blue-d);border-color:var(--blue)}

/* ───── Hero ───── */
.ksp-hero{position:relative;padding:34px 0 64px;background:
  radial-gradient(900px 420px at 88% -10%,rgba(57,73,214,.16),transparent 60%),
  radial-gradient(700px 380px at -5% 30%,rgba(0,0,128,.10),transparent 60%),
  linear-gradient(180deg,#EEF0FB 0%,#fff 100%);overflow:hidden}
.ksp-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(#D8DBF0 1px,transparent 1px),linear-gradient(90deg,#D8DBF0 1px,transparent 1px);background-size:56px 56px;opacity:.45;mask-image:radial-gradient(ellipse at 70% 40%,#000 0,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at 70% 40%,#000 0,transparent 70%);pointer-events:none}
.ksp-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:40px;align-items:center}
.ksp-breadcrumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.85rem;color:var(--text-2);margin-bottom:34px}
.ksp-breadcrumbs a{color:var(--blue-d);text-decoration:none;font-weight:500}
.ksp-breadcrumbs a:hover{text-decoration:underline}
.ksp-hero h1{font-size:clamp(2.1rem,4.4vw,3.6rem);line-height:1.06;letter-spacing:-.035em;margin:16px 0 18px;color:var(--text)}
.ksp-lead{font-size:clamp(1.02rem,1.5vw,1.2rem);line-height:1.65;max-width:56ch;margin:0 0 30px}
.ksp-actions{display:flex;flex-wrap:wrap;gap:12px}
.ksp-actions .button{min-height:48px}

/* ───── 3D scenes (decorative) ───── */
.ksp-scene{position:relative;height:calc(440px*var(--s,1));perspective:1400px;--s:1;min-width:0}
.ksp-stage{position:absolute;left:50%;top:50%;width:520px;height:440px;transform-style:preserve-3d;
  transform:translate(-50%,-50%) scale(var(--s)) rotateX(calc(var(--my,0)*-5deg)) rotateY(calc(var(--mx,0)*7deg));transition:transform .25s ease-out;will-change:transform}
.ksp-stage>*{position:absolute}
.ksp-scene [class*="ksp-"]{box-sizing:border-box}
.ksp-scene small{display:block;font:600 9.5px/1.2 var(--font-mono,monospace);letter-spacing:.1em;text-transform:uppercase;color:#3F4575}
.ksp-scene b{display:block;color:var(--text);font-size:12.5px;line-height:1.25;font-weight:700}
.ksp-bars{display:flex;align-items:flex-end;gap:5px;height:34px}
.ksp-bars i{display:block;flex:1;min-width:6px;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--cyan),var(--blue));transform-origin:bottom;animation:ksp-bar 3.2s ease-in-out infinite}
.ksp-bars i:nth-child(1){height:45%}.ksp-bars i:nth-child(2){height:75%;animation-delay:-.6s}.ksp-bars i:nth-child(3){height:55%;animation-delay:-1.2s}.ksp-bars i:nth-child(4){height:95%;animation-delay:-1.8s}.ksp-bars i:nth-child(5){height:65%;animation-delay:-2.4s}.ksp-bars i:nth-child(6){height:85%;animation-delay:-.3s}
.ksp-line{display:block;height:34px;background:linear-gradient(135deg,transparent 47%,var(--cyan) 48% 52%,transparent 53%) 0 0/28px 100%,linear-gradient(var(--cyan-l),var(--cyan-l)) 0 100%/100% 2px no-repeat}
/* paused while off-screen */
.ksp-scene.is-offscreen *{animation-play-state:paused!important}
@keyframes ksp-bar{50%{transform:scaleY(.62)}}
@keyframes ksp-float{50%{translate:0 -9px}}
@keyframes ksp-spin{to{rotate:360deg}}
@keyframes ksp-pulse{0%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1)}100%{opacity:.25;transform:scale(.8)}}
@keyframes ksp-slide{0%{background-position:0 0}100%{background-position:0 -48px}}

/* AI */
.ksp-scene-ai .ksp-lines{position:absolute;inset:0;width:520px;height:440px;overflow:visible}
.ksp-node{left:0;top:0;padding:9px 14px;border:1px solid #C5CAEE;background:#fff;border-radius:999px;font-size:11.5px;font-weight:600;color:#14143F;box-shadow:var(--shadow-s);white-space:nowrap;animation:ksp-float 6s ease-in-out infinite}
.ksp-node::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--cyan);margin-right:7px;box-shadow:0 0 0 4px var(--cyan-l)}
.ksp-node.n1{left:90px;top:90px;transform:translate(-50%,-50%) translateZ(40px)}
.ksp-node.n2{left:430px;top:80px;transform:translate(-50%,-50%) translateZ(60px);animation-delay:-1.4s}
.ksp-node.n3{left:80px;top:340px;transform:translate(-50%,-50%) translateZ(50px);animation-delay:-2.6s}
.ksp-node.n4{left:440px;top:350px;transform:translate(-50%,-50%) translateZ(30px);animation-delay:-3.2s}
.ksp-node.n5{left:260px;top:60px;transform:translate(-50%,-50%) translateZ(70px);animation-delay:-4s}
.ksp-core{left:260px;top:220px;width:150px;height:150px;transform:translate(-50%,-50%) translateZ(90px);transform-style:preserve-3d}
.ksp-core-body{position:absolute;inset:18px;border-radius:50%;display:grid;place-items:center;text-align:center;font:700 12px/1.25 var(--font-sans,inherit);color:#fff;background:radial-gradient(circle at 30% 25%,#A9B3EE,#000080 60%,#00004A);box-shadow:0 26px 50px -16px rgba(0,0,128,.7),inset 0 -8px 18px rgba(10,10,46,.35)}
.ksp-core-ring{position:absolute;inset:0;border:2px solid rgba(57,73,214,.55);border-radius:50%;transform:rotateX(70deg);animation:ksp-spin 14s linear infinite}
.ksp-core-ring.r2{inset:-14px;border-color:rgba(0,0,128,.35);transform:rotateX(70deg) rotateY(0);animation-duration:22s;animation-direction:reverse}
.ksp-card{width:138px;padding:10px 12px;border-radius:12px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-m);animation:ksp-float 7s ease-in-out infinite}
.ksp-card-prompt{left:8px;top:196px;transform:translateZ(110px) rotateY(18deg)}
.ksp-card-response{right:8px;top:214px;transform:translateZ(120px) rotateY(-18deg);animation-delay:-3s}
.ksp-review{left:50%;top:392px;transform:translateX(-50%) translateZ(100px);display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:#ECFDF5;color:#047857;border:1px solid #A7F3D0;font-size:12px;font-weight:700;box-shadow:var(--shadow-s);white-space:nowrap}

/* Power Platform */
.ksp-iso{left:50%;top:62%;width:0;height:0;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(-34deg);position:absolute}
.ksp-plate{position:absolute;left:-150px;top:-80px;width:300px;height:160px;padding:16px 18px;border-radius:16px;background:rgba(255,255,255,.93);border:1.5px solid #C5CAEE;box-shadow:0 30px 40px -24px rgba(0,0,128,.45);display:flex;flex-direction:column;justify-content:space-between}
.ksp-plate.p-dv{transform:translateZ(0)}.ksp-plate.p-flow{transform:translateZ(84px)}.ksp-plate.p-apps{transform:translateZ(168px)}.ksp-plate.p-bi{transform:translateZ(252px);border-color:var(--cyan)}
.ksp-plate b{font-size:15px}
.ksp-spine{position:absolute;left:-2px;top:-2px;width:4px;height:252px;background:linear-gradient(180deg,var(--cyan),var(--blue),var(--cyan));background-size:100% 48px;transform-origin:0 0;transform:rotateX(-90deg) rotateZ(0) translateY(0) scaleY(-1) translateZ(0);animation:ksp-slide 1.6s linear infinite;border-radius:2px;opacity:.8}
.ksp-form{display:grid;gap:7px}.ksp-form i{height:12px;border-radius:4px;background:#E6E8FA}.ksp-form i:nth-child(2){width:70%}.ksp-form em{height:20px;width:40%;border-radius:6px;background:var(--blue)}
.ksp-flow{display:flex;align-items:center;gap:6px}.ksp-flow i{width:34px;height:26px;border-radius:7px;background:var(--cyan-l);border:1.5px solid var(--cyan)}.ksp-flow u{flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--blue) 0 6px,transparent 6px 10px);animation:ksp-dash 1s linear infinite}
@keyframes ksp-dash{to{background-position:10px 0}}
.ksp-db{display:flex;gap:8px}.ksp-db i{flex:1;height:24px;border-radius:50% / 40%;background:linear-gradient(180deg,#C7CCF3,#6A78E0);border:1.5px solid var(--blue)}
.ksp-chip{padding:10px 14px;border-radius:12px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-m);animation:ksp-float 6s ease-in-out infinite}
.ksp-chip.c-agent{left:6px;top:90px;transform:translateZ(150px)}.ksp-chip.c-m365{right:6px;top:330px;transform:translateZ(150px);animation-delay:-2.4s}

/* Data */
.ksp-scene-data .ksp-stage{top:56%;transform:translate(-50%,-50%) scale(var(--s)) rotateX(calc(14deg + var(--my,0)*-4deg)) rotateY(calc(-20deg + var(--mx,0)*6deg))}
.ksp-col,.ksp-pipe,.ksp-panel,.ksp-out{padding:12px 14px;border-radius:14px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-m)}
.ksp-col.col-src{left:10px;top:250px;width:140px;transform:translateZ(0);display:grid;gap:8px}
.ksp-cyl{display:block;height:26px;border-radius:50% / 45%;background:linear-gradient(180deg,#E6E8FA,#9AA5E8);border:1.5px solid var(--blue);position:relative}
.ksp-cyl i{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:var(--blue);animation:ksp-pulse 2.4s infinite}
.ksp-pipe{left:150px;top:170px;width:130px;transform:translateZ(40px);display:grid;gap:7px}
.ksp-pipe i{display:block;height:7px;border-radius:4px;background:repeating-linear-gradient(90deg,var(--cyan) 0 12px,#E6E8FA 12px 20px);animation:ksp-dash 1s linear infinite}
.ksp-col.col-model{left:228px;top:84px;width:150px;transform:translateZ(80px)}
.ksp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}.ksp-grid i{height:22px;border-radius:5px;background:var(--blue-surface);border:1px solid #C5CAEE}.ksp-grid i:nth-child(2),.ksp-grid i:nth-child(5){background:#C7CCF3}
.ksp-panel.pn-analysis{left:20px;top:60px;width:150px;transform:translateZ(110px)}
.ksp-panel.pn-dash{left:352px;top:20px;width:160px;transform:translateZ(140px)}
.ksp-out{left:300px;top:332px;width:200px;transform:translateZ(170px);background:linear-gradient(135deg,#000080,#3949D6);border:0;animation:ksp-float 6s ease-in-out infinite}
.ksp-out small,.ksp-out b{color:#fff}.ksp-out b{font-size:15px;margin-top:4px}

/* Web */
.ksp-browser{left:60px;top:40px;width:340px;height:250px;border-radius:14px;background:#fff;border:1px solid var(--border);box-shadow:0 40px 60px -30px rgba(10,10,46,.4);transform:translateZ(0) rotateY(-10deg)}
.ksp-bar{display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid var(--border);background:var(--soft);border-radius:14px 14px 0 0}.ksp-bar i{width:9px;height:9px;border-radius:50%;background:#CBD5E1}.ksp-bar em{flex:1;height:14px;border-radius:7px;background:#E4E6F5;margin-left:8px}
.ksp-page{padding:14px;display:grid;gap:12px}.ksp-page .ksp-banner{display:block;height:84px;border-radius:10px;background:linear-gradient(120deg,#DDE1F7,#C7CCF3)}.ksp-page .ksp-rows{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.ksp-page .ksp-rows i{height:70px;border-radius:8px;background:var(--blue-surface);border:1px solid #D2D6F2}
.ksp-phone{left:372px;top:96px;width:110px;height:210px;border-radius:20px;background:#fff;border:3px solid #14143F;padding:22px 10px 10px;display:grid;gap:8px;align-content:start;box-shadow:var(--shadow-m);transform:translateZ(70px) rotateY(-14deg);animation:ksp-float 7s ease-in-out infinite}
.ksp-phone .ksp-notch{position:absolute;left:50%;top:6px;width:34px;height:6px;margin-left:-17px;border-radius:4px;background:#14143F}.ksp-phone i{display:block;height:54px;border-radius:8px;background:var(--cyan-l)}.ksp-phone em{display:block;height:22px;border-radius:7px;background:var(--blue)}
.ksp-product{width:146px;padding:10px;border-radius:12px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-m);animation:ksp-float 6.5s ease-in-out infinite}
.ksp-product .ksp-img{display:block;height:50px;border-radius:8px;background:linear-gradient(135deg,#C7CCF3,#9AA5E8);margin-bottom:8px}.ksp-product svg{position:absolute;right:10px;top:10px;color:var(--blue-d)}
.ksp-product.pr-1{left:8px;top:230px;transform:translateZ(60px) rotateY(12deg)}.ksp-product.pr-2{left:170px;top:300px;transform:translateZ(90px);animation-delay:-2s}
.ksp-pay,.ksp-order,.ksp-stats{padding:10px 14px;border-radius:12px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-m);animation:ksp-float 6s ease-in-out infinite}
.ksp-pay{left:340px;top:330px;transform:translateZ(120px);border-color:var(--cyan);animation-delay:-1s}.ksp-order{left:330px;top:10px;transform:translateZ(100px);animation-delay:-3s}.ksp-stats{left:6px;top:20px;width:110px;transform:translateZ(80px);animation-delay:-4s}

/* Marketing */
.ksp-funnel{left:50%;top:40px;width:300px;height:330px;margin-left:-150px;transform:translateZ(40px) rotateX(10deg);display:flex;flex-direction:column;align-items:center;gap:6px}
.ksp-funnel span{display:grid;place-items:center;height:56px;clip-path:polygon(0 0,100% 0,calc(100% - 22px) 100%,22px 100%);background:linear-gradient(90deg,#C7CCF3,#9AA5E8);box-shadow:0 14px 20px -12px rgba(0,0,128,.55)}
.ksp-funnel span b{font-size:12.5px}
.ksp-funnel .f1{width:300px}.ksp-funnel .f2{width:252px;background:linear-gradient(90deg,#9AA5E8,#6A78E0)}.ksp-funnel .f3{width:204px;background:linear-gradient(90deg,#6A78E0,#3F4FD2)}.ksp-funnel .f4{width:156px;background:linear-gradient(90deg,#3F4FD2,#000080)}.ksp-funnel .f5{width:108px;background:linear-gradient(90deg,#000080,#00005C)}
.ksp-funnel .f3 b,.ksp-funnel .f4 b,.ksp-funnel .f5 b{color:#fff}
.ksp-mcard{width:150px;padding:10px 12px;border-radius:12px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-m);animation:ksp-float 6.5s ease-in-out infinite}
.ksp-mcard.mc-1{left:4px;top:30px;transform:translateZ(110px) rotateY(14deg)}.ksp-mcard.mc-2{right:4px;top:80px;transform:translateZ(130px) rotateY(-14deg);animation-delay:-2s}.ksp-mcard.mc-3{left:10px;top:290px;transform:translateZ(100px) rotateY(12deg);animation-delay:-3s}.ksp-mcard.mc-4{right:8px;top:300px;transform:translateZ(120px) rotateY(-12deg);animation-delay:-4s}
.ksp-dots{display:flex;gap:6px;margin-top:6px}.ksp-dots i{width:14px;height:14px;border-radius:50%;background:var(--cyan);opacity:.35;animation:ksp-pulse 2.4s infinite}.ksp-dots i:nth-child(2){animation-delay:.4s}.ksp-dots i:nth-child(3){animation-delay:.8s}.ksp-dots i:nth-child(4){animation-delay:1.2s}
.ksp-steps{display:flex;align-items:center;gap:6px;margin-top:6px}.ksp-steps i{flex:1;height:8px;border-radius:4px;background:#C5CAEE}.ksp-steps i:first-child{background:var(--blue)}
.ksp-audience{width:10px;height:10px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 6px rgba(57,73,214,.18);animation:ksp-pulse 2.6s infinite}.ksp-audience.a1{left:130px;top:10px}.ksp-audience.a2{left:392px;top:36px;animation-delay:-.9s}.ksp-audience.a3{left:262px;top:400px;animation-delay:-1.6s}

/* ───── Roller ───── */
.ksp-roller{position:relative;background:#fff;border-block:1px solid var(--border);padding:22px 0;overflow:hidden}
.ksp-roller::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:linear-gradient(90deg,transparent,#C7CCF3 15%,#C7CCF3 85%,transparent)}
.ksp-roller-mask{position:relative;overflow:hidden;padding:6px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.ksp-roller-mask:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
.ksp-roller-track{display:flex;width:max-content;animation:ksp-roll var(--roll,70s) linear infinite}
.ksp-roller-group{display:flex;flex:0 0 auto;gap:18px;margin:0;padding:0 18px 0 0;list-style:none;min-width:100vw;justify-content:space-around}
@keyframes ksp-roll{to{transform:translateX(-50%)}}
.ksp-roller:hover .ksp-roller-track,.ksp-roller:focus-within .ksp-roller-track,.ksp-roller.is-paused .ksp-roller-track,.ksp-roller.is-offscreen .ksp-roller-track{animation-play-state:paused}
.ksp-roller-item{position:relative;display:flex;align-items:center;gap:10px;flex:0 0 auto;padding:12px 18px;border:1px solid var(--border);border-radius:12px;background:#fff;box-shadow:var(--shadow-s);white-space:nowrap;margin:0}
.ksp-roller-logo{width:28px;height:28px;object-fit:contain;display:block}
.ksp-roller-badge{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--cyan-l);color:var(--blue-d);font:700 11px/1 var(--font-mono,monospace)}
.ksp-roller-name{font-size:.92rem;font-weight:600;color:var(--text)}
.ksp-roller-art{position:absolute;pointer-events:none}.ksp-roller-art i{position:absolute;display:block}
.ksp-roller-control{position:absolute;right:max(12px,env(safe-area-inset-right));bottom:6px;z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid #C5CAEE;background:#fff;color:var(--blue-d);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-s);padding:0}
.ksp-roller-control:hover{background:var(--blue-surface)}
.ksp-ico-pause{width:12px;height:14px;background:linear-gradient(90deg,currentColor 0 4px,transparent 4px 8px,currentColor 8px 12px)}
.ksp-roller-control[aria-pressed="true"] .ksp-ico-pause{width:0;height:0;background:none;border-left:12px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
html:not(.kn-js) .ksp-roller-control{display:none}
/* AI: connected nodes with signal dots */
.ksp-roller-ai .ksp-roller-item{border-radius:999px}
.ksp-roller-ai .ksp-roller-art{right:-18px;top:50%;width:18px;height:2px;background:#A9B3EE}
.ksp-roller-ai .ksp-roller-art i:first-child{right:0;top:-2px;width:6px;height:6px;border-radius:50%;background:var(--blue);animation:ksp-signal 2.2s linear infinite}
@keyframes ksp-signal{from{transform:translateX(-18px);opacity:0}20%,80%{opacity:1}to{transform:translateX(0);opacity:0}}
/* Power Platform: connected tiles passing a signal */
.ksp-roller-power .ksp-roller-item{border-radius:10px;border-left:4px solid var(--blue)}
.ksp-roller-power .ksp-roller-item:nth-child(even){border-left-color:var(--cyan)}
.ksp-roller-power .ksp-roller-art{right:-18px;top:50%;width:18px;height:2px;background:repeating-linear-gradient(90deg,#6A78E0 0 4px,transparent 4px 7px)}
.ksp-roller-power .ksp-roller-art i:first-child{left:0;top:-3px;width:8px;height:8px;background:var(--cyan);border-radius:2px;animation:ksp-signal 1.8s linear infinite}
/* Data: chart bars */
.ksp-roller-data .ksp-roller-item{padding-right:46px;border-radius:10px}
.ksp-roller-data .ksp-roller-art{right:12px;bottom:12px;width:24px;height:22px;display:flex;align-items:flex-end;gap:3px}
.ksp-roller-data .ksp-roller-art i{position:static;flex:1;border-radius:2px 2px 0 0;background:linear-gradient(180deg,var(--cyan),var(--blue));transform-origin:bottom;animation:ksp-bar 2.6s ease-in-out infinite}
.ksp-roller-data .ksp-roller-art i:nth-child(1){height:50%}.ksp-roller-data .ksp-roller-art i:nth-child(2){height:100%;animation-delay:-.8s}.ksp-roller-data .ksp-roller-art i:nth-child(3){height:70%;animation-delay:-1.6s}
.ksp-roller-data .ksp-roller-group{background:linear-gradient(90deg,transparent,transparent)}
/* Web: browser cards with checkout steps */
.ksp-roller-web .ksp-roller-item{padding-top:24px;border-radius:12px}
.ksp-roller-web .ksp-roller-art{left:12px;top:8px;width:30px;height:6px;display:flex;gap:4px}
.ksp-roller-web .ksp-roller-art i{position:static;width:6px;height:6px;border-radius:50%;background:#CBD5E1}.ksp-roller-web .ksp-roller-art i:first-child{background:var(--cyan)}
.ksp-roller-web .ksp-roller-item::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:linear-gradient(90deg,var(--blue),var(--cyan) var(--p,40%),transparent var(--p,40%));border-radius:0 0 12px 12px}
.ksp-roller-web .ksp-roller-item:nth-child(3n){--p:75%}.ksp-roller-web .ksp-roller-item:nth-child(3n+1){--p:30%}
/* Marketing: campaign cards with audience signals */
.ksp-roller-marketing .ksp-roller-item{border-top:3px solid var(--cyan);border-radius:12px}
.ksp-roller-marketing .ksp-roller-item:nth-child(even){border-top-color:var(--blue)}
.ksp-roller-marketing .ksp-roller-art{left:12px;right:12px;bottom:-9px;height:6px}
.ksp-roller-marketing .ksp-roller-art i{bottom:0;width:6px;height:6px;border-radius:50%;background:var(--cyan);animation:ksp-slide-x 3s linear infinite}
.ksp-roller-marketing .ksp-roller-art i:nth-child(2){animation-delay:-1s}.ksp-roller-marketing .ksp-roller-art i:nth-child(3){animation-delay:-2s;background:var(--blue)}
@keyframes ksp-slide-x{from{left:0;opacity:0}20%,80%{opacity:1}to{left:calc(100% - 6px);opacity:0}}

/* ───── Sections ───── */
.ksp-section{padding:88px 0;position:relative}
.ksp-alt{background:var(--soft);border-block:1px solid #E4E6F5}
.ksp-heading{max-width:760px;margin:0 0 44px}
.ksp-heading h2{font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.12;letter-spacing:-.03em;margin:14px 0 12px}
.ksp-heading p{font-size:1.05rem;line-height:1.65;margin:0}
.ksp-overview{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start}
.ksp-overview .ksp-heading{margin:0}
.ksp-prose p{font-size:1.08rem;line-height:1.75;margin:0 0 18px}
.ksp-prose :where(ul,ol){color:var(--text-2);line-height:1.7}
.ksp-card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;perspective:1200px}
.ksp-card-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ksp-tile{position:relative;padding:26px 24px 26px;border-radius:16px;background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow-s);transition:transform .25s ease,box-shadow .25s ease,border-color .25s;transform-style:preserve-3d}
.ksp-tile:hover{transform:translateY(-6px) rotateX(3deg);box-shadow:var(--shadow-m);border-color:#9AA3E3}
.ksp-tile::after{content:"";position:absolute;left:24px;right:24px;top:0;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,var(--blue),var(--cyan));opacity:.0;transition:opacity .25s}
.ksp-tile:hover::after{opacity:1}
.ksp-tile-n{display:inline-block;font:600 .75rem var(--font-mono,monospace);color:var(--blue-d);background:var(--cyan-l);padding:4px 9px;border-radius:6px;margin-bottom:16px}
.ksp-tile h3{font-size:1.12rem;line-height:1.3;margin:0 0 10px;letter-spacing:-.015em}
.ksp-tile p{margin:0;font-size:.95rem;line-height:1.6}
.ksp-modules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ksp-module{scroll-margin-top:120px;padding:26px;border-radius:16px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-s);border-left:4px solid var(--cyan);display:flex;flex-direction:column;gap:10px;transition:transform .25s,box-shadow .25s}
.ksp-module:hover{transform:translateY(-4px);box-shadow:var(--shadow-m)}
.ksp-module:target{outline:3px solid var(--blue);outline-offset:3px;background:var(--blue-surface)}
.ksp-module h3{font-size:1.1rem;line-height:1.3;margin:0;letter-spacing:-.01em}
.ksp-module p{margin:0;font-size:.95rem;line-height:1.6;flex:1}
.ksp-link{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.92rem;color:var(--blue-d);text-decoration:none;min-height:44px}
.ksp-link:hover{text-decoration:underline}.ksp-link svg{width:16px;height:16px}
.ksp-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.ksp-chips li{padding:9px 16px;border-radius:999px;background:#fff;border:1px solid #C5CAEE;color:#14143F;font-size:.92rem;font-weight:500;box-shadow:var(--shadow-s)}
.ksp-areas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.ksp-area{padding:30px;border-radius:20px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-s);border-top:4px solid var(--blue)}
.ksp-area-shop{border-top-color:var(--cyan)}
.ksp-area h3{font-size:1.45rem;margin:0 0 8px;letter-spacing:-.02em}.ksp-area>p{margin:0 0 20px}
.ksp-area .ksp-chips li{padding:7px 13px;font-size:.86rem;box-shadow:none;background:var(--soft)}
.ksp-platforms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.ksp-platform{padding:26px;border-radius:16px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-s);border-bottom:4px solid var(--blue)}
.ksp-platform:nth-child(even){border-bottom-color:var(--cyan)}
.ksp-platform h3{margin:0 0 10px;font-size:1.15rem}.ksp-platform p{margin:0;font-size:.95rem;line-height:1.6}
.ksp-campaigns{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:40px}
.ksp-campaign{padding:20px;border-radius:14px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-s)}
.ksp-campaign h3{font-size:1rem;margin:14px 0 6px}.ksp-campaign p{margin:0;font-size:.88rem;line-height:1.5}
.ksp-campaign-art{display:flex;align-items:flex-end;gap:4px;height:34px}.ksp-campaign-art i{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--cyan),var(--blue));transform-origin:bottom;animation:ksp-bar 3s ease-in-out infinite}
.ksp-campaign-art i:nth-child(1){height:40%}.ksp-campaign-art i:nth-child(2){height:80%;animation-delay:-.7s}.ksp-campaign-art i:nth-child(3){height:55%;animation-delay:-1.4s}.ksp-campaign-art i:nth-child(4){height:100%;animation-delay:-2.1s}

/* Flow steps */
.ksp-flow-steps{list-style:none;margin:0;padding:0;display:grid;gap:16px;counter-reset:none}
.ksp-flow-steps li{position:relative;display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:14px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-s)}
.ksp-step-n{flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;font:700 .78rem var(--font-mono,monospace)}
.ksp-step-t{display:flex;flex-direction:column;gap:3px;font-weight:600;color:var(--text);line-height:1.3}
.ksp-step-t strong{font-size:1.02rem}.ksp-step-t em{font-style:normal;font-weight:400;font-size:.9rem;color:var(--text-2);line-height:1.5}
.ksp-flow-long{grid-template-columns:repeat(6,minmax(0,1fr))}
.ksp-flow-long li{flex-direction:column;text-align:center;justify-content:center;min-height:120px}
.ksp-flow-long li:not(:last-child)::after{content:"";position:absolute;right:-17px;top:50%;width:18px;height:2px;background:repeating-linear-gradient(90deg,var(--blue) 0 4px,transparent 4px 7px);animation:ksp-dash 1s linear infinite}
.ksp-flow-process{grid-template-columns:repeat(3,minmax(0,1fr))}
.ksp-flow-vertical{max-width:560px;margin:0 auto;gap:0}
.ksp-flow-vertical li{border-radius:14px;margin-bottom:26px}
.ksp-flow-vertical li:not(:last-child)::after{content:"";position:absolute;left:36px;top:100%;height:26px;width:2px;background:repeating-linear-gradient(180deg,var(--blue) 0 4px,transparent 4px 7px);animation:ksp-dash-v 1s linear infinite}
@keyframes ksp-dash-v{to{background-position:0 7px}}
.ksp-flow-steps li{opacity:1}

/* FAQ */
.ksp-faq{display:grid;gap:12px}
.ksp-faq details{border:1px solid var(--border);border-radius:14px;background:#fff;box-shadow:var(--shadow-s)}
.ksp-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:18px 20px;font-weight:600;color:var(--text);min-height:56px}
.ksp-faq summary::-webkit-details-marker{display:none}
.ksp-faq-n{font:600 .78rem var(--font-mono,monospace);color:var(--blue-d)}
.ksp-faq-plus{margin-left:auto;font-size:1.4rem;color:var(--blue-d);transition:transform .2s}
.ksp-faq details[open] .ksp-faq-plus{transform:rotate(45deg)}
.ksp-faq details[open]{border-color:#9AA3E3}
.ksp-faq-a{padding:0 20px 20px 52px}.ksp-faq-a p{margin:0;line-height:1.7}

/* Related + CTA */
.ksp-related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ksp-related-card{display:flex;flex-direction:column;gap:8px;padding:26px;border-radius:16px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-s);text-decoration:none;transition:transform .25s,box-shadow .25s}
.ksp-related-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-m)}
.ksp-related-card h3{margin:6px 0 0;font-size:1.15rem}.ksp-related-card p{margin:0;font-size:.93rem;line-height:1.55;flex:1}
.ksp-related-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--cyan-l);color:var(--blue-d)}
.ksp-related-icon svg{width:24px;height:24px}
.ksp-cta{padding:84px 0;text-align:center;background:radial-gradient(700px 300px at 50% 0,rgba(57,73,214,.18),transparent 70%),linear-gradient(180deg,#EEF0FB,#E6E8FA);border-top:1px solid var(--border)}
.ksp-cta h2{font-size:clamp(1.8rem,3.4vw,2.7rem);letter-spacing:-.03em;margin:14px auto 12px;max-width:20ch;line-height:1.12}
.ksp-cta p{max-width:52ch;margin:0 auto 28px;font-size:1.05rem}

/* Scroll entrance (JS only; content visible without it) */
.kn-js .ksp .reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.kn-js .ksp .reveal.is-in{opacity:1;transform:none}
.kn-js .ksp .reveal.is-in:hover{transform:translateY(-5px)}

/* ───── Responsive ───── */
@media(max-width:1180px){
  .ksp-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ksp-modules{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ksp-platforms{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ksp-campaigns{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ksp-flow-long{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ksp-flow-long li:nth-child(3n)::after{display:none}
  .ksp-scene{--s:.9}
}
@media(max-width:960px){
  .ksp-hero-grid{grid-template-columns:1fr;gap:12px}
  .ksp-scene{--s:1;max-width:560px;width:100%;margin:0 auto}
  .ksp-overview{grid-template-columns:1fr;gap:20px}
  .ksp-card-grid,.ksp-card-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ksp-areas{grid-template-columns:1fr}
  .ksp-related{grid-template-columns:1fr 1fr}
  .ksp-flow-process{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ksp-section{padding:68px 0}
}
@media(max-width:640px){
  .ksp-wrap{padding:0 16px}
  .ksp-hero{padding-top:20px}
  .ksp-scene{--s:.7}.ksp-scene{margin-inline:auto}
  .ksp-card-grid,.ksp-card-grid-3,.ksp-modules,.ksp-platforms,.ksp-related,.ksp-flow-process{grid-template-columns:1fr}
  .ksp-campaigns{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ksp-flow-long{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ksp-flow-long li:nth-child(3n)::after{display:block}.ksp-flow-long li:nth-child(2n)::after{display:none}
  .ksp-actions .button{width:100%;justify-content:center}
  .ksp-faq-a{padding-left:20px}
  .ksp-section{padding:56px 0}
  .ksp-roller-control{width:44px;height:44px}
}
@media(max-width:420px){.ksp-scene{--s:.6}}
@media(max-width:350px){.ksp-scene{--s:.5}.ksp-campaigns,.ksp-flow-long{grid-template-columns:1fr}.ksp-flow-long li::after{display:none!important}}

/* Touch devices: no pointer parallax, steady stage */
@media(hover:none),(pointer:coarse){.ksp-stage{transform:translate(-50%,-50%) scale(var(--s))!important}}

/* Reduced motion: static scenes, manual roller scroll */
@media(prefers-reduced-motion:reduce){
  .ksp *,.ksp *::before,.ksp *::after{animation:none!important;transition:none!important}
  .ksp-stage{transform:translate(-50%,-50%) scale(var(--s))!important}
  .ksp-roller-track{width:auto}
  .ksp-roller-mask{overflow-x:auto}
  .ksp-roller-group[aria-hidden="true"]{display:none}
  .ksp-roller-group{min-width:0;justify-content:flex-start;flex-wrap:nowrap}
  .ksp-roller-control{display:none}
  .kn-js .ksp .reveal{opacity:1;transform:none}
}

/* ───── Additions for the full site ───── */
.ksp-hero-single{grid-template-columns:1fr}
.ksp-hero-single .ksp-hero-copy{max-width:820px}
.ksp-hero-single .ksp-breadcrumbs{margin-bottom:24px}
.ksp-hero-home .ksp-hero-copy{padding-top:36px}
.ksp-scene-home .ksp-node{font-size:12px}
.ksp-stackcard{width:170px;padding:12px 14px;border-radius:14px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-m);animation:ksp-float 7s ease-in-out infinite}
.ksp-stackcard .ksp-bars{margin-top:10px;height:22px}
.ksp-stackcard.sc-1{left:20px;top:70px;transform:translateZ(80px) rotateY(14deg)}
.ksp-stackcard.sc-2{right:14px;top:130px;transform:translateZ(110px) rotateY(-14deg);animation-delay:-2s}
.ksp-stackcard.sc-3{left:120px;top:300px;transform:translateZ(130px);animation-delay:-4s}
.ksp-core-sm{width:110px;height:110px;left:420px;top:340px;transform:translate(-50%,-50%) translateZ(60px)}
.ksp-core-sm .ksp-core-body{inset:10px;font-size:1.3rem}
.ksp-scene-stack .ksp-lines{position:absolute;inset:0;width:520px;height:440px}
.ksp-flow-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.ksp-flow-5 li{flex-direction:column;align-items:flex-start;min-height:150px}
.ksp-heading{max-width:760px}
.ksp .kn-service-card .ksp-tile-n{align-self:flex-start;margin:0}
.ksp .kn-card-body .ksp-eyebrow::before{display:none}
@media(max-width:1180px){.ksp-flow-5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.ksp-flow-5{grid-template-columns:1fr}}
@media(max-width:960px){.ksp-hero-home .ksp-hero-copy{padding-top:0}}